/* 5. civic · 공공 정갈 — 기관 색(--accent, 기본 남색) 머리띠와 흰 바탕, 각진 상자, 네모 글머리.
   공문·행정 안내처럼 반듯하고 믿음직한 인상. 표지만 기관 색 바탕에 옅은 모눈. */
.cdk.tpl-civic {
  --accent: #1B3A6B;
  --ink: #161B26; --ink2: #3D4554; --gray: #F2F4F8; --line: #D9DEE7;
  --pale: color-mix(in srgb, var(--accent) 22%, #fff);
  --fit-cv-t: 190; --fit-cv-tmin: 90; --fit-t: 92; --fit-tmin: 56; --fit-sub: 52; --fit-box: 40; --fit-box-ph: 36; --fit-bar-cv: 64; --fit-bar-cl: 54;
  background: #fff; color: var(--ink);
}
/* 본문·마무리: .glow = 위쪽 기관 색 머리띠 */
.tpl-civic .glow { left: 0; right: 0; top: 0; height: 132px; background: var(--accent); }
.tpl-civic .glow::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px; background: var(--pale); }
.tpl-civic .lanes { display: none; }
/* 표지: 기관 색 바탕 전체 + 옅은 모눈 */
.tpl-civic.cv { background: var(--accent); color: #fff; }
.tpl-civic.cv .glow { display: none; }
.tpl-civic.cv .lanes { display: block; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 54px 54px; }

.tpl-civic .hd .org { font-size: 26px; font-weight: 700; color: #fff; }
.tpl-civic .hd .logo { padding: 8px 18px; border-radius: 6px; background: #fff; }
.tpl-civic .hd .n { font-size: 22px; font-weight: 700; color: #fff; border: 2px solid rgba(255,255,255,.55); padding: 8px 16px; border-radius: 4px; }

.tpl-civic .t { font-weight: 800; line-height: 1.16; letter-spacing: -0.04em; color: var(--ink); border-left: 12px solid var(--accent); padding-left: 30px; }
.tpl-civic .t span { color: var(--accent); }
.tpl-civic.cv .t { color: #fff; border-left-color: #fff; line-height: 1.08; }
.tpl-civic.cv .t span { color: var(--pale); }
.tpl-civic .ph { border-radius: 6px; background: var(--gray); }
.tpl-civic .speed span { height: 10px; border-radius: 0; margin-bottom: 14px; background: #fff !important; }
.tpl-civic .speed span:nth-child(n+2) { opacity: .45; }

.tpl-civic.cv .main { top: 178px; }
.tpl-civic.cv .sub { font-size: 52px; font-weight: 600; line-height: 1.3; color: rgba(255,255,255,.88); padding-left: 42px; }
/* 아래 띠: 표지는 흰 판, 마무리는 기관 색 판 */
.tpl-civic .bar { border-top: 8px solid var(--pale); }
.tpl-civic.cv .bar { background: #fff; color: var(--ink); height: 270px; }
.tpl-civic.cl .bar { background: var(--accent); color: #fff; height: 230px; }
.tpl-civic .bar .s { font-size: 30px; font-weight: 700; color: var(--ink2); }
.tpl-civic.cl .bar .s { color: rgba(255,255,255,.75); }
.tpl-civic .bar .l { font-size: 64px; font-weight: 800; line-height: 1.15; letter-spacing: -0.04em; color: var(--accent); }
.tpl-civic.cl .bar .l { font-size: 54px; color: #fff; }

.tpl-civic.pg .main, .tpl-civic.cl .main { left: 64px; right: 64px; top: 180px; }
.tpl-civic.cl .main { bottom: 266px; }
.tpl-civic .box { background: var(--gray); border-top: 4px solid var(--accent); border-radius: 0 0 6px 6px; padding: 40px 48px; }
.tpl-civic .box p { font-size: 40px; line-height: 1.5; font-weight: 500; color: var(--ink2); position: relative; padding-left: 36px; }
.tpl-civic .box p + p { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.tpl-civic .box p::before { content: ""; position: absolute; left: 0; top: .6em; width: 14px; height: 14px; background: var(--accent); }
.tpl-civic .box p + p::before { top: calc(.6em + 14px); }
.tpl-civic .box p:first-child { font-weight: 700; color: var(--ink); }