/* ==========================================================
   [1] 색깔 — 채움택스에서 뽑아낸 실제 값
   ========================================================== */
:root{
  --navy:   #455887;   /* 대표색 */
  --navy-d: #37456B;   /* 눌렀을 때 진한 색 */
  --pale:   #F3F6FF;   /* 연한 하늘빛 배경 */
  --pale2:  #E3EAFA;   /* 조금 진한 하늘빛 */
  --t1:     #222222;   /* 제목 글자 */
  --t2:     #444444;   /* 보조 글자 */
  --t3:     #666666;   /* 설명 글자 */
  --t4:     #999999;   /* 흐린 글자 */
  --line:   #E8E8E8;
  --white:  #FFFFFF;
  --sh:     0 6px 30px rgba(69,88,135,.09);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:#fff; color:var(--t1);
  font-family:'Noto Sans KR','Malgun Gothic','맑은 고딕',sans-serif;
  font-weight:400; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }

.container{ max-width:1200px; margin:0 auto; padding:0 24px; position:relative; z-index:2; }
.narrow{ max-width:860px; margin:0 auto; padding:0 24px; position:relative; z-index:2; }

section{ position:relative; padding:130px 0; }
@media (max-width:900px){ section{ padding:80px 0; } }

/* ==========================================================
   [2] 글자 규칙 — 40px/600, 강조는 900 또는 남색
   ========================================================== */
h1{ font-size:clamp(27px,4.2vw,52px); font-weight:600; line-height:1.3; }
h2{ font-size:clamp(19px,2.88vw,36px); font-weight:600; line-height:1.4; }
h2 strong{ font-weight:900; }
h2 .nv{ color:var(--navy); font-weight:900; }
h3.small{ font-size:clamp(18px,1.9vw,24px); font-weight:700; color:var(--t1); margin-bottom:12px; }
.text{ font-size:clamp(15.5px,1.6vw,20px); font-weight:400; color:var(--t3); line-height:1.75; word-break:keep-all; }
.title_box{ text-align:center; margin-bottom:64px; }
.title_box .text{ margin-top:20px; }

/* 남색 알약 배지 */
.bubble{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--navy); color:#fff; border-radius:40px;
  padding:12px 26px; font-size:clamp(15px,1.6vw,20px); font-weight:600; margin-bottom:24px;
}
.bubble svg{ width:19px; height:19px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* 전면 연한 배경 */
.pale-bg{ position:absolute; left:50%; transform:translateX(-50%); width:100vw; background:var(--pale); z-index:0; }

/* 배경에 깔리는 초대형 영문 글씨 */
.bg-text{
  position:absolute; left:0; white-space:nowrap; z-index:0; pointer-events:none;
  font-size:clamp(70px,15vw,200px); font-weight:800; color:var(--pale);
  line-height:1; letter-spacing:-.02em; user-select:none;
}

/* 버튼 — 모서리 5px, 260x60 */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-width:240px; height:60px; padding:0 32px; border-radius:5px;
  font-size:17px; font-weight:600; text-decoration:none; transition:background .2s, color .2s;
}
.btn-navy{ background:var(--navy); color:#fff; }
.btn-navy:hover{ background:var(--navy-d); }
.btn-line{ background:#fff; color:var(--navy); border:1px solid var(--navy); }
.btn-line:hover{ background:var(--pale); }

/* ==========================================================
   [3] 맨 위 바
   ========================================================== */
.header{
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.95);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
}
.header .container{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.logo{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--t1); }
.logo img{ width:40px; height:40px; object-fit:contain; }
.logo small{ display:block; font-size:10px; letter-spacing:.14em; color:var(--t4); font-weight:700; }
.logo b{ font-size:18px; font-weight:700; }
.gnb{ display:flex; align-items:center; gap:34px; }
.gnb a{ font-size:16px; font-weight:500; color:var(--t2); text-decoration:none; }
.gnb a:hover{ color:var(--navy); }
.gnb .tel{
  border:1px solid var(--navy); color:var(--navy); border-radius:5px;
  padding:11px 20px; font-weight:700; font-size:15px;
}
.gnb .tel:hover{ background:var(--navy); color:#fff; }

/* 마우스를 올리면 아래로 펼쳐지는 메뉴 */
.gnb .has-sub{ position:relative; }
.gnb .has-sub > .top{ display:inline-flex; align-items:center; gap:6px; }
.gnb .has-sub > .top::after{
  content:''; width:6px; height:6px; margin-top:-3px;
  border-right:1.8px solid currentColor; border-bottom:1.8px solid currentColor;
  transform:rotate(45deg); transition:transform .2s;
}
.gnb .has-sub:hover > .top{ color:var(--navy); }
.gnb .has-sub:hover > .top::after{ transform:rotate(225deg) translate(-2px,-2px); }
.gnb .sub{
  position:absolute; left:50%; top:100%; padding-top:14px;
  opacity:0; visibility:hidden; transform:translate(-50%,6px);
  transition:opacity .2s, transform .2s, visibility .2s;
}
.gnb .has-sub:hover .sub, .gnb .has-sub:focus-within .sub{
  opacity:1; visibility:visible; transform:translate(-50%,0);
}
.gnb .sub::before{                       /* 흰 말풍선 상자 */
  content:''; position:absolute; inset:14px 0 0 0;
  background:#fff; border:1px solid var(--pale2); border-radius:14px;
  box-shadow:0 12px 30px rgba(69,88,135,.13);
}
.gnb .sub a{
  position:relative; display:block; white-space:nowrap;
  padding:12px 20px; font-size:15.5px; border-radius:10px; margin:6px;
}
.gnb .sub a:first-of-type{ margin-top:14px; }
.gnb .sub a:hover{ background:var(--pale); color:var(--navy); }
@media (max-width:1024px){
  .gnb a:not(.tel){ display:none; }
  .gnb .has-sub{ display:none; }     /* 펼침 메뉴는 햄버거 안에 들어 있습니다 */
}

/* ==========================================================
   [4] 첫 화면 + 대표세무사 소개 — 하나의 무대에서 이어집니다
   ========================================================== */
.stage{ position:relative; height:230vh; }     /* 이 높이만큼 스크롤하며 연출됩니다 */
.stage-pin{ position:sticky; top:0; height:100vh; overflow:hidden; background:#fff; }
.stage-inner{
  position:relative; height:100%; max-width:1200px; margin:0 auto; padding:0 24px;
}

/* 첫 화면은 명조체 — 붓글씨 서명과 어울리도록 */
.stage-hero h1,
.stage-hero .sub,
.stage-words{
  font-family:'Noto Serif KR','Nanum Myeongjo',serif;
}
.stage-hero h1{ letter-spacing:-.03em; }
.stage-words p{ letter-spacing:-.035em; }

/* 처음 글 (제목 + 부제 + 버튼) */
.stage-hero{
  position:absolute; left:24px; right:24px; top:32%; z-index:3;
  opacity:var(--ho,1); transform:translateY(calc(-50% + var(--hy,0px)));
}
.stage-hero h1{ margin-bottom:26px; }
.stage-sub{ width:min(52%,600px); }
.stage-hero .sub{ font-size:clamp(17px,1.9vw,24px); font-weight:600; color:var(--t3); }
.stage-hero .btns{ display:flex; gap:12px; margin-top:36px; flex-wrap:wrap; }

/* 서명 */
.stage-sign{
  position:absolute; right:24px; top:var(--sy,68%); transform:translateY(-50%);
  width:min(31%,360px); z-index:2;
}
/* 확대가 끝나면 다리 높이에서 옅게 남습니다 */

/* 마지막 문구 (두 줄로 크게) */
.stage-words{
  position:absolute; left:24px; right:24px; top:44%; transform:translateY(-50%);
  z-index:6; color:var(--t1); opacity:var(--wo,0);
}
.stage-words .mark{
  display:block; font-size:80px; line-height:.7; font-weight:700;
  color:var(--pale2); margin-bottom:18px;
}
.stage-words p{
  font-size:clamp(20px,2.85vw,37px); font-weight:500; line-height:1.72;
  letter-spacing:-.03em; word-break:keep-all;   /* 단어 중간에서 끊기지 않게 */
}
.stage-words p b{ font-weight:700; }

/* 문구 다음에 나타나는 버튼 */
.stage-cta{
  position:absolute; left:24px; top:74%;
  display:flex; gap:12px; flex-wrap:wrap; z-index:6; opacity:var(--co,0);
}

/* 휴대폰에서도 웹과 같은 순서로 나타납니다 (가운데 정렬) */
@media (max-width:900px){
  .stage-inner{ padding:0 20px; }

  .stage-hero{
    left:20px; right:20px; top:34%; text-align:center;
  }
  .stage-hero h1{ margin-bottom:20px; }
  .stage-sub{ width:auto; }
  .stage-hero .sub{ font-size:17px; }

  .stage-sign{
    left:50%; right:auto; top:var(--sy,70%);
    transform:translate(-50%,-50%);
    width:min(66%,250px);          /* 떠 있는 버튼과 겹치지 않는 폭 */
  }

  .stage-words{
    left:20px; right:20px; top:26%; transform:translateY(-50%);
    text-align:center;
  }
  .stage-words br{ display:none; }        /* 좁은 화면에선 줄이 알아서 넘어가게 */
  .stage-words .mark{ font-size:52px; margin-bottom:10px; }
  .stage-words p{ font-size:21px; line-height:1.8; }

  .stage-cta{
    left:20px; right:20px; top:64%;   /* 서명 아래, 떠 있는 아이콘 위 */
    justify-content:center;
  }
  .stage-cta .btn{ min-width:0; flex:1; max-width:170px; height:54px; font-size:15.5px; padding:0 16px; }
}

/* ==========================================================
   [4-3] 화면 오른쪽에 떠 있는 동그란 버튼들
        위에서부터 : 아래로 / 맨 위로 / 전화 / 카카오톡 / 챗봇
   ========================================================== */
.fab{
  position:fixed; right:24px; top:50%; transform:translateY(-50%); z-index:120;
  display:flex; flex-direction:column; gap:12px;
}
.fab a{
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center; text-decoration:none;
  transition:background .2s, border-color .2s, transform .25s, box-shadow .25s;
}
.fab a svg{ fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.fab a:hover{ transform:translateY(-3px); }

/* 다음 구역으로 내려가기 */
.scroll-down{
  background:#fff; border:1px solid var(--pale2);
  box-shadow:0 6px 20px rgba(69,88,135,.18);
}
.scroll-down:hover{ background:var(--pale); border-color:var(--navy); }
.scroll-down svg{
  width:26px; height:26px; stroke:var(--navy);
  animation:bob 1.8s ease-in-out infinite;
}
/* 맨 아래까지 내려가면 위를 가리키는 화살표로 바뀝니다 */
.scroll-down.up svg{ animation:none; transform:rotate(180deg); }

/* 맨 위로 (휴대폰에서만, 조금 내려가면 나타납니다) */
.top-fab{
  background:#fff; border:1px solid var(--pale2);
  box-shadow:0 6px 20px rgba(69,88,135,.18);
}
.top-fab:hover{ background:var(--pale); border-color:var(--navy); }
.top-fab svg{ width:25px; height:25px; stroke:var(--navy); }
.fab a.top-fab{ display:none; }
@media (max-width:1000px){
  .fab a.top-fab{ display:grid; opacity:0; pointer-events:none; transition:opacity .3s ease; }
  .fab a.top-fab.show{ opacity:1; pointer-events:auto; }
}

/* 전화 걸기 */
.call-fab{ background:var(--navy); box-shadow:0 8px 24px rgba(69,88,135,.42); }
.call-fab:hover{ background:var(--navy-d); }
.call-fab svg{ width:25px; height:25px; stroke:#fff; }

/* 카카오톡 채널 */
.kakao-fab{ background:#fff; border:1px solid var(--navy); box-shadow:0 6px 20px rgba(69,88,135,.2); }
.kakao-fab:hover{ background:var(--pale); }
/* 카카오 말풍선만 선이 아니라 면으로 그립니다 */
.fab a.kakao-fab svg{ width:26px; height:26px; fill:var(--navy); stroke:none; }

/* 간단 문의 챗봇 */
.bot-fab{ background:#fff; border:1px solid var(--navy); box-shadow:0 6px 20px rgba(69,88,135,.2); }
.bot-fab:hover{ background:var(--pale); }
.bot-fab svg{ width:26px; height:26px; stroke:var(--navy); }

/* 아직 주소를 안 넣은 버튼은 눌러도 아무 일이 없습니다 */
.fab a[href="#"]{ cursor:default; }

@media (prefers-reduced-motion:reduce){ .scroll-down svg{ animation:none; } }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(6px);} }

/* ==========================================================
   [5] 문장 패널 — 연한 배경 + 흰 둥근 패널 (모서리 30px)
   ========================================================== */
.statement{ padding:120px 0; }
.statement .pale-bg{ top:0; bottom:0; }
.panel{
  position:relative; z-index:2; background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.9); border-radius:30px;
  padding:66px 56px; text-align:center; box-shadow:0 10px 40px rgba(69,88,135,.06);
}
.panel .labels{ display:flex; justify-content:center; gap:40px; margin-bottom:34px; flex-wrap:wrap; }
.panel .labels p{ font-size:14px; color:var(--t2); letter-spacing:.08em; }
.panel h2{ margin-bottom:26px; }
.panel .dots, .title_box .dots{ display:flex; justify-content:center; gap:9px; margin-top:38px; }
.panel .dots i, .title_box .dots i{ width:8px; height:8px; border-radius:50%; display:block; }
@media (max-width:640px){ .panel{ padding:44px 24px; } }

/* ==========================================================
   [6] 업무 분야 — 왼쪽 화면이 바뀌고 오른쪽 카드가 흘러갑니다
        (채움택스 첫 화면의 그 구조)
   ========================================================== */
.svc-sec .pale-bg{ top:0; bottom:0; }

/* minmax(0,1fr) 로 두어야 카드 줄이 칸 너비를 밀어내지 않습니다 */
.svc-stage{ display:grid; grid-template-columns:360px minmax(0,1fr); gap:56px; align-items:center; }
.svc-stage > *{ min-width:0; }
@media (max-width:1000px){ .svc-stage{ grid-template-columns:minmax(0,1fr); gap:44px; } }
/* 넓은 화면에서는 카드가 화면 오른쪽 끝까지 흘러나가게 */
@media (min-width:1001px){ .svc-viewport{ width:calc(100% + max(0px,(100vw - 1152px) / 2)); } }

/* --- 왼쪽: 겹쳐놓고 투명도로 바뀌는 화면 --- */
.svc-panel{ position:relative; }
.svc-panel .circle{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:430px; height:430px; border-radius:50%; background:var(--pale2); z-index:0;
}
.svc-frame{ position:relative; z-index:1; width:334px; height:512px; margin:0 auto; }
@media (max-width:420px){
  .svc-frame{ width:290px; height:530px; }
  .svc-panel .circle{ width:330px; height:330px; }
}
.pan{
  position:absolute; inset:0; background:#fff; border-radius:26px; overflow:hidden;
  box-shadow:0 18px 46px rgba(69,88,135,.18);
  opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s ease;
}
.pan.on{ opacity:1; transform:none; }
.pan .ph{
  background:var(--navy); color:#fff; padding:17px 22px;
  font-size:13px; font-weight:600; letter-spacing:.06em;
  display:flex; align-items:center; justify-content:space-between;
}
.pan .ph em{ font-style:normal; opacity:.66; font-size:12px; }
.pan .pb{ padding:26px 24px; }
.pan .pt{ font-size:20px; font-weight:700; color:var(--t1); line-height:1.4; }
.pan ul{ list-style:none; margin-top:18px; }
.pan li{ font-size:14.5px; color:var(--t2); padding:6.5px 0 6.5px 17px; position:relative; line-height:1.55; }
.pan li::before{ content:''; position:absolute; left:0; top:14px; width:5px; height:5px; border-radius:50%; background:var(--navy); }
.pan .cal{ margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
.pan .cal .lbl{ font-size:11.5px; font-weight:700; color:var(--navy); letter-spacing:.1em; margin-bottom:12px; }
.pan .cal .row{ display:flex; justify-content:space-between; gap:12px; font-size:14px; color:var(--t3); padding:6px 0; }
.pan .cal .row b{ color:var(--navy); font-weight:700; white-space:nowrap; }

/* --- 오른쪽: 끊김 없이 흘러가는 카드 --- */
.svc-viewport{ overflow:hidden; }
.svc-track{ display:flex; gap:24px; list-style:none; }
.svc-card{
  flex:0 0 282px; min-height:253px; background:#fff; border-radius:20px;
  padding:30px 28px; box-shadow:var(--sh);
  transition:transform .45s ease, box-shadow .45s ease;
}
.svc-card.act{ transform:translateY(-8px); box-shadow:0 18px 44px rgba(69,88,135,.22); }
.svc-card .ic{
  width:54px; height:54px; border-radius:16px; background:var(--pale);
  display:grid; place-items:center; margin-bottom:20px; transition:background .45s;
}
.svc-card.act .ic{ background:var(--pale2); }
.svc-card .ic svg{ width:27px; height:27px; fill:none; stroke:var(--navy); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.svc-card h3{ font-size:19px; font-weight:700; line-height:1.4; }
.svc-card p{ margin-top:11px; font-size:14.5px; color:var(--t3); line-height:1.72; }
@media (max-width:420px){ .svc-card{ flex-basis:250px; } }

/* 진행 표시 점 */
.svc-nav{ display:flex; align-items:center; gap:14px; margin-top:32px; }
.svc-dots{ display:flex; gap:9px; }
.svc-dots i{
  width:8px; height:8px; border-radius:50%; background:#D9D9D9;
  transition:background .4s, width .4s; display:block; cursor:pointer;
}
.svc-dots i:hover{ background:#B9C3DC; }
.svc-dots i.act{ background:var(--navy); width:26px; border-radius:99px; }

/* 처음으로 돌아가는 버튼 — 점들과 같은 톤의 작은 화살표만 */
.svc-reset{
  display:inline-grid; place-items:center; cursor:pointer;
  width:20px; height:20px; padding:0;
  background:none; border:0; font:inherit; color:inherit;
}
.svc-reset svg{
  width:16px; height:16px; fill:none; stroke:#D9D9D9;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .3s ease, transform .45s ease;
}
.svc-reset:hover svg{ stroke:var(--navy); transform:rotate(-150deg); }
@media (max-width:1000px){ .svc-nav{ justify-content:center; } }

/* ==========================================================
   [6-2] 세무 일정 — 왼쪽 고정 카드 + 오른쪽 쌓이는 카드
        (채움택스 '지금, 채움이 필요할 때' 구성)
   ========================================================== */
#schedule{ padding:100px 0; }                 /* 위아래를 조금 좁게 */
.sched-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
@media (max-width:1000px){ .sched-grid{ grid-template-columns:1fr; } }

/* --- 두 네모의 높이를 똑같이 맞춥니다 (여기 숫자 하나만 바꾸면 둘 다 바뀝니다) --- */
.sched-grid{ --box-h:600px; }

/* --- 왼쪽 : 크기가 고정된 창. 안쪽 내용만 위아래로 움직입니다 --- */
.sched-left{
  height:var(--box-h);
  background:#fff; border-radius:28px; overflow:hidden;
  box-shadow:0 8px 34px rgba(69,88,135,.10);
}
@media (max-width:1000px){
  .sched-left{ height:auto; }
}
.sched-slides{ height:100%; transition:transform .6s cubic-bezier(.4,0,.2,1); }
@media (max-width:1000px){ .sched-slides{ transform:none !important; } }
.sched-slide{
  height:100%; padding:44px 40px;
  display:flex; flex-direction:column; justify-content:center;
}
@media (max-width:1000px){
  .sched-slide{ height:auto; }
  .sched-slide + .sched-slide{ border-top:1px solid var(--line); }
}
@media (max-width:600px){ .sched-slide{ padding:32px 24px; } }
.sched-slide h2{ margin-bottom:22px; }
.sched-slide .hook{ font-size:17px; font-weight:700; color:var(--t1); line-height:1.7; }
.sched-slide .desc{ margin-top:14px; font-size:15.5px; color:var(--t3); line-height:1.8; }
.sched-slide .btn{ margin-top:26px; align-self:flex-start; }

/* 반원 게이지 */
.gauge{ position:relative; margin:26px auto 0; width:200px; }
.gauge svg{ width:100%; height:auto; display:block; }
.gauge .mid{ position:absolute; left:0; right:0; bottom:2px; text-align:center; }
.gauge .chip{
  display:inline-block; background:var(--navy); color:#fff;
  font-size:12.5px; font-weight:600; padding:5px 13px; border-radius:6px;
}
.gauge .big{ margin-top:6px; font-size:40px; font-weight:800; color:var(--navy); line-height:1.05; }
.gauge .cap{ font-size:12.5px; color:var(--t4); margin-top:2px; }

/* 작은 숫자 상자 */
.mini-stat{ display:flex; align-items:center; gap:18px; margin-top:28px; }
.mini-stat b{
  flex:none; display:grid; place-items:center;
  width:96px; height:96px; border-radius:50%;
  background:var(--pale); color:var(--navy); font-size:26px; font-weight:800;
}
.mini-stat span{ font-size:15px; color:var(--t3); line-height:1.7; }
.mini-stat span em{ font-style:normal; color:var(--navy); font-weight:700; }

/* --- 오른쪽 : 왼쪽과 같은 크기의 창.
       창 안에서 마우스 휠로 굴리면 한 장씩 착 걸립니다 --- */
.sched-right{
  height:var(--box-h);
  background:var(--pale); border-radius:28px;
  overflow-y:auto; overflow-x:hidden;
  scroll-snap-type:y mandatory; scroll-padding:20px;
  overscroll-behavior:contain;              /* 끝까지 가도 페이지가 딸려가지 않게 */
  scrollbar-width:none;                     /* 스크롤 막대는 숨김 */
  -ms-overflow-style:none;
}
.sched-right::-webkit-scrollbar{ display:none; }
@media (max-width:1000px){
  .sched-right{ height:auto; overflow:visible; scroll-snap-type:none; }
}
.sched-cards{ padding:20px; display:grid; gap:20px; }
@media (max-width:1000px){ .sched-cards{ padding:16px; gap:14px; } }
.sched-card{
  background:#fff; border-radius:20px; padding:30px 28px;
  height:calc(var(--box-h) - 40px);
  scroll-snap-align:start; scroll-snap-stop:always;
  display:flex; flex-direction:column; justify-content:center;
}
@media (max-width:1000px){ .sched-card{ height:auto; } }
@media (max-width:600px){ .sched-card{ padding:24px 20px; } }
.sched-card h3{ font-size:21px; font-weight:700; color:var(--navy); text-align:center; margin-bottom:22px; }
@media (max-width:600px){ .sched-card h3{ font-size:19px; margin-bottom:20px; } }

/* 다가오는 일정 줄 */
.dday-row{
  display:flex; align-items:center; gap:14px;
  background:var(--pale); border-radius:14px; padding:15px 18px;
}
.dday-row + .dday-row{ margin-top:9px; }
.dday-row .d{
  flex:none; min-width:66px; text-align:center;
  background:var(--navy); color:#fff; border-radius:9px;
  font-size:15px; font-weight:700; padding:9px 8px;
}
.dday-row .d.soon{ background:#C4553C; }
.dday-row .nm{ font-size:15.5px; font-weight:600; color:var(--t1); line-height:1.4; }
.dday-row .dt{ font-size:13.5px; color:var(--t3); margin-top:3px; }
.sched-note{ margin-top:14px; font-size:12.5px; color:var(--t4); text-align:center; line-height:1.6; }

/* 연간 막대 */
.year-bars{ display:flex; align-items:flex-end; gap:6px; height:112px; }
.year-bars .col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:7px; height:100%; justify-content:flex-end; }
.year-bars .bar{ width:100%; border-radius:6px 6px 3px 3px; background:var(--pale2); }
.year-bars .col.on .bar{ background:var(--navy); }
.year-bars .mo{ font-size:11.5px; color:var(--t4); }
.year-bars .col.on .mo{ color:var(--navy); font-weight:700; }
.year-legend{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; justify-content:center; }
.year-legend span{
  background:var(--pale); color:var(--t2); border-radius:99px;
  padding:7px 14px; font-size:13px; font-weight:500;
}
.year-legend span b{ color:var(--navy); font-weight:700; }

/* 도와드리는 일 */
.help-chips{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; }
.help-chips span{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--pale); border-radius:99px; padding:11px 18px;
  font-size:14.5px; font-weight:600; color:var(--t1);
}
.help-chips span i{ width:7px; height:7px; border-radius:50%; background:var(--navy); font-style:normal; }

/* ==========================================================
   [7] 이런 점이 다릅니다 — 초대형 배경 글씨 위에
   ========================================================== */
.why{ overflow:hidden; }          /* 초대형 배경 글씨가 화면 밖으로 새지 않도록 */
.why .bg-text{ top:44px; }
.why-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
@media (max-width:860px){ .why-grid{ grid-template-columns:1fr; } }
.why-card{
  background:#fff; border:1px solid var(--line); border-radius:20px; padding:40px 36px;
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.why-card:hover{ transform:translateY(-6px); box-shadow:var(--sh); border-color:var(--pale2); }
.why-card .q{
  font-size:16px; color:var(--t4); line-height:1.7;
  padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid var(--line);
}
.why-card h3{ font-size:22px; font-weight:700; color:var(--navy); line-height:1.45; }
.why-card p{ margin-top:14px; font-size:15.5px; color:var(--t3); line-height:1.82; }

/* ==========================================================
   [8] 상담 절차 — 3~4단 카드
   ========================================================== */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:900px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .steps{ grid-template-columns:1fr; } }
/* 화면을 반으로 나눈 배치 : 왼쪽 이런 점이 다릅니다 / 오른쪽 자주 묻는 질문 */
.voice-sec{ padding:110px 0; }
.why-faq{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.why-faq .title_box{ margin-bottom:38px; }
.why-faq .why-col > .title_box h2,
.why-faq .faq-col > .title_box h2{ min-height:2.8em; }   /* 두 줄 높이로 맞춰 아래 칸이 나란히 시작하도록 */
/* 양쪽 모두 한 줄에 두 칸씩 */
.why-faq .why-card, .why-faq .faq{ word-break:keep-all; }   /* 낱말 중간에서 줄이 끊기지 않게 */
.why-faq .why-grid{ grid-template-columns:repeat(2,1fr); gap:16px; }
.why-faq .why-card{ padding:26px 22px; }
.why-faq .why-card .q{ font-size:14px; }
.why-faq .why-card h3{ font-size:18.5px; }
.why-faq .why-card p{ font-size:14.5px; line-height:1.75; }

.why-faq .faq{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; align-content:start; }
.why-faq .faq details{ border:1px solid #EFF3FB; margin-bottom:0; align-self:start; }
.why-faq .faq summary{ font-size:15.5px; padding:20px 44px 20px 22px; }
.why-faq .faq summary::after{ right:20px; }
.why-faq .faq .a{ padding:0 22px 22px; font-size:14.5px; }

/* 화면이 좁아지면 다시 한 줄에 하나씩 */
@media (max-width:1000px){
  .why-faq{ grid-template-columns:1fr; gap:64px; }
}
@media (max-width:640px){
  .why-faq .why-grid, .why-faq .faq{ grid-template-columns:1fr; }
}

.step{ background:#fff; border:1px solid #EFF3FB; border-radius:20px; padding:40px 26px; text-align:center; box-shadow:var(--sh); }

/* 세무 일정 아래에 이어지는 상담 절차 */
.step-wrap{ margin-top:56px; }
.step-wrap .title_box{ margin-bottom:46px; }
@media (max-width:900px){ .step-wrap{ margin-top:38px; } }
.step .n{
  width:54px; height:54px; margin:0 auto 22px; border-radius:50%; background:var(--navy);
  color:#fff; display:grid; place-items:center; font-size:17px; font-weight:700;
}
.step h3{ font-size:19px; font-weight:700; }
.step p{ margin-top:12px; font-size:15px; color:var(--t3); line-height:1.78; }

/* ==========================================================
   [9] 대표 세무사 — 사진 위에 글자를 겹쳐 올린 큰 카드
   ========================================================== */
.tax-sec{ padding:90px 0; }                 /* 다른 구역보다 위아래를 좁게 */
/* 사무소 소개 페이지 : 첫 칸 바로 다음이라 위쪽을 더 좁게 */
.sub-hero + .tax-sec{ padding-top:22px; }
.sub-hero + .tax-sec .title_box{ margin-bottom:28px; }
.tax-sec .title_box{ margin-bottom:44px; }
.tax-sec .pale-bg{ top:0; height:60%; }
.tax-grid{ display:grid; grid-template-columns:370px 1fr; gap:34px; align-items:stretch; }
@media (max-width:900px){ .tax-grid{ grid-template-columns:1fr; } }
.tax-card{
  position:relative; border-radius:20px; overflow:hidden; min-height:430px;
  box-shadow:0 14px 44px rgba(69,88,135,.18); background:var(--pale2);
}
.tax-card img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.tax-card .veil{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(28,34,52,.92) 0%, rgba(28,34,52,.62) 34%, rgba(28,34,52,0) 62%);
}
.tax-card .on{ position:absolute; left:0; right:0; bottom:0; padding:28px 26px; color:#fff; }
.tax-card .on .nm{ font-size:25px; font-weight:600; }
.tax-card .on .nm em{ font-style:normal; font-size:15px; font-weight:500; opacity:.8; margin-left:9px; }
.tax-card .on .ed{ margin-top:8px; font-size:14px; opacity:.82; line-height:1.55; }
.tax-info{ background:#fff; border-radius:20px; padding:32px 34px; box-shadow:var(--sh); }
@media (max-width:640px){ .tax-info{ padding:26px 20px; } }
.tax-info .say{
  background:var(--pale); border-radius:14px; padding:20px 22px;
  font-size:15.5px; color:var(--t2); line-height:1.78;
}
.career{ list-style:none; margin-top:20px; }
.career li{ font-size:14.5px; color:var(--t2); padding:5px 0 5px 52px; position:relative; line-height:1.5; }
.career li i{
  position:absolute; left:0; top:7px; width:38px; text-align:center; font-style:normal;
  font-size:11.5px; font-weight:700; padding:2px 0; border-radius:5px;
}
.career li i.now{ background:var(--navy); color:#fff; }
.career li i.was{ background:var(--pale2); color:var(--navy); }

/* ==========================================================
   [9-2] 대표 세무사 : 스크롤하면 사진이 커지고 문구가 떠오릅니다
   ========================================================== */
.tax-stage{ position:relative; height:260vh; }      /* 이 높이만큼 스크롤하며 커집니다 */
.tax-pin{
  position:sticky; top:0; height:100vh;
  display:grid; place-items:center; overflow:hidden;
}
.tax-shot{
  position:relative; overflow:hidden;
  width:var(--sw, 320px); height:var(--sh, 430px);
  border-radius:var(--sr, 24px);
  box-shadow:0 20px 60px rgba(69,88,135,.22);
}
.tax-shot img{ width:100%; height:100%; object-fit:cover; object-position:center 16%; }
.tax-veil{
  position:absolute; inset:0; opacity:var(--veil, 0);
  background:linear-gradient(to top, rgba(20,25,40,.92) 0%, rgba(20,25,40,.72) 42%, rgba(20,25,40,.15) 100%);
}
.tax-words{
  position:absolute; left:50%; bottom:9vh; transform:translateX(-50%);
  width:min(88%, 820px); text-align:center; color:#fff; opacity:var(--tw, 0);
}
.tax-words p{
  font-size:clamp(17px,2.1vw,27px); font-weight:600; line-height:1.75;
  text-shadow:0 2px 14px rgba(0,0,0,.35);
}
.tax-words .who{ margin-top:20px; font-size:15px; font-weight:500; color:rgba(255,255,255,.75); }

/* 휴대폰에서는 연출 없이 사진과 문구를 그냥 보여줍니다 */
@media (max-width:900px){
  .tax-stage{ height:auto; }
  .tax-pin{ position:static; height:auto; display:block; }
  .tax-shot{ width:100% !important; height:auto !important; border-radius:20px !important; aspect-ratio:3/4; }
  .tax-veil{ opacity:1 !important; }
  .tax-words{ opacity:1 !important; bottom:22px; }
  .tax-words p{ font-size:16px; }
}

/* ==========================================================
   [10] 자주 묻는 질문
   ========================================================== */
.faq details{ background:#fff; border-radius:18px; margin-bottom:10px; box-shadow:var(--sh); }
.faq summary{
  cursor:pointer; list-style:none; padding:22px 58px 22px 28px; position:relative;
  font-size:17px; font-weight:600;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--navy); }
.faq summary::after{
  content:'+'; position:absolute; right:26px; top:50%; transform:translateY(-50%);
  font-size:24px; font-weight:400; color:var(--t4);
}
.faq details[open] summary{ color:var(--navy); }
.faq details[open] summary::after{ content:'−'; color:var(--navy); }
.faq .a{ padding:0 28px 26px; font-size:15.5px; color:var(--t3); line-height:1.82; }

/* ==========================================================
   [11] 문의 · 발바닥 · 아래 고정 버튼
   ========================================================== */
.contact{ background:var(--navy); color:#fff; text-align:center; padding:130px 0; }
.contact h2{ margin-bottom:22px; }
.contact .text{ color:rgba(255,255,255,.76); }
.contact .bubble{ background:rgba(255,255,255,.16); }
.contact .tel{
  display:inline-block; margin-top:40px; color:#fff; text-decoration:none;
  font-size:clamp(32px,4.8vw,56px); font-weight:700; letter-spacing:.01em;
}
.contact .addr{ margin-top:18px; font-size:17px; color:rgba(255,255,255,.92); }
.contact .addr a{ color:inherit; text-decoration:underline; text-underline-offset:5px; text-decoration-color:rgba(255,255,255,.4); transition:text-decoration-color .2s; }
.contact .addr a:hover{ text-decoration-color:#fff; }
.contact .hours{ margin-top:8px; font-size:15px; color:rgba(255,255,255,.6); }
.contact .links{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:42px; }
.contact .links a{
  border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.1);
  border-radius:5px; padding:16px 30px; color:#fff; text-decoration:none; font-weight:500; font-size:16px;
}
.contact .links a:hover{ background:rgba(255,255,255,.22); }

footer{ padding:58px 0 66px; border-top:1px solid var(--line); }
footer .container{ display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; }
footer p{ font-size:14px; color:var(--t4); line-height:2; }
footer .flogo{ width:56px; height:auto; opacity:.9; margin-bottom:10px; }
footer b{ color:var(--t3); font-weight:700; }


/* 휴대폰에서만 줄을 바꾸고 싶은 자리에 <span class="mbr"></span> 를 넣습니다 */
.mbr{ display:none; }
@media (max-width:640px){ .mbr{ display:block; height:0; } }

/* ==========================================================
   [15] 휴대폰 화면 정리
   ========================================================== */
@media (max-width:900px){
  /* 구역 위아래 여백을 한 번에 줄입니다 (페이지가 너무 길어져서) */
  section, #schedule, .tax-sec, .statement, .contact, .voice-sec{ padding:62px 0 !important; }
  .title_box{ margin-bottom:36px; }
  .hero .container{ padding-top:44px !important; padding-bottom:56px !important; }
}

/* --- 맨 위 바 : 사무소명과 전화 버튼이 서로 밀지 않게 --- */
@media (max-width:600px){
  .header .container{ height:62px; }
  .logo{ gap:9px; }
  .logo img{ width:30px; height:30px; }
  .logo small{ display:none; }          /* TAX ACCOUNTING 줄은 숨김 */
  .logo b{ font-size:15.5px; }
  .gnb{ gap:10px; }
  .gnb .tel{ padding:8px 13px; font-size:13px; }
}

/* --- 햄버거 메뉴 (좁은 화면에서만 보입니다) --- */
.menu-btn{
  display:none; width:40px; height:40px; padding:0;
  background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:center; gap:5px; align-items:center;
}
.menu-btn span{
  display:block; width:20px; height:2px; border-radius:2px;
  background:var(--t1); transition:transform .25s, opacity .2s;
}
.menu-btn.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-btn.open span:nth-child(2){ opacity:0; }
.menu-btn.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (max-width:1024px){ .menu-btn{ display:flex; } }

.m-menu{
  position:absolute; left:0; right:0; top:100%;
  background:#fff; border-bottom:1px solid var(--line);
  box-shadow:0 12px 28px rgba(69,88,135,.10);
  max-height:0; overflow:hidden; transition:max-height .3s ease;
}
.m-menu.open{ max-height:420px; }
.m-menu a{
  display:block; padding:16px 24px; font-size:16px; font-weight:500;
  color:var(--t2); text-decoration:none; border-top:1px solid var(--line);
}
.m-menu a:first-child{ border-top:0; }
.m-menu a:active{ background:var(--pale); }
@media (min-width:1025px){ .m-menu{ display:none; } }

/* --- 떠 있는 버튼 : 휴대폰에서는 화면 오른쪽 아래로 --- */
@media (max-width:1000px){
  .fab{
    top:auto; bottom:16px; right:12px; transform:none; gap:9px;
  }
  .fab a{ width:46px; height:46px; }
  .fab a svg{ transform:scale(.88); }
  /* 휴대폰은 손가락으로 넘기면 되니 '아래로' 버튼은 숨깁니다.
     위의 .fab a 설정을 이기려면 앞에 .fab a 를 붙여야 합니다 */
  .fab a.scroll-down{ display:none; }
}

/* --- 세무 일정 : 휴대폰에서 같은 내용이 두 번 나오지 않게 --- */
@media (max-width:1000px){
  .sched-slide:nth-child(n+2){ display:none; }   /* 2·3번 창은 오른쪽 카드와 내용이 겹침 */
  .sched-slide + .sched-slide{ border-top:0; }
  .sched-left{ margin-bottom:4px; }
}

/* ==========================================================
   [12] 스크롤 등장 효과
   ========================================================== */
.rv{ opacity:0; transform:translateY(30px); transition:opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1); }
.rv.on{ opacity:1; transform:none; }


/* ==========================================================
   [16] 속페이지 (사무소 소개 · 위치 · 세무뉴스 · 자주 묻는 질문 · 상담하기)
   ========================================================== */

/* 지금 보고 있는 메뉴에 표시 */
.gnb a.on{ color:var(--navy); font-weight:700; }

/* 페이지 첫 칸 — 메인 첫 화면과 같은 결 (명조체 · 왼쪽 정렬 · 서명) */
.sub-hero{
  position:relative; padding:38px 0 40px; overflow:hidden;
  font-family:'Noto Serif KR','Nanum Myeongjo',serif;
}
.sub-hero h1{
  font-size:clamp(30px,4.4vw,50px); font-weight:700;
  letter-spacing:-.03em; line-height:1.34; word-break:keep-all;
}
.sub-hero p{
  margin-top:22px; font-size:clamp(16px,1.75vw,21px); font-weight:400;
  color:var(--t3); letter-spacing:-.025em; word-break:keep-all;
}
.sub-hero .sign{
  position:absolute; right:24px; bottom:0; width:min(23%,250px);
  opacity:.92; pointer-events:none;
}
@media (max-width:900px){
  .sub-hero{ padding:38px 0 44px; }
}

/* 일반 구역 */
.page{ padding:96px 0; }
.page.pale{ position:relative; background:var(--pale); }
@media (max-width:900px){
  .page{ padding:62px 0; }
}

/* 사무소 개요 표 */
.fact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:820px){ .fact-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .fact-grid{ grid-template-columns:1fr; } }
.fact{
  background:#fff; border:1px solid #EFF3FB; border-radius:18px;
  padding:24px 22px; box-shadow:var(--sh);
}
.fact span{ display:block; font-size:13.5px; color:var(--t4); letter-spacing:.02em; margin-bottom:9px; }
.fact b{ font-size:16.5px; font-weight:700; color:var(--t1); line-height:1.6; word-break:keep-all; }

/* 업무 분야 목록 */
.area-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:900px){ .area-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .area-grid{ grid-template-columns:1fr; } }
.area{
  background:#fff; border:1px solid #EFF3FB; border-radius:20px;
  padding:32px 26px; box-shadow:var(--sh); word-break:keep-all;
}
.area h3{ font-size:19px; font-weight:700; color:var(--navy); margin-bottom:12px; }
.area p{ font-size:15px; color:var(--t3); line-height:1.82; }

/* 안내 줄 (주소 · 전화 · 영업시간) */
.info-list{ border-top:1px solid var(--line); }
.info-row{
  display:grid; grid-template-columns:150px 1fr; gap:20px;
  padding:26px 4px; border-bottom:1px solid var(--line); align-items:start;
}
@media (max-width:560px){ .info-row{ grid-template-columns:1fr; gap:8px; padding:20px 4px; } }
.info-row span{ font-size:15px; color:var(--t4); font-weight:600; }
.info-row b{ font-size:17px; font-weight:600; color:var(--t1); line-height:1.7; word-break:keep-all; }
.info-row a{ color:var(--navy); text-decoration:none; }
.info-row a:hover{ text-decoration:underline; }

/* 버튼 두 개 나란히 */
.map-box{ display:flex; gap:12px; flex-wrap:wrap; margin-top:38px; }

/* 알아두면 좋은 안내 상자 */
.note-box{
  margin-top:44px; background:var(--pale); border-radius:20px; padding:34px 32px;
}
@media (max-width:560px){ .note-box{ padding:26px 22px; } }
.note-box h3{ font-size:18px; font-weight:700; color:var(--navy); margin-bottom:16px; }
.note-box ul{ list-style:none; }
.note-box li{
  position:relative; padding-left:18px; margin-bottom:11px;
  font-size:15.5px; color:var(--t3); line-height:1.8; word-break:keep-all;
}
.note-box li:last-child{ margin-bottom:0; }
.note-box li::before{
  content:''; position:absolute; left:0; top:11px;
  width:5px; height:5px; border-radius:50%; background:var(--navy);
}
.note-box b{ color:var(--t1); font-weight:700; }

/* 세무뉴스 */
.post{
  background:#fff; border:1px solid #EFF3FB; border-radius:20px;
  padding:34px 32px; box-shadow:var(--sh); margin-bottom:16px;
}
@media (max-width:560px){ .post{ padding:26px 22px; } }
.post-date{ font-size:13.5px; color:var(--t4); letter-spacing:.04em; margin-bottom:12px; }
.post h3{ font-size:21px; font-weight:700; color:var(--t1); margin-bottom:14px; word-break:keep-all; }
.post p{ font-size:15.5px; color:var(--t3); line-height:1.85; word-break:keep-all; }

.soon-box{
  margin-top:40px; border:1px dashed var(--pale2); border-radius:20px;
  padding:30px 32px; background:#fff;
}
.soon-box p{ font-size:15.5px; color:var(--t2); margin-bottom:14px; }
.soon-box ul{ list-style:none; }
.soon-box li{
  position:relative; padding-left:18px; margin-bottom:9px;
  font-size:15px; color:var(--t3); line-height:1.8;
}
.soon-box li::before{
  content:''; position:absolute; left:0; top:10px;
  width:5px; height:5px; border-radius:50%; background:var(--pale2);
}

/* 자주 묻는 질문 : 맨 아래 한 줄 */
.faq-more{
  margin-top:34px; text-align:center; font-size:15.5px; color:var(--t3); line-height:1.8;
}
.faq-more a{ color:var(--navy); font-weight:700; text-decoration:none; }
.faq-more a:hover{ text-decoration:underline; }

/* 상담하기 : 전화번호 칸 */
.call-box{
  background:var(--pale); border-radius:26px; padding:52px 40px; text-align:center;
}
@media (max-width:560px){ .call-box{ padding:40px 24px; } }
.call-box .lead{ font-size:16px; color:var(--t3); margin-bottom:14px; }
.call-box .big-tel{
  display:inline-block; font-size:clamp(32px,5vw,54px); font-weight:900;
  color:var(--navy); letter-spacing:-.02em; text-decoration:none; line-height:1.2;
}
.call-box .big-tel:hover{ opacity:.82; }
.call-box .hours{ margin-top:16px; font-size:14.5px; color:var(--t4); word-break:keep-all; }
.call-box .desc{ margin-top:22px; font-size:15.5px; color:var(--t3); line-height:1.85; word-break:keep-all; }

/* 속페이지의 상담 띠 */
.page ~ .contact .links, .contact .links{ margin-top:30px; }


/* ==========================================================
   [17] 협력 전문가 — 가운데 큰 화면 + 아래 아이콘 카드
   ========================================================== */
.pro-stage{ max-width:900px; margin:0 auto; }

/* --- 가운데 : 고른 분의 약력 --- */
.pro-frame{ position:relative; }
.pro-pan{
  display:none; background:#fff; border-radius:26px; overflow:hidden;
  box-shadow:0 18px 46px rgba(69,88,135,.14);
}
.pro-pan.on{ display:block; animation:proIn .5s ease both; }
@keyframes proIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

.pro-ph{
  background:var(--navy); color:#fff; padding:16px 26px;
  font-size:14px; font-weight:600; letter-spacing:.04em;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.pro-ph span{ word-break:keep-all; }
.pro-ph b{                       /* 어떤 때 찾으면 되는지 */
  font-weight:400; font-size:13px; letter-spacing:0;
  opacity:.74; margin-left:10px;
}
.pro-ph em{ font-style:normal; opacity:.66; font-size:12.5px; letter-spacing:.06em; white-space:nowrap; }
@media (max-width:620px){
  .pro-ph{ display:block; }
  .pro-ph b{ display:block; margin:5px 0 0; }
  .pro-ph em{ display:block; margin-top:8px; }
}

.pro-pb{ display:grid; grid-template-columns:190px 1fr; gap:30px; padding:32px 34px; }
@media (max-width:620px){ .pro-pb{ grid-template-columns:1fr; gap:22px; padding:26px 22px; } }

.pro-photo img{
  width:100%; aspect-ratio:3/4; object-fit:cover; object-position:top center;
  border-radius:16px; background:var(--pale);
}
.pro-photo.empty{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:3/4; border-radius:16px; background:var(--pale);
}
.pro-photo.empty svg{
  width:52px; height:52px; fill:none; stroke:var(--pale2);
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
@media (max-width:620px){
  .pro-photo img, .pro-photo.empty{ max-width:190px; margin:0 auto; }
  .pro-name{ margin-bottom:4px; }
}

/* 사진 아래 이름 · 직업 */
.pro-name{
  margin-top:14px; text-align:center;
  font-size:21px; font-weight:700; color:var(--t1); word-break:keep-all;
}
.pro-name em{
  display:block; margin-top:5px;
  font-style:normal; font-size:15px; font-weight:500; color:var(--t3);
}
/* 한마디 — 가운데 */
.pro-say{
  margin:0; font-size:15px; color:var(--t2);
  line-height:1.85; word-break:keep-all; text-align:center;
}
@media (max-width:620px){ .pro-say br{ display:none; } }
.pro-career{
  list-style:none; margin-top:20px; padding-top:18px; border-top:1px solid var(--line);
}
.pro-career li{
  position:relative; padding:4.5px 0 4.5px 40px;
  font-size:14px; color:var(--t2); line-height:1.6; word-break:keep-all;
}
.pro-career li i{
  position:absolute; left:0; top:6px; width:30px; height:20px;
  display:flex; align-items:center; justify-content:center;
  border-radius:20px; font-size:11.5px; font-weight:700; font-style:normal;
}
.pro-career li i.now{ background:var(--navy); color:#fff; }
.pro-career li i.was{ background:var(--pale2); color:var(--navy); }

/* --- 아래 : 눌러서 바꾸는 아이콘 카드 --- */
.pro-track{
  display:flex; gap:16px; list-style:none;
  overflow-x:auto; padding:6px 2px 10px; scrollbar-width:none;
}
.pro-track::-webkit-scrollbar{ display:none; }
.pro-card{
  flex:0 0 168px; background:#fff; border:1px solid #EFF3FB; border-radius:18px;
  padding:22px 20px; box-shadow:var(--sh); cursor:pointer; word-break:keep-all;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.pro-card:hover{ transform:translateY(-4px); }
.pro-card:focus-visible{ outline:2px solid var(--navy); outline-offset:3px; }
.pro-card.act{
  transform:translateY(-6px); border-color:var(--pale2);
  box-shadow:0 16px 38px rgba(69,88,135,.2);
}
.pro-card .ic{
  width:48px; height:48px; border-radius:14px; background:var(--pale);
  display:grid; place-items:center; margin-bottom:15px; transition:background .35s;
}
.pro-card.act .ic{ background:var(--pale2); }
.pro-card .ic svg{
  width:25px; height:25px; fill:none; stroke:var(--navy);
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.pro-card h3{ font-size:16.5px; font-weight:700; color:var(--t1); line-height:1.4; }
.pro-card p{ margin-top:8px; font-size:13.5px; color:var(--t3); line-height:1.7; }

/* 아래 점 */
.pro-nav{ display:flex; justify-content:center; margin:14px 0 30px; }
.pro-dots{ display:flex; gap:9px; }
.pro-dots i{
  width:8px; height:8px; border-radius:50%; background:#D9D9D9;
  transition:background .4s, width .4s; display:block; cursor:pointer;
}
.pro-dots i:hover{ background:#B9C3DC; }
.pro-dots i.act{ background:var(--navy); width:26px; border-radius:99px; }


/* ==========================================================
   [18] 함께 일하는 그림 (사무소 소개)
   ========================================================== */
.web-grid{
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:44px; align-items:center;
}
@media (max-width:1000px){ .web-grid{ grid-template-columns:1fr; gap:34px; } }

.web-wrap{ min-width:0; }
.web-map{ width:100%; height:auto; display:block; overflow:visible; }

/* 잇는 선 */
.w-line line{ stroke:var(--pale2); stroke-width:2; }

/* 전문가끼리 이어지는 둘레 */
.w-orbit{ fill:none; stroke:var(--pale2); stroke-width:2; stroke-linecap:round; }

/* 움직이는 화살표 — 둘레를 도는 것과 가운데를 오가는 것 */
.w-arrow{ fill:var(--navy); opacity:.85; }
.w-arrow.w-in{ opacity:.5; }        /* 가운데 쪽은 조금 옅게 */
@media (prefers-reduced-motion: reduce){ .w-flow{ display:none; } }

/* 가운데 : 사무소 */
.w-core circle{ fill:var(--navy); }
.w-core-t{
  fill:#fff; font-size:16px; font-weight:700; text-anchor:middle;
  font-family:'Noto Sans KR',sans-serif;
}
.w-core-t tspan{ font-size:13px; font-weight:400; opacity:.78; }

/* 둘레 : 전문가 */
.w-node circle{ fill:#fff; stroke:var(--pale2); stroke-width:1.6; }
.w-nm{
  fill:var(--t1); font-size:15px; font-weight:700; text-anchor:middle;
  font-family:'Noto Sans KR',sans-serif;
}
.w-sub{
  fill:var(--t4); font-size:12px; text-anchor:middle;
  font-family:'Noto Sans KR',sans-serif;
}

/* 오른쪽 : 일이 흘러가는 순서 */
.web-step{ display:grid; gap:14px; }
.ws{
  background:#fff; border:1px solid #EFF3FB; border-radius:16px;
  padding:20px 22px; box-shadow:var(--sh); word-break:keep-all;
  display:grid; grid-template-columns:34px 1fr; align-items:baseline; gap:6px;
}
.ws b{
  font-size:13px; font-weight:800; color:var(--navy); letter-spacing:.06em;
}
.ws span{ font-size:15px; color:var(--t3); line-height:1.7; }

/* 좁은 화면에서는 그림을 옆으로 밀어 볼 수 있게 */
@media (max-width:680px){
  .web-wrap{ overflow-x:auto; padding-bottom:6px; scrollbar-width:none; }
  .web-wrap::-webkit-scrollbar{ display:none; }
  .web-map{ width:620px; }
}

/* ==========================================================
   [19] 휴대폰 : 왼쪽에서 시작하는 구성
   (첫 화면은 지금 모습 그대로 두었습니다)
   ========================================================== */
@media (max-width:900px){
  /* 제목 묶음 */
  .title_box{ text-align:left; margin-bottom:32px; }
  .title_box .dots{ justify-content:flex-start; }
  .title_box .text br{ display:none; }

  /* 상담 절차 : 번호와 글을 왼쪽으로 */
  .step{ text-align:left; padding:28px 24px; }
  .step .n{ margin:0 0 16px; }

  /* 협력 전문가 */
  .pro-name, .pro-say{ text-align:left; }
  .pro-photo img, .pro-photo.empty{ margin:0; }
  .pro-say br{ display:none; }

  /* 세무 일정 오른쪽 카드 */
  .sched-card h3{ text-align:left; }
  .sched-note{ text-align:left; }

  /* 오시는 길 · 문의 */
  .contact{ text-align:left; }
  .contact .links{ justify-content:flex-start; }
  .contact .text br{ display:none; }

  /* 자주 묻는 질문 맨 아랫줄 */
  .faq-more{ text-align:left; }

  /* 상담하기 : 전화번호 칸 */
  .call-box{ text-align:left; padding:36px 26px; }
  .call-box .hours, .call-box .desc{ word-break:keep-all; }
  .call-box .desc br{ display:none; }

  /* 속페이지 첫 칸 : 글은 왼쪽, 서명은 그 아래 오른쪽에 */
  .sub-hero{ text-align:left; padding:38px 0 46px; }
  .sub-hero .sign{
    position:static; margin:20px 0 0 auto;
    width:min(52%,200px);
  }

  /* 버튼은 알약 모양으로 */
  .btn{ border-radius:99px; min-width:0; width:100%; max-width:330px; height:56px; font-size:16px; }
  .contact .links a{ border-radius:99px; padding:15px 26px; }
  .map-box .btn, .call-box ~ .map-box .btn{ max-width:none; }

  /* 첫 화면 버튼은 지금 모양 그대로 */
  .stage-cta .btn{ border-radius:5px; width:auto; }
}