/* 4. pastel · 파스텔 친근 — 크림 바탕에 옅은 점무늬와 동그란 색면, 둥근 흰 카드, 형광펜 밑줄 제목.
   학부모·지역 주민 안내처럼 말 걸듯 편한 인상. 연한 색은 모두 --accent에서 섞어 만든다. */
.cdk.tpl-pastel {
  --accent: #FF7A59;
  --ink: #2E2A33; --ink2: #5B5560; --cream: #FFF6EA;
  --tint: color-mix(in srgb, var(--accent) 22%, #fff);
  --tint2: color-mix(in srgb, var(--accent) 40%, #fff);
  --mint: #CDEFE2; --butter: #FFE9A8;
  --fit-cv-t: 200; --fit-cv-tmin: 90; --fit-t: 96; --fit-tmin: 58; --fit-sub: 54; --fit-box: 42; --fit-box-ph: 36; --fit-bar-cv: 70; --fit-bar-cl: 56;
  background: var(--cream); color: var(--ink);
}
/* .lanes = 점무늬, .glow = 큰 동그란 색면 */
.tpl-pastel .lanes { inset: 0; background-image: radial-gradient(circle, rgba(46,42,51,.07) 2.6px, transparent 3.2px); background-size: 38px 38px; }
.tpl-pastel .glow { width: 760px; height: 760px; border-radius: 50%; background: var(--tint); }
.tpl-pastel.cv .glow { right: -260px; top: -240px; }
.tpl-pastel.pg .glow { left: -380px; bottom: -380px; background: var(--mint); }
.tpl-pastel.pg.alt .glow { left: auto; right: -380px; bottom: auto; top: -380px; background: var(--butter); }
.tpl-pastel.cl .glow { right: -300px; bottom: -200px; background: var(--butter); }

.tpl-pastel .hd .org { font-size: 26px; font-weight: 700; color: var(--ink); background: #fff; padding: 12px 24px; border-radius: 99px; box-shadow: 0 6px 18px rgba(80,50,30,.08); }
.tpl-pastel .hd .logo { padding: 8px 20px; border-radius: 99px; background: #fff; box-shadow: 0 6px 18px rgba(80,50,30,.08); }
.tpl-pastel .hd .n { font-size: 24px; font-weight: 800; color: #fff; background: var(--accent); padding: 10px 20px; border-radius: 99px; }

.tpl-pastel .t { font-weight: 800; line-height: 1.16; letter-spacing: -0.045em; color: var(--ink); padding-left: 4px; }
.tpl-pastel .t span { background: linear-gradient(transparent 56%, var(--tint2) 56%, var(--tint2) 92%, transparent 92%); padding: 0 6px; margin-left: -6px; }
.tpl-pastel .ph { border-radius: 48px; border: 12px solid #fff; background: #fff; box-shadow: 0 18px 40px rgba(80,50,30,.12); }
.tpl-pastel .ph img { border-radius: 36px; }
.tpl-pastel .speed { display: flex; gap: 18px; }
.tpl-pastel .speed span { width: 44px !important; height: 44px; border-radius: 50%; margin: 0 !important; background: var(--accent) !important; }
.tpl-pastel .speed span:nth-child(2) { background: var(--mint) !important; }
.tpl-pastel .speed span:nth-child(3) { background: var(--butter) !important; }

.tpl-pastel.cv .sub { font-size: 54px; font-weight: 700; line-height: 1.3; color: var(--ink2); padding-left: 4px; }
.tpl-pastel .bar { left: 40px; right: 40px; bottom: 40px; border-radius: 48px; background: #fff; color: var(--ink); box-shadow: 0 18px 40px rgba(80,50,30,.10); }
.tpl-pastel.cv .bar { height: 230px; padding: 0 56px 46px; }
.tpl-pastel.cl .bar { height: 190px; padding: 0 56px 40px; }
.tpl-pastel .bar::before { content: ""; position: absolute; right: 56px; top: 50%; width: 76px; height: 76px; margin-top: -38px; border-radius: 50%; border: 16px solid var(--accent); box-sizing: border-box; }
.tpl-pastel .bar .s { font-size: 30px; font-weight: 700; color: var(--accent); }
.tpl-pastel .bar .l { font-size: 70px; font-weight: 800; line-height: 1.14; letter-spacing: -0.045em; padding-right: 110px; }
.tpl-pastel.cl .bar .l { font-size: 56px; }

.tpl-pastel.cl .main { bottom: 260px; }
.tpl-pastel .box { background: #fff; border-radius: 44px; padding: 56px 52px 44px; box-shadow: 0 18px 40px rgba(80,50,30,.08); margin-top: 18px; }
.tpl-pastel .box p { font-size: 40px; line-height: 1.55; font-weight: 500; color: var(--ink2); }
.tpl-pastel .box p + p { margin-top: 10px; }
.tpl-pastel .box p:first-child { font-weight: 700; color: var(--ink); }
.tpl-pastel .box::before { content: "안내"; position: absolute; left: 44px; top: -24px; font-size: 26px; font-weight: 800; color: #fff; background: var(--accent); padding: 8px 22px; border-radius: 99px; letter-spacing: 0; }