:root{
    --ink:#0B0C0E;
    --paper:#FFFFFF;
    --fog:#F4F5F7;
    --line:#E4E6EA;
    --gray:#7A8089;
    --blue-1:#54C2F0;
    --blue-2:#1663C7;
    --grad:linear-gradient(135deg,var(--blue-1) 0%,var(--blue-2) 100%);
    --maxw:1060px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    font-family:"Pretendard Variable",Pretendard,-apple-system,"Malgun Gothic",sans-serif;
    color:var(--ink);background:var(--paper);
    line-height:1.65;font-size:17px;
    -webkit-font-smoothing:antialiased;
    word-break:keep-all;
  }
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
  .wordmark{font-family:Poppins,sans-serif;font-weight:800;letter-spacing:.01em;
    background:linear-gradient(180deg,var(--blue-1),var(--blue-2));
    -webkit-background-clip:text;background-clip:text;color:transparent;}
  .eyebrow{display:inline-block;font-size:14px;font-weight:700;letter-spacing:.14em;
    color:var(--blue-2);text-transform:uppercase;margin-bottom:14px}
  /* 시그니처: 칠판 밑줄 — 강사 출신이라는 정체성을 시각 언어로 */
  .chalk{position:relative;white-space:nowrap}
  .chalk svg{position:absolute;left:-2%;bottom:-.14em;width:104%;height:.34em;z-index:-1}
  .chalk svg path{stroke:url(#chalkgrad);stroke-width:7;fill:none;stroke-linecap:round;
    stroke-dasharray:300;stroke-dashoffset:300;transition:stroke-dashoffset 1.1s ease .35s}
  .revealed .chalk svg path{stroke-dashoffset:0}

  /* ---------- Header ---------- */
  header{position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);z-index:50}
  .nav{display:flex;align-items:center;justify-content:space-between;height:60px}
  .nav .wordmark{font-size:19px}
  .nav a.cta{font-size:15px;font-weight:700;color:#fff;background:var(--ink);
    padding:10px 20px;border-radius:99px;text-decoration:none;transition:opacity .2s}
  .nav a.cta:hover{opacity:.8}

  /* ---------- Hero ---------- */
  .hero{padding:88px 0 76px;border-bottom:1px solid var(--line)}
  .hero h1{font-size:clamp(36px,8.5vw,54px);font-weight:800;line-height:1.28;
    letter-spacing:-.02em;margin-bottom:26px}
  .hero p.lead{font-size:clamp(18px,4.6vw,21px);color:var(--gray);max-width:560px;margin-bottom:38px}
  .hero p.lead strong{color:var(--ink);font-weight:700}
  .btns{display:flex;gap:12px;flex-wrap:wrap}
  .btn{display:inline-flex;align-items:center;gap:8px;font-size:17.5px;font-weight:700;
    padding:16px 30px;border-radius:12px;text-decoration:none;transition:transform .15s,opacity .2s}
  .btn:active{transform:scale(.97)}
  .btn-primary{color:#fff;background:var(--grad);box-shadow:0 6px 18px rgba(22,99,199,.25)}
  .btn-ghost{color:var(--ink);background:var(--paper);border:1.5px solid var(--ink)}
  .btn:hover{opacity:.88}
  .hero .badges{display:flex;gap:22px;margin-top:44px;flex-wrap:wrap}
  .hero .badges span{font-size:15.5px;color:var(--gray)}
  .hero .badges b{color:var(--ink)}

  /* ---------- 킬러 문장 (명조 인용) ---------- */
  .pull{font-family:"Noto Serif KR",serif;font-weight:600;
    font-size:clamp(24px,5.8vw,30px);line-height:1.5;letter-spacing:-.01em}
  .pull .q{color:var(--blue-2)}

  /* ---------- Sections ---------- */
  section{padding:84px 0}
  section h2{font-size:clamp(28px,6.8vw,36px);font-weight:800;letter-spacing:-.02em;
    line-height:1.35;margin-bottom:14px}
  section p.sub{font-size:18px;color:var(--gray);max-width:600px;margin-bottom:48px}

  /* 차별화 */
  .why{background:var(--ink);color:var(--paper)}
  .why .eyebrow{color:var(--blue-1)}
  .why p.sub{color:#A6ABB3}
  .why .pull{margin:0 0 54px;color:#fff}
  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
  .why .card h3{font-size:19px;font-weight:700;margin-bottom:10px}
  .why .card p{font-size:15px;color:#A6ABB3;line-height:1.7}
  .why .card .no{font-family:Poppins,sans-serif;font-weight:700;font-size:13px;
    letter-spacing:.1em;color:var(--blue-1);display:block;margin-bottom:14px}
  .why .profile{display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:center}
  .why .profile .photo{width:100%;height:auto;border-radius:18px;display:block}
  .why .profile h3{font-size:25px;font-weight:800;margin-bottom:10px}
  .why .profile p{font-size:18px;color:#A6ABB3;margin-bottom:28px}
  img.photo{width:100%;height:auto;border-radius:18px;display:block}
  @media (max-width:820px){
    .why .profile{grid-template-columns:1fr;gap:28px}
    .why .profile .photo{max-width:280px}
  }

  /* 전문분야 */
  .fields .list{display:grid;gap:0;border-top:1.5px solid var(--ink)}
  .field{display:grid;grid-template-columns:190px 1fr;gap:20px;
    padding:34px 4px;border-bottom:1px solid var(--line)}
  .field h3{font-size:23px;font-weight:800}
  .field h3 small{display:block;font-family:Poppins,sans-serif;font-size:13px;font-weight:700;
    letter-spacing:.1em;color:var(--blue-2);margin-bottom:6px}
  .field p{font-size:17.5px;color:#4A4F57;line-height:1.75}
  .field .kill{font-family:"Noto Serif KR",serif;font-weight:600;color:var(--ink);
    margin-top:10px;font-size:19px}
  .field .kill::before{content:"“";color:var(--blue-2)}
  .field .kill::after{content:"”";color:var(--blue-2)}

  /* 프로세스 */
  .process{background:var(--fog)}
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:step}
  .step{background:var(--paper);border:1px solid var(--line);border-radius:16px;
    padding:26px 22px;position:relative}
  .step::before{counter-increment:step;content:counter(step,decimal-leading-zero);
    font-family:Poppins,sans-serif;font-weight:800;font-size:15px;
    background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
    display:block;margin-bottom:12px}
  .step h3{font-size:19px;font-weight:700;margin-bottom:8px}
  .step p{font-size:16px;color:var(--gray);line-height:1.65}

  /* 상담 CTA */
  .contact{text-align:center;padding:100px 0}
  .contact h2{margin-bottom:18px}
  .contact p.sub{margin:0 auto 40px}
  .contact .btns{justify-content:center}
  .contact .note{margin-top:26px;font-size:15px;color:var(--gray)}

  footer{border-top:1px solid var(--line);padding:40px 0 60px;
    font-size:14.5px;color:var(--gray);line-height:1.9}
  footer .wordmark{font-size:16px;display:block;margin-bottom:10px}

  /* 스크롤 리빌 */
  .fx{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
  .fx.revealed{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){
    .fx{opacity:1;transform:none;transition:none}
    .chalk svg path{stroke-dashoffset:0;transition:none}
    html{scroll-behavior:auto}
  }
  a:focus-visible,button:focus-visible{outline:3px solid var(--blue-2);outline-offset:3px}

  /* ---------- 플로팅 CTA (우하단 고정) ---------- */
  .fab{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));
    display:flex;flex-direction:column;gap:12px;z-index:90}
  .fab a{display:flex;align-items:center;justify-content:center;width:56px;height:56px;
    border-radius:50%;text-decoration:none;box-shadow:0 8px 24px rgba(11,12,14,.22);
    transition:transform .18s ease}
  .fab a:hover{transform:translateY(-3px)}
  .fab a:active{transform:scale(.95)}
  .fab a svg{width:24px;height:24px;fill:#fff}
  .fab .f-consult{background:var(--grad)}
  .fab .f-call{background:var(--ink)}
  .fab a span{position:absolute;right:66px;background:var(--ink);color:#fff;
    font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:8px;white-space:nowrap;
    opacity:0;pointer-events:none;transition:opacity .2s}
  .fab a:hover span,.fab a:focus-visible span{opacity:1}
  @media (max-width:480px){.fab a span{display:none}}

  @media (max-width:820px){
    .grid3{grid-template-columns:1fr;gap:30px}
    .steps{grid-template-columns:repeat(2,1fr)}
    .field{grid-template-columns:1fr;gap:8px;padding:28px 2px}
    section{padding:64px 0}
    .hero{padding:64px 0 56px}
  }
  @media (max-width:480px){
    .steps{grid-template-columns:1fr}
    .btn{width:100%;justify-content:center}
  }

  /* ================================================================
     서브페이지 공통 (academy / vat / inheritance / realestate)
     ================================================================ */
  .nav .links{display:flex;gap:22px;align-items:center;margin-left:auto;margin-right:24px}
  .nav .links a{font-size:15.5px;font-weight:600;color:#4A4F57;text-decoration:none;
    white-space:nowrap;transition:color .2s}
  .nav .links a:hover,.nav .links a[aria-current="page"]{color:var(--blue-2)}
  @media (max-width:820px){.nav .links{display:none}}

  .crumb{font-size:14.5px;color:var(--gray);padding:20px 0 0}
  .crumb a{color:var(--gray);text-decoration:none}
  .crumb a:hover{color:var(--blue-2)}

  .sub-hero{padding:56px 0 64px;border-bottom:1px solid var(--line)}
  .sub-hero h1{font-size:clamp(32px,7.4vw,46px);font-weight:800;line-height:1.3;
    letter-spacing:-.02em;margin-bottom:22px}
  .sub-hero p.lead{font-size:clamp(17.5px,4.4vw,20px);color:#4A4F57;max-width:620px;margin-bottom:34px}

  /* 고민 목록 */
  .pains{background:var(--fog)}
  .pain-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:8px}
  .pain{background:var(--paper);border:1px solid var(--line);border-radius:14px;
    padding:22px 24px;font-size:17px;line-height:1.7;color:#33373D}
  .pain b{color:var(--ink);font-weight:700}
  @media (max-width:820px){.pain-list{grid-template-columns:1fr}}

  /* 하는 일 */
  .does .item{display:grid;grid-template-columns:56px 1fr;gap:22px;
    padding:30px 4px;border-bottom:1px solid var(--line)}
  .does .item:first-of-type{border-top:1.5px solid var(--ink)}
  .does .item .n{font-family:Poppins,sans-serif;font-weight:800;font-size:15px;
    background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
    padding-top:4px}
  .does .item h3{font-size:21px;font-weight:800;margin-bottom:8px}
  .does .item p{font-size:17px;color:#4A4F57;line-height:1.75}
  @media (max-width:820px){
    .does .item{grid-template-columns:1fr;gap:6px;padding:26px 2px}
    .does .item .n{padding-top:0}
  }

  /* 관련 글 */
  .reads .list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:8px}
  .reads a{display:block;border:1px solid var(--line);border-radius:14px;padding:20px 22px;
    text-decoration:none;color:var(--ink);transition:border-color .2s,transform .15s}
  .reads a:hover{border-color:var(--blue-2);transform:translateY(-2px)}
  .reads a .t{font-size:17px;font-weight:700;line-height:1.55;display:block;margin-bottom:6px}
  .reads a .m{font-size:14.5px;color:var(--gray)}
  @media (max-width:820px){.reads .list{grid-template-columns:1fr}}

  /* 서브페이지 하단 CTA */
  .sub-cta{background:var(--ink);color:var(--paper);text-align:center}
  .sub-cta .pull{color:#fff;margin-bottom:16px}
  .sub-cta p.sub{color:#A6ABB3;margin:0 auto 36px}
  .sub-cta .btns{justify-content:center}
  .sub-cta .btn-ghost{color:#fff;background:transparent;border-color:#fff}

  /* 다른 분야 바로가기 */
  .others .list{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:8px}
  .others a{display:block;border:1px solid var(--line);border-radius:14px;padding:22px 20px;
    text-decoration:none;color:var(--ink);transition:border-color .2s,transform .15s}
  .others a:hover{border-color:var(--blue-2);transform:translateY(-2px)}
  .others a small{display:block;font-family:Poppins,sans-serif;font-size:12px;font-weight:700;
    letter-spacing:.1em;color:var(--blue-2);margin-bottom:8px}
  .others a b{font-size:18px;font-weight:800}
  @media (max-width:820px){.others .list{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:480px){.others .list{grid-template-columns:1fr}}

  /* 기본 서비스 (index 하단 — 기장·부가세) */
  .basic{background:var(--fog)}
  .basic .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
  .basic .b-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:26px 24px}
  .basic .b-card h3{font-size:19px;font-weight:700;margin-bottom:8px}
  .basic .b-card p{font-size:16px;color:var(--gray);line-height:1.7}
  .basic .more{margin-top:28px}
  @media (max-width:820px){.basic .grid{grid-template-columns:1fr}}

  /* 전문분야 카드 → 서브페이지 링크 */
  .fieldlink{display:inline-block;margin-top:14px;font-size:16px;font-weight:700;
    color:var(--blue-2);text-decoration:none}
  .fieldlink:hover{text-decoration:underline}