@charset "utf-8";
/* 문정세무회계컨설팅 — 단일 스타일시트
   외부 의존성 없음. 폰트도 받아오지 않는다.
   색은 전부 아래 토큰에서만 꺼내 쓴다. 하드코딩된 hex 가 본문에 나오면 잘못된 것이다. */

/* 라이트 전용이다. 다크 모드를 지원하지 않는다 —
   세무 상담은 낮에, 불안한 상태에서 찾는 일이고 밝은 화면이 그 장면에 맞다.
   사진과 로고가 들어오면 라이트 기준으로 만들어질 것이라는 점도 이유다. */

/* ── 토큰 ─────────────────────────────────────────────────────────
   명암비는 tools/a11y-check.mjs 가 계산해 검증한다.
   액센트는 브론즈 #8A6A2F 다. 이전의 골드 #B08D57 은 흰 글자와 3.09:1,
   섹션면(#F7F8FA) 위에서 2.91:1 로 UI 기준(3.0)에도 미달해 교체했다.
   브론즈는 흰색 위 5.02, 섹션면 위 4.72, 흰 글자 배경으로 5.02 라 텍스트로도 쓸 수 있다.
   단 네이비 위 브론즈는 2.82 이므로 네이비 배경 위에는 텍스트로 올리지 않는다. */
:root{
  --navy:#0F2C4C;   --navy-8:#0B2340;  --navy-6:#1D4270;  --navy-4:#5A7290;
  --gold:#8A6A2F;   --gold-d:#6E5526;  --gold-t:#EFE6D8;
  --gold-on-navy:#D9B67E;  /* 네이비 면 위 전용. 브론즈는 2.82 라 못 올린다 */
  /* ── 브론즈 사용 정책 ──
     브론즈는 화면에서 가장 비싼 색이다. 여기저기 쓰면 값이 떨어진다.
     허용: 상담 CTA 버튼 / 로고 부제 / 이번 달 표시 / 진단 진행바 / D-day 카드 헤더 아이콘
     금지: 일반 섹션 구분선, 본문 마커, 아이콘 기본색 — 이건 네이비 계열이나 중립선으로. */
  --ink:#1A1A1A;    --tx2:#5D6572;     --tx3:#7E8794;
  --line:#E5E7EB;   --line-s:#EFF1F4;
  --bg:#FFFFFF;     --surface:#F7F8FA; --surface2:#EEF1F5;
  --focus:#2F6DF6;  --bad:#B3261E;     --ok:#0F7A4D;

  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:24px;
  --sp6:32px; --sp7:48px; --sp8:64px; --sp9:96px; --sp10:128px;

  --r1:2px; --r2:4px; --r3:8px;
  --sh1:0 1px 2px rgba(15,44,76,.05), 0 6px 18px rgba(15,44,76,.06);
  --sh2:0 2px 6px rgba(15,44,76,.07), 0 18px 44px rgba(15,44,76,.13);

  --ease:cubic-bezier(.16,1,.3,1);
  --fast:140ms; --base:240ms; --slow:420ms;

  /* 자체 호스팅한다. assets/font/pretendard.css 가 92개 동적 서브셋을 건다.
     지정만 하고 파일을 안 실으면 맑은 고딕으로 떨어져 타이포가 무너진다. */
  --font:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,
         'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
}



/* ── 리셋 ───────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:17px;line-height:1.8;
  letter-spacing:-.003em;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}

/* ── 브라우저가 그리는 표면도 우리 색으로 ─────────────────────────── */
::selection{background:var(--navy);color:#fff}

:where(input,textarea){caret-color:var(--navy)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r2)}
html{scrollbar-color:var(--line) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--tx3)}

/* ── 타이포 ───────────────────────────────────────────────────
   Pretendard 는 자간을 좁게 줘야 제 모습이 나온다.
   크기가 커질수록 자간을 더 조인다. */
.d1{font-size:clamp(34px,5.2vw,58px);line-height:1.14;letter-spacing:-.045em;
  font-weight:800;text-wrap:balance}
.h1{font-size:clamp(28px,4vw,44px);line-height:1.2;letter-spacing:-.038em;
  font-weight:700;text-wrap:balance}
.h2{font-size:clamp(23px,2.8vw,34px);line-height:1.26;letter-spacing:-.032em;
  font-weight:700;text-wrap:balance}
.h3{font-size:20px;line-height:1.4;letter-spacing:-.024em;font-weight:650}
.lead{font-size:clamp(16.5px,1.35vw,18.5px);line-height:1.72;letter-spacing:-.014em;
  color:var(--tx2);text-wrap:pretty}
.cap{font-size:14px;line-height:1.6;letter-spacing:-.008em;color:var(--tx2)}
.num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;letter-spacing:-.01em}
.prose{max-width:66ch}
.prose p{font-size:17px;line-height:1.85;letter-spacing:-.012em}
.prose p+p{margin-top:var(--sp4)}
.muted{color:var(--tx2)}
.dim{color:var(--tx3)}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ── 레이아웃 ───────────────────────────────────────────────────── */
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
@media(min-width:768px){.wrap{padding:0 32px}}
.wrap.narrow{max-width:820px}
.sec{padding:78px 0}
@media(min-width:768px){.sec{padding:112px 0}}
.sec.tight{padding:var(--sp7) 0 var(--sp8)}
.sec.surf{background:var(--surface)}
/* 네이비 밴드. 흰 면만 이어지면 문서처럼 읽힌다. 페이지당 한 번만 쓴다. */
.sec.dark{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.sec.dark::after{content:"";position:absolute;right:-8%;top:-40%;width:52%;height:180%;
  background:radial-gradient(closest-side,rgba(217,182,126,.16),transparent 70%);pointer-events:none}
.sec.dark .wrap{position:relative;z-index:1}
.sec.dark .h2{color:#fff}
.sec.dark .lead{color:rgba(255,255,255,.72)}
.sec.dark .sec-head::before{background:rgba(255,255,255,.28);width:26px;height:1px}
.sec-head{margin-bottom:var(--sp7);position:relative}
/* 브론즈는 상담 CTA 와 정말 강조할 정보에만 쓴다.
   섹션마다 브론즈 막대를 두면 CTA 의 힘이 희석된다.
   섹션 구분은 여백과 배경 톤으로 한다. */
.sec-head::before{content:"";display:block;width:26px;height:1px;
  background:var(--line);margin-bottom:22px}
.sec-head .h2{font-size:clamp(23px,2.7vw,34px)}
.sec-head.row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp5);flex-wrap:wrap}
.sec-head.row::before{position:absolute;top:0;left:0}
.sec-head.row{padding-top:calc(3px + var(--sp4))}
.sec-head .h2+.lead{margin-top:14px;max-width:52ch}
@media(min-width:768px){.sec-head{margin-bottom:56px}}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--navy);color:#fff;padding:10px 16px}
.skip:focus{left:12px;top:12px}

/* ── 유틸리티 바 ────────────────────────────────────────────────── */
.util{background:var(--navy);color:#fff;font-size:13px;line-height:1.4}

.util .wrap{display:flex;align-items:center;gap:var(--sp4);
  min-height:38px;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.util .wrap::-webkit-scrollbar{display:none}
.util a{opacity:.86;transition:opacity var(--fast) var(--ease)}
.util a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.util .sp{margin-left:auto}
.util .em{color:var(--gold-t);opacity:1}


/* ── 헤더 ─────────────────────────────────────────────────────
   로고·메뉴·전화·CTA 가 한 줄에 들어간다. 좁아지면 먼저 전화, 다음 메뉴가 빠진다. */
.hd{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.88);
  backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--line);transition:box-shadow var(--base) var(--ease)}
.hd.stuck{box-shadow:0 1px 0 var(--line),0 8px 28px rgba(15,44,76,.07)}
.hd .wrap{display:flex;align-items:center;gap:14px;min-height:64px;min-width:0}
/* 어떤 폭에서도 헤더가 화면을 넘지 않아야 한다.
   brand 에 flex:none 을 걸어 뒀다가 좁은 화면에서 상담 버튼과 햄버거가
   화면 밖으로 밀려나 메뉴 자체에 닿을 수 없게 된 적이 있다. */
.hd{overflow:hidden}
@media(min-width:768px){.hd .wrap{gap:var(--sp5);min-height:72px}}
@media(min-width:1024px){.hd .wrap{min-height:82px;gap:var(--sp6)}}

.brand{display:flex;align-items:baseline;gap:9px;min-width:0;flex:0 1 auto;
  font-size:17.5px;font-weight:800;letter-spacing:-.05em;color:var(--navy-8);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 로고 부제는 장식이다. 좁으면 가장 먼저 뺀다. */
.brand .sub{display:none;font-size:10.5px;font-weight:600;letter-spacing:.14em;
  color:var(--gold);text-transform:uppercase;flex:none}
@media(min-width:560px){.brand .sub{display:inline}}
@media(min-width:560px){.brand{font-size:19px}}
@media(min-width:1024px){.brand{font-size:20.5px}}

.nav{display:none}
@media(min-width:1100px){
  .nav{display:flex;align-items:center;gap:28px;margin-left:var(--sp4)}
  .nav>li{position:relative}
  .nav>li>a,.nav>li>button{display:flex;align-items:center;gap:5px;
    font-size:16px;font-weight:600;letter-spacing:-.024em;padding:30px 0;
    color:var(--navy-8);border-bottom:2px solid transparent;
    transition:color var(--fast) var(--ease),border-color var(--fast) var(--ease)}
  .nav>li>a:hover,.nav>li>button:hover,.nav>li[data-open=true]>button{color:var(--gold-d)}
  .nav>li>a[aria-current=page],.nav>li[aria-current=page]>button{border-bottom-color:var(--gold)}
  .nav .car{width:10px;height:10px;stroke:currentColor;stroke-width:2.2;fill:none;
    opacity:.5;transition:transform var(--base) var(--ease),opacity var(--fast) var(--ease)}
  .nav>li:hover .car{opacity:1}
  .nav>li[data-open=true] .car{transform:rotate(180deg);opacity:1}
}
.hd .act{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
@media(min-width:768px){.hd .act{gap:18px}}
.tel{display:none}
@media(min-width:1340px){
  .tel{display:flex;flex-direction:column;line-height:1.15;text-align:right}
  .tel .k{font-size:10.5px;font-weight:600;letter-spacing:.1em;color:var(--tx3)}
  .tel .v{font-size:21px;font-weight:800;letter-spacing:-.03em;color:var(--navy-8);margin-top:3px}
}

/* 메가메뉴 */
.mega{position:absolute;top:100%;left:-20px;min-width:250px;padding:var(--sp3);
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r3);
  box-shadow:var(--sh2);opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--base) var(--ease),transform var(--base) var(--ease),visibility var(--base)}
.nav>li[data-open=true] .mega{opacity:1;visibility:visible;transform:none}
.mega.two{min-width:440px;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.mega a{display:block;padding:9px 12px;border-radius:var(--r2);font-size:15px;
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease)}
.mega a:hover{background:var(--surface);color:var(--navy)}
.mega a .d{display:block;font-size:12.5px;color:var(--tx3);margin-top:1px}

/* 햄버거 · 드로어 */
.burger{display:grid;place-items:center;width:44px;height:44px;margin-right:-8px;
  border-radius:var(--r2);color:var(--navy)}
@media(min-width:1100px){.burger{display:none}}
.drawer{position:fixed;inset:0;z-index:60;visibility:hidden}
.drawer[data-open]{visibility:visible}
.drawer .veil{position:absolute;inset:0;background:rgba(10,20,32,.45);
  opacity:0;transition:opacity var(--base) var(--ease)}
.drawer[data-open] .veil{opacity:1}
.drawer .panel{position:absolute;inset:0 0 0 auto;width:min(92vw,400px);
  background:var(--bg);overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(100%);transition:transform var(--slow) var(--ease);
  padding:var(--sp4) var(--sp5) var(--sp8);box-shadow:var(--sh2)}
.drawer[data-open] .panel{transform:none}
.drawer .top{display:flex;align-items:center;min-height:50px;margin-bottom:var(--sp4)}
.drawer .x{margin-left:auto;width:44px;height:44px;display:grid;place-items:center;color:var(--tx2)}
.dgrp{border-top:1px solid var(--line);padding:var(--sp2) 0}
.dgrp>button{display:flex;width:100%;align-items:center;gap:var(--sp2);
  padding:13px 0;font-size:16.5px;font-weight:600;text-align:left}
.dgrp>button .car{margin-left:auto;width:11px;height:11px;stroke:currentColor;
  stroke-width:2;fill:none;color:var(--tx3);transition:transform var(--base) var(--ease)}
.dgrp[data-open]>button .car{transform:rotate(180deg)}
.dgrp>ul{display:none;padding:0 0 var(--sp3) var(--sp3)}
.dgrp[data-open]>ul{display:block}
.dgrp>ul a{display:block;padding:9px 0;font-size:15.5px;color:var(--tx2)}
.dgrp>ul a:hover{color:var(--navy)}
.dgrp>a{display:block;padding:13px 0;font-size:16.5px;font-weight:600}

/* ── 버튼 ───────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:50px;padding:0 var(--sp5);border-radius:var(--r2);
  font-size:15.5px;font-weight:600;letter-spacing:-.012em;white-space:nowrap;
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease),
             border-color var(--fast) var(--ease),transform var(--fast) var(--ease)}
.btn:active{transform:translateY(1px)}
.btn svg{width:17px;height:17px;flex:none}
/* 골드 배경 위 글자는 네이비. 흰 글자는 3.09:1 로 AA 미달이다. */
.btn.gold{background:var(--gold);color:#fff}
.btn.gold:hover{background:var(--gold-d)}

.btn.navy{background:var(--navy);color:var(--bg)}
.btn.navy:hover{background:var(--navy-6)}
.btn.line{border:1px solid var(--line);color:var(--ink);background:var(--bg)}
.btn.line:hover{border-color:var(--navy);color:var(--navy)}
.btn.onnavy{border:1px solid rgba(255,255,255,.34);color:#fff}
.btn.onnavy:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}
.btn.sm{min-height:44px;padding:0 19px;font-size:15px}
@media(max-width:479px){.hd .btn.sm{padding:0 13px;font-size:14px;min-height:40px}}
.btn.full{width:100%}
.btns{display:flex;flex-wrap:wrap;gap:var(--sp3)}

/* 텍스트 링크 — 화살표가 미세하게 밀린다 */
.tlink{display:inline-flex;align-items:center;gap:7px;font-weight:600;
  font-size:15.5px;color:var(--navy)}
.tlink svg{width:15px;height:15px;transition:transform var(--base) var(--ease)}
.tlink:hover svg{transform:translateX(4px)}
.tlink:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* ── 히어로 ─────────────────────────────────────────────────────
   사진이 없다. 여백만 두면 문서가 된다.
   그래서 오른쪽에 살아 있는 정보(다음 신고 마감)를 놓았다.
   매일 바뀌고 실제로 급한 정보라, 이 사이트가 문서가 아니라는 신호가 된다. */
.hero{position:relative;overflow:hidden;
  background:linear-gradient(166deg,#FDFEFF 0%,#F4F8FC 44%,#EAF1F8 100%)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(58% 74% at 88% 6%, rgba(138,106,47,.13), transparent 62%),
    radial-gradient(52% 66% at 4% 96%, rgba(15,44,76,.10), transparent 66%)}
/* 아주 옅은 격자 — 문정동 필지의 결. 장식이 아니라 면에 밀도를 준다. */
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(15,44,76,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(15,44,76,.055) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(78% 78% at 62% 34%,#000 12%,transparent 76%);
  -webkit-mask-image:radial-gradient(78% 78% at 62% 34%,#000 12%,transparent 76%)}

.hero .wrap{position:relative;z-index:1;
  padding-top:var(--sp8);padding-bottom:var(--sp8);
  display:grid;gap:var(--sp7);align-items:center}
@media(min-width:980px){
  .hero .wrap{grid-template-columns:minmax(0,1.02fr) minmax(340px,.98fr);
    gap:var(--sp8);padding-top:104px;padding-bottom:118px}
}
.hero .d1{color:var(--navy-8);letter-spacing:-.038em;
  font-size:clamp(31px,4.5vw,52px);line-height:1.16;text-wrap:balance}
.hero .lead{color:var(--tx2);max-width:42ch;margin-top:var(--sp4);font-size:clamp(16.5px,1.35vw,18.5px)}
.hero .btns{margin-top:var(--sp6)}
.hero .foot{margin-top:var(--sp6);padding-top:var(--sp5);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:var(--sp2) var(--sp5);font-size:13.5px;color:var(--tx2)}
.hero .foot b{color:var(--navy);font-weight:650}

/* 오른쪽 판 — 사진 위에 마감 카드가 걸친다.
   사진은 임시 이미지이며 사무소 사진이 아니다(장식). 실사가 오면 교체한다. */
.heroart{position:relative}
.heroart img{width:100%;border-radius:10px;box-shadow:var(--sh2);
  aspect-ratio:16/12;object-fit:cover;object-position:52% 34%}
@media(min-width:980px){
  .heroart img{aspect-ratio:5/6;object-position:50% 36%}
}
.heroart .dday{position:relative;margin:-52px 18px 0}
@media(min-width:980px){
  /* 카드를 열 밖으로 내보내지 않는다.
     예전에 left:-58px 로 띄웠더니 이미지에도 텍스트에도 속하지 않고
     두 열 사이에 붕 뜬 것처럼 보였다. 이미지 하단에 겹치되 안쪽에 둔다. */
  .heroart .dday{margin:-72px 26px 0}
}
@media(min-width:1280px){ .heroart .dday{margin:-80px 34px 0} }

/* 다음 마감 카드 */
/* 첫 화면의 초점은 제목과 상담 버튼이어야 한다.
   카드 그림자를 강하게 두면 시선이 여기로 먼저 온다. */
.dday{background:var(--bg);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 1px 3px rgba(15,44,76,.06),0 10px 26px rgba(15,44,76,.08);overflow:hidden}
.dday .k{display:flex;align-items:center;gap:9px;padding:13px 22px;
  background:var(--navy);color:#fff;font-size:12.5px;letter-spacing:.06em;font-weight:700}
.dday .k svg{width:15px;height:15px;stroke:var(--gold-on-navy);stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.dday .body{padding:20px 22px 20px}
.dday .n{display:flex;align-items:baseline;gap:9px;letter-spacing:-.05em;color:var(--navy-8)}
.dday .n em{font-style:normal;font-size:clamp(38px,4.4vw,50px);font-weight:800;line-height:.96;letter-spacing:-.05em;
  font-variant-numeric:tabular-nums}
.dday .n span{font-size:16px;font-weight:700;letter-spacing:-.028em;color:var(--tx2)}
.dday .when{margin-top:var(--sp3);font-size:13.5px;color:var(--tx3);font-variant-numeric:tabular-nums}
.dday .t{margin-top:10px;font-size:18px;font-weight:750;letter-spacing:-.03em;line-height:1.35;color:var(--navy-8)}
.dday .w{margin-top:5px;font-size:14px;color:var(--tx2);line-height:1.6}
.dday .more{display:flex;align-items:center;gap:7px;margin-top:var(--sp5);
  padding-top:var(--sp4);border-top:1px solid var(--line-s);
  font-size:14px;font-weight:600;color:var(--navy)}
.dday .more svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none;
  transition:transform var(--base) var(--ease)}
.dday .more:hover svg{transform:translateX(4px)}
.dday.today .n{color:var(--bad)}
.dday .skel{height:14px;border-radius:99px;background:var(--surface2);
  animation:sk 1.4s var(--ease) infinite}
.dday .skel+.skel{margin-top:10px;width:62%}
@keyframes sk{0%,100%{opacity:.55}50%{opacity:1}}

/* ── 고객별 분기 — 이 사이트의 가장 차별적인 구조 ──────────────
   카드 넷을 나란히 두는 대신, 네 개의 '지면'으로 만든다.
   배경 톤을 교차시키고 아이콘을 크게 잡아, 업무분야 목록과 확실히 구분되게 한다. */
.split{display:grid;background:var(--line);gap:1px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(min-width:680px){.split{grid-template-columns:1fr 1fr}}
@media(min-width:1160px){.split{grid-template-columns:repeat(4,1fr)}}
.split>a{display:flex;flex-direction:column;gap:15px;position:relative;isolation:isolate;
  padding:52px 32px 44px;background:var(--bg);
  transition:background var(--base) var(--ease)}
/* 교차 톤 — 넷이 같은 면이면 그냥 카드 넷이다. */
.split>a:nth-child(even){background:var(--surface)}
@media(min-width:1160px){
  .split>a:nth-child(even){background:var(--bg)}
  .split>a:nth-child(2),.split>a:nth-child(3){background:var(--surface)}
}
.split>a::after{content:"";position:absolute;left:0;top:0;width:100%;height:2px;
  background:var(--navy);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease)}
.split>a:hover::after{transform:none}
.split>a:hover{background:var(--surface2)}
.split .ic{width:34px;height:34px;stroke:var(--navy);stroke-width:1.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  transition:stroke var(--base) var(--ease)}
.split>a:hover .ic{stroke:var(--gold-d)}
.split .t{display:block;font-size:20px;font-weight:750;letter-spacing:-.032em;
  color:var(--navy-8);line-height:1.32}
.split .d{display:block;font-size:14.5px;line-height:1.78;color:var(--tx2)}
.split .m{margin-top:auto;padding-top:22px;font-size:13.5px;font-weight:700;
  letter-spacing:-.02em;color:var(--tx3);display:flex;align-items:center;gap:7px}
.split .m svg{width:14px;height:14px;transition:transform var(--base) var(--ease)}
.split>a:hover .m{color:var(--navy)}
.split>a:hover .m svg{transform:translateX(5px)}

/* ── 업무분야 — 목록으로 정돈한다 ───────────────────────────────
   고객군 4분할이 이 사이트의 가장 차별적인 구조다.
   업무분야까지 카드로 만들면 둘이 비슷해 보여 고객군이 특별해 보이지 않는다.
   여기는 존재감을 낮추고 읽기 좋게만 둔다. */
.svc{display:grid;gap:0}
@media(min-width:860px){.svc{grid-template-columns:1fr 1fr;column-gap:64px}}
.svc>a{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:16px;
  padding:22px 0;border-top:1px solid var(--line);
  transition:border-color var(--base) var(--ease)}
.svc>a:first-child{border-top:0}
@media(min-width:860px){.svc>a:nth-child(2){border-top:0}}
.svc>a:hover{border-top-color:var(--navy-4)}
.svc .ic{width:26px;height:26px;margin-top:3px;stroke:var(--navy-4);stroke-width:1.5;
  fill:none;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke var(--base) var(--ease)}
.svc>a:hover .ic{stroke:var(--navy)}
.svc .t{display:block;font-size:17.5px;font-weight:700;letter-spacing:-.026em;color:var(--navy-8)}
.svc .d{display:block;font-size:14.5px;line-height:1.7;color:var(--tx2);margin-top:4px}
.svc .go{width:16px;height:16px;margin-top:7px;stroke:var(--line);stroke-width:1.8;fill:none;
  transition:transform var(--base) var(--ease),stroke var(--base) var(--ease)}
.svc>a:hover .go{transform:translateX(4px);stroke:var(--navy-4)}

/* ── 일하는 방식 — 네이비 밴드 위. 페이지의 리듬을 만드는 구간 ── */
.why{display:grid;gap:var(--sp6)}
@media(min-width:820px){.why{grid-template-columns:1fr 1fr;gap:var(--sp7) var(--sp8)}}
.why>div{position:relative;padding-left:var(--sp5)}
.why>div::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:2px;
  background:var(--line);border-radius:2px;opacity:.65}
.why>div>.t{display:block;font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--navy-8)}
.why>div>.d{font-size:16px;line-height:1.85;color:var(--tx2);margin-top:var(--sp3);max-width:44ch}
/* 네이비 밴드 안에서 */
.sec.dark .why>div::before{background:var(--gold-on-navy);opacity:.85}
.sec.dark .why>div>.t{color:#fff}
.sec.dark .why>div>.d{color:rgba(255,255,255,.74)}

/* ── 세무 일정 ──────────────────────────────────────────────────── */
.cal{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg);box-shadow:var(--sh1)}
.cal .hdr{display:flex;align-items:baseline;gap:var(--sp3);flex-wrap:wrap;
  padding:var(--sp5);background:var(--surface);border-bottom:1px solid var(--line)}
.cal .hdr .m{font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--navy)}
.cal ol>li{display:grid;grid-template-columns:76px 1fr;gap:var(--sp4);
  padding:var(--sp4) var(--sp5);border-top:1px solid var(--line-s)}
.cal ol>li:first-child{border-top:0}
.cal .day{font-weight:700;font-size:15px;color:var(--navy);letter-spacing:-.01em}
.cal .day small{display:block;font-size:11.5px;font-weight:500;color:var(--tx3);letter-spacing:.02em}
.cal .ttl{font-size:16.5px;font-weight:700;letter-spacing:-.024em;color:var(--navy-8)}
.cal .who{font-size:13.5px;color:var(--tx2);margin-top:2px}
.cal .soon{background:var(--surface)}
.cal .soon .day{color:var(--gold-d)}
.cal .empty{padding:var(--sp6) var(--sp5);color:var(--tx2);font-size:15px}

/* ── 상담 폼 ────────────────────────────────────────────────────── */
.cta2{display:grid;gap:var(--sp7)}
@media(min-width:1000px){.cta2{grid-template-columns:1.06fr 1fr;gap:var(--sp8)}}
.field{margin-bottom:var(--sp4)}
.field>label{display:block;font-size:14px;font-weight:600;margin-bottom:7px}
.field .req{color:var(--bad);margin-left:2px}
.field input,.field select,.field textarea{
  width:100%;min-height:50px;padding:12px 14px;font-size:16px;
  background:var(--bg);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r2);
  transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease)}
.field textarea{min-height:128px;resize:vertical;line-height:1.7}
.field input::placeholder,.field textarea::placeholder{color:var(--tx3)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--tx3)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--navy);box-shadow:0 0 0 3px rgba(47,109,246,.14)}
.field[data-bad] input,.field[data-bad] select,.field[data-bad] textarea{border-color:var(--bad)}
.err{display:none;margin-top:6px;font-size:13.5px;color:var(--bad)}
.field[data-bad] .err{display:block}
.row2{display:grid;gap:var(--sp4)}
@media(min-width:560px){.row2{grid-template-columns:1fr 1fr}}
.check{display:flex;gap:11px;align-items:flex-start;font-size:14px;line-height:1.6}
.check input{width:19px;height:19px;min-height:0;margin-top:2px;flex:none;accent-color:var(--navy)}
.check a{text-decoration:underline;text-underline-offset:3px;color:var(--navy)}
.formnote{padding:var(--sp4);background:var(--surface);border-radius:var(--r3);
  font-size:14px;line-height:1.72;color:var(--tx2);margin-bottom:var(--sp5)}
.formnote b{color:var(--ink)}
.formstatus{margin-top:var(--sp4);font-size:14.5px}
.formstatus[data-t=ok]{color:var(--ok)}
.formstatus[data-t=bad]{color:var(--bad)}

/* 연락 수단 목록 */
.ways>li{display:grid;grid-template-columns:auto 1fr;gap:var(--sp4);
  padding:var(--sp4) 0;border-top:1px solid var(--line)}
.ways>li:first-child{border-top:0;padding-top:0}
.ways .ic{width:21px;height:21px;margin-top:4px;stroke:var(--navy-4);stroke-width:1.5;
  fill:none;stroke-linecap:round;stroke-linejoin:round}
.ways .k{font-size:13px;color:var(--tx3);letter-spacing:.03em}
.ways .v{font-size:17px;font-weight:650;letter-spacing:-.015em}
.ways .v a:hover{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.ways .n{font-size:13.5px;color:var(--tx2);margin-top:2px}

/* ── 아코디언 ───────────────────────────────────────────────────── */
.acc>div{border-top:1px solid var(--line)}
.acc>div:last-child{border-bottom:1px solid var(--line)}
.acc button{display:flex;width:100%;gap:var(--sp4);align-items:flex-start;
  padding:var(--sp5) 0;text-align:left;font-size:16.5px;font-weight:600;letter-spacing:-.014em}
.acc button .pm{margin-left:auto;flex:none;width:17px;height:17px;margin-top:5px;
  stroke:var(--tx3);stroke-width:1.7;fill:none;transition:transform var(--base) var(--ease)}
.acc button[aria-expanded=true]{color:var(--navy)}
.acc button[aria-expanded=true] .pm{transform:rotate(45deg);stroke:var(--navy)}
.acc .body{display:none;padding:0 0 var(--sp5);color:var(--tx2);
  font-size:15.5px;line-height:1.82;max-width:66ch}
.acc .body[data-open]{display:block}

/* ── 자리표시자 · 주석 ───────────────────────────────────────────── */
/* 확인되지 않은 값 표시.
   지어낸 값을 싣지 않기 위한 장치라 없앨 수는 없다.
   다만 회색 블록이 화면에 흩어지면 완성도가 즉시 떨어지므로
   배경을 빼고 아주 옅은 밑줄만 남긴다. 자리는 알아보되 튀지는 않게. */
.todo{display:inline;color:var(--tx3);padding-bottom:1px;
  border-bottom:1px dashed rgba(126,135,148,.45)}
.note{padding:var(--sp4) var(--sp5);background:var(--surface);border-radius:var(--r3);
  font-size:14px;line-height:1.7;color:var(--tx2);max-width:72ch}
.note b{color:var(--ink)}

/* ── 푸터 ───────────────────────────────────────────────────────── */
.ft{background:var(--surface);border-top:1px solid var(--line);
  padding:var(--sp8) 0 var(--sp7);font-size:14px;line-height:1.78;color:var(--tx2)}
.ft .cols{display:grid;gap:var(--sp6)}
@media(min-width:860px){.ft .cols{grid-template-columns:1.5fr 1fr 1fr;gap:var(--sp8)}}
.ft .brand{color:var(--navy);margin-bottom:var(--sp3)}
.ft h4{font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--ink);margin-bottom:var(--sp3)}
.ft li{margin-bottom:7px}
.ft a:hover{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.ft .legal{margin-top:var(--sp7);padding-top:var(--sp5);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:var(--sp3) var(--sp5);font-size:13px;color:var(--tx3)}
.ft .legal a{font-weight:600;color:var(--tx2)}
.ft .biz{margin-bottom:var(--sp3)}
.ft .biz span{margin-right:var(--sp4);white-space:nowrap}

/* ── 모바일 하단 고정 바 ────────────────────────────────────────── */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;
  grid-template-columns:repeat(3,1fr);background:var(--bg);
  border-top:1px solid var(--line);box-shadow:0 -2px 14px rgba(15,44,76,.09);
  padding-bottom:env(safe-area-inset-bottom)}
@media(min-width:1024px){.bar{display:none}}
.bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;min-height:58px;font-size:12px;font-weight:600;color:var(--tx2)}
.bar a svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.bar a+a{border-left:1px solid var(--line)}
.bar a.pri{background:var(--gold);color:#fff}
/* 하단 고정 바가 본문을 가리지 않도록 자리를 비운다 */
body{padding-bottom:58px}
@media(min-width:1024px){body{padding-bottom:0}}

/* ── PC 우측 퀵 ─────────────────────────────────────────────────
   상단 상담 CTA 와 동시에 강하면 영업적으로 읽힌다.
   평소에는 거의 보이지 않게 두고, 가리키면 그때 또렷해진다. */
.quick{display:none}
@media(min-width:1100px){
  .quick{display:flex;flex-direction:column;position:fixed;right:16px;bottom:22px;z-index:45;
    background:rgba(255,255,255,.82);backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border:1px solid var(--line-s);border-radius:10px;overflow:hidden;
    box-shadow:0 1px 3px rgba(15,44,76,.05);
    opacity:.62;transition:opacity var(--base) var(--ease),box-shadow var(--base) var(--ease)}
  .quick:hover{opacity:1;box-shadow:0 2px 6px rgba(15,44,76,.07),0 14px 34px rgba(15,44,76,.10)}
  .quick a,.quick button{display:grid;place-items:center;gap:3px;width:58px;padding:12px 0;
    font-size:10px;font-weight:600;letter-spacing:-.01em;color:var(--tx3);
    transition:background var(--fast) var(--ease),color var(--fast) var(--ease)}
  .quick a+a,.quick a+button{border-top:1px solid var(--line-s)}
  .quick a:hover,.quick button:hover{background:var(--surface);color:var(--navy)}
  .quick svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.6;fill:none;
    stroke-linecap:round;stroke-linejoin:round}
  .quick .top{opacity:0;pointer-events:none;transition:opacity var(--base) var(--ease)}
  .quick.scrolled .top{opacity:1;pointer-events:auto}
}

/* ── 등장 ───────────────────────────────────────────────────────── */
.rise{opacity:0;transform:translateY(14px)}
.rise.in{opacity:1;transform:none;
  transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .rise{opacity:1;transform:none}
}

/* ── 목록 — 밋밋한 대시 대신 잡히는 항목으로 ────────────────── */
.chk{max-width:70ch;display:grid;gap:9px}
.chk>li{position:relative;padding:14px 16px 14px 46px;font-size:16px;line-height:1.7;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r2)}
.chk>li::before{content:"";position:absolute;left:17px;top:1.15em;
  width:13px;height:7px;border-left:2px solid var(--navy-4);border-bottom:2px solid var(--navy-4);
  transform:rotate(-45deg) translateY(-2px);border-radius:1px}
.sec.surf .chk>li{background:var(--bg)}

/* ── 절차 — 번호가 정보다. 순서를 눈으로 따라가게 한다. ───────── */
.steps{max-width:74ch;position:relative}
.steps>li{display:grid;grid-template-columns:auto 1fr;gap:var(--sp4);
  padding:0 0 var(--sp6);position:relative}
.steps>li:last-child{padding-bottom:0}
.steps>li::before{content:"";position:absolute;left:17px;top:34px;bottom:-2px;width:2px;
  background:linear-gradient(var(--line),var(--line));border-radius:2px}
.steps>li:last-child::before{display:none}
.steps .n{display:grid;place-items:center;width:36px;height:36px;flex:none;
  border-radius:99px;background:var(--navy);color:#fff;
  font-size:14px;font-weight:700;letter-spacing:-.01em;position:relative;z-index:1}
.steps .t{display:block;font-size:17.5px;font-weight:700;letter-spacing:-.018em;
  color:var(--navy-8);padding-top:6px}
.steps .d{font-size:15.5px;line-height:1.78;color:var(--tx2);margin-top:6px;max-width:56ch}

/* ── 표 — 좁은 화면에서 표만 흐른다. body 는 가로 스크롤하지 않는다. ── */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--r3);background:var(--bg)}
.tbl{min-width:540px;font-size:15.5px;border-collapse:collapse}
.tbl th,.tbl td{padding:15px var(--sp5);text-align:left;vertical-align:top}
.tbl thead th{background:var(--navy);color:#fff;
  font-size:12.5px;font-weight:700;letter-spacing:.05em;white-space:nowrap;
  padding-top:12px;padding-bottom:12px}
.tbl thead th:first-child{border-top-left-radius:calc(var(--r3) - 1px)}
.tbl thead th:last-child{border-top-right-radius:calc(var(--r3) - 1px)}
.tbl tbody tr{border-top:1px solid var(--line-s)}
.tbl tbody tr:nth-child(even){background:var(--surface)}
.tbl tbody th{font-weight:700;white-space:nowrap;color:var(--navy-8)}
.tbl td{color:var(--tx2);line-height:1.72}
.tbl tbody tr:hover{background:var(--surface2)}

/* ── 상담 유도 띠 ───────────────────────────────────────────── */
.ctabar{display:grid;gap:var(--sp5);align-items:center}
@media(min-width:840px){.ctabar{grid-template-columns:1fr auto;gap:var(--sp8)}}
.ctabar .lead{max-width:52ch}

/* ── 긴급 안내 (형사·조사처럼 시간이 걸린 사안) ─────────────────
   레드는 이 용도로만 쓴다. 다른 곳에 쓰면 신호가 죽는다. */
.alertbar{display:grid;gap:var(--sp4);align-items:center;
  padding:var(--sp5);border:1px solid var(--gold);border-radius:var(--r3);
  background:var(--surface)}
@media(min-width:760px){.alertbar{grid-template-columns:1fr auto}}
.alertbar .t{font-size:18px;font-weight:700;letter-spacing:-.018em}
.alertbar .d{font-size:15px;line-height:1.72;color:var(--tx2);margin-top:5px;max-width:56ch}

/* ── 구성원 ─────────────────────────────────────────────────── */
.mem{display:grid;gap:var(--sp5)}
@media(min-width:820px){.mem{grid-template-columns:repeat(3,1fr);gap:var(--sp6)}}
.mem>article{padding-top:var(--sp5);border-top:2px solid var(--navy)}
.mem .nm{font-size:19px;font-weight:700;letter-spacing:-.02em}
.mem .rl{font-size:14px;color:var(--gold-d);font-weight:600;margin-top:3px}

.mem .chk{margin-top:var(--sp3)}
.mem .chk>li{font-size:14.5px;padding:8px 0 8px 22px}
.mem .chk>li::before{top:.92em;width:10px}

/* ── 지도 자리 ──────────────────────────────────────────────── */
.mapbox{border:1px solid var(--line);border-radius:var(--r3);overflow:hidden}
.mapph{display:grid;place-items:center;gap:var(--sp3);text-align:center;
  padding:var(--sp9) var(--sp5);background:var(--surface);color:var(--tx2)}
.mapph svg{width:30px;height:30px;stroke:var(--navy-4);stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.mapph p{font-size:15px}
.mapph .addr{margin-top:var(--sp3);font-size:17px;font-weight:650;color:var(--ink)}

/* ── 관련 링크 묶음 ─────────────────────────────────────────── */
.lnks{display:flex;flex-wrap:wrap;gap:var(--sp3) var(--sp6)}

/* 코드 표기 — 문서 안에서 파일명을 가리킬 때만 */
code{font-family:ui-monospace,SFMono-Regular,"Cascadia Mono",Consolas,monospace;
  font-size:.92em;padding:1px 5px;background:var(--surface2);border-radius:var(--r2)}

/* ── 인쇄 ───────────────────────────────────────────────────────
   상담 자료를 뽑아 가시는 경우가 있다. 네비게이션은 종이에서 쓸모없다. */
@media print{
  .util,.hd,.drawer,.bar,.quick,.skip,.ctabar .btns,.btns{display:none!important}
  body{padding-bottom:0;font-size:11pt;line-height:1.6;color:#000;background:#fff}
  .sec{padding:16pt 0}
  .sec.surf{background:transparent}
  .wrap{max-width:none;padding:0}
  .rise{opacity:1!important;transform:none!important}
  a{color:#000;text-decoration:underline}
  .hero{background:transparent;color:#000}
  .hero .d1,.hero .lead,.hero .foot{color:#000}
  .hero::after{display:none}
  .acc .body{display:block!important}
  .tbl,.split,.svc{break-inside:avoid}
  .ft{border-top:1pt solid #000;background:transparent}
}

/* ── 검토용 초안 띠 ─────────────────────────────────────────────
   REVIEW=1 로 빌드했을 때만 붙는다. 오픈 빌드에는 존재하지 않는다. */
/* 헤더가 이미 sticky 다. 여기까지 sticky 로 두면 둘이 겹쳐 쌓인다. */
.draft{position:relative;z-index:60;background:var(--bad);color:#fff;
  font-size:13px;line-height:1.45;padding:9px 18px;text-align:center;
  letter-spacing:-.012em}
.draft b{font-weight:700}
.draft .long{display:none}
@media(min-width:760px){.draft{font-size:13.5px}.draft .long{display:inline}}
@media print{.draft{display:none}}

/* ── 히어로 진입 ─────────────────────────────────────────────────
   이 페이지에서 연출은 여기 하나다. 섹션마다 같은 효과를 반복하지 않는다.
   이미 보이는 상태에서 시작해, 자바스크립트가 죽어도 내용이 사라지지 않는다. */
.st{opacity:0;transform:translateY(18px);filter:blur(5px)}
.js .st{animation:rise .82s var(--ease) var(--d,0ms) both}
@keyframes rise{
  from{opacity:0;transform:translateY(18px);filter:blur(5px)}
  to{opacity:1;transform:none;filter:none}
}
html:not(.js) .st{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){
  .st,.js .st{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}
}

/* ── 상담 섹션 — 회색 면 위에 흰 카드로 띄운다 ─────────────────── */
.cta2>div:first-child{background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r3);box-shadow:var(--sh1);padding:var(--sp6)}
@media(min-width:768px){.cta2>div:first-child{padding:var(--sp7)}}
.cta2>div:first-child .sec-head{margin-bottom:var(--sp5)}
.cta2>div:first-child .sec-head::before{display:none}

/* 연락 수단 — 아이콘에 면을 준다 */
.ways .ic{width:38px;height:38px;padding:9px;margin-top:0;border-radius:var(--r2);
  background:var(--bg);border:1px solid var(--line);box-sizing:border-box;
  stroke:var(--navy-4);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ways>li{align-items:start;padding:var(--sp5) 0}

/* ── 서브페이지 첫 구간 — 빈 흰 면으로 시작하지 않는다 ──────────── */
.sec.tight:first-of-type{background:linear-gradient(180deg,var(--surface),var(--bg));
  border-bottom:1px solid var(--line);padding-bottom:var(--sp7)}
.sec.tight:first-of-type .h1{color:var(--navy-8)}
main>.sec.tight:first-of-type .cap a{color:var(--navy);font-weight:600}

/* ── 입지 개념도 — 지도가 아니라 관계도. 이 사무소만 쓸 수 있는 그림. ── */
.map{border:1px solid var(--line);border-radius:var(--r3);background:var(--bg);
  overflow:hidden;box-shadow:var(--sh1)}
.map svg{display:block;width:100%;height:auto;
  background:linear-gradient(180deg,var(--surface),var(--bg))}
.map .blk{fill:var(--bg);stroke:var(--line);stroke-width:1.5}
.map .blk.sta{fill:var(--surface2);stroke:var(--line)}
.map .blk.me{fill:var(--navy);stroke:var(--navy)}
.map .lbl{fill:var(--navy-8);font-size:14px;font-weight:700;text-anchor:middle;
  font-family:var(--font);letter-spacing:-.01em}
.map .lbl.me{fill:var(--gold-on-navy);font-size:13px;font-weight:600}
.map .me2{fill:#fff;font-size:17px;font-weight:800;text-anchor:middle;
  font-family:var(--font);letter-spacing:-.02em}
.map .sub{fill:var(--tx3);font-size:12px;text-anchor:middle;font-family:var(--font)}
.map .sub.me3{fill:rgba(255,255,255,.66)}
.map .rd{stroke:var(--line);stroke-width:26;stroke-linecap:round}
.map .rd-c{stroke:var(--bg);stroke-width:2;stroke-dasharray:14 12;stroke-linecap:round}
.map .pin-l{stroke:var(--gold);stroke-width:2.5;stroke-linecap:round}
.map .pin-d{fill:var(--gold)}
.map .road{fill:var(--tx3);font-size:12.5px;font-weight:600;font-family:var(--font);letter-spacing:.04em}
.mapnote{padding:var(--sp5);border-top:1px solid var(--line);
  display:grid;gap:7px;font-size:14.5px;color:var(--tx2)}
@media(min-width:760px){.mapnote{padding:var(--sp5) var(--sp6)}}
.mapnote b{display:inline-block;min-width:44px;color:var(--navy);font-weight:700;
  font-size:12.5px;letter-spacing:.04em}
.mapnote .dim{color:var(--tx3);font-size:13px}

/* ── 연간 세무 타임라인 ─────────────────────────────────────────
   12개월을 한 줄로 놓고 각 달의 기한을 점으로 찍는다.
   목록으로만 두면 읽어야 하지만, 이렇게 두면 한눈에 들어온다.
   세무사무소가 쓸 수 있는 고유한 그림이다. */
.tl{border:1px solid var(--line);border-radius:10px;background:var(--bg);
  box-shadow:var(--sh1);overflow:hidden}
.tl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.tl-grid{display:grid;grid-template-columns:repeat(12,minmax(96px,1fr));
  min-width:840px;padding:var(--sp5) var(--sp4) 0}
@media(min-width:900px){.tl-grid{min-width:0;padding:var(--sp6) var(--sp5) 0}}
.tl-m{position:relative;padding:0 5px 22px;text-align:center;border-left:1px solid var(--line-s)}
.tl-m:first-child{border-left:0}
.tl-m .mn{font-size:13px;font-weight:700;color:var(--tx3);letter-spacing:-.02em;
  padding-bottom:12px}
.tl-m.now .mn{color:var(--gold-d)}
.tl-m .dots{display:flex;flex-direction:column;gap:5px;align-items:stretch}
.tl-m .dot{display:block;height:26px;border-radius:5px;background:var(--surface2);
  border:1px solid var(--line);position:relative;cursor:default;
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease)}
.tl-m .dot em{position:absolute;inset:0;display:grid;place-items:center;
  font-style:normal;font-size:11px;font-weight:700;color:var(--tx2);
  font-variant-numeric:tabular-nums}
.tl-m .dot.big{background:var(--navy);border-color:var(--navy)}
.tl-m .dot.big em{color:#fff}
.tl-m .dot:hover{border-color:var(--gold)}
.tl-m.now{background:linear-gradient(180deg,rgba(138,106,47,.07),transparent)}
.tl-m.now::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--gold)}
.tl-legend{display:flex;flex-wrap:wrap;gap:var(--sp3) var(--sp5);align-items:center;
  padding:var(--sp4) var(--sp5);border-top:1px solid var(--line);
  font-size:13.5px;color:var(--tx2);background:var(--surface)}
.tl-legend .sw{display:inline-flex;align-items:center;gap:7px}
.tl-legend i{width:15px;height:15px;border-radius:4px;background:var(--surface2);
  border:1px solid var(--line);display:inline-block}
.tl-legend i.big{background:var(--navy);border-color:var(--navy)}
.tl-legend .sp{margin-left:auto}

/* ── 1분 세무 진단 ─────────────────────────────────────────────
   읽는 것을 쓰는 것으로 바꾼다. 세 번 누르면 어디를 봐야 하는지 나온다.
   결과는 어느 업무분야인지만 안내한다 — 세액이나 결과를 예측하지 않는다. */
.dx{border:1px solid var(--line);border-radius:12px;background:var(--bg);
  box-shadow:var(--sh1);overflow:hidden}
.dx-bar{display:flex;align-items:center;gap:14px;padding:16px 22px;
  border-bottom:1px solid var(--line);background:var(--surface)}
.dx-bar .st{flex:1;height:5px;border-radius:99px;background:var(--surface2);overflow:hidden}
.dx-bar .st i{display:block;height:100%;width:0;background:var(--gold);
  border-radius:99px;transition:width .45s var(--ease)}
.dx-bar .c{font-size:12.5px;font-weight:700;letter-spacing:.03em;color:var(--tx3);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.dx-body{padding:var(--sp6) var(--sp5)}
@media(min-width:768px){.dx-body{padding:44px 40px}}
.dx-q{font-size:clamp(20px,2.2vw,26px);font-weight:750;letter-spacing:-.032em;
  color:var(--navy-8);line-height:1.35;text-wrap:balance}
.dx-opts{display:grid;gap:10px;margin-top:26px}
@media(min-width:640px){.dx-opts{grid-template-columns:1fr 1fr}}
.dx-opts button{display:block;text-align:left;padding:18px 20px;border-radius:8px;
  border:1px solid var(--line);background:var(--bg);
  transition:border-color var(--fast) var(--ease),background var(--fast) var(--ease),
             transform var(--fast) var(--ease)}
.dx-opts button:hover{border-color:var(--navy);background:var(--surface);transform:translateY(-1px)}
.dx-opts button .t{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.026em;color:var(--navy-8)}
.dx-opts button .d{display:block;font-size:13.5px;color:var(--tx2);margin-top:4px;line-height:1.55}
.dx-back{margin-top:22px;font-size:14px;font-weight:600;color:var(--tx3)}
.dx-back:hover{color:var(--navy);text-decoration:underline;text-underline-offset:3px}

/* 결과 */
.dx-res .k{font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--navy)}
.dx-res .t{font-size:clamp(22px,2.4vw,30px);font-weight:750;letter-spacing:-.034em;
  color:var(--navy-8);margin-top:10px;line-height:1.3}
.dx-res .d{font-size:16.5px;line-height:1.78;color:var(--tx2);margin-top:14px;max-width:56ch}
.dx-res .prep{margin-top:26px;padding:20px 22px;background:var(--surface);border-radius:8px}
.dx-res .prep h4{font-size:12.5px;font-weight:700;letter-spacing:.05em;color:var(--navy);margin-bottom:12px}
.dx-res .prep li{position:relative;padding:5px 0 5px 20px;font-size:15px;color:var(--tx2)}
.dx-res .prep li::before{content:"";position:absolute;left:0;top:1.05em;width:9px;height:1px;background:var(--navy-4)}
.dx-res .note{margin-top:18px;font-size:14.5px;line-height:1.7;color:var(--tx2)}
.dx-res .btns{margin-top:28px}

/* ── 계산기 ─────────────────────────────────────────────────────
   세무사무소가 줄 수 있는 가장 실용적인 도구다.
   다만 참고용이라는 점을 결과 옆에 계속 붙여 둔다 — 실제 세액은 사실관계를 봐야 한다. */
.calc{border:1px solid var(--line);border-radius:12px;background:var(--bg);
  box-shadow:var(--sh1);overflow:hidden}
.calc-tabs{display:flex;gap:2px;padding:6px;background:var(--surface);
  border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.calc-tabs::-webkit-scrollbar{display:none}
.calc-tabs button{flex:1 0 auto;padding:12px 18px;border-radius:7px;white-space:nowrap;
  font-size:15px;font-weight:700;letter-spacing:-.024em;color:var(--tx2);
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease)}
.calc-tabs button:hover{color:var(--navy)}
.calc-tabs button[aria-selected=true]{background:var(--bg);color:var(--navy-8);
  box-shadow:0 1px 2px rgba(15,44,76,.07)}
.calc-body{display:grid;gap:0}
@media(min-width:900px){.calc-body{grid-template-columns:1fr 1fr}}
.calc-in{padding:var(--sp6) var(--sp5)}
@media(min-width:768px){.calc-in{padding:36px 34px}}
.calc-out{padding:var(--sp6) var(--sp5);background:var(--surface);
  border-top:1px solid var(--line)}
@media(min-width:900px){.calc-out{border-top:0;border-left:1px solid var(--line);padding:36px 34px}}
.calc-in .field{margin-bottom:18px}
.calc-in .field:last-child{margin-bottom:0}
.calc-in .hint{font-size:13px;color:var(--tx3);margin-top:6px;line-height:1.55}
.calc-sum{font-size:12.5px;font-weight:700;letter-spacing:.05em;color:var(--tx3)}
.calc-big{display:flex;align-items:baseline;gap:7px;margin-top:10px;
  color:var(--navy-8);letter-spacing:-.045em}
.calc-big em{font-style:normal;font-size:clamp(30px,3.6vw,42px);font-weight:800;
  font-variant-numeric:tabular-nums;line-height:1}
.calc-big span{font-size:17px;font-weight:700}
.calc-rows{margin-top:26px;border-top:1px solid var(--line)}
.calc-rows>div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--line-s);font-size:15px}
.calc-rows>div:last-child{border-bottom:0}
.calc-rows .k{color:var(--tx2)}
.calc-rows .v{font-weight:700;color:var(--navy-8);font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;white-space:nowrap}
.calc-rows>div.tot{border-top:1px solid var(--navy);border-bottom:0;margin-top:6px;padding-top:14px}
.calc-rows>div.tot .k{color:var(--navy-8);font-weight:700}
.calc-rows>div.tot .v{font-size:17px}
.calc-note{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);
  font-size:13.5px;line-height:1.7;color:var(--tx3)}
.calc-note b{color:var(--tx2)}
.calc-cta{margin-top:22px}