@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css');

/* ============================================================
   진 세무회계 — 공통 스타일
   색을 바꾸고 싶으면 아래 :root 안의 값만 고치세요.
   ============================================================ */
/* ------------------------------------------------------------
   색은 브랜드 가이드(진세무회계02_수정.ai)의 공식 지정색입니다.
     주황 C0 M40 Y100 K0   #FFA32B
     보라파랑 C60 M45 Y0 K0 #5F8AC9   ← 사이트 주색
     청록 C75 M10 Y30 K0   #33B5B9
     먹   K100            #2C2E35

   주색을 청록에서 파랑으로 바꾼 이유
   ------------------------------------------------------------
   로고 이미지를 픽셀 단위로 세어보니 면적이 이랬습니다.
     파랑 6,262px  >  주황 2,838px  >  청록 1,194px
   파랑이 로고의 주인공인데 사이트는 청록을 쓰고 있었습니다.
   또 카톡 노랑(#FEE500, 색상환 54°)과의 각도가
     청록 128° (애매해서 부딪힘)  →  파랑 165° (거의 보색)
   이라 카톡 버튼 옆에 나란히 놓았을 때도 파랑이 낫습니다.
   ------------------------------------------------------------ */
:root{
  --bg:        #FFFFFF;
  --surface:   #FFFFFF;
  --surface-2: #F7F7F9;   /* 섹션을 번갈아 칠하는 아주 옅은 회색 */
  --ink:       #2C2E35;   /* 본문 글자 — 브랜드 먹색 */
  --ink-2:     #575B66;   /* 보조 글자 */
  --muted:     #8E9199;   /* 흐린 글자 */
  --line:      #E5E6EA;   /* 선 */
  --line-2:    #F0F0F3;

  --dark:      #2C2E35;   /* 어두운 섹션 — 브랜드 먹색 그대로 */
  --dark-2:    #212329;
  --dark-3:    #3A3D46;
  --on-dark:   #A9ACB6;   /* 어두운 배경 위 보조 글자 */

  --brand:      #5F8AC9;  /* 로고 파랑 — 그래픽·선·아이콘 */
  --brand-ink:  #2F5AA8;  /* 글자와 버튼용 (흰 글씨 대비 6.7:1) */
  --brand-dark: #254A8C;  /* 버튼 호버 */
  --brand-lit:  #8FB4E8;  /* 어두운 배경 위 (먹색 대비 6.4:1) */
  --brand-soft: #EAF0FA;

  /* 파랑이 주색이 되었으므로, 보조 자리는 로고 청록이 맡습니다.
     (이 값을 #5F8AC9 로 되돌리면 예전처럼 파랑 계열로만 갑니다) */
  --peri:       #33B5B9;  /* 로고 청록 — 보조 */
  --peri-soft:  #E7F4F4;

  --accent:     #FFA32B;  /* 로고 주황 — 강조 */
  --accent-ink: #8A4B00;  /* 주황 계열 글자 */
  --accent-soft:#FFF4E6;

  --kakao:      #FEE500;
  --kakao-ink:  #191600;

  --radius:   16px;
  --radius-s: 10px;
  --radius-b: 8px;        /* 버튼 */
  --maxw: 1160px;

  /* 그림자는 거의 쓰지 않습니다. 카드는 실선 1px 로 구분합니다. */
  --shadow:    none;
  --shadow-lg: 0 24px 60px -20px rgba(44,46,53,.28);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,
              system-ui,'Malgun Gothic',sans-serif;
  background:var(--bg); color:var(--ink);
  font-size:17px; line-height:1.7; letter-spacing:-.015em;
  word-break:keep-all; overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
/* hidden 이 붙은 것은 어떤 규칙보다 우선해서 숨깁니다 (표 줄 등이 다른 규칙에 밀려 보이는 일 방지) */
[hidden]{ display:none !important; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-weight:800; letter-spacing:-.035em; line-height:1.25; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.narrow{ max-width:860px; }
.mo-only{ display:none; }
.pc-only{ display:inline; }

/* ============================================================
   헤더
   ============================================================ */
.hd{
  position:sticky; top:0; z-index:80;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line-2);
}
.hd-in{ display:flex; align-items:center; gap:28px; height:72px; }
/* 로고는 브랜드 가이드의 공식 가로형 락업 이미지를 그대로 씁니다.
   글꼴을 흉내 내지 않고 원본을 쓰기 때문에 명함과 완전히 같은 모양입니다. */
.logo{ display:flex; align-items:center; flex:none; }
.logo img{ height:34px; width:auto; display:block; }

/* 푸터 로고 (흰색 판) */
.ft-logo{ margin-bottom:18px; }
.ft-logo img{ height:34px; width:auto; }
.nav{ display:flex; gap:4px; margin-left:auto; }
.nav a{
  padding:8px 13px; border-radius:var(--radius-b); font-size:15px; font-weight:600;
  color:var(--ink-2); transition:color .15s, background .15s;
}
.nav a:hover{ background:var(--surface-2); color:var(--ink); }
.nav a.on{ color:var(--ink); background:var(--surface-2); }
.hd-cta{
  margin-left:8px; padding:10px 18px; border-radius:var(--radius-b); border:0;
  background:var(--brand-ink); color:#fff; font-weight:700; font-size:14.5px;
  letter-spacing:-.02em; white-space:nowrap; transition:background .15s;
}
.hd-cta:hover{ background:var(--brand-dark); }
.burger{ display:none; margin-left:auto; width:42px; height:42px; border:1px solid var(--line);
  background:#fff; border-radius:var(--radius-b); align-items:center; justify-content:center; }
.burger i{ display:block; width:17px; height:1.5px; background:var(--ink); position:relative; }
.burger i::before,.burger i::after{ content:""; position:absolute; left:0; width:17px; height:1.5px; background:var(--ink); }
.burger i::before{ top:-5.5px; }
.burger i::after{ top:5.5px; }

.drawer{ position:fixed; inset:0; z-index:95; display:none; }
.drawer.open{ display:block; }
.drawer-bg{ position:absolute; inset:0; background:rgba(44,46,53,.55); }
.drawer-panel{
  position:absolute; top:0; right:0; width:min(300px,84vw); height:100%;
  background:#fff; padding:16px; overflow-y:auto; animation:slideIn .22s cubic-bezier(.22,.61,.36,1);
}
@keyframes slideIn{ from{ transform:translateX(100%); } to{ transform:none; } }
.drawer-top{ display:flex; align-items:center; margin-bottom:8px; }
.drawer-panel a{ display:block; padding:14px 12px; border-radius:var(--radius-b);
  font-weight:600; font-size:16.5px; }
.drawer-panel a.on{ background:var(--surface-2); }
.drawer-close{ margin-left:auto; width:40px; height:40px; border:0; background:none;
  font-size:26px; color:var(--ink-2); line-height:1; }

/* ============================================================
   버튼
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 26px; border-radius:var(--radius-b); border:0;
  font-weight:700; font-size:16px; letter-spacing:-.02em;
  transition:background .15s, color .15s, border-color .15s, transform .1s;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--brand-ink); color:#fff; }
.btn-primary:hover{ background:var(--brand-dark); }
.btn-brand{ background:var(--ink); color:#fff; }
.btn-brand:hover{ background:var(--dark); }
.btn-kakao{ background:var(--kakao); color:var(--kakao-ink); }
.btn-kakao:hover{ background:#F2DA00; }
.btn-ghost{ background:#fff; color:var(--ink); border:1px solid var(--line); }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-lg{ padding:18px 32px; font-size:17px; }
.btn-sm{ padding:11px 18px; font-size:14.5px; }
.on-dark .btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.28); }
.on-dark .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.06); }

/* ============================================================
   섹션
   ============================================================ */
.sec{ padding:112px 0; }
.sec-tight{ padding:72px 0; }
.sec-alt{ background:var(--surface-2); }
.sec-dark{ background:var(--dark); color:#fff; }
.sec-dark h2,.sec-dark h3{ color:#fff; }
.sec-dark .lead{ color:var(--on-dark); }

.eyebrow{
  display:inline-block; font-size:12.5px; font-weight:800; color:var(--brand-ink);
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:18px;
}
.eyebrow::before{ content:""; display:inline-block; width:18px; height:1.5px;
  background:var(--brand-ink); vertical-align:middle; margin-right:9px; margin-bottom:3px; }
.sec-dark .eyebrow{ color:var(--brand-lit); }
.sec-dark .eyebrow::before{ background:var(--brand-lit); }

.sec h2{ font-size:clamp(28px,3.6vw,44px); margin-bottom:18px; line-height:1.28; }
.sec .lead{ font-size:18px; color:var(--ink-2); margin:0 0 56px; max-width:640px; line-height:1.75; }
.center{ text-align:center; }
.center .lead{ margin-left:auto; margin-right:auto; }
.center .eyebrow::before{ display:none; }

/* ============================================================
   카드 — 그림자 없이 실선 1px 로만 구분합니다
   ============================================================ */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:32px;
}
.grid{ display:grid; gap:20px; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }

/* ============================================================
   스크롤하면 나타나는 움직임
   ============================================================ */
.reveal{ opacity:0; transform:translateY(22px);
  transition:opacity .75s cubic-bezier(.22,.61,.36,1), transform .75s cubic-bezier(.22,.61,.36,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   푸터
   ============================================================ */
.ft{ background:var(--dark); color:var(--on-dark); padding:72px 0 44px; font-size:15px; line-height:1.9; }
.ft-in{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:44px; }
.ft h4{ color:#fff; font-size:15px; margin-bottom:14px; letter-spacing:-.02em; }
.ft a{ color:var(--on-dark); transition:color .15s; }
.ft a:hover{ color:#fff; }
.ft-bot{ margin-top:44px; padding-top:26px; border-top:1px solid rgba(255,255,255,.1);
  font-size:13px; color:#7F838D; }

/* ============================================================
   어디를 가도 따라오는 버튼
   ============================================================ */
.float{ position:fixed; right:26px; bottom:26px; z-index:70; display:flex; flex-direction:column; gap:10px; }
.float button{
  display:flex; align-items:center; gap:9px; padding:14px 20px; border:0;
  border-radius:var(--radius-b); font-weight:700; font-size:15px; letter-spacing:-.02em;
  box-shadow:0 10px 30px -8px rgba(44,46,53,.34);
  transition:transform .18s cubic-bezier(.22,.61,.36,1), box-shadow .18s;
}
.float button:hover{ transform:translateY(-2px); box-shadow:0 16px 36px -10px rgba(44,46,53,.42); }
.float .f-ask{ background:var(--brand-ink); color:#fff; }
.float .f-kakao{ background:var(--kakao); color:var(--kakao-ink); }
.float .f-tel{ background:var(--ink); color:#fff; }
.float svg{ width:18px; height:18px; flex:none; }

/* ============================================================
   상담 모달
   ============================================================ */
.modal{ position:fixed; inset:0; z-index:120; display:none; }
.modal.open{ display:block; }
.modal-bg{ position:absolute; inset:0; background:rgba(44,46,53,.62); }
.modal-box{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(520px,calc(100vw - 32px)); max-height:calc(100vh - 40px); overflow-y:auto;
  background:#fff; border-radius:var(--radius); padding:36px;
  box-shadow:var(--shadow-lg); animation:pop .22s cubic-bezier(.22,.61,.36,1);
}
@keyframes pop{ from{ opacity:0; transform:translate(-50%,-48%); } to{ opacity:1; transform:translate(-50%,-50%); } }
.modal-box h3{ font-size:24px; margin-bottom:8px; }
.modal-box .sub{ color:var(--ink-2); font-size:15.5px; margin:0 0 26px; }
.modal-x{ position:absolute; top:18px; right:18px; width:36px; height:36px; border:0;
  background:var(--surface-2); border-radius:var(--radius-b); font-size:19px; color:var(--ink-2); line-height:1; }
.modal-x:hover{ background:var(--line-2); color:var(--ink); }

/* ============================================================
   폼
   ============================================================ */
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:14px; font-weight:700; margin-bottom:8px;
  color:var(--ink); letter-spacing:-.02em; }
.field label .req{ color:var(--brand-ink); margin-left:3px; }
.field label .opt{ font-style:normal; font-weight:600; font-size:12px; color:var(--muted);
  background:var(--surface-2); border-radius:4px; padding:2px 7px; margin-left:5px; }
.field input,.field textarea,.field select{
  width:100%; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius-b);
  background:#fff; font:inherit; font-size:16px; color:var(--ink);
  transition:border-color .15s, box-shadow .15s;
}
.field textarea{ min-height:118px; resize:vertical; line-height:1.65; }
.field input::placeholder,.field textarea::placeholder{ color:#B4B7C0; }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:0; border-color:var(--brand-ink); box-shadow:0 0 0 3px var(--brand-soft);
}
.field input.err,.field textarea.err{ border-color:#DC2626; box-shadow:0 0 0 3px #FEE2E2; }
/* 고르는 칸 — 위의 background 단축 속성 뒤에 와야 화살표가 지워지지 않습니다 */
.field select{
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238E9199' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
}
.field .msg{ font-size:13px; color:#DC2626; margin-top:7px; display:none; font-weight:600; }
.field .msg.show{ display:block; }
.agree{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--ink-2);
  margin:20px 0 22px; line-height:1.65; }
.agree input{ width:18px; height:18px; margin-top:2px; flex:none; accent-color:var(--brand-ink); }
.agree a{ color:var(--brand-ink); text-decoration:underline; font-weight:600; }
.form-note{ font-size:13px; color:var(--muted); margin-top:16px; text-align:center; line-height:1.7; }

.result{ display:none; text-align:center; padding:16px 0; }
.result.show{ display:block; }
.result .ico{ font-size:42px; line-height:1; margin-bottom:16px; }
.result h4{ font-size:21px; margin-bottom:10px; }
.result p{ color:var(--ink-2); font-size:15.5px; margin:0 0 24px; }
.result .row{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; align-items:center; }

.telimg{ display:inline-flex; align-items:center; vertical-align:middle; }
.telimg canvas{ display:block; }

/* ============================================================
   속페이지 머리말
   ============================================================ */
.phead{ padding:80px 0 64px; border-bottom:1px solid var(--line-2); background:var(--surface-2); }
.phead h1{ font-size:clamp(30px,4.4vw,50px); margin:0 0 18px; line-height:1.22; }
.phead p{ font-size:18px; color:var(--ink-2); margin:0; max-width:660px; line-height:1.75; }

/* ============================================================
   접었다 펴는 목록 (FAQ)
   ============================================================ */
.acc{ border-top:1px solid var(--line); }
.acc details{ border-bottom:1px solid var(--line); }
.acc summary{
  list-style:none; cursor:pointer; padding:26px 48px 26px 0; position:relative;
  font-size:18.5px; font-weight:700; color:var(--ink); line-height:1.5; letter-spacing:-.025em;
}
.acc summary::-webkit-details-marker{ display:none; }
.acc summary::after{
  content:""; position:absolute; right:10px; top:50%; width:11px; height:11px;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s, border-color .2s;
}
.acc details[open] summary::after{ transform:translateY(-20%) rotate(-135deg); border-color:var(--brand-ink); }
.acc summary:hover{ color:var(--brand-dark); }
.acc .ans{ padding:0 40px 28px 0; color:var(--ink-2); font-size:16.5px; }
.acc .ans p{ margin:0 0 14px; }
.acc .ans p:last-child{ margin-bottom:0; }
.acc .ans b{ color:var(--ink); font-weight:700; }

/* ============================================================
   표
   ============================================================ */
.tblwrap{ overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:var(--radius); }
.tbl{ width:100%; border-collapse:collapse; min-width:440px; font-size:16px; }
.tbl th,.tbl td{ padding:18px 22px; text-align:left; border-bottom:1px solid var(--line-2); }
.tbl thead th{ background:var(--surface-2); color:var(--ink); font-weight:700;
  font-size:14px; letter-spacing:-.01em; }
.tbl tbody tr:last-child td{ border-bottom:0; }
.tbl td:last-child{ font-weight:700; color:var(--ink); white-space:nowrap; }

/* ============================================================
   긴 글 (약관·칼럼)
   ============================================================ */
.prose{ max-width:720px; font-size:17.5px; color:#33415A; line-height:1.85; }
.prose h2{ font-size:24px; color:var(--ink); margin:48px 0 14px; }
.prose h3{ font-size:20px; color:var(--ink); margin:32px 0 10px; }
.prose p{ margin:0 0 18px; }
.prose ul,.prose ol{ margin:0 0 18px; padding-left:22px; }
.prose li{ margin-bottom:9px; }
.prose b,.prose strong{ color:var(--ink); font-weight:700; }
.prose img{ border-radius:var(--radius); margin:28px 0; }
.prose a{ color:var(--brand-ink); text-decoration:underline; }
.prose table{ width:100%; border-collapse:collapse; margin:0 0 22px; font-size:16px; }
.prose th,.prose td{ border:1px solid var(--line); padding:13px 15px; text-align:left; }
.prose th{ background:var(--surface-2); color:var(--ink); font-weight:700; }

/* ============================================================
   업무 상세
   ============================================================ */
.svc{ padding:64px 0; border-top:1px solid var(--line); scroll-margin-top:100px; }
.svc:first-of-type{ border-top:0; padding-top:24px; }
.svc-head{ display:flex; align-items:center; gap:14px; margin-bottom:14px; flex-wrap:wrap; }
.svc-head h2{ font-size:clamp(24px,3vw,34px); margin:0; }
.svc-head .tag{ font-size:12px; font-weight:800; color:var(--brand-ink);
  background:var(--brand-soft); padding:6px 12px; border-radius:999px; letter-spacing:-.01em; }
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:32px 0; }
.svc-grid > div{ background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:28px; }
.svc-grid h4{ font-size:13px; color:var(--brand-ink); margin-bottom:14px;
  letter-spacing:.04em; text-transform:uppercase; font-weight:800; }
.svc-grid ul{ margin:0; padding-left:17px; color:var(--ink-2); font-size:15.5px; }
.svc-grid li{ margin-bottom:9px; }
.svc-grid p{ margin:0; color:var(--ink-2); font-size:15.5px; }

/* ============================================================
   안내 상자
   ============================================================ */
.note{ background:var(--surface-2); border:1px solid var(--line); border-left:3px solid var(--brand);
  border-radius:var(--radius-s); padding:22px 26px; font-size:15.5px; color:var(--ink-2); line-height:1.75; }
.note b{ color:var(--ink); font-weight:700; }
.note-warn{ border-left-color:var(--accent); background:var(--accent-soft); border-color:#F5DCC8; }
.note-warn b{ color:var(--accent-ink); }

/* ============================================================
   반응형
   ============================================================ */
@media (max-width:1080px){
  .nav a{ padding:8px 10px; font-size:14.5px; }
  .sec{ padding:88px 0; }
}
@media (max-width:960px){
  .g3,.g4{ grid-template-columns:repeat(2,1fr); }
  .ft-in{ grid-template-columns:1fr 1fr; gap:32px; }
  .svc-grid{ grid-template-columns:1fr; }
}
@media (max-width:768px){
  /* 하단 고정 바(70px)에 본문이 가리지 않도록 여백을 둡니다.
     아이폰 홈 인디케이터 높이까지 더해 줍니다. */
  body{ font-size:16px; padding-bottom:calc(78px + env(safe-area-inset-bottom, 0px)); }
  .wrap{ padding:0 20px; }
  .mo-only{ display:inline; }
  .pc-only{ display:none; }
  .nav,.hd-cta{ display:none; }
  .burger{ display:flex; }
  .hd-in{ height:62px; }
  .sec{ padding:64px 0; }
  .sec-tight{ padding:48px 0; }
  .sec .lead{ font-size:16.5px; margin-bottom:36px; }
  .card{ padding:26px; }
  .g2,.g3,.g4{ grid-template-columns:1fr; }
  .ft{ padding:56px 0 36px; }
  .ft-in{ grid-template-columns:1fr; gap:30px; }
  .modal-box{ padding:28px 22px; }
  .btn{ font-size:15.5px; padding:14px 22px; }
  .btn-lg{ padding:16px 26px; font-size:16px; }
  .phead{ padding:48px 0 40px; }
  .phead p{ font-size:16.5px; }
  .acc summary{ font-size:17px; padding:22px 40px 22px 0; }
  .acc .ans{ font-size:16px; padding-right:8px; }
  .prose{ font-size:17px; }
  .svc{ padding:44px 0; }

  /* 하단 고정 바 — 엄지가 닿는 위치 */
  .float{
    right:0; left:0; bottom:0; flex-direction:row; gap:0;
    background:#fff; border-top:1px solid var(--line);
    /* 아이폰 맨 아래 가로줄(홈 인디케이터)이 버튼 글씨를 덮습니다.
       그만큼 여백을 줘서 글씨가 잘리지 않게 합니다. */
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  .float button{
    flex:1; border-radius:0; padding:0; height:70px; box-shadow:none;
    flex-direction:column; gap:5px; font-size:12.5px; font-weight:700;
    /* 세로 가운데 정렬. 이게 없으면 내용이 위로 붙어서
       아이콘 윗부분이 바의 테두리에 닿아 잘린 것처럼 보입니다. */
    justify-content:center;
  }
  .float button:hover{ transform:none; box-shadow:none; }
  .float .f-tel{ background:#fff; color:var(--ink); }
  .float svg{ width:20px; height:20px; }
}
@media (max-width:380px){
  .float button{ font-size:11.5px; }
}