/* ==========================================================================
 RP 가이드 섹션 — 5개 가이드 문서가 공유하는 스타일
 --------------------------------------------------------------------------
 이 CSS 는 가이드 5페이지에 17KB 씩 한 벌 <style> 로 박혀 있었다. 그런데
 브라우저에서 5페이지 전부를 재어 보니 180개 규칙 중 66개만 살아 있었다 —
 나머지는 페이스 계산기 CSS(.console · .hero-card · .trust …)를 통째로
 붙여넣은 잔재다. 86KB 가 6KB 가 된다.

 사본 5벌은 서로 거의 같았지만 완전히 같지는 않았다. 붙여넣고 각자 손보다
 생긴 표류다. 실제 차이는 stations 의 여백 세 곳(h2 · p · li)과 .st 블록뿐이고,
 나머지(`ul,ol` 대 `ul`)는 두 페이지 모두 <ol> 이 없어 실체가 없었다.
 남은 차이는 아래에서 [data-page] 로 좁혀 그대로 보존한다.

 로드 위치가 중요하다 — 이 파일은 rp.css 보다 **먼저** 실려야 한다.
 원래 인라인 <style> 이 rp.css 앞에 있었으므로, body·h1·p 처럼 특이도가 같은
 선언은 rp.css 가 이기고 있었다. 뒤로 옮기면 그 승패가 조용히 뒤집힌다.
 tools/inject_head.py 가 이 파일을 블록 맨 앞에 넣는 이유다.
 ========================================================================== */

*{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%}
  body{background:var(--bg);color:var(--text);font-family:var(--font-kr);-webkit-font-smoothing:antialiased;line-height:1.7}
  a{color:var(--fuel)}
  .shell{max-width:1180px;margin:0 auto;padding:16px 18px calc(48px + env(safe-area-inset-bottom))}
  
  
  
  
  
  
  
  .ad{border:1px dashed var(--line);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;color:var(--text-3);font-size:11px;background:var(--surface-2);text-align:center}
  .ad-leader{height:90px}.ad-sky{height:600px}.ad-rect{height:250px}
  .ad-inline{height:100px;margin:18px 0;display:none}@media(max-width:800px){.ad-inline{display:flex}}
  .leader{margin:0 auto 18px;max-width:970px}
  .layout{display:grid;gap:22px;grid-template-columns:160px minmax(0,1fr) 300px;align-items:start}
  .rail{position:sticky;top:16px;display:flex;flex-direction:column;gap:16px}
  @media(max-width:1080px){.layout{grid-template-columns:minmax(0,1fr) 300px}.rail-left{display:none}}
  @media(max-width:800px){.layout{grid-template-columns:1fr}.rail-right{display:none}}
  article{min-width:0}
  .crumb{font-size:12px;color:var(--text-3);margin-bottom:10px}.crumb a{color:var(--text-3)}
  h1{font-size:27px;line-height:1.3;letter-spacing:-.6px;margin:4px 0 10px}
  .meta{font-size:12.5px;color:var(--text-3);margin-bottom:18px}
  h2{font-size:20px;margin:30px 0 10px;letter-spacing:-.4px;border-left:3px solid var(--acc-line);padding-left:11px}
  p{font-size:15px;color:var(--text-2);margin:10px 0}ul,ol{margin:10px 0;padding-left:20px}li{font-size:15px;color:var(--text-2);margin:6px 0}
  b,strong{color:var(--text)}.lead{font-size:16px;color:var(--text-3);line-height:1.7}
  table{width:100%;border-collapse:collapse;margin:14px 0;font-variant-numeric:tabular-nums}
  th,td{text-align:left;padding:11px 8px;border-bottom:1px solid var(--line);font-size:14px}
  th{font-size:11.5px;color:var(--text-3);text-transform:uppercase;letter-spacing:.3px}td b{color:var(--acc-line)}
  .callout{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin:18px 0}
  .callout.tip{border-color:var(--acc-soft);background:var(--surface-3)}
  .cta-box{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin:24px 0;text-align:center}
  .cta-box h3{color:var(--text);margin:0 0 6px;font-size:18px}.cta-box p{color:var(--text-3);font-size:14px;margin:0 0 14px}
  .btn{display:inline-block;background:var(--acc-fill);color:var(--acc-on);font-weight:800;text-decoration:none;padding:14px 22px;border-radius:var(--radius);font-size:15px}.btn.alt{background:var(--fuel);color:var(--acc-on)}
  .faq dt{font-weight:750;margin-top:14px;font-size:15px}.faq dd{margin:5px 0 0;font-size:14.5px;color:var(--text-2)}
  .relhead{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-3);margin:20px 0 8px}
  footer{margin-top:30px;padding-top:16px;border-top:1px solid var(--line);font-size:12px;color:var(--text-3);line-height:1.7}footer a{color:var(--fuel);text-decoration:none}
  .src{font-size:11px;color:var(--text-3);margin-top:8px}
  .related{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
  .related a{font-size:13px;background:var(--surface-3);border:1px solid var(--line);padding:8px 12px;border-radius:var(--radius);text-decoration:none;color:var(--text)}
  [data-lng]{display:none}
  @media(max-width:380px){h1{font-size:23px}}

/* ===== RP CANON design system (unified) ===== */

  
  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
  body{
    background:var(--bg);color:var(--text);
    font-family:var(--font-kr);
    -webkit-font-smoothing:antialiased;line-height:1.55;min-height:100vh;
  }
  a{color:inherit;text-decoration:none}
  

  /* header */
  
  
  
  
  
  
  
  
  
  
  
  
  

  /* hero */
  .hero-top{padding:30px 0 10px;text-align:center}
  .eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;letter-spacing:.6px;
    text-transform:uppercase;color:var(--acc-line);background:var(--acc-soft);
    border:1px solid var(--acc-soft);padding:6px 13px;border-radius:var(--radius-pill);margin-bottom:18px}
  .eyebrow .pulse{width:7px;height:7px;border-radius:50%;background:var(--acc-fill);}
  
  h1{font-size:38px;line-height:1.12;letter-spacing:-1.2px;font-weight:800;margin:0 auto 14px;max-width:18ch}
  
  .lead{color:var(--text-3);font-size:16px;line-height:1.65;margin:0 auto;max-width:54ch}
  
  
  
  @media(max-width:560px){h1{font-size:30px}.lead{font-size:15px}}

  /* card base */
  
  
  

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  /* result */
  
  .result.show{display:block;animation:rise .45s cubic-bezier(.2,.7,.2,1)}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  

  
  
  
  
  
  
  
  
  
  
  

  
  
  
  

  
  
  table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
  th,td{text-align:left;padding:12px 4px;border-bottom:1px solid var(--line);font-size:14.5px}
  tr:last-child td{border-bottom:none}
  th{font-size:10.5px;color:var(--text-3);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
  
  
  
  
  
  
  
  

  
  
  
  
  

  /* explainer */
  
  
  
  
  
  
  
  
  
  

  footer{margin-top:38px;padding-top:20px;border-top:1px solid var(--line);font-size:12.5px;color:var(--text-3);line-height:1.8}
  footer a{color:var(--acc-line)}
  

/* === bridges: subpage wrappers + nav UX === */

.shell{max-width:860px;margin:0 auto;padding:0 20px calc(56px + env(safe-area-inset-bottom))}
.layout{display:block!important}
.ad,.leader,.rail{display:none!important}

  
  
  
  
  

/* --- stations 전용 ------------------------------------------------------
   급수대 가이드는 항목이 많아 본문 여백을 1~2px 씩 좁혀 두었다. 통합하면서
   임의로 맞추지 않고 원래 값을 그대로 둔다.

   순서가 중요하다 — [data-page] 블록이 .st 블록보다 **먼저** 와야 한다.
   `[data-page="guide-stations"] p` 와 `.st p` 는 특이도가 (0,1,1) 로 같아서
   뒤에 오는 쪽이 이긴다. 스코프 규칙을 뒤에 두면 .st p 의 글자 크기와 여백이
   죽어 페이지가 86px 길어진다(실측). 원래는 .st p 가 생 p 를 이기는 구조였다. */

/* :where() 로 감싸는 것이 핵심이다. 특이도가 0 이라 `p` 를 그대로 흉내내면서
   뒤에 있으니 기본값만 이긴다. [data-page] 를 맨선으로 쓰면 특이도가 (0,1,1)
   이 되어 .lead 의 margin:0 auto 와 .st p 를 눌러 버린다 — 실제로 그렇게
   만들었다가 .lead 가 가운데 정렬을 잃는 것을 확인했다. */
:where([data-page="guide-stations"]) h2 { font-size: 19px; margin: 28px 0 8px; }
:where([data-page="guide-stations"]) p  { margin: 9px 0; }
:where([data-page="guide-stations"]) li { margin: 5px 0; }
:where([data-page="guide-stations"]) ul { margin: 9px 0; }

.st{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px;margin:12px 0}
.st h3{font-size:16px;margin:0 0 3px}
.st .sub{font-size:12px;color:var(--text-3);margin-bottom:7px}
.st p{margin:6px 0 0;font-size:14px}