/* ─────────────────────────────────────────────
   Pretendard Variable (자체 호스팅 · 상용 한글 전체 서브셋)
   랜딩(haedap-lp)은 «그 페이지 글자만» 남긴 60KB 서브셋을 쓴다. 홈은 그럴 수 없다 —
   블로그·유튜브 제목이 실시간으로 바뀌어 빌드 때 없던 글자가 언제든 들어오기 때문이다.
   그래서 상용 음절 전체를 넣었고(745KB), preload 하지 않고 swap 으로 나중에 갈아끼운다.
   라이선스: SIL Open Font License 1.1 → /assets/fonts/LICENSE.txt
   ───────────────────────────────────────────── */
@font-face{
  font-family:'Pretendard KO';
  src:url('/assets/fonts/pretendard-ko.woff2') format('woff2-variations');
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
}

:root{
  --blue:#0e3b7e;
  --blue-700:#14498f;
  --blue-50:#e0f2fe;
  --ink:#0f172a;
  --body:#334155;
  --muted:#64748b;
  --line:#cbd5e1;
  --line-soft:#e2e8f0;
  --bg:#f8fafc;
  --kakao:#fee500;
  --kakao-ink:#191919;
  --naver:#03cf5d;
  --tube:#ff0000;
  --r-card:14px;
  --r-btn:9px;
  --shadow:0 4px 14px rgba(15,23,42,.06);
  --shadow-lg:0 10px 30px rgba(15,23,42,.10);
  --header-h:60px;
  --bar-h:58px;
  --wrap:1140px;
}

*,*::before,*::after{box-sizing:border-box}
/* 거르기가 먹으려면 이게 반드시 있어야 한다.
   브라우저 기본 규칙 [hidden]{display:none} 은 «기본 스타일시트» 라서
   .svc{display:flex} 같은 우리 규칙에 무조건 진다. 그래서 자바스크립트로
   card.hidden = true 를 해도 카드가 그대로 보였다(묶음 탭·검색이 둘 다 안 먹었다).
   !important 를 쓰는 자리는 여기 하나뿐이다. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:'Pretendard KO','Pretendard',-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  font-size:1rem;line-height:1.65;color:var(--body);background:#fff;
  word-break:keep-all;overflow-wrap:anywhere;
  padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px));
}
@media (min-width:900px){body{padding-bottom:0}}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 18px}
[id]{scroll-margin-top:calc(var(--header-h) + 12px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--blue);color:#fff;padding:10px 16px}
.skip:focus{left:8px;top:8px}

/* ── 버튼 ───────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:48px;padding:12px 18px;border-radius:var(--r-btn);
  font-size:1rem;font-weight:700;line-height:1.2;text-align:center;
  transition:transform .08s,box-shadow .15s,border-color .15s}
.btn:active{transform:translateY(1px)}
.btn-tel{background:var(--blue);color:#fff;box-shadow:0 2px 8px rgba(14,59,126,.25)}
.btn-tel:hover{background:var(--blue-700)}
.btn-kakao{background:var(--kakao);color:var(--kakao-ink)}
.btn-ghost{background:#fff;color:var(--blue);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--blue)}
.btn-sm{min-height:42px;padding:9px 14px;font-size:.92rem}
.btn-block{width:100%}

/* ── 머리띠 ─────────────────────────────── */
.hd{position:sticky;top:0;z-index:100;height:var(--header-h);
  background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line-soft)}
.hd .wrap{height:100%;display:flex;align-items:center;gap:14px}
.hd-brand{display:flex;align-items:center;gap:9px;font-weight:800;color:var(--ink);font-size:1.02rem;flex:0 0 auto}
.hd-brand img{width:28px;height:28px;object-fit:contain}
.hd-brand span small{display:block;font-size:.66rem;font-weight:600;color:var(--muted);letter-spacing:.02em;line-height:1}
.hd-nav{display:none;margin-left:auto;gap:2px}
.hd-nav a{padding:8px 11px;border-radius:7px;font-size:.93rem;font-weight:600;color:var(--body)}
.hd-nav a:hover{background:var(--bg);color:var(--blue)}
.hd-cta{margin-left:auto;display:flex;gap:7px}
.hd-cta .btn{min-height:40px;padding:8px 14px;font-size:.9rem}
@media (min-width:960px){
  .hd-nav{display:flex}
  .hd-cta{margin-left:14px}
}
@media (max-width:420px){.hd-cta .btn-kakao{display:none}}

/* ── 히어로 ─────────────────────────────── */
.hero{background:linear-gradient(170deg,#f4f8ff 0%,#eaf2fd 42%,#eef4fd 100%);
  border-bottom:1px solid var(--line-soft)}
.hero .wrap{display:grid;gap:26px;padding-top:34px;padding-bottom:34px}
@media (min-width:900px){
  .hero .wrap{grid-template-columns:1fr 380px;align-items:center;gap:44px;padding-top:56px;padding-bottom:48px}
}
.hero-badge{display:inline-flex;align-items:center;gap:7px;
  background:#fff;border:1px solid var(--blue-50);color:var(--blue);
  padding:6px 13px;border-radius:999px;font-size:.84rem;font-weight:700;box-shadow:var(--shadow)}
.hero-badge b{color:var(--ink)}
h1.hero-t{margin:16px 0 16px;font-size:clamp(2.05rem,6.4vw,3.45rem);line-height:1.22;
  font-weight:800;color:var(--ink);letter-spacing:-.033em}
h1.hero-t strong{color:var(--blue);box-shadow:inset 0 -.28em 0 var(--blue-50)}
.hero-sub{font-size:clamp(1.05rem,2.9vw,1.3rem);color:var(--body);line-height:1.68}
.hero-sub strong{color:var(--ink);font-weight:700}
/* 히어로에서 바로 «왜 이 사람인가» 를 보여 주는 세 줄. 지표띠보다 위에 있어야 한다 —
   전화를 걸지 말지는 여기서 갈린다. */
.hero-points{margin-top:22px;display:grid;gap:11px;max-width:600px}
.hero-points li{display:flex;gap:10px;align-items:flex-start;
  font-size:clamp(.95rem,2.4vw,1.04rem);line-height:1.6;color:var(--body)}
.hero-points svg{flex:0 0 auto;margin-top:.28em;color:var(--blue)}
.hero-points strong{color:var(--ink);font-weight:700}
.hero-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px;max-width:480px}
.hero-cta .btn{min-height:56px;font-size:1.08rem}
.hero-note{margin-top:12px;font-size:.88rem;color:var(--muted)}
/* 프로필 사진은 배경을 딴 누끼다(haedap-lp 의 hero_profile_cut).
   랜딩(heroStyle "cutout")과 같은 방식 — 액자·판을 두지 않고 인물만 세운다.
   히어로 아래 여백만큼 끌어내려 «지표띠 윗선» 에 발이 닿게 한다. 바지 끝이 허공에서
   잘리지 않고 선 위에 서 있는 모양이 된다. 높이는 히어로가 정하고 사진이 따라간다.
   흰 셔츠가 배경에 묻히지 않도록 히어로 배경은 옅은 파란 그라데이션으로 둔다 —
   순백으로 바꾸면 사람이 사라진다. */
.hero-fig{position:relative;justify-self:center;align-self:end;width:100%;max-width:330px;
  display:flex;align-items:flex-end;justify-content:center;
  margin-bottom:-34px}                     /* 히어로 아래 여백(34px)만큼 */
.hero-fig img{width:auto;max-width:100%;height:auto;max-height:420px;
  filter:drop-shadow(0 18px 26px rgba(15,23,42,.14))}
/* 폰에서는 사진을 뺀다(2026-09-29 대표 요청). 세로 화면에서는 사진이 한 칸을 통째로
   차지해서 «무슨 일을 하는가» 가 화면 밖으로 밀려난다. 900px 이상에서만 보인다. */
@media (max-width:899px){ .hero-fig{display:none} }
@media (min-width:900px){
  .hero-fig{align-self:stretch;max-width:400px;margin-top:-56px;margin-bottom:-48px}
  .hero-fig img{height:100%;max-height:600px;object-fit:contain;object-position:bottom}
}

/* ── 지표띠 ─────────────────────────────── */
.stats{background:var(--ink);color:#fff}
.stats ul{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.12)}
@media (min-width:820px){.stats ul{grid-template-columns:repeat(4,1fr)}}
.stats li{background:var(--ink);padding:20px 16px;text-align:center}
.stats .n{font-size:clamp(1.5rem,4.2vw,2rem);font-weight:800;line-height:1.1;letter-spacing:-.02em}
.stats .n em{font-style:normal;font-size:.62em;font-weight:700;margin-left:2px;color:#93c5fd}
.stats .l{margin-top:6px;font-size:.79rem;color:#cbd5e1;line-height:1.45}

/* ── 공통 섹션 ──────────────────────────── */
.sec{padding:56px 0}
.sec-alt{background:var(--bg)}
.sec-hd{max-width:720px;margin-bottom:28px}
.sec-kicker{display:inline-block;font-size:.8rem;font-weight:800;letter-spacing:.09em;
  color:var(--blue);text-transform:uppercase;margin-bottom:9px}
.sec-hd h2{font-size:clamp(1.35rem,3.6vw,1.95rem);font-weight:800;color:var(--ink);
  line-height:1.34;letter-spacing:-.02em}
.sec-hd p{margin-top:10px;font-size:.98rem;color:var(--muted)}
.sec-hd p strong{color:var(--ink);font-weight:700}
.sec-hd h2 strong{color:var(--blue)}

/* ── 업무분야 ───────────────────────────── */
.svc-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:18px}
.svc-search{position:relative;flex:1 1 230px;max-width:320px}
.svc-search input{width:100%;min-height:44px;padding:10px 14px 10px 38px;
  border:1px solid var(--line);border-radius:var(--r-btn);background:#fff;font-size:.95rem;color:var(--ink)}
.svc-search input::placeholder{color:#94a3b8}
.svc-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#94a3b8}
.svc-tabs{display:flex;flex-wrap:wrap;gap:7px}
.svc-tabs button{padding:8px 14px;border:1px solid var(--line);border-radius:999px;
  background:#fff;font-size:.88rem;font-weight:700;color:var(--body);white-space:nowrap}
.svc-tabs button:hover{border-color:var(--blue);color:var(--blue)}
.svc-tabs button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.svc-tabs button i{font-style:normal;opacity:.65;margin-left:5px;font-weight:600}

/* 폰에서 업무를 고르는 화면 — 묶음 10개를 먼저 보여 주고, 하나를 누르면 그 업무들이 나온다.
   87개를 한 줄로 늘어놓으면 폰에서 한참을 내려야 한다(2026-09-29 대표 요청).
   PC 에서는 이 타일이 안 보이고 지금까지처럼 전부 + 알약 탭이다(JS 가 matchMedia 로 가른다). */
.svc-cats{display:grid;gap:9px;grid-template-columns:1fr}
.sct-hint{grid-column:1/-1;font-size:.9rem;color:var(--muted);line-height:1.6;margin-bottom:2px}
@media (min-width:420px){.svc-cats{grid-template-columns:repeat(2,1fr)}}
.svc-cats button{display:flex;flex-direction:column;gap:4px;text-align:left;
  padding:15px 16px;background:#fff;border:1px solid var(--line-soft);
  border-radius:var(--r-card);box-shadow:var(--shadow);cursor:pointer;
  font:inherit;color:inherit;transition:border-color .15s,transform .12s}
.svc-cats button:hover,.svc-cats button:focus-visible{border-color:var(--blue);transform:translateY(-1px)}
.sct-t{display:flex;align-items:baseline;gap:7px;font-size:1.02rem;font-weight:800;color:var(--ink)}
.sct-t i{font-style:normal;font-size:.82rem;font-weight:700;color:var(--blue);
  background:var(--blue-50);border-radius:999px;padding:1px 8px}
.sct-d{font-size:.86rem;color:var(--muted);line-height:1.55}

.svc-back{display:inline-flex;align-items:center;gap:7px;margin-bottom:14px;
  padding:9px 15px;background:#fff;border:1px solid var(--line);border-radius:999px;
  font:inherit;font-size:.9rem;font-weight:700;color:var(--blue);cursor:pointer}
.svc-back svg{transform:rotate(180deg)}

.svc-grid{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:620px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.svc-grid{grid-template-columns:repeat(3,1fr)}}
.svc{display:flex;flex-direction:column;gap:8px;padding:17px 17px 15px;
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-card);
  box-shadow:var(--shadow);transition:transform .12s,box-shadow .15s,border-color .15s}
.svc:hover{transform:translateY(-2px);border-color:var(--blue-50);box-shadow:var(--shadow-lg)}
.svc-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.svc-cat{font-size:.72rem;font-weight:800;color:var(--blue);background:var(--blue-50);
  padding:3px 8px;border-radius:5px;letter-spacing:.01em}
.svc-lead{font-size:.72rem;font-weight:800;color:#b45309;background:#fef3c7;padding:3px 8px;border-radius:5px}
.svc-yt{margin-left:auto;color:var(--tube);display:flex;align-items:center}
.svc h3{font-size:1.06rem;font-weight:800;color:var(--ink);line-height:1.38;letter-spacing:-.01em}
.svc p{font-size:.88rem;color:var(--muted);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.svc-go{margin-top:auto;padding-top:9px;font-size:.86rem;font-weight:700;color:var(--blue);
  display:flex;align-items:center;gap:4px}
.svc-empty{padding:40px 0;text-align:center;color:var(--muted);font-size:.95rem}
/* 안내 페이지가 아직 없는 업무. «안 하는 일» 이 아니라 «읽을 페이지가 없다» 는 뜻이므로
   흐리게 만들지 않는다 — 테두리만 점선으로 눕히고 CTA 글자를 «상담 문의» 로 바꾼다. */
.svc-ask{background:var(--bg);border-style:dashed}
.svc-ask:hover{background:#fff;border-style:solid}
.svc-ask .svc-cat{background:#eef2f7;color:var(--muted)}

/* ── 일하는 방식 ────────────────────────── */
.how{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:700px){.how{grid-template-columns:repeat(2,1fr)}}
.how li{padding:22px 20px;background:#fff;border:1px solid var(--line-soft);
  border-radius:var(--r-card);box-shadow:var(--shadow)}
.how h3{font-size:1.04rem;font-weight:800;color:var(--ink);margin-bottom:8px;line-height:1.4}
.how p{font-size:.92rem;color:var(--body);line-height:1.7}

/* ── 채널(유튜브·블로그) ────────────────── */
.ch-tabs{display:flex;gap:8px;margin-bottom:20px}
.ch-tabs button{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;
  border:1px solid var(--line);border-radius:999px;background:#fff;font-size:.93rem;font-weight:700;color:var(--body)}
.ch-tabs button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.ch-tabs .dot{width:9px;height:9px;border-radius:50%}
.ch-tabs .dot-yt{background:var(--tube)}
.ch-tabs .dot-blog{background:var(--naver)}

.yt-grid{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:620px){.yt-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.yt-grid{grid-template-columns:repeat(3,1fr)}}
.yt{display:block;background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-card);
  overflow:hidden;box-shadow:var(--shadow);transition:transform .12s,box-shadow .15s}
.yt:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.yt-thumb{display:block;position:relative;aspect-ratio:16/9;background:#0f172a}
.yt-thumb img{width:100%;height:100%;object-fit:cover}
.yt-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.yt-play span{width:54px;height:38px;border-radius:9px;background:rgba(255,0,0,.92);
  display:flex;align-items:center;justify-content:center;transition:transform .15s}
.yt:hover .yt-play span{transform:scale(1.1)}
.yt-body{display:block;padding:13px 15px 15px}
.yt-body h3{font-size:.95rem;font-weight:700;color:var(--ink);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.yt-body time{display:block;margin-top:7px;font-size:.79rem;color:var(--muted)}

.bl-list{display:grid;gap:10px}
.bl{display:flex;gap:14px;align-items:flex-start;padding:15px 16px;background:#fff;
  border:1px solid var(--line-soft);border-radius:var(--r-card);box-shadow:var(--shadow);
  transition:border-color .15s,transform .12s}
.bl:hover{border-color:var(--naver);transform:translateY(-1px)}
.bl-thumb{flex:0 0 78px;width:78px;height:78px;border-radius:9px;object-fit:cover;background:#e2e8f0}
.bl-txt{display:block;min-width:0;flex:1}
.bl h3{font-size:.99rem;font-weight:700;color:var(--ink);line-height:1.48;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bl p{margin-top:5px;font-size:.85rem;color:var(--muted);line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bl time{display:block;margin-top:6px;font-size:.78rem;color:#94a3b8}
.ch-more{margin-top:20px;display:flex;justify-content:center}
.ch-stale{margin-bottom:14px;font-size:.83rem;color:var(--muted)}

/* ── 소개 ───────────────────────────────── */
.about{display:grid;gap:26px}
@media (min-width:860px){.about{grid-template-columns:300px 1fr;gap:40px;align-items:start}}
.about-fig img{border-radius:var(--r-card);box-shadow:var(--shadow-lg)}
.about-body h2{font-size:clamp(1.3rem,3.4vw,1.8rem);font-weight:800;color:var(--ink);letter-spacing:-.02em}
.about-body h2 em{font-style:normal;font-size:.62em;font-weight:700;color:var(--muted);margin-left:9px}
.about-lines{margin-top:16px;display:grid;gap:10px}
.about-lines li{position:relative;padding-left:19px;font-size:.97rem;line-height:1.72;color:var(--body)}
.about-lines li::before{content:'';position:absolute;left:0;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--blue-50);border:2px solid var(--blue)}
.about-lines strong{color:var(--ink);font-weight:700}
.careers{margin-top:22px;display:flex;flex-wrap:wrap;gap:7px}
.careers li{font-size:.85rem;font-weight:700;color:var(--blue);background:#fff;
  border:1px solid var(--blue-50);padding:7px 13px;border-radius:999px}

/* ── 마무리 CTA ─────────────────────────── */
.final{background:linear-gradient(160deg,var(--blue) 0%,#0a2d61 100%);color:#fff;text-align:center}
.final .wrap{padding-top:52px;padding-bottom:52px}
.final h2{font-size:clamp(1.35rem,3.8vw,2.05rem);font-weight:800;line-height:1.36;letter-spacing:-.02em}
.final p{margin-top:13px;font-size:1rem;color:#cbd5e1;line-height:1.72}
.final p strong{color:#fff}
.final-cta{margin:26px auto 0;display:grid;gap:9px;grid-template-columns:1fr;max-width:420px}
@media (min-width:560px){.final-cta{grid-template-columns:1fr 1fr}}
.final .btn-tel{background:#fff;color:var(--blue)}
.final .btn-tel:hover{background:#f1f5f9}
.final-note{margin-top:16px;font-size:.84rem;color:#94a3b8}

/* ── 꼬리말 ─────────────────────────────── */
.ft{background:var(--ink);color:#94a3b8;font-size:.86rem;padding:34px 0 26px}
.ft-top{display:grid;gap:22px;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.1)}
@media (min-width:760px){.ft-top{grid-template-columns:1.4fr 1fr 1fr}}
.ft-brand{font-size:1.05rem;font-weight:800;color:#fff}
.ft-top p{margin-top:9px;line-height:1.75}
.ft h4{font-size:.8rem;font-weight:800;color:#e2e8f0;letter-spacing:.06em;margin-bottom:9px}
.ft-links{display:grid;gap:7px}
.ft-links a:hover{color:#fff;text-decoration:underline}
.ft-bot{padding-top:18px;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.8rem;color:#64748b}
.ft-bot a{text-decoration:underline}
.ft-notice{width:100%;color:#64748b}

/* ── 하단 고정 CTA(모바일) ──────────────── */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:99;display:grid;grid-template-columns:1fr 1fr;
  gap:1px;background:var(--line);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0px)}
.bar a{height:var(--bar-h);display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:.98rem;font-weight:800}
.bar .b-tel{background:var(--blue);color:#fff}
.bar .b-kakao{background:var(--kakao);color:var(--kakao-ink)}
@media (min-width:900px){.bar{display:none}}

/* 인쇄할 일은 거의 없지만, 상담 중에 종이로 뽑는 경우가 있다. */
@media print{.hd,.bar,.svc-tools,.ch-tabs{display:none}.sec{padding:18px 0}}

/* ─────────────────────────────────────────────
   업무 페이지(/<id>/) — template/topic.html
   홈과 같은 토큰·조각을 쓴다. 여기 있는 것은 업무 페이지에만 있는 칸들이다.
   ───────────────────────────────────────────── */
.crumb{border-bottom:1px solid var(--line-soft);background:var(--bg)}
.crumb .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  padding-top:11px;padding-bottom:11px;font-size:.84rem;color:var(--muted)}
.crumb a:hover{color:var(--blue);text-decoration:underline}
.crumb strong{color:var(--ink);font-weight:700}
.crumb span{color:#cbd5e1}

.thero{background:linear-gradient(170deg,#f4f8ff 0%,#eaf2fd 55%,#eef4fd 100%);
  border-bottom:1px solid var(--line-soft)}
.thero .wrap{padding-top:34px;padding-bottom:34px;max-width:860px;margin-inline:auto}
@media (min-width:768px){.thero .wrap{padding-top:52px;padding-bottom:46px}}
.thero h1{margin:12px 0 14px;font-size:clamp(1.6rem,4.6vw,2.5rem);line-height:1.28;
  font-weight:800;color:var(--ink);letter-spacing:-.028em}
.thero-hook{font-size:clamp(1rem,2.6vw,1.15rem);line-height:1.72;color:var(--body)}
.thero-cta{display:grid;grid-template-columns:1fr;gap:10px;margin-top:24px;max-width:460px}
@media (min-width:480px){.thero-cta{grid-template-columns:1fr 1fr}}
.thero-cta .btn{min-height:54px;font-size:1.04rem}
.thero .hero-note strong{color:var(--ink);font-weight:700}

/* 근거·소관 — 확인된 값만 들어간다. 없는 칸은 build 가 아예 안 만든다. */
.facts{display:grid;gap:10px;max-width:860px}
@media (min-width:640px){.facts{grid-template-columns:repeat(2,1fr)}}
.facts > div{padding:16px 18px;background:#fff;border:1px solid var(--line-soft);
  border-radius:var(--r-card);box-shadow:var(--shadow)}
.facts dt{font-size:.8rem;font-weight:800;color:var(--blue);letter-spacing:.02em}
.facts dd{margin-top:6px;font-size:1rem;color:var(--ink);font-weight:600;line-height:1.55}
.facts-note{margin-top:14px;font-size:.87rem;color:var(--muted);max-width:860px}

/* 필요서류 — 원본은 사무소 서류 마스터(doc_templates_v1.csv)다. 빌드가 읽어 굽는다.
   줄마다 배지가 여럿 붙을 수 있어 이름과 배지를 한 줄에 흐르게 두고,
   발급처·유효기간·주의사항은 아랫줄로 내렸다. 폭이 좁으면 자연스럽게 접힌다. */
.dsum{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.dsum-i{flex:1 1 210px;display:flex;align-items:baseline;gap:10px;padding:14px 18px;
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-card);box-shadow:var(--shadow)}
.dsum-i strong{font-size:1.6rem;font-weight:800;color:var(--ink);line-height:1;
  font-variant-numeric:tabular-nums}
.dsum-i span{font-size:.92rem;font-weight:700;color:var(--body)}
.dsum-client{border-left:4px solid var(--line)}
.dsum-us{border-left:4px solid var(--blue)}
.dsum-us strong{color:var(--blue)}
.dsum-out{border-left:4px solid #94a3b8}

.dlist{display:grid;gap:8px;max-width:900px}
.dlist li{display:flex;gap:12px;align-items:flex-start;padding:13px 16px;background:#fff;
  border:1px solid var(--line-soft);border-radius:var(--r-card);box-shadow:var(--shadow)}
.d-n{flex:0 0 auto;min-width:24px;font-size:.82rem;font-weight:800;color:#94a3b8;
  font-variant-numeric:tabular-nums;padding-top:.3em}
.d-body{flex:1;min-width:0}
.d-name{font-size:.98rem;font-weight:700;color:var(--ink);line-height:1.6}
.d-tag{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;
  font-size:.74rem;font-weight:800;vertical-align:.12em;white-space:nowrap}
.d-opt{background:#f1f5f9;color:var(--muted)}
.d-us{background:var(--blue-50);color:var(--blue)}
.d-type{background:#fef3c7;color:#92400e}
.d-sub{background:#f1f5f9;color:var(--body);font-weight:700}
.d-meta{margin-top:5px;font-size:.86rem;color:var(--muted);line-height:1.65}
.d-meta span{display:inline}
.d-meta span + span::before{content:'·';margin:0 7px;color:var(--line)}
.d-where{font-weight:700;color:var(--body)}

/* 블로그 글 목록 */
.plist{display:grid;gap:8px;counter-reset:p}
.plist li a{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;background:#fff;
  border:1px solid var(--line-soft);border-radius:var(--r-card);box-shadow:var(--shadow);
  transition:border-color .15s,transform .12s}
.plist li a:hover{border-color:var(--naver);transform:translateY(-1px)}
.plist-n{flex:0 0 auto;min-width:24px;font-size:.82rem;font-weight:800;color:#94a3b8;
  font-variant-numeric:tabular-nums;padding-top:.15em}
.plist-t{flex:1;min-width:0;font-size:.98rem;font-weight:600;color:var(--ink);line-height:1.55}
.plist li svg{flex:0 0 auto;margin-top:.3em;color:var(--naver)}
.plist-more{margin-top:16px;font-size:.92rem;color:var(--muted)}
.plist-more a{color:var(--blue);font-weight:700;text-decoration:underline}

/* PC 에서만 뜨는 카카오 상담 칸 — 카카오 채널이 PC 웹에서 대화가 안 되기 때문이다.
   폰에서는 JS 가 이 칸을 아예 열지 않고 링크 그대로 보낸다. */
.kmodal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:20px}
.kmodal-back{position:absolute;inset:0;background:rgba(15,23,42,.55)}
.kmodal-box{position:relative;width:100%;max-width:400px;background:#fff;
  border-radius:18px;box-shadow:var(--shadow-lg);padding:28px 24px 22px;text-align:center}
.kmodal-x{position:absolute;top:8px;right:10px;width:36px;height:36px;border:0;background:none;
  font-size:1.6rem;line-height:1;color:var(--muted);cursor:pointer;border-radius:50%}
.kmodal-x:hover{background:var(--bg);color:var(--ink)}
.kmodal-box h2{font-size:1.2rem;font-weight:800;color:var(--ink);margin-bottom:10px}
.kmodal-lead{font-size:.93rem;color:var(--body);line-height:1.65}
.kmodal-lead strong{color:var(--ink);font-weight:700}
.kmodal-qr{display:block;width:200px;height:200px;margin:16px auto;
  border:1px solid var(--line-soft);border-radius:12px;padding:8px;background:#fff}
.kmodal-ways{display:grid;gap:9px}
.kmodal-ways .btn{min-height:48px;font-size:1rem}
.kmodal-note{margin-top:13px;font-size:.84rem;color:var(--muted);line-height:1.6}
.kmodal-note strong{color:var(--ink);font-weight:700}

/* 근거 조문 원문 — 법제처에서 받아 그대로 싣는다(tools/law.mjs).
   글씨를 본문보다 살짝 작게 하고 왼쪽에 선을 둬서 «인용» 임을 눈으로 알게 한다. */
.lawbox{display:grid;gap:12px;max-width:900px}
.lw{padding:18px 20px;background:#fff;border:1px solid var(--line-soft);
  border-left:4px solid var(--blue);border-radius:var(--r-card);box-shadow:var(--shadow)}
.lw h3{font-size:1rem;font-weight:800;color:var(--ink);line-height:1.5}
.lw-when{margin-top:3px;font-size:.8rem;color:var(--muted);font-weight:700}
.lw p{font-size:.92rem;color:var(--body);line-height:1.8;margin-top:10px}
.lw .lw-sub{padding-left:14px;font-size:.89rem;color:var(--muted)}
.lw .lw-cut{margin-top:12px;font-size:.86rem;color:var(--muted)}
.lw .lw-cut a{color:var(--blue);font-weight:700;text-decoration:underline}