/* 설계사의 비서 — 공통 디자인 (손해사정 백호 사이트 방식: 먹색 + 주황 포인트, 큰 굵은 제목, 둥근 카드, 알약 버튼) */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
:root{
  --ink:#16181d; --ink2:#2b2f38; --mute:#5b6675; --line:#e3e6ea; --soft:#f6f7f9;
  --accent:#e8590c; --accent-deep:#c2410c; --accent-soft:#fff3ec; --kakao:#fee500;
  --r:18px; --maxw:1200px;
  --font:"Pretendard Variable",Pretendard,"Malgun Gothic","Apple SD Gothic Neo",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font)!important;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;letter-spacing:-.01em;line-height:1.55}
a{color:inherit}
svg{stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 머리글 ---------- */
.sh{display:flex;align-items:center;gap:12px;max-width:var(--maxw);margin:0 auto;padding:14px 24px;background:#fff}
.sh .brand{display:block;line-height:0}
.sh .brand img{height:84px;width:auto;display:block;image-rendering:-webkit-optimize-contrast}
.sh .sp{flex:1}
.pill{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;font-weight:700;font-size:16px;text-decoration:none;border:1.5px solid transparent;white-space:nowrap;cursor:pointer;font-family:inherit;transition:.15s}
.pill svg{width:18px;height:18px}
.pill.kakao{background:var(--kakao);color:#191919}
.pill.line{border-color:var(--ink);background:#fff;color:var(--ink)}
.pill.ink{background:var(--ink);color:#fff}
.pill.accent{background:var(--accent);color:#fff}
.pill.accent:hover{background:var(--accent-deep)}
.pill.ink:hover{background:#000}
.pill.line:hover{background:var(--soft)}
.pill.lg{padding:16px 28px;font-size:18px}
.bar{background:var(--ink);color:#fff;font-size:15px;display:flex;align-items:center;gap:8px;padding:0 12px 0 0}
.bar em{font-style:normal;color:#ff9a57;font-weight:700}
.bar b{color:#fff;font-weight:800}
.bar .mq{flex:1;overflow:hidden;padding:9px 0}
.bar .mq-track{display:flex;width:max-content;animation:mq 60s linear infinite;will-change:transform}
.bar .mq-track.paused,.bar:hover .mq-track{animation-play-state:paused}
.bar .mq-item{flex:none;white-space:nowrap;padding-right:72px}
.bar .mq-item i{font-style:normal;color:#8b93a1;margin:0 18px}
.bar .mq-btn{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid #4a505c;background:transparent;color:#fff;font-size:11px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit}
.bar .mq-btn:hover{background:#2b2f38}
@keyframes mq{to{transform:translateX(calc(var(--mw,50%) * -1))}}
.tn{background:#fff;border-bottom:1px solid var(--line)}
.tn .in{max-width:var(--maxw);margin:0 auto;padding:10px 24px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.tn .in::-webkit-scrollbar{display:none}
.tn a{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:12px;font-weight:700;font-size:15px;color:var(--ink);text-decoration:none;white-space:nowrap}
.tn a:hover{background:var(--soft)}
.tn a svg{width:20px;height:20px;color:var(--mute)}
.tn a.on{background:var(--ink);color:#fff}
.tn a.on svg{color:var(--accent)}
.tn a .tx{display:flex;flex-direction:column;line-height:1.15;align-items:center;text-align:center}
.tn a .tx small{font-size:11px;font-weight:600;opacity:.75;margin-top:2px}
.compact .sh{padding:6px 24px}.compact .sh .brand img{height:62px}
.compact .pill{padding:9px 16px;font-size:14px}
.compact .tn .in{padding:6px 24px}
.compact .tn a{padding:8px 14px;font-size:14px}

/* ---------- 쪽 머리 ---------- */
.pghead{max-width:var(--maxw);margin:0 auto;padding:40px 24px 8px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border:1px solid var(--line);border-radius:999px;font-weight:600;font-size:14px;color:var(--ink2);background:#fff}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.pghead h1{font-size:clamp(30px,5vw,54px);font-weight:800;letter-spacing:-.045em;line-height:1.12;margin:16px 0 10px}
.pghead h1 em,.hero h1 em{font-style:normal;color:var(--accent)}
.pghead .lead{margin:0;color:var(--mute);font-size:17px;max-width:760px}

/* ---------- 공통 부품 ---------- */
.wrap-in{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.lb{color:var(--accent-deep);font-size:13px;font-weight:700}
.free{display:inline-block;background:var(--accent);color:#fff;border-radius:999px;font-size:12px;font-weight:800;padding:3px 10px;font-style:normal}
.foot{border-top:1px solid var(--line);margin-top:64px;padding:32px 0 48px;color:var(--mute);font-size:14px}
.foot b{color:var(--ink)}
.foot p{margin:4px 0}

@media(max-width:760px){
  .sh{padding:8px 16px}.sh .brand img{height:56px}
  .pill{padding:10px 16px;font-size:15px}
  .pill.line span{display:none}
  .bar{font-size:13px}
  .pghead{padding:28px 16px 4px}
  .tn .in{padding:8px 16px}
}
@media print{.sh,.bar,.tn,.pghead{display:none!important}}

/* ---------- 맨 위로 버튼 ---------- */
.totop{position:fixed;right:20px;bottom:20px;z-index:60;width:54px;height:54px;border-radius:50%;border:0;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 24px rgba(22,24,29,.28);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .2s,transform .2s,background .15s}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--accent)}
.totop svg{width:24px;height:24px;stroke-width:2.2}
@media(max-width:760px){.totop{right:14px;bottom:14px;width:48px;height:48px}}
@media print{.totop{display:none!important}}
/* ---------- 위쪽(로고 · 공지 바 · 메뉴)은 스크롤해도 고정 ---------- */
#chrome{display:contents}
.fixtop{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 2px 10px rgba(22,24,29,.08)}
.fix .fixtop{position:static;box-shadow:none}
@media(max-width:760px){.fixtop{position:static}}
@media print{.fixtop{position:static;box-shadow:none}}
/* ---------- 머리글 문구 ---------- */
.sh .slogan{flex:1;margin:0 8px;text-align:center;font-size:clamp(22px,2.4vw,34px);font-weight:800;letter-spacing:.01em;color:var(--accent);white-space:nowrap;line-height:1.2}
.sh .slogan+.sp{display:none}
.compact .sh .slogan{font-size:clamp(18px,1.8vw,24px)}
@media(max-width:1100px){.sh .slogan{font-size:20px}}
@media(max-width:900px){.sh .slogan{display:none}}
/* ---------- "설비서" 반짝반짝 ---------- */
.bar .spark{position:relative;display:inline-block;padding:0 3px;font-weight:900;
  background:linear-gradient(100deg,#ffb020 0%,#fff3b0 25%,#ffffff 40%,#ffd24d 55%,#ff9a3c 75%,#ffb020 100%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:sparkShine 1.8s linear infinite,sparkGlow 1.2s ease-in-out infinite alternate}
.bar .spark::before,.bar .spark::after{content:"✦";position:absolute;color:#fff3b0;-webkit-text-fill-color:#fff3b0;font-size:.7em;line-height:1;pointer-events:none;text-shadow:0 0 6px #ffd24d;animation:sparkStar 1.1s ease-in-out infinite}
.bar .spark::before{left:-9px;top:-5px}
.bar .spark::after{right:-9px;bottom:-4px;font-size:.55em;animation-delay:.55s}
@keyframes sparkShine{to{background-position:-250% 0}}
@keyframes sparkGlow{from{filter:drop-shadow(0 0 1px rgba(255,210,77,.4))}to{filter:drop-shadow(0 0 7px rgba(255,210,77,.95))}}
@keyframes sparkStar{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(35deg)}}
/* ---------- card-btn-soft: 전산·약관·청구서 카드 버튼과 분류 탭 — 눈이 편한 연한 파랑 ---------- */
.ic .lk a{background:#e8f0fb;border-color:#c5d7f1;color:#1f4a86}
.ic .lk a:hover{background:#d8e6f9;border-color:#9fbce6;color:#173a6b}
.ic .lk a.h{background:#fff;color:#4a5668;border-color:#dfe3e8}
.ic .lk a.h:hover{background:#f6f8fb;border-color:#b8c1ce;color:#1d2735}
.ic .lk a.tel{background:transparent;border-color:transparent}
.ic .lk a.tel:hover{background:transparent;border-color:transparent}
.tabs button{border-color:#dfe3e8;color:#4a5668}
.tabs button.on{background:#e3edfb;border-color:#9fbce6;color:#1a427a}
.tabs button:hover{border-color:#9fbce6}
/* ---------- text-sharp: 글씨를 진하고 또렷하게 ---------- */
html{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.ic h3{color:#0f1115;font-weight:800}
.ic .sub{color:#3a4454;font-size:14px;font-weight:600}
.ic .lk a{font-size:14px;font-weight:800;color:#12376b;padding:7px 14px}
.ic .lk a.h{color:#2b3442;font-weight:700}
.ic .lk a.tel{font-size:15px;font-weight:800;color:#0f1115;padding:4px 6px}
.ic .ph{font-size:13.5px;color:#1d2735;font-weight:600;line-height:1.55}
.ic .mm{font-size:13px;color:#a8350a;font-weight:700}
.ic .no{font-size:13.5px;font-weight:700;color:#a8350a}
.tabs button{font-size:15px;font-weight:800;color:#2b3442}
.tabs button.on{color:#12376b}
.dn{font-size:13px!important;color:#3a4454!important;font-weight:500}
/* lead-2lines: 쪽 머리 설명을 항상 2줄 높이로 맞춰 아래 카드 시작 위치를 모든 페이지에서 같게 */
.pghead .lead{min-height:53px}
@media(max-width:760px){.pghead .lead{min-height:0}}
/* ---------- 맨 아래 저작권 안내 ---------- */
.cpr{border-top:1px solid var(--line);margin-top:48px;padding:24px 20px 34px;text-align:center;color:var(--mute);font-size:14px;line-height:1.7;background:#fff}
.cpr p{margin:2px 0}
.cpr b{color:var(--ink);font-weight:800}
.cpr em{font-style:normal;color:var(--accent-deep);font-weight:800}
.cpr .sm{font-size:12.5px;color:#7a8494}
@media print{.cpr{display:none!important}}
/* ---- 하단 문의 안내 (모든 페이지 공통) ---- */
.ctaw{max-width:var(--maxw);margin:56px auto 0;padding:0 20px}
.ctab{display:flex;align-items:center;gap:32px;background:var(--ink);color:#fff;border-radius:28px;padding:40px 36px}
.ctab img{width:150px;height:150px;border-radius:50%;object-fit:cover;background:#fff;flex:none}
.ctab .eb{color:#ff8a4c;font-weight:800;font-size:14px}
.ctab h2{margin:6px 0 8px;font-size:clamp(28px,4vw,42px);font-weight:900;letter-spacing:-.03em;line-height:1.15;color:#fff}
.ctab p{margin:0 0 20px;color:#d5d9e0;font-size:15.5px;line-height:1.6}
.ctab .call{display:inline-block;background:var(--kakao);color:var(--ink);font-weight:800;font-size:18px;padding:16px 30px;border-radius:999px;text-decoration:none}
.ctab .call:hover{filter:brightness(.96)}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:56px}
.trio div{border-top:3px solid var(--ink);padding-top:18px}
.trio h3{margin:0 0 8px;font-size:21px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.trio p{margin:0;color:var(--mute);font-size:15px;line-height:1.7}
.cpr .co{text-align:left;max-width:var(--maxw);margin:0 auto 14px;font-size:14px;color:var(--mute)}
.cpr .co b{color:var(--ink)}
.ctaw + .cpr{margin-top:48px}
@media(max-width:760px){.ctab{flex-direction:column;text-align:center;padding:30px 22px}.ctab img{width:120px;height:120px}.trio{grid-template-columns:1fr;gap:22px}.cpr .co{text-align:center}}
@media print{.ctaw{display:none!important}}.cpr .admbtn{display:inline-block;margin-top:6px;padding:6px 16px;border:1px solid var(--line);border-radius:999px;color:var(--mute);font-size:13px;font-weight:700;text-decoration:none}
.cpr .admbtn:hover{border-color:var(--accent);color:var(--accent-deep)}