/* 이상덕세무사사무소 홈페이지
 * 디자인 토큰과 공통 컴포넌트.
 * 값의 근거는 ../../01_기획/기획.md 6절.
 */

/* ── 브레이크포인트 19종, 왜 이만큼 필요한가 ──────────────────
 *
 * 2026-08-23 에 전수 조사했다. 미디어쿼리 조건 76건에 고유 값 19종이다.
 * 값이 많아 보여 줄이려 했으나, 열어 보니 줄일 것이 없었다.
 * 값을 옮기기 전에 이 표를 읽는다.
 *
 * ■ 주 전환점
 *   900px   전역 1단 → 2단. 11개 파일 23곳.
 *           .trust-in .contact-grid .ab-grid .sv-diff .blog-grid .tool 등.
 *           ⚠ 옮기면 사이트 전체가 흔들린다. 손대지 않는다.
 *
 * ■ 보조 전환점
 *   820px   fit-list 계열 10곳. 짝은 max-width:819px
 *   1000px  히어로·사례 갤러리·자료실 7곳. 짝은 max-width:999px
 *   1040px  3단 그리드 5곳. 짝은 max-width:1039px (680~1039 중간 구간과 이어진다)
 *
 * ■ 컴포넌트 전용, 저마다 이유가 있다
 *   920px   pr-list 계열 6곳. 항목 글이 길어 900 에서 깨진다. 그래서 20px 늦게 꺾는다
 *   940px   rev-gallery 2단 → 3단. 후기 원본이 367px 안팎이라
 *           3단을 일찍 시작하면 카드가 좁아져 흐려진다
 *   960px   모바일 내비 전환. 데스크톱 내비가 기본 상태라 min 짝이 필요 없다
 *   860px   .ix-head(max) / .case-cols·.about-grid(min). 서로 다른 컴포넌트다
 *
 * ⚠ 961px 은 .header-cta 가 뜨는 폭(max-width:960px)과 짝이다. 반드시 함께 움직인다.
 *   전에는 1000px 이라 961~999px 39px 구간에서 「상담 신청」이 메뉴와 버튼에
 *   두 번 나왔다. 한쪽만 옮기면 그 구멍이 되살아난다. 상세는 95-header.css 주석.
 *
 * ⚠ 같은 숫자가 max 와 min 양쪽에 있는 것이 넷 있다(560·700·760·860).
 *   겹침 사고로 보이지만 아니다. 열어 보면 서로 다른 컴포넌트다.
 *   예로 560 은 max 쪽이 .hero-stats, min 쪽이 .rev-gallery·.ch-list 다.
 *   값이 같다고 합치면 엉뚱한 컴포넌트가 엉뚱한 구간에서 바뀐다.
 *
 * ⚠ 639px·719px 은 짝 없는 홑값이라 640·720 으로 옮기고 싶어진다.
 *   옮기지 않는다. 얻는 것이 미관뿐인데 브레이크포인트는 값 하나가
 *   구간 전체를 바꾼다. 위험 대비 이득이 안 맞는다.
 * ───────────────────────────────────────────────── */

/* ── 토큰 ───────────────────────────────── */
:root{
  /* 색. 브랜드 블루가 주색이되 포인트로만 쓴다.
     노을 계열은 섹션마다 하나씩 배정한다. */
  --blue:#0072BC;
  --blue-dark:#005A96;
  --blue-soft:#EDF5FB;  /* --blue 글씨 4.61:1. 옛 #E8F2FA 는 4.48 로 미달 */
  --sunset:#E4703A;        /* 히어로, 상담 */
  --amber:#F2A63B;         /* 진행 사례 */

  /* 강조색을 「글씨」로 쓸 때의 짝이다.
     위 두 색은 흰 바탕에서 sunset 3.14:1, amber 2.04:1 로 본문 기준(4.5)에 못 미친다.
     면·선·아이콘 같은 장식에는 위 색을, 글자와 흰 글씨를 얹는 버튼 바탕에는 아래를 쓴다.
     노을에서 뽑은 색조는 그대로 두고 명도만 낮췄다. */
  --sunset-ink:#B54A19;    /* 흰 4.71 → 5.31. 아래 ⚠ 참조 */
  --sunset-ink-dark:#A14216; /* 버튼 호버 6.35:1 */
  --amber-ink:#9A5E0A;     /* 흰 4.70 → 5.28 */

  /* ⚠ 2026-08-23 에 두 ink 를 한 단 더 어둡게 내렸다.
     처음 값(#C2501B·#A5650B)은 흰 바탕에서만 4.7 로 통과하고
     틴트 배경(--paper-2·--blue-soft·--sv-cream·--ab-tint·--amber-cream·--rev-cream)
     여섯 곳에서 4.10~4.39 로 전부 본문 기준(4.5) 에 못 미쳤다.
     흰 바탕만 재고 넘어간 것이 원인이다. 지금 값은 여섯 곳 전부 4.6 이상이다.
     이 색은 버튼 바탕이면서 동시에 눈썹 라벨 글씨이기도 하다. 한쪽만 보고 옮기지 않는다. */
  --purple:#6B5C8F;        /* 대표 소개, 원칙 */
  --midnight:#16233F;      /* 푸터 */
  --deep-ink:#0B1020;      /* 히어로 바탕 */

  /* 오류·경고. 브랜드 표의 「할인·강조」 자리다.
     폼이 막히거나 전송이 실패했을 때만 보인다.
     흰 바탕 대비 5.62:1 로 본문 AA 기준을 넘는다.
     색만으로 알리지 않고 언제나 문구가 함께 나간다. */
  /* 헤더 높이. 예전에는 정의 없이 var(--header-h,70px) 폴백으로만 굴러갔다. */
  --header-h:70px;

  --danger:#C62828;
  --danger-soft:#FCEDEB;

  --paper:#FFFFFF;
  --paper-2:#F5F7FA;
  --line:#E2E8F0;
  --line-soft:#EDF1F6;

  --ink:#1A1D23;
  --ink-2:#414B59;
  --ink-3:#626E7E;   /* 틴트 배경 여섯 곳 전부 4.5 이상. #697687 은 전부 미달이었다 */

  /* 글자 크기 아홉 단.
     예전에는 선언이 149회에 값이 75종이었다. 눈으로 구별 못 하는 차이가
     쪽마다 흩어져 있었고, clamp(16px,1.45vw,17.5px) 와 (16px,1.4vw,17.5px) 처럼
     0.05vw 로 갈라진 쌍이 여럿이었다. 규칙이 만든 값이 아니라 표류였다.

     ⚠ 새 크기가 필요해 보이면 열째 단을 만들기 전에 그 컴포넌트를 먼저 의심한다.
        여기 안 맞는다는 것은 대개 스케일이 모자란 것이 아니라 그 자리가 틀렸다는 뜻이다.
     ⚠ 본문 하한은 15px 이다. 그 아래로 내리지 않는다. */
  /* 히어로급 대제목 전용. 섹션 제목은 --fs-h1 이 위다. (2026-08-23 대표 판단) */
  --fs-display:clamp(34px,4.9vw,67px);
  --fs-h1:clamp(30px,3.7vw,53px);        /* 쪽 머리 제목 */
  --fs-h2:clamp(26px,2.9vw,40px);        /* 섹션 제목 */
  --fs-h3:clamp(21px,2.2vw,29px);        /* 카드·항목 제목 */
  --fs-h4:clamp(18px,1.7vw,22px);        /* 소제목 */
  --fs-lead:clamp(16.5px,1.5vw,19px);    /* 리드문·도입부 */
  --fs-body:clamp(16px,1.45vw,17.5px);   /* 본문 */
  --fs-meta:15.5px;                      /* 날짜·캡션·보조 */
  --fs-eyebrow:15px;                     /* 자간 붙는 라벨 */

  /* 굵기 네 단.
     지금 값을 바꾸지는 않았다. 제목 계열이 전부 800 이고 그 아래가 700 이라
     중간이 비어 보이지만, 700 을 600 으로 내리는 것은 정리가 아니라 위계 재설계다.
     어느 자리를 내릴지는 화면을 보고 따로 정한다. */
  --fw-body:400;
  --fw-medium:600;
  --fw-bold:700;
  --fw-black:800;

  /* 모서리 다섯 단.
     예전에는 8·9·10·11·12px 다섯 값이 4px 폭 안에 흩어져 있었다.
     눈으로 구별되지 않는 차이라 --radius-sm 하나로 모았다.

     ⚠ 0 과 50% 는 토큰으로 올리지 않는다.
        0 은 초기화라 뜻이 그대로 보이고, 50% 는 원형이라 크기와 무관한 의미값이다.
        여백에서 고정 px 을 안 올린 것과 같은 기준이다. */
  --radius-xs:2px;      /* 이미지·얇은 요소 */
  --radius-sm:10px;     /* 작은 카드·버튼 */
  --radius:14px;        /* 기본 카드 */
  --radius-lg:20px;     /* 큰 카드 */
  --radius-pill:999px;  /* 알약 */
  /* 그림자는 검정이 아니라 배경 색을 머금는다 */
  --shadow-sm:0 1px 2px rgba(22,35,63,.06), 0 2px 8px rgba(22,35,63,.05);
  --shadow:0 2px 4px rgba(22,35,63,.06), 0 12px 32px rgba(22,35,63,.09);
  --shadow-lg:0 4px 8px rgba(22,35,63,.07), 0 24px 56px rgba(22,35,63,.12);

  --wrap:1200px;
  /* 여백.
     값은 4px 격자에 맞춘다. 다만 8px 미만은 4px 격자가 너무 거칠어
     (2px 을 4px 로 올리면 두 배가 된다) 그 아래만 2px 격자를 쓴다.
     즉 8px 이상은 4의 배수, 8px 미만은 2의 배수다. 현재 2·4·6px 만 쓰인다.

     ⚠ 토큰으로 올린 기준은 「일관성」이 아니라 「반복 길이」다.
        clamp 은 길어서 여러 번 나오면 눈에 거슬리고 값도 한눈에 안 보인다.
        반대로 padding:8px 은 읽는 순간 8px 인 것이 보이는 편이 낫다.
        고정 px 을 토큰으로 바꾸지 않는다. --sp-2 는 숫자를 가리기만 한다. */
  --gap:clamp(20px,2.4vw,32px);      /* 가장 많이 쓰이는 사이 여백 */
  --gap-sm:clamp(16px,2vw,24px);     /* 한 단 좁은 사이 여백 */
  --gap-xs:clamp(16px,1.6vw,20px);   /* 촘촘한 묶음 */
  --sec-y:clamp(64px,8vw,116px);     /* 섹션 위아래 */

  --z-header:100;
  --z-cta:200;
  --z-skip:300;
}
/* ── 바탕 ───────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Pretendard Variable',Pretendard,'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  font-size:var(--fs-lead);
  line-height:1.75;
  word-break:keep-all;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--blue);text-underline-offset:3px;}
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:3px;
  /* 접근성 초점 테두리다. 모서리 스케일 밖에 둔다.
     잘 보이는 것이 기능이라 시각 일관성보다 우선한다.
     누락으로 보고 var(--radius-xs) 로 바꾸지 않는다. */
  border-radius:4px;
}
/* ── 타이포 ─────────────────────────────── */
h1,h2,h3,h4{margin:0;line-height:1.24;text-wrap:balance;font-weight:800;letter-spacing:-.035em;}
h1{font-size:var(--fs-h1);}
h2{font-size:var(--fs-h2);font-weight:700;letter-spacing:-.03em;}
h3{font-size:var(--fs-h3);font-weight:700;letter-spacing:-.022em;}
h4{font-size:var(--fs-h4);font-weight:700;letter-spacing:-.018em;}
p{margin:0 0 1em;text-wrap:pretty;}
p:last-child{margin-bottom:0;}
.eyebrow{
  font-size:var(--fs-meta);
  font-weight:600;
  letter-spacing:.1em;
  margin:0 0 16px;
}
.lede{font-size:var(--fs-h4);color:var(--ink-2);max-width:60ch;}
.muted{color:var(--ink-3);}
.tnum{font-variant-numeric:tabular-nums;}
.nb{white-space:nowrap;}
/* ── 뼈대 ───────────────────────────────── */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:clamp(20px,4vw,40px);}
section{padding-block:var(--sec-y);}
/* 아래 여백을 조금 더 준다. 수학적으로 같으면 눈에는 위가 넓어 보인다 */
section{padding-bottom:calc(var(--sec-y) * 1.08);}
.sec-head{max-width:64ch;margin-bottom:clamp(32px,4vw,56px);}
.tint{background:var(--paper-2);}
.skip{
  position:absolute;left:-9999px;top:0;z-index:var(--z-skip);
  background:var(--blue);color:#fff;padding:12px 20px;
  border-radius:0 0 var(--radius-sm) 0;font-weight:600;text-decoration:none;
}
.skip:focus{left:0;}
/* ── 버튼 ───────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:16px 24px;border-radius:var(--radius);
  font-size:var(--fs-body);font-weight:700;letter-spacing:-.01em;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background .22s ease,color .22s ease,border-color .22s ease,transform .12s ease,box-shadow .22s ease;
}
.btn-primary{background:var(--blue);color:#fff;box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--blue-dark);box-shadow:var(--shadow);}
.btn-sunset{background:var(--sunset-ink);color:#fff;box-shadow:var(--shadow-sm);}
.btn-sunset:hover{background:var(--sunset-ink-dark);box-shadow:var(--shadow);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line);}
.btn-ghost:hover{border-color:var(--ink-3);background:var(--paper-2);}
.btn:active{transform:translateY(1px);}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;}
/* 본문 안에서 다음 페이지로 넘기는 작은 링크 */
.more{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:700;color:var(--blue);text-decoration:none;
  font-size:var(--fs-body);
}
.more:hover{text-decoration:underline;}
.more::after{content:"→";transition:transform .2s ease;}
.more:hover::after{transform:translateX(3px);}
/* ── 헤더 ───────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:var(--z-header);
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.header-in{display:flex;align-items:center;gap:clamp(16px,2.4vw,36px);
  height:clamp(64px,7vw,78px);}
.logo{display:flex;align-items:center;flex:0 0 auto;}
.logo img{height:clamp(32px,3.4vw,40px);width:auto;}
.nav{display:flex;gap:clamp(16px,1.8vw,28px);margin-left:auto;}
.nav a{
  color:var(--ink-2);text-decoration:none;font-size:var(--fs-body);font-weight:600;
  padding:6px 2px;border-bottom:2px solid transparent;transition:color .2s ease,border-color .2s ease;
}
.nav a:hover{color:var(--ink);}
.nav a[aria-current="page"]{color:var(--blue);border-bottom-color:var(--blue);}
.header-cta{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
.header-tel{
  color:var(--ink);text-decoration:none;font-weight:700;font-size:var(--fs-body);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.header-cta .btn{padding:12px 16px;font-size:var(--fs-meta);}
.nav-toggle{display:none;}
@media (max-width:960px){
  .nav{
    position:fixed;inset:auto 0 0 0;top:var(--header-h,70px);
    flex-direction:column;gap:0;background:var(--paper);
    border-top:1px solid var(--line);padding:8px 0 20px;
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity .2s ease,transform .2s ease;
    max-height:calc(100dvh - var(--header-h,70px));overflow-y:auto;
  }
  .nav[data-open="true"]{opacity:1;transform:none;pointer-events:auto;}
  .nav a{padding:16px clamp(20px,4vw,40px);border-bottom:1px solid var(--line-soft);font-size:var(--fs-body);}
  .nav a[aria-current="page"]{border-bottom-color:var(--line-soft);}
  .nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    margin-left:auto;width:44px;height:44px;border:1px solid var(--line);
    background:var(--paper);border-radius:var(--radius-sm);cursor:pointer;
  }
  .nav-toggle span{display:block;width:19px;height:2px;background:var(--ink);position:relative;}
  .nav-toggle span::before,.nav-toggle span::after{
    content:"";position:absolute;left:0;width:19px;height:2px;background:var(--ink);
    transition:transform .2s ease;
  }
  .nav-toggle span::before{top:-6px;}
  .nav-toggle span::after{top:6px;}
  .header-tel{display:none;}
  /* 하단 고정 버튼이 있으므로 헤더에서는 뺀다. 좁은 화면에서 잘린다 */
  .header-cta{display:none;}
  .nav-toggle{margin-left:auto;}
}
/* ── 푸터 ───────────────────────────────── */
.site-footer{background:var(--midnight);color:#C9D4E5;padding-block:clamp(48px,6vw,76px) clamp(28px,3vw,40px);}
.site-footer a{color:#DCE5F2;text-decoration:none;}
.site-footer a:hover{text-decoration:underline;}
/* 칸 수를 못 박는다. 예전 auto-fit(150px) 은 150px 칸을 먼저 채우고
   남는 폭을 첫 칸에 줘서 430~760px 에서 주소 칸이 18~34px 로 눌려
   한 글자씩 세로로 떨어졌다(2026-09-24 폰 제보). */
.foot-top{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,4vw,56px);padding-bottom:clamp(32px,4vw,48px);}
.foot-top>div:first-child{grid-column:1/-1;}
@media (min-width:680px){.foot-top{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (min-width:900px){
  .foot-top{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));}
  .foot-top>div:first-child{grid-column:auto;}
}
.foot-logo img{height:38px;width:auto;margin-bottom:16px;}
.foot-info{font-size:var(--fs-meta);line-height:1.85;color:#9FB0C7;}
.foot-col h3{font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.06em;color:#fff;margin-bottom:16px;}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:var(--fs-meta);}
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.14);padding-top:24px;
  display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;
  font-size:var(--fs-meta);color:#8296B0;
}
.foot-bottom .legal{margin-left:auto;display:flex;gap:20px;}
/* ── 모바일 하단 고정 ────────────────────── */
.mobile-cta{display:none;}
@media (max-width:760px){
  .mobile-cta{
    display:grid;grid-template-columns:1fr 1.4fr;gap:8px;
    position:fixed;left:0;right:0;bottom:0;z-index:var(--z-cta);
    padding:8px clamp(16px,4vw,20px) calc(8px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.95);backdrop-filter:blur(12px);
    border-top:1px solid var(--line);
  }
  .mobile-cta .btn{padding:16px 12px;font-size:var(--fs-body);}
  /* 상담 페이지에서는 전화 한 칸만 둔다. 폼 제출 버튼과 색이 겹쳐
     주 버튼이 둘로 보이는 것을 막는다. */
  .mobile-cta-tel{grid-template-columns:1fr;}
  body{padding-bottom:84px;}
}
/* ── 되풀이 쓰는 조각 ────────────────────── */
.cards{display:grid;gap:var(--gap);}
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(24px,2.6vw,32px);
  display:flex;flex-direction:column;
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease;
}
.card:hover{border-color:#CBD7E6;box-shadow:var(--shadow);transform:translateY(-2px);}
.card h3{margin-bottom:8px;}
.card p{color:var(--ink-2);font-size:var(--fs-body);}
.card .more{margin-top:auto;padding-top:16px;}
.stat-row{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,60px);}
.stat b{display:block;font-size:var(--fs-h2);font-weight:800;letter-spacing:-.03em;
  line-height:1.15;font-variant-numeric:tabular-nums;}
.stat span{display:block;font-size:var(--fs-meta);color:var(--ink-3);margin-top:4px;}
/* ── 메인 히어로 ────────────────────────── */
.hero{
  position:relative;min-height:min(88dvh,760px);overflow:hidden;
  background:var(--deep-ink);padding:0;display:flex;align-items:flex-end;
}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,
    rgba(6,10,20,.90) 0%,rgba(6,10,20,.66) 28%,rgba(6,10,20,.18) 54%,rgba(6,10,20,0) 74%);
}
.hero-copy-wrap{position:relative;width:100%;padding-block:clamp(40px,7vh,88px);}
#hero-copy,#hero-sub{will-change:opacity,transform;}
.hero-badge{
  display:inline-block;font-size:var(--fs-meta);font-weight:600;letter-spacing:.05em;
  color:#FFD9A8;border:1px solid rgba(255,217,168,.45);border-radius:var(--radius-pill);
  padding:4px 16px;margin-bottom:16px;background:rgba(10,14,26,.35);
}
.hero-title{
  /* 2026-08-23 대표 판단으로 --fs-display 로 올렸다.
     이 자리가 --fs-h2 로 덮여 있어서 홈 대제목 40px 이 나머지 일곱 쪽의 67px 보다 작았다.
     사이트의 약속을 담은 문장이 가장 작은 대제목이던 것을 바로잡는다. */
  color:#fff;font-size:var(--fs-display);line-height:1.16;
  max-width:19ch;text-shadow:0 2px 30px rgba(0,0,0,.5);
}
.hero-title .accent{color:#FFC98A;}
.hero-lede{
  color:#D9E3F2;font-size:var(--fs-lead);line-height:1.7;
  margin:16px 0 0;max-width:44ch;text-shadow:0 1px 16px rgba(0,0,0,.55);
}
.hero-stats{
  margin:20px 0 0;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.18);max-width:640px;
}
.hero-stats .stat b{color:#fff;font-size:var(--fs-h3);}
.hero-stats .stat span{color:#B9C6DA;}
.hero-btns{margin-top:24px;}
.hero-ghost{color:#fff;border-color:rgba(255,255,255,.4);}
.hero-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;}
/* ── 신뢰 한 줄 ─────────────────────────── */
.trust{padding-block:clamp(40px,4.6vw,64px);}
.trust-in{display:grid;gap:clamp(16px,2.4vw,40px);
  grid-template-columns:minmax(0,1fr);align-items:center;}
@media (min-width:900px){.trust-in{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);}}
.trust-line{font-size:var(--fs-h3);font-weight:700;letter-spacing:-.028em;
  line-height:1.4;margin:0;}
.trust-line b{color:var(--blue);}
.trust-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.trust-list li{position:relative;padding-left:24px;color:var(--ink-2);
  font-size:var(--fs-body);}
.trust-list li::before{
  content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;
  border-radius:50%;background:var(--blue);
}
/* ── 서비스 격자. 3열 균등을 피해 크기를 달리한다 ── */
.svc-grid{grid-template-columns:minmax(0,1fr);}
@media (min-width:680px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:1040px){
  .svc-grid{grid-template-columns:repeat(6,minmax(0,1fr));}
  .svc-grid .card:nth-child(1),
  .svc-grid .card:nth-child(2){grid-column:span 3;}
  .svc-grid .card:nth-child(3){grid-column:span 6;}
  .svc-grid .card:nth-child(4),
  .svc-grid .card:nth-child(5),
  .svc-grid .card:nth-child(6){grid-column:span 2;}
  .svc-grid .card:nth-child(3){
    background:linear-gradient(120deg,var(--blue-soft) 0%,var(--paper) 62%);
    border-color:#C8DEF0;
  }
  .svc-grid .card:nth-child(3) h3{font-size:var(--fs-h3);}
}
/* ── 이런 경우 ──────────────────────────── */
.fit-list{list-style:none;margin:0;padding:0;display:grid;gap:2px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;}
@media (min-width:820px){.fit-list{grid-template-columns:repeat(2,minmax(0,1fr));}}
.fit-list li{background:var(--paper);padding:clamp(20px,2.2vw,28px);}
.fit-list b{display:block;font-size:var(--fs-lead);font-weight:700;
  letter-spacing:-.018em;margin-bottom:4px;}
.fit-list span{color:var(--ink-3);font-size:var(--fs-body);}
/* ── 원칙 ───────────────────────────────── */
.pr-list{list-style:none;counter-reset:pr;margin:0;padding:0;
  display:grid;gap:var(--gap);}
@media (min-width:920px){.pr-list{grid-template-columns:repeat(3,minmax(0,1fr));}}
.pr-list li{counter-increment:pr;padding-top:24px;border-top:2px solid var(--purple);position:relative;}
.pr-list li::before{
  content:counter(pr,decimal-leading-zero);
  position:absolute;top:-2px;right:0;
  font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.1em;color:var(--acc-ink,var(--purple));
  font-variant-numeric:tabular-nums;
}
.pr-list h3{margin-bottom:8px;}
.pr-list p{color:var(--ink-2);font-size:var(--fs-body);}
/* ── 사례·자료실 격자 ───────────────────── */
.case-grid,.lib-grid{grid-template-columns:minmax(0,1fr);}
@media (min-width:760px){.case-grid,.lib-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
.lib-card{text-decoration:none;color:inherit;}
.lib-card h3{color:var(--ink);}
.lib-card .more{margin-top:auto;padding-top:16px;}
.sec-more{margin:clamp(24px,3vw,40px) 0 0;}
/* ── 상담 띠 ────────────────────────────── */
.cta-band{background:var(--midnight);color:#E3EAF5;}
.cta-band h2{color:#fff;}
.cta-in{display:grid;gap:clamp(24px,3vw,44px);align-items:center;}
@media (min-width:900px){.cta-in{grid-template-columns:minmax(0,1.35fr) minmax(0,auto);}}
.cta-lede{color:#AFBED4;margin:16px 0 0;font-size:var(--fs-lead);}
.cta-ghost{color:#fff;border-color:rgba(255,255,255,.38);}
.cta-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;}
/* ── 하위 페이지 공통 ───────────────────── */
.page-head{padding-block:clamp(48px,6vw,84px) clamp(32px,3.4vw,44px);}
.page-head h1{margin-bottom:16px;}
.sec-title{margin-bottom:clamp(24px,3vw,36px);}
.sr-head{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
@media (min-width:820px){.svc-full{grid-template-columns:repeat(2,minmax(0,1fr));}}
/* 모의 세무감사 */
@media (min-width:900px){.audit-in{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);}}
@media (min-width:920px){.diff-list{grid-template-columns:repeat(3,minmax(0,1fr));}}
.caution{margin-top:clamp(28px,3.4vw,44px);padding:clamp(24px,2.4vw,32px);
  border:1px solid var(--line);border-left:3px solid var(--ink-3);
  border-radius:0 var(--radius) var(--radius) 0;background:var(--paper-2);}
.caution h3{font-size:var(--fs-h4);margin-bottom:12px;}
.caution ul{margin:0 0 12px;padding-left:20px;color:var(--ink-2);
  font-size:var(--fs-body);display:flex;flex-direction:column;gap:6px;}
/* 대표 소개 */
@media (min-width:860px){.about-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);}}
/* 사례 */
@media (max-width:700px){.case-list li::before{position:static;display:block;margin-bottom:4px;}}
/* 자료실 */
.lib-grid-full,.ch-grid{grid-template-columns:minmax(0,1fr);}
@media (min-width:700px){.lib-grid-full,.ch-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:1040px){
  .lib-grid-full{grid-template-columns:repeat(6,minmax(0,1fr));}
  .lib-grid-full .card:nth-child(1),.lib-grid-full .card:nth-child(2){grid-column:span 3;}
  .lib-grid-full .card:nth-child(3),.lib-grid-full .card:nth-child(4),
  .lib-grid-full .card:nth-child(5){grid-column:span 2;}
}
/* 상담 폼 */
.contact-grid{display:grid;gap:clamp(32px,4vw,64px);align-items:start;}
@media (min-width:900px){.contact-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);}}
.form{display:flex;flex-direction:column;gap:var(--gap-sm);}
.field{display:flex;flex-direction:column;gap:8px;border:0;padding:0;margin:0;min-width:0;}
.field label,.field legend{font-weight:700;font-size:var(--fs-body);padding:0;}
.field .muted{font-weight:400;font-size:var(--fs-meta);}
.req{color:var(--sunset-ink);font-size:var(--fs-meta);font-weight:600;margin-left:4px;}
input[type="tel"],input[type="text"],select,textarea{
  font:inherit;font-size:var(--fs-body);
  padding:16px 16px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper);color:var(--ink);width:100%;
  transition:border-color .2s ease,box-shadow .2s ease;
}
input:hover,select:hover,textarea:hover{border-color:#C6D2E1;}
/* 포커스 링은 옛 --blue-soft 로는 1.13:1 이라 흰 바탕에서 보이지 않았다.
   WCAG 2.4.11 이 요구하는 3:1 을 넘기려고 브랜드 파랑을 옅게 깐다. */
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,114,188,.45);outline:none;}
textarea{resize:vertical;line-height:1.7;}
.checks{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
.checks label{display:flex;align-items:center;gap:8px;font-weight:400;
  font-size:var(--fs-meta);color:var(--ink-2);cursor:pointer;}
.checks input,.consent input{width:19px;height:19px;accent-color:var(--blue);flex:0 0 auto;margin:0;}
.consent label{display:flex;align-items:flex-start;gap:8px;font-weight:400;
  font-size:var(--fs-meta);color:var(--ink-2);line-height:1.6;}
.err{color:var(--danger);font-size:var(--fs-meta);margin:0;font-weight:600;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-submit{align-self:flex-start;}
.form-msg{margin:0;font-size:var(--fs-body);font-weight:600;padding:16px 16px;border-radius:var(--radius);}
.form-msg.ok{background:#E7F4EE;color:#0F6B4A;}
.form-msg.bad{background:var(--danger-soft);color:var(--danger);}
.contact-side{background:var(--paper-2);border-radius:var(--radius-lg);
  padding:clamp(24px,2.8vw,36px);border:1px solid var(--line);}
.contact-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:24px;}
.contact-list li{display:flex;flex-direction:column;gap:4px;padding-bottom:20px;
  border-bottom:1px solid var(--line);}
.contact-list li:last-child{border-bottom:0;padding-bottom:0;}
.contact-list > li > span:first-child{font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.06em;color:var(--ink-3);}
.contact-list .big{font-size:var(--fs-h4);font-weight:800;letter-spacing:-.02em;
  color:var(--ink);text-decoration:none;}
.contact-list .big:hover{color:var(--blue);}
.contact-list .muted{font-size:var(--fs-meta);}
.addr{margin:2px 0 8px;font-size:var(--fs-body);color:var(--ink-2);}
/* 문서 쪽 */
.doc{max-width:74ch;}
.doc h2{font-size:var(--fs-h4);margin:clamp(32px,3vw,44px) 0 12px;}
.doc h2:first-child{margin-top:0;}
.doc p{color:var(--ink-2);font-size:var(--fs-body);}
.doc-date{margin-top:clamp(32px,4vw,52px);padding-top:20px;border-top:1px solid var(--line);font-size:var(--fs-meta);}
.notfound{padding-block:clamp(64px,9vw,128px) clamp(40px,5vw,64px);}
/* 아직 본문에서 쓰이는 것들 */
.audit-lede b{color:var(--sunset-ink);}


/* ── 05-base-refine.css ── */
/* 05-base-refine.css
 * 담당: 바탕 (여백 리듬 · 타이포 위계 · 카드 · 눈썹 라벨 · 옛 섹션 배경 내리기)
 *
 * 레퍼런스(02_레퍼런스/레이아웃 세 장)에서 가져온 것은 넷이다.
 *   ① 여백이 크다. 다만 안쪽 글줄은 오히려 좁고 촘촘하다
 *   ② 제목이 화면을 가로지르고 본문은 작게 붙는다. 그 낙차가 곧 위계다
 *   ③ 상자를 안 쓴다. 얇은 선 하나와 여백으로 구분한다
 *   ④ 작은 대괄호 라벨로 위치를 찍는다
 * 버린 것은 과한 흑백 미니멀과 장식 세리프다.
 * 우리는 신뢰를 파는 곳이고 나이 드신 분도 읽어야 해서
 * 레퍼런스의 8px 라벨과 흐린 회색 본문을 그대로 쓸 수 없다.
 *
 * ⚠ 이 파일은 style.css 와 남의 조각을 고치지 않는다. 여기서 덮어쓰기만 한다.
 *   빌더가 05 → 10 → 20 → 30 → 35 → 40 → 50 → 60 → 70 → 80 순으로 잇는다.
 *   이 조각은 맨 앞이라 뒷조각이 언제든 제 쪽 사정에 맞게 다시 잡을 수 있다.
 *   반대로 뒷번호를 꼭 눌러야 하는 곳은 순서가 아니라 명시도로 이긴다.
 */

/* ── 1. 여백 리듬 ─────────────────────────────
 * 무작정 키우면 스크롤만 길어진다.
 * 그래서 섹션 사이·머리글 아래·좌우 여백은 벌리고,
 * 줄간격과 글줄 폭은 오히려 좁혔다. 벌린 만큼 붙여 길이는 지킨다.
 */
:root{
  --sec-y:clamp(76px,9.2vw,148px);        /* 64~116 → 76~148 */
}

main .wrap{padding-inline:clamp(24px,4.6vw,64px);}   /* 20~40 → 22~64 */

.sec-head{
  max-width:56ch;                                /* 64ch → 56ch, 글줄을 좁혀 제목을 세운다 */
  margin-bottom:clamp(40px,4.8vw,72px);          /* 32~56 → 38~72 */
}
.sec-head .lede{max-width:48ch;}

.sec-more{margin-top:clamp(32px,3.6vw,52px);}

/* 상자를 걷으면 칸끼리 붙어 보인다. 세로 사이를 특히 벌린다 */
.cards{
  column-gap:clamp(24px,3.2vw,52px);
  row-gap:clamp(32px,4vw,56px);
}

/* ── 2. 타이포 위계 ───────────────────────────
 * 제목은 키우고 자간을 더 조인다. 리드는 오히려 줄인다.
 * 둘의 낙차가 커야 밋밋함이 사라진다.
 * ⚠ .hero-title 은 제 값을 갖고 있어 여기 영향을 받지 않는다.
 */
body{
  font-size:var(--fs-lead);
  line-height:1.7;
}

h1{font-size:var(--fs-display);letter-spacing:-.042em;line-height:1.1;}
h2{font-size:var(--fs-h1);letter-spacing:-.04em;line-height:1.14;}
h3{font-size:var(--fs-h3);letter-spacing:-.026em;}

.lede{
  font-size:var(--fs-lead);          /* 18~22 → 16.5~19.5 */
  line-height:1.68;
  color:var(--ink-2);
  max-width:48ch;
}

/* ── 3. 카드에서 상자를 걷는다 ─────────────────
 * 테두리 넷 + 그림자 + 배경 + 둥근 모서리를 다 얹으면 화면이 무겁다.
 * 위쪽 헤어라인 하나와 여백으로 바꾸고 반응은 호버에서만 준다.
 * ※ 쪽마다 카드를 줄 목록으로 다시 짠 조각(60·70·80)이 있어
 *   지금 이 값이 그대로 나오는 곳은 404 쪽 정도다. 바탕값으로 남겨 둔다.
 */
.card{
  background:transparent;
  border:0;
  border-top:1px solid var(--line);
  border-radius:0;
  box-shadow:none;
  padding:var(--gap-sm) 0 0;
  transition:border-top-color .22s ease;
}
.card:hover{
  border-top-color:var(--ink);
  box-shadow:none;
  transform:none;
}
.card h3{margin-bottom:clamp(8px,1.2vw,16px);}
.card .more{padding-top:var(--gap-sm);}

/* 링크 카드는 누를 수 있다는 것이 보여야 한다.
   상자를 없앤 대신 선과 제목 색으로 알린다 */
.lib-card:hover{border-top-color:var(--blue);}
.lib-card:hover h3{color:var(--blue);}

/* ── 4. 좌표 라벨 ─────────────────────────────
 * 레퍼런스는 8px 대괄호 라벨을 쓰지만 우리는 15px 아래로 못 내려간다.
 * 대신 자간을 벌리고 대괄호를 흐리게 두어 작아 보이게 만든다.
 * 색은 아래 쪽별 강조색이 준다.
 */
.eyebrow{
  font-size:var(--fs-meta);
  font-weight:700;
  letter-spacing:.16em;
  color:var(--acc-ink,var(--ink-3));
  margin-bottom:var(--gap-xs);
}

/* ── 쪽별 강조색 ───────────────────────────────
 *
 * 2026-08-23 대표 채택안(절제). 쪽마다 넘길 때 색 관점이 생기게 하되,
 * 바꾸는 면은 눈썹 라벨과 섹션 번호 둘뿐이다.
 * 헤어라인·카드 테두리·버튼·로고·링크는 파랑 그대로다. 여기를 늘리지 않는다.
 *
 * ⚠ 전에는 색이 source/pages/*.html 인라인 style 에 박혀 있었다.
 *   그래서 CSS 만 검색해 색을 고치면 눈썹이 통째로 빠졌고,
 *   실제로 --sunset(3.14) --amber(2.04) 짜리 미달 눈썹 다섯이 남아 있었다.
 *   이제 색은 여기 한 곳에서만 준다. 인라인으로 되돌리지 않는다.
 *
 * ⚠ --sunset 과 --amber 를 글씨로 쓰지 않는다. -ink 짝만 쓴다.
 *   맨 색은 흰 바탕에서도 3.14 와 2.04 로 본문 기준에 한참 못 미친다.
 *
 * 쪽 클래스는 build.py 의 PAGE_ACCENT 가 <main> 에 붙인다.
 * privacy 와 404 는 실용 문서라 쪽 색이 없고 기본 회색으로 간다. */
.p-sunset{ --acc-ink:var(--sunset-ink); }
.p-amber { --acc-ink:var(--amber-ink);  }
.p-purple{ --acc-ink:var(--purple);     }
.sec-head .eyebrow::before,
.after-send .eyebrow::before,
.page-head .eyebrow::before{content:"[";margin-right:.5em;opacity:.5;}
.sec-head .eyebrow::after,
.after-send .eyebrow::after,
.page-head .eyebrow::after{content:"]";margin-left:.5em;opacity:.5;}

/* 진행 사례·자료실 쪽머리는 뒷조각이 눈썹 앞에 색 막대를 세운다.
   그대로 두면 여는 대괄호만 막대에 밀려 닫는 쪽 하나가 외톨이로 남는다 */


/* ── 5. 섹션 배경 실사를 내린다 ─────────────────
 * 대표 지시로 배경 실사가 소제목 옆 포인트 사진으로 바뀐다.
 * 50-section-bg.css 는 다른 담당이 참조할 수 있어 지우지 않고 여기서 덮는다.
 * 50 이 뒤에 오지만 display 를 선언하지 않으므로,
 * body 를 앞에 붙여 명시도를 올려 두면 순서와 무관하게 이긴다.
 */
body .hs::before,
body .page-head::before{display:none;}

/* 쪽머리 실사 포인트. contact·privacy 도 다른 쪽과 문법을 맞춘다 */
.hd-with-pic .wrap{position:relative;}
.hd-pic{
  display:none;
  position:absolute;right:0;top:50%;transform:translateY(-46%);
  width:clamp(150px,15vw,210px);line-height:0;
  border-radius:var(--radius-xs);overflow:hidden;
}
.hd-pic img{width:100%;height:auto;display:block;}
@media (min-width:900px){.hd-pic{display:block;}}


/* ── 10-hero.css ── */
/* 메인(index.html) 전용 조각.
 *
 * 담당 범위는 두 가지다.
 *   ① 히어로를 화면을 채우던 판에서 가로로 긴 띠로 줄인다.
 *   ② 메인의 나머지 섹션을 갤러리처럼 다듬는다. 섹션마다 포인트 색을 하나씩 살린다.
 *
 * style.css 는 건드리지 않는다. 같은 선택자로 뒤에서 덮어쓴다.
 * 이 조각은 빌더가 style.css 뒤에 이어 붙이므로 같은 특정도면 이쪽이 이긴다.
 * 메인에만 붙인 .hs / .hs-* 로 감싸 다른 쪽에 새지 않게 한다.
 */

/* ══ ① 히어로, 판에서 띠로 ══════════════════ */

/* 높이를 절반 가까이 줄이고 글을 위쪽으로 올린다 */
.hero{
  min-height:min(54dvh,500px);
  align-items:flex-start;
}
/* 글이 위로 갔으니 어두운 덮개도 뒤집는다. 위가 진하고 아래로 풀린다 */
.hero-scrim{
  background:linear-gradient(to bottom,
    rgba(6,10,20,.88) 0%,
    rgba(6,10,20,.72) 28%,
    rgba(6,10,20,.42) 60%,
    rgba(6,10,20,.14) 100%);
}
/* 띠 안에서는 세로로 쌓지 않고 좌우로 편다.
   왼쪽은 제목(#hero-copy), 오른쪽은 본문·수치·버튼(#hero-sub) */
.hero-copy-wrap{
  display:grid;
  gap:clamp(16px,2.2vw,44px);
  align-items:start;
  padding-block:clamp(32px,5vh,56px) clamp(24px,4.2vh,48px);
}
@media (min-width:1000px){
  .hero-copy-wrap{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);}
}
.hero-badge{
  font-size:var(--fs-meta);
  padding:4px 16px;
  margin-bottom:12px;
}
.hero-title{
  /* 크기는 style.css 가 --fs-display 로 준다. 여기서는 줄 간격과 폭만 잡는다. */
  line-height:1.14;
  /* 67px 에서는 두 줄로 안 들어간다. 폭을 좁혀 네 줄을 고르게 끊고
     「세무사」가 혼자 떨어지는 것을 막는다. */
  max-width:6.6em;
}
.hero-lede{
  font-size:var(--fs-lead);
  margin:0;
  max-width:40ch;
}
/* 세로 공간이 줄었으니 수치 셋을 가로로 눕힌다 */
.hero-stats{
  display:flex;
  flex-wrap:wrap;
  gap:8px 0;
  margin:clamp(16px,2vh,24px) 0 0;
  padding-top:clamp(16px,1.8vh,16px);
  max-width:none;
}
.hero-stats .stat{
  display:flex;
  align-items:baseline;
  gap:8px;
  padding:0 var(--gap-xs);
  border-left:1px solid rgba(255,255,255,.22);
}
.hero-stats .stat:first-child{padding-left:0;border-left:0;}
.hero-stats .stat b{
  display:inline;
  font-size:var(--fs-h4);
  line-height:1.2;
}
.hero-stats .stat span{
  display:inline;
  font-size:var(--fs-meta);
  margin-top:0;
}
.hero-btns{margin-top:clamp(16px,2.4vh,24px);}
.hero-btns .btn{padding:12px 24px;}
/* 좁은 화면. 띠가 답답하지 않도록 높이를 조금 더 준다 */
@media (max-width:999px){
  .hero{min-height:min(62dvh,560px);}
  .hero-copy-wrap{
    gap:16px;
    padding-block:clamp(28px,4.6vh,44px) clamp(24px,4vh,40px);
  }
  .hero-title{max-width:24ch;}
}
/* 더 좁아지면 칸막이 선이 줄바꿈에 걸려 어긋난다. 선을 빼고 간격으로 나눈다 */
@media (max-width:560px){
  .hero-stats{gap:6px 24px;}
  .hero-stats .stat{padding:0;border-left:0;}
}
/* ══ ② 메인 섹션, 갤러리처럼 ════════════════ */

/* 섹션마다 포인트 색 하나. 한 화면에 둘을 섞지 않는다 */
.hs-svc { --acc:var(--blue);    --acc-soft:var(--blue-soft); }
/* 상담 띠는 눈썹도 카드도 없다. 색은 아래 제 블록에서 직접 잡는다 */

/* 여백을 넉넉히. 요소가 아니라 빈 곳이 화면을 잡아 준다 */
.hs{
  padding-block:clamp(80px,9.2vw,136px);
  padding-bottom:clamp(84px,9.8vw,152px);
}
.hs .sec-head{
  max-width:58ch;
  margin-bottom:clamp(44px,5.2vw,76px);
}
.hs .sec-more{margin-top:clamp(32px,4.2vw,56px);}
/* 배경 틴트로 섹션의 정체를 드러낸다 */
.hs-fit.tint{background:var(--acc-soft);}
.hs-case.tint{background:var(--acc-soft);}
/* 눈썹 글자 앞에 색이 있는 얇은 선을 세운다 */
.hs .eyebrow{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--acc);
  font-size:var(--fs-meta);
  margin-bottom:16px;
}
.hs .eyebrow::before{
  content:"";
  flex:0 0 auto;
  width:clamp(28px,3vw,44px);
  height:2px;
  background:var(--acc);
}
/* 카드 상단 띠. 평소엔 짧게 걸쳐 있다가 얹으면 끝까지 흐른다 */
.hs .card{position:relative;overflow:hidden;}
.hs .card::before{
  content:"";
  position:absolute;
  left:0;top:0;
  width:46px;height:3px;
  background:var(--acc);
  transition:width .34s ease;
}
.hs .card:hover::before{width:100%;}
.hs .card .more{color:var(--acc);}
/* ── 서비스, 파랑 ──────────────────────────
   격자 크기는 style.css 의 6열 배치를 그대로 쓰고 번호만 얹는다 */
.hs-svc .svc-grid{counter-reset:svc;}
.hs-svc .svc-grid .card{counter-increment:svc;}
.hs-svc .svc-grid .card h3::before{
  content:counter(svc,decimal-leading-zero);
  display:block;
  font-size:var(--fs-meta);
  font-weight:700;
  letter-spacing:.12em;
  color:var(--acc);
  font-variant-numeric:tabular-nums;
  margin-bottom:8px;
}
/* ── 이런 경우, 노을 오렌지 ─────────────────
   상자를 걷어내고 색이 있는 선 위에 얹는다. 짝수 칸은 아래로 밀어 지그재그 */
.hs-fit .fit-list{
  background:transparent;
  border:0;
  border-radius:0;
  overflow:visible;
  counter-reset:fit;
  gap:clamp(24px,3.2vw,48px);
}
@media (min-width:820px){
  .hs-fit .fit-list{align-items:start;}
  .hs-fit .fit-list li:nth-child(even){margin-top:clamp(24px,3.4vw,56px);}
}
.hs-fit .fit-list li{
  counter-increment:fit;
  position:relative;
  background:transparent;
  padding:24px 56px 0 0;
  border-top:2px solid var(--acc);
}
.hs-fit .fit-list li::before{
  content:counter(fit,decimal-leading-zero);
  position:absolute;top:-2px;right:0;
  font-size:var(--fs-meta);
  font-weight:700;
  letter-spacing:.1em;
  color:var(--acc);
  font-variant-numeric:tabular-nums;
}
/* 번호 자리를 오른쪽에 비워 두는데, 좁은 화면에서는 그 탓에 끝 글자 하나가
   혼자 다음 줄로 떨어진다. 자리를 줄이고 두 줄 길이를 고르게 맞춘다 */
.hs-fit .fit-list b{
  font-size:var(--fs-h4);
  margin-bottom:8px;
  text-wrap:balance;
}
@media (max-width:700px){
  .hs-fit .fit-list li{padding-right:44px;}
}
.hs-fit .fit-list span{color:var(--ink-2);font-size:var(--fs-body);}
/* ── 원칙, 보라 ────────────────────────────
   셋을 나란히 세우지 않고 계단처럼 내려 앉힌다 */
.hs-pr .pr-list li{border-top-width:3px;padding-top:24px;}
.hs-pr .pr-list li::before{font-size:var(--fs-meta);}
@media (min-width:920px){
  .hs-pr .pr-list{align-items:start;gap:clamp(24px,3vw,44px);}
  .hs-pr .pr-list li:nth-child(2){margin-top:clamp(24px,3.4vw,52px);}
  .hs-pr .pr-list li:nth-child(3){margin-top:clamp(48px,6.8vw,104px);}
}
/* ── 진행 사례, 앰버 ───────────────────────
   3열 균등을 버린다. 위는 넓은 칸과 좁은 칸, 아래는 한 칸 밀어 놓는다 */
@media (min-width:900px){
  .hs-case .case-grid{
    grid-template-columns:repeat(5,minmax(0,1fr));
    align-items:start;
  }
  .hs-case .case-grid .card:nth-child(1){grid-column:span 3;}
  .hs-case .case-grid .card:nth-child(2){
    grid-column:span 2;
    margin-top:clamp(20px,3vw,48px);
  }
  .hs-case .case-grid .card:nth-child(3){grid-column:2 / span 3;}
  .hs-case .case-grid .card:nth-child(1) h3{font-size:var(--fs-h3);}
}
/* ── 자료실, 파랑 ──────────────────────────
   첫 칸을 가로로 긴 띠 카드로 눕히고 나머지 둘을 아래에 둔다 */
@media (min-width:900px){
  .hs-lib .lib-grid{
    grid-template-columns:repeat(6,minmax(0,1fr));
    align-items:start;
  }
  .hs-lib .lib-grid .card:nth-child(1){
    grid-column:span 6;
    flex-direction:row;
    align-items:center;
    gap:clamp(24px,3.2vw,52px);
    background:linear-gradient(100deg,var(--acc-soft) 0%,var(--paper) 62%);
    border-color:#C8DEF0;
  }
  .hs-lib .lib-grid .card:nth-child(1) h3{
    flex:0 0 auto;
    max-width:6.6em;
    margin-bottom:0;
    font-size:var(--fs-h3);
  }
  .hs-lib .lib-grid .card:nth-child(1) p{flex:1 1 auto;margin:0;}
  .hs-lib .lib-grid .card:nth-child(1) .more{flex:0 0 auto;margin-top:0;padding-top:0;}
  .hs-lib .lib-grid .card:nth-child(2),
  .hs-lib .lib-grid .card:nth-child(3){grid-column:span 3;}
}
/* ── 상담, 미드나잇 ────────────────────────
   위 모서리에 얇은 빛줄기 하나, 바탕은 비스듬한 기울기로 깊이만 준다.
   둥근 번짐을 얹어 봤더니 흰 글자·테두리 버튼 뒤가 밝아져 대비가 떨어졌다.
   기울기는 어디에 놓여도 밝은 얼룩을 만들지 않는다 */
.hs-cta{--cta-lift:#1D2C4C;position:relative;}
/* 푸터도 미드나잇이라 여백을 그대로 두면 둘이 한 덩어리로 붙는다 */
.hs-cta.hs{
  padding-block:clamp(64px,7.2vw,104px);
  padding-bottom:clamp(72px,7.8vw,112px);
}
.hs-cta.cta-band{
  background:linear-gradient(158deg,var(--cta-lift) 0%,var(--midnight) 62%);
}
.hs-cta::before{
  content:"";
  position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--blue);
}
.hs-cta .wrap{position:relative;}
.hs-cta .cta-lede{max-width:52ch;}

/* ── 로고 화면(흰 바탕) 구간 ──────────────────
 * 영상 끝 3.5초는 흰 바탕에 파란 로고다.
 * 그 위에 어두운 덮개가 깔리면 흰색이 회색으로 죽으므로 걷는다.
 * 대신 흰 글씨로 된 고스트 버튼이 흰 바탕에 묻히니 어두운 색으로 뒤집는다.
 * 카피는 이 구간에 이미 사라져 있어 버튼만 손보면 된다. (2026-08-19)
 */
.hero-scrim{transition:opacity .45s ease;}
.hero.is-brand .hero-scrim{opacity:0;}

.hero-ghost{transition:color .45s ease,border-color .45s ease,background-color .45s ease;}
.hero.is-brand .hero-ghost{
  color:var(--ink);
  border-color:rgba(26,29,35,.32);
  background:rgba(255,255,255,.7);
}
.hero.is-brand .hero-ghost:hover{
  background:rgba(26,29,35,.06);
  border-color:var(--ink);
}


/* ── 20-library.css ── */
/* 자료실 (/library)
 * 포인트 색은 브랜드 블루 하나로만 간다. 기획.md 6절 색 배정.
 * 공통 조각(.wrap .card .cards .more .sec-head .eyebrow .lede .tint)은 style.css 것을 그대로 쓰고,
 * 이 파일에는 자료실에서만 쓰는 것만 둔다.
 */

:root{
  /* 새로 필요한 색만. 이름은 lib- 로 감싸 다른 담당과 부딪히지 않게 한다 */
  --lib-line-blue:#C8DEF0;              /* 연한 파랑 바탕 위에 얹는 테두리 */
}
/* ── 섹션 호흡 ─────────────────────────────
   갤러리처럼 보이려면 여백이 먼저다. 공통 --sec-y 를 이 페이지에서만 키운다 */
.lib-tools,.lib-video,.lib-blog,.lib-ch{--sec-y:clamp(76px,9vw,132px);}
/* ── 머리 ───────────────────────────────── */
/* 섹션 제목과 오른쪽 링크를 한 줄에 앉힌다 */
.lib-headrow{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:16px clamp(24px,3vw,48px);
  margin-bottom:clamp(32px,4.2vw,60px);
}
.lib-headrow .sec-head{margin-bottom:0;}
.lib-headlink{margin:0;padding-bottom:6px;}
/* ── 도구 다섯 ──────────────────────────── */
.lib-tools .lib-grid-full{counter-reset:tool;}
.lib-tools .lib-card{position:relative;counter-increment:tool;}
.lib-tools .lib-card::before{
  content:counter(tool,decimal-leading-zero);
  position:absolute;top:clamp(18px,2vw,24px);right:clamp(20px,2.4vw,28px);
  font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.1em;
  color:var(--acc-ink,var(--blue));opacity:.7;font-variant-numeric:tabular-nums;
}
/* 첫 칸이 이 묶음의 기준점이다. 파랑을 한 번만 깔아 눈이 여기서 출발하게 한다 */
.lib-tools .lib-card:first-child{
  background:linear-gradient(140deg,var(--blue-soft) 0%,var(--paper) 64%);
  border-color:var(--lib-line-blue);
}
.lib-tools .lib-card:first-child h3{font-size:var(--fs-h3);}
.lib-tools .lib-card:hover::before{opacity:1;}
/* ── 영상 넷 ────────────────────────────── */
.yt-gallery{display:grid;gap:clamp(32px,3.6vw,56px);grid-template-columns:minmax(0,1fr);}
/* 네 편 모두 세로(9:16) 쇼츠다.
   16:9 틀은 지키되, 유튜브가 넣어 주는 검은 흐림 여백 대신
   파랑 무대를 깔고 그 위에 세로 썸네일과 제목을 나란히 앉힌다.
   영상 비율 자체는 건드리지 않는다 */
.yt-stage{
  display:flex;align-items:center;gap:clamp(16px,2.2vw,32px);
  aspect-ratio:16/9;overflow:hidden;
  padding:var(--gap);
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg,var(--blue-soft) 0%,var(--paper) 84%);
  border:1px solid var(--lib-line-blue);
  box-shadow:var(--shadow-sm);
  transition:box-shadow .24s ease,transform .24s ease,border-color .24s ease;
}
.yt-item:hover .yt-stage{box-shadow:var(--shadow-lg);transform:translateY(-3px);border-color:var(--blue);}
.yt-shot img{height:100%;width:auto;max-width:none;object-fit:cover;}
.yt-play::before{
  content:"";
  margin-left:clamp(4px,.4vw,4px);
  border-left:clamp(14px,1.3vw,18px) solid var(--paper);
  border-top:clamp(9px,.8vw,11px) solid transparent;
  border-bottom:clamp(9px,.8vw,11px) solid transparent;
}
.yt-item:hover .yt-play{transform:translate(-50%,-50%) scale(1.07);background:var(--blue-dark);}
.yt-item:hover .yt-title{color:var(--blue);}
.yt-item .more{font-size:var(--fs-meta);}
/* 3열 균등을 피한다. 크기를 달리하고 아랫줄을 안쪽으로 들여 지그재그로 앉힌다 */
@media (min-width:760px){
  .yt-gallery{grid-template-columns:repeat(12,minmax(0,1fr));}
  .yt-item:nth-child(1){grid-column:1 / span 7;}
  .yt-item:nth-child(1) .yt-title{font-size:var(--fs-h3);}
  .yt-item:nth-child(2){grid-column:8 / span 5;align-self:end;}
  .yt-item:nth-child(3){grid-column:2 / span 5;}
  .yt-item:nth-child(4){grid-column:8 / span 5;margin-top:clamp(20px,3.4vw,64px);}
}
/* 좁은 화면에서는 가로로 나란히 두면 제목이 실낱같이 좁아진다.
   무대를 세로로 세우고 썸네일을 가운데에 크게 놓는다 */
@media (max-width:639px){
  .yt-stage{flex-direction:column;align-items:stretch;aspect-ratio:auto;
    gap:clamp(16px,4vw,24px);padding:clamp(20px,4.6vw,24px);}
  .yt-shot img{width:100%;height:100%;}
}
/* ── 블로그 넷 ──────────────────────────── */
.blog-grid{display:grid;gap:clamp(28px,3.4vw,52px);grid-template-columns:minmax(0,1fr);align-items:start;}
@media (min-width:900px){
  .blog-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);}
}
.blog-lead{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:linear-gradient(150deg,var(--blue-soft) 0%,var(--paper) 76%);
  border:1px solid var(--lib-line-blue);border-radius:var(--radius-lg);
  padding:clamp(28px,3.2vw,48px);
  min-height:clamp(240px,26vw,340px);
  transition:box-shadow .22s ease,transform .22s ease;
}
.blog-lead:hover{box-shadow:var(--shadow);transform:translateY(-2px);}
.blog-tag{
  font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.1em;color:var(--blue);
  margin-bottom:var(--gap-xs);
}
.blog-date{font-size:var(--fs-meta);color:var(--ink-3);}
.blog-lead h3{margin:8px 0 0;font-size:var(--fs-h3);transition:color .2s ease;}
.blog-lead:hover h3{color:var(--blue);}
.blog-lead .more{margin-top:auto;padding-top:var(--gap);}
.blog-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.blog-list li{border-top:1px solid var(--line);}
.blog-list li:last-child{border-bottom:1px solid var(--line);}
.blog-list a{
  display:flex;flex-direction:column;gap:8px;
  padding:clamp(20px,2.2vw,28px) 0;
  text-decoration:none;color:inherit;
  transition:padding-left .22s ease;
}
.blog-list a:hover{padding-left:12px;}
.blog-list h3{font-size:var(--fs-lead);transition:color .2s ease;}
.blog-list a:hover h3{color:var(--blue);}
/* ── 채널 넷 ────────────────────────────── */
/* 넷이라 3열 균등이 어긋난다. 넓은 칸과 좁은 칸을 엇갈려 짠다 */
@media (min-width:1040px){
  .lib-ch .ch-grid{grid-template-columns:repeat(12,minmax(0,1fr));}
  .lib-ch .ch-grid .card:nth-child(1),
  .lib-ch .ch-grid .card:nth-child(4){grid-column:span 7;}
  .lib-ch .ch-grid .card:nth-child(2),
  .lib-ch .ch-grid .card:nth-child(3){grid-column:span 5;}
}
/* 번호와 제목이 붙지 않게 자리를 비운다 */
.lib-tools .lib-card h3{padding-right:3.2em;}
/* ── 블로그 썸네일 (2026-08-17 대표 지시) ── */
.blog-lead{position:relative;overflow:hidden;padding:0;display:flex;flex-direction:column;}
.blog-shot{display:block;line-height:0;background:var(--paper-2);}
.blog-shot img{width:100%;height:clamp(200px,20vw,260px);object-fit:cover;object-position:center top;}
.blog-lead .blog-tag,
.blog-lead .blog-date,
.blog-lead h3,
.blog-lead .more{margin-left:clamp(20px,2.2vw,28px);margin-right:clamp(20px,2.2vw,28px);}
.blog-lead .blog-tag{margin-top:var(--gap-sm);}
.blog-lead .more{margin-bottom:clamp(20px,2.2vw,28px);}
.blog-list a{display:flex;gap:clamp(16px,1.4vw,16px);align-items:flex-start;}
.blog-thumb{
  flex:0 0 clamp(76px,7vw,96px);
  line-height:0;border-radius:var(--radius-sm);overflow:hidden;background:var(--paper-2);
}
.blog-thumb img{
  width:100%;height:clamp(76px,7vw,96px);
  object-fit:cover;object-position:center top;
}
.blog-text{display:block;min-width:0;}
/* ── 채널 로고 ── */
.ch-logo{display:block;line-height:0;margin-bottom:16px;}
.ch-logo img{width:clamp(38px,3.4vw,46px);height:auto;border-radius:var(--radius-sm);}


/* ── 30-cases.css ── */
/* 진행 사례 쪽 (cases.html)
 * 포인트 색은 앰버 하나로 끌고 간다.
 * 사례는 지그재그 편집 배치, 후기는 벽돌 쌓기 갤러리.
 */

/* 지역 색. 앰버를 묽게 푼 크림 바탕과 테두리 */
.case-sec,
.rev-sec{
  --amber-cream:#FBF4E8;
  --amber-line:#EFD9AE;
}
/* 머리 */
.cases-head .eyebrow,
.rev-head .eyebrow{font-size:var(--fs-meta);}
.cases-head{padding-bottom:var(--gap);}
.cases-head .lede{max-width:52ch;}
/* ── 사례 갤러리 ─────────────────────────── */
.case-sec{padding-top:clamp(36px,4.4vw,64px);}
.case-gal{
  list-style:none;margin:0;padding:0;
  counter-reset:cg;
  display:grid;
  gap:clamp(32px,4vw,56px);
}
.case-item{
  counter-increment:cg;
  position:relative;
  padding-top:var(--gap-sm);
  border-top:1px solid var(--line);
}
/* 번호를 크게 세워 갤러리 표찰처럼 쓴다 */
.case-item::before{
  content:counter(cg,decimal-leading-zero);
  display:block;line-height:1;
  font-size:var(--fs-h1);
  font-weight:800;letter-spacing:-.03em;
  color:var(--acc-ink,var(--amber));
  font-variant-numeric:tabular-nums;
  margin-bottom:clamp(12px,1.4vw,16px);
}
/* 머리선 왼쪽 끝만 앰버로 짧게 덮는다 */
.case-item::after{
  content:"";position:absolute;top:-1px;left:0;
  width:clamp(40px,4.6vw,64px);height:2px;
  background:var(--amber);
}
.case-item h2{font-size:var(--fs-h3);margin-bottom:8px;}
.case-item .case-what{
  font-weight:700;color:var(--ink);
  font-size:var(--fs-lead);margin-bottom:8px;
}
.case-item p{color:var(--ink-2);font-size:var(--fs-body);}
/* 지역·업종 한 줄. 본문보다 한 톤 내려 앉힌다 */
.case-item .case-who{
  color:var(--ink-3,var(--ink-2));opacity:.72;
  font-size:var(--fs-meta);margin-bottom:16px;
}
.case-item p:last-child{margin-bottom:0;}
/* 넓은 화면에서는 좌우로 엇갈리게 앉힌다. 첫 사례만 크게 */
@media (min-width:1000px){
  .case-gal{
    grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:var(--gap);
    row-gap:clamp(48px,5.6vw,88px);
  }
  /* 2026-08-24, 12열 수동 배치에서 두 열 메이슨리로 바꿨다.
     수동 배치는 카드 높이가 제각각이라 사이사이 250px 씩 비었다.
     흘려 담으면 높이가 달라도 빈 칸이 안 생기고,
     오히려 카드가 스스로 어긋나 갤러리 리듬이 더 자연스럽다.
     ⚠ columns 를 쓰므로 grid 속성은 여기서 듣지 않는다.
        break-inside:avoid 를 빼면 카드가 열 경계에서 잘린다. */
  .case-gal{
    display:block;
    columns:2;
    column-gap:clamp(36px,3.6vw,60px);
  }
  .case-item,
  .case-item:nth-child(even),
  .case-item:first-child{
    grid-column:auto;
    display:inline-block;width:100%;
    break-inside:avoid;-webkit-column-break-inside:avoid;
    margin-bottom:clamp(36px,4vw,60px);
  }
  /* 최소가 44px 이라 좁은 화면에서 형제 번호보다 유독 컸다.
     최대·최소가 다른 방향으로 벌어진 것은 손으로 맞추다 어긋난 흔적이라
     display 단으로 흡수했다. 모바일 최소가 44 에서 34 로 내려간다. */
  .case-item:first-child::before{font-size:var(--fs-display);}
  .case-item:first-child h2{font-size:var(--fs-h2);}
  .case-item:first-child .case-what{font-size:var(--fs-h4);}
}
.case-note{max-width:56ch;}
/* ── 후기 갤러리 ─────────────────────────── */
.rev-sec{background:var(--amber-cream);}
/* 세로로 긴 대화 캡처라 벽돌 쌓기가 맞다 */
.rev-gallery{
  columns:1;
  column-gap:clamp(16px,1.6vw,24px);
}
@media (min-width:560px){.rev-gallery{columns:2;}}
@media (min-width:940px){.rev-gallery{columns:3;}}
.rev-item{
  display:block;
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  /* 원본이 367px 안팎이라 그보다 크게 늘리면 흐려진다 */
  max-width:400px;
  margin:0 auto clamp(16px,1.6vw,24px);
  border:1px solid var(--amber-line);
  border-radius:var(--radius-sm);
  overflow:hidden;
  background:var(--paper);
  box-shadow:var(--shadow-sm);
  transition:box-shadow .22s ease,transform .22s ease,border-color .22s ease;
}
.rev-item:hover{
  box-shadow:var(--shadow);
  transform:translateY(-2px);
  border-color:var(--amber);
}
.rev-item img{width:100%;height:auto;display:block;}
.rev-item.is-more{display:none;}
.rev-more{display:flex;justify-content:center;margin:clamp(24px,3.2vw,40px) 0 0;}
.rev-more[hidden]{display:none;}
.rev-btn:hover{background:var(--amber);box-shadow:var(--shadow-sm);}
.rev-btn:active{transform:translateY(1px);}


/* ── 35-reviews.css ── */
/* ── 고객 후기, 흐르는 카드 ──────────────────
 * 톡 캡처를 날것으로 걸지 않는다. 카드 위쪽에 캡처를 두고
 * 아래쪽에 고객이 한 말을 큰 글씨로 얹는다.
 * 카드는 오른쪽에서 왼쪽으로 천천히 흐른다.
 */
.rev-wall{
  --rev-card-w: clamp(268px, 25vw, 340px);
  --rev-shot-h: clamp(230px, 22vw, 300px);
  --rev-speed: 78s;
  --rev-cream: #F6EFE4;      /* 따뜻한 베이지. 톡의 노란 말풍선과 부딪히지 않는다 */
  --rev-cream-2:#EFE4D3;
  position:relative;
  isolation:isolate;
  background:linear-gradient(168deg, var(--rev-cream) 0%, var(--rev-cream-2) 100%);
  padding-block:clamp(56px,7vw,96px);
  overflow:hidden;
}
/* 노을 실사를 아주 옅게 깐다. 베이지와 같은 계열이라 튀지 않는다 */
.rev-wall::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url('assets/bg/track.6e3c89f1.jpg') center/cover;
  opacity:.16;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.35) 62%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.35) 62%,transparent 100%);
}
.rev-wall .sec-head h2{color:var(--ink);}
.rev-wall .eyebrow{color:#B06B2A;}
.rev-wall .lede{color:#5A4A38;}

.rev-track-wrap{
  position:relative;
  margin-top:clamp(32px,4vw,48px);
  /* 좌우 끝을 흐리게 해서 잘린 느낌을 없앤다 */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%);
}
.rev-track{
  display:flex;
  gap:clamp(16px,1.8vw,24px);
  width:max-content;
  animation:rev-flow var(--rev-speed) linear infinite;
}
.rev-track-wrap:hover .rev-track,
.rev-track-wrap:focus-within .rev-track{animation-play-state:paused;}
@keyframes rev-flow{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion:reduce){
  .rev-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;}
  .rev-track-wrap{-webkit-mask-image:none;mask-image:none;}
  .rev-track [data-clone="true"]{display:none;}
}

.rev-card{
  flex:0 0 var(--rev-card-w);
  width:var(--rev-card-w);
  background:#fff;
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(120,90,55,.14);
  box-shadow:0 8px 26px rgba(96,70,40,.14);
  text-decoration:none;
  color:inherit;
  transition:transform .25s ease, box-shadow .25s ease;
}
.rev-card:hover,.rev-card:focus-visible{
  transform:translateY(-5px);
  box-shadow:0 18px 40px rgba(96,70,40,.22);
}
.rev-shot{
  height:var(--rev-shot-h);
  overflow:hidden;
  background:#B2C7DA;
  position:relative;
  flex:0 0 auto;
}
.rev-shot img{
  width:100%;height:auto;display:block;
  /* 대화 첫머리가 보이도록 위쪽을 맞춘다 */
  object-fit:cover;object-position:top center;
}
.rev-shot::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:52px;
  background:linear-gradient(to bottom,rgba(255,255,255,0),#fff);
}
.rev-say{
  padding:clamp(16px,1.8vw,24px) clamp(16px,1.8vw,24px) clamp(20px,2vw,24px);
  display:flex;flex-direction:column;gap:8px;
  flex:1 1 auto;
}
/* 글자가 아니라 장식 따옴표 기호라 타입 스케일 밖이다.
   다음 사람이 누락으로 보고 var(--fs-*) 로 바꾸지 않도록 남긴다. */
.rev-say .mark{
  font-size:30px;line-height:1;color:#B27627;font-weight:800;   /* 크림 바탕 3.33:1. #D08A2E 는 2.50 으로 큰 글씨 기준에도 미달이었다 */
}
.rev-say p{
  margin:0;
  font-size:var(--fs-body);
  font-weight:600;
  line-height:1.62;
  letter-spacing:-.016em;
  color:var(--ink);
}
.rev-hint{
  margin:clamp(24px,2.6vw,32px) 0 0;
  text-align:center;color:#7F6952;font-size:var(--fs-meta);   /* 크림 바탕 4.55:1. #8A7259 는 3.97 로 본문 미달이었다 */
}


/* ── 40-pages.css ── */
/* 40-pages.css
 * 담당: services.html · about.html
 * 서비스 쪽 포인트는 노을오렌지(--sunset), 대표 소개 쪽 포인트는 보라(--purple).
 * 한 화면에 포인트 색은 하나만 쓴다.
 * style.css 는 건드리지 않는다. 필요한 것은 전부 이 파일에 둔다.
 */

:root{
  /* 노을 계열 옅은 바탕. 모의 세무감사 띠에서만 쓴다 */
  --sv-cream:#FDF2EA;
  --sv-warm-line:#F0D8C6;
  --sv-glow:rgba(228,112,58,.14);
  --sv-glow-0:rgba(228,112,58,0);
  /* 보라 계열 옅은 바탕. 대표 소개에서만 쓴다 */
  --ab-tint:#F1EEF8;
  --ab-line:#DDD5EE;
}

/* ═══ 두 쪽 공통, 쪽머리에 색 막대를 하나 세운다 ═══ */
.sv-page-head .wrap::before,
.ab-page-head .wrap::before{
  content:"";display:block;
  width:clamp(44px,5vw,64px);height:4px;border-radius:var(--radius-xs);
  margin-bottom:var(--gap);
}
.sv-page-head .wrap::before{background:var(--blue);}
.ab-page-head .wrap::before{background:var(--purple);}
.sv-page-head,.ab-page-head{padding-bottom:var(--gap);}
.sv-page-head h1,.ab-page-head h1{max-width:17ch;}
.sv-page-head .lede,.ab-page-head .lede{max-width:48ch;}

/* ═══ services.html ═══════════════════════════ */

/* ── 서비스 여섯. 3열 균등을 피하고 크기와 높이를 어긋나게 짠다 ── */
.sv-svc{padding-top:clamp(36px,4.6vw,64px);}
.sv-grid{
  list-style:none;margin:0;padding:0;
  counter-reset:sv;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(32px,4.4vw,56px);
  align-items:start;
}
.sv-card{
  display:flex;flex-direction:column;
  counter-increment:sv;
  border-top:2px solid var(--line);
  padding-top:clamp(16px,1.9vw,24px);
  transition:border-color .22s ease;
}
.sv-card::before{
  content:counter(sv,decimal-leading-zero);
  display:block;
  font-size:var(--fs-eyebrow);font-weight:800;letter-spacing:.14em;
  font-variant-numeric:tabular-nums;
  color:var(--acc-ink,var(--ink-3));
  margin-bottom:clamp(8px,1.4vw,16px);
  transition:color .22s ease;
}
.sv-card h3{margin-bottom:clamp(8px,1.2vw,16px);}
.sv-card p{color:var(--ink-2);font-size:var(--fs-body);margin-bottom:.85em;}
.sv-card p:last-child{margin-bottom:0;}
.sv-card:hover{border-top-color:var(--blue);}
.sv-card:hover::before{color:var(--blue);}

@media (min-width:680px) and (max-width:1039px){
  .sv-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(24px,3.4vw,44px);
    row-gap:clamp(40px,4.4vw,56px);
  }
  .sv-card:nth-child(even){margin-top:clamp(24px,3vw,40px);}
}
@media (min-width:1040px){
  /* 갤러리처럼 어긋나게 놓는다. 다만 어긋남이 커지면 빈 구멍이 생긴다.
     2026-08-24 에 세로 어긋남과 행 간격을 절반으로 줄이고
     좁은 칸을 4열에서 5열로 넓혔다. 4열은 글이 세로로 길게 늘어졌다.
     리듬은 그대로 두고 구멍만 없애는 것이 목적이다. */
  .sv-grid{
    grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:clamp(32px,3.4vw,56px);
    row-gap:clamp(28px,3vw,44px);
  }
  .sv-card:nth-child(1){grid-row:1;grid-column:1/span 7;}
  .sv-card:nth-child(2){grid-row:1;grid-column:8/span 5;margin-top:clamp(16px,1.8vw,32px);}
  .sv-card:nth-child(3){grid-row:2;grid-column:1/span 5;}
  .sv-card:nth-child(4){grid-row:2;grid-column:6/span 7;margin-top:clamp(16px,1.8vw,32px);}
  .sv-card:nth-child(5){grid-row:3;grid-column:1/span 7;}
  .sv-card:nth-child(6){grid-row:3;grid-column:8/span 5;margin-top:clamp(16px,1.8vw,32px);}
  /* 첫 칸은 머리글처럼 크게 */
  .sv-card:nth-child(1){border-top-width:3px;border-top-color:var(--blue);}
  .sv-card:nth-child(1)::before{color:var(--blue);}
  .sv-card:nth-child(1) h3{font-size:var(--fs-h2);}
  .sv-card:nth-child(1) p:first-of-type{font-size:var(--fs-lead);color:var(--ink);}
}

/* ── 모의 세무감사. 이 쪽의 주인공이라 가장 크게 잡는다 ── */
.sv-audit{
  position:relative;overflow:hidden;
  background:linear-gradient(168deg,var(--sv-cream) 0%,var(--sv-cream) 34%,var(--paper) 92%);
  border-top:1px solid var(--sv-warm-line);
  border-bottom:1px solid var(--sv-warm-line);
  padding-block:clamp(76px,9.6vw,148px);
}
.sv-audit::before{
  content:"";position:absolute;top:-24%;right:-10%;
  width:min(640px,66vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,var(--sv-glow) 0%,var(--sv-glow-0) 70%);
  pointer-events:none;
}
.sv-audit .wrap{position:relative;}
.sv-audit-in{display:grid;gap:clamp(24px,3vw,44px);}
@media (min-width:1000px){
  .sv-audit-in{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    column-gap:clamp(40px,5.4vw,88px);align-items:end;}
}
.sv-audit-head{max-width:20ch;}
/* 2026-08-23 대표 판단으로 --fs-display 에서 --fs-h1 로 내렸다(67 → 53px).
   히어로 제목보다 이 섹션 제목이 커서 위계가 뒤집혀 있었고,
   히어로를 올리는 대신 이쪽을 내리는 쪽을 고르셨다.
   ⚠ 이 값은 05-base-refine.css 의 h2 기본값과 같다. 뜻을 남기려고 명시해 둔다. */
.sv-audit-head h2{font-size:var(--fs-h1);line-height:1.06;letter-spacing:-.042em;}
.sv-audit-body{max-width:62ch;}
.sv-audit-lede{
  font-size:var(--fs-h3);line-height:1.5;font-weight:600;
  color:var(--ink);max-width:none;margin-bottom:.9em;letter-spacing:-.022em;
}
.sv-audit-body p{color:var(--ink-2);font-size:var(--fs-lead);}

.sv-audit-list{
  list-style:none;margin:clamp(40px,5.2vw,76px) 0 0;padding:0;
  counter-reset:au;
  display:grid;gap:2px;background:var(--sv-warm-line);
  border:1px solid var(--sv-warm-line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow);
}
@media (min-width:900px){.sv-audit-list{grid-template-columns:repeat(4,minmax(0,1fr));}}
.sv-audit-list li{
  background:var(--paper);
  counter-increment:au;
  padding:clamp(24px,2.8vw,40px);
  font-size:var(--fs-lead);font-weight:600;line-height:1.5;
  color:var(--ink);letter-spacing:-.018em;
}
.sv-audit-list li::before{
  content:counter(au,decimal-leading-zero);
  display:block;
  font-size:var(--fs-eyebrow);font-weight:800;letter-spacing:.14em;
  font-variant-numeric:tabular-nums;color:var(--acc-ink,var(--sunset));
  margin-bottom:clamp(16px,1.6vw,24px);
}

/* ── 차별점 다섯 ── */
.sv-diff{
  list-style:none;margin:0;padding:0;counter-reset:df;
  display:grid;gap:clamp(28px,3.4vw,48px);
}
.sv-diff li{
  counter-increment:df;
  border-top:2px solid var(--blue);
  padding-top:clamp(16px,1.8vw,24px);
}
.sv-diff li::before{
  content:counter(df,decimal-leading-zero);
  display:block;font-size:var(--fs-eyebrow);font-weight:800;letter-spacing:.14em;
  font-variant-numeric:tabular-nums;color:var(--acc-ink,var(--blue));
  margin-bottom:clamp(8px,1.1vw,12px);
}
.sv-diff h3{margin-bottom:8px;}
.sv-diff p{color:var(--ink-2);font-size:var(--fs-body);}
@media (min-width:900px){
  .sv-diff{grid-template-columns:repeat(6,minmax(0,1fr));
    column-gap:clamp(28px,3.4vw,52px);row-gap:clamp(40px,4.4vw,60px);}
  .sv-diff li:nth-child(1),.sv-diff li:nth-child(2){grid-column:span 3;}
  .sv-diff li:nth-child(n+3){grid-column:span 2;}
  .sv-diff li:nth-child(1) h3,.sv-diff li:nth-child(2) h3{font-size:var(--fs-h3);}
}

/* ── 이런 경우 여덟 ── */
.sv-fit{list-style:none;margin:0;padding:0;display:grid;}
@media (min-width:820px){
  .sv-fit{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(40px,5.4vw,84px);}
}
.sv-fit li{padding:clamp(20px,2.1vw,28px) 0;border-bottom:1px solid var(--line);}
.sv-fit b{
  display:flex;gap:12px;
  font-size:var(--fs-h4);font-weight:700;letter-spacing:-.022em;
  line-height:1.36;margin-bottom:6px;
}
.sv-fit b::before{
  content:"";flex:0 0 auto;width:9px;height:9px;margin-top:.55em;
  background:var(--sunset);border-radius:var(--radius-xs);transform:rotate(45deg);
}
.sv-fit span{display:block;padding-left:20px;color:var(--ink-3);
  font-size:var(--fs-body);}

/* ── 맞지 않는 경우. 톤이 다르므로 차분하게 둔다 ── */
.sv-caution{margin-top:clamp(48px,5.6vw,80px);max-width:78ch;}

/* ═══ about.html ══════════════════════════════ */

/* ── 프로필. 사진을 크게 쓰고 글이 지나가는 동안 붙잡아 둔다 ── */
.ab-grid{display:grid;gap:clamp(32px,4vw,60px);align-items:start;}
@media (min-width:900px){
  .ab-grid{grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);
    column-gap:clamp(40px,5vw,80px);}
}
.ab-photo{margin:0;position:relative;}
.ab-photo::before{
  content:"";position:absolute;z-index:0;
  left:calc(-1 * clamp(12px,1.6vw,24px));
  top:calc(-1 * clamp(12px,1.6vw,24px));
  width:62%;height:54%;
  background:var(--ab-tint);border-radius:var(--radius-lg);
}
.ab-photo img{
  position:relative;z-index:1;width:100%;height:auto;
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
}
@media (min-width:1000px){
  .ab-photo{position:sticky;top:clamp(92px,9vw,124px);}
}

.ab-career h2{margin:0 0 clamp(16px,2.1vw,28px);}
.ab-list{list-style:none;margin:0;padding:0;}
.ab-list li{
  display:flex;gap:clamp(12px,1.5vw,20px);align-items:baseline;
  padding:clamp(12px,1.5vw,16px) 0;
  border-bottom:1px solid var(--line-soft);
  font-size:var(--fs-lead);line-height:1.5;color:var(--ink);
}
.ab-list li:first-child{border-top:2px solid var(--purple);}
.ab-list li:last-child{border-bottom:0;}
.ab-list span{
  flex:0 0 auto;width:34px;padding:2px 0;text-align:center;
  font-size:var(--fs-meta);font-weight:800;color:var(--purple);
  background:var(--ab-tint);border:1px solid var(--ab-line);border-radius:var(--radius-pill);
}
.ab-list span:empty{
  width:9px;height:9px;padding:0;align-self:center;
  background:var(--purple);border:0;border-radius:50%;
}

/* ── 학력·전문분야. 둘을 나란히 놓아 리듬을 준다 ── */
.ab-detail{padding-top:clamp(24px,3.4vw,52px);}
.ab-two{display:grid;gap:clamp(32px,4.4vw,60px);}
@media (min-width:820px){
  .ab-two{grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(44px,6vw,96px);}
}
.ab-two h2{margin:0 0 clamp(16px,1.9vw,24px);}

/* ── 세 사람이 차례로. 순서가 눈에 보이게 잇는다 ── */
.ab-steps{
  list-style:none;margin:0;padding:0;counter-reset:st;
  position:relative;display:grid;gap:clamp(24px,3.2vw,40px);
}
.ab-steps li{
  counter-increment:st;position:relative;
  padding-left:clamp(64px,7vw,84px);
}
.ab-steps li::before{
  content:counter(st,decimal-leading-zero);
  position:absolute;left:0;top:0;z-index:1;
  width:clamp(46px,4.6vw,58px);height:clamp(46px,4.6vw,58px);
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--blue);color:var(--paper);
  font-size:var(--fs-body);font-weight:800;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 6px var(--paper-2);
}
/* 좁은 화면은 세로로 잇는다 */
.ab-steps li:not(:last-child)::after{
  content:"";position:absolute;z-index:0;
  left:calc(clamp(46px,4.6vw,58px) / 2 - 1px);
  top:clamp(46px,4.6vw,58px);bottom:calc(-1 * clamp(26px,3.2vw,40px));
  width:2px;background:var(--line);
}
.ab-steps h3{margin-bottom:8px;}
.ab-steps p{color:var(--ink-2);font-size:var(--fs-body);}
@media (min-width:900px){
  .ab-steps{grid-template-columns:repeat(3,minmax(0,1fr));
    column-gap:clamp(32px,4vw,60px);}
  .ab-steps li{padding-left:0;padding-top:clamp(72px,6.6vw,88px);}
  /* 넓은 화면은 가로로 잇는다. 줄은 마지막 사람에서 끝난다 */
  .ab-steps li:not(:last-child)::after{
    left:clamp(46px,4.6vw,58px);
    top:calc(clamp(46px,4.6vw,58px) / 2 - 1px);
    bottom:auto;
    width:calc(100% - clamp(46px,4.6vw,58px) + clamp(30px,4vw,60px));
    height:2px;
  }
}

/* ══ 상담 신청, 보내신 다음 ══════════════════
   폼만 놓고 끝내면 방문자가 「보내면 무슨 일이 생기나」를 모른 채 버튼을 누른다.
   가장 불안한 자리라 그 답을 바로 아래에 둔다.
   ⚠ 여기 적힌 셋은 실제 운영 방식이다. 바뀌면 문구도 같이 고친다. */
.after-send{background:var(--paper-2);}
.after-send h2{margin:0 0 clamp(28px,3.2vw,44px);}

.after-list{
  list-style:none;margin:0;padding:0;
  counter-reset:af;
  display:grid;gap:clamp(24px,2.8vw,40px);
}
@media (min-width:900px){
  .after-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,48px);}
}
.after-list li{
  position:relative;
  padding-top:clamp(20px,2vw,28px);
  border-top:1px solid var(--line);
}
.after-list li::before{
  counter-increment:af;content:counter(af,decimal-leading-zero);
  position:absolute;top:clamp(20px,2vw,28px);right:0;
  font-size:var(--fs-eyebrow);font-weight:var(--fw-bold);
  letter-spacing:.14em;color:var(--acc-ink,var(--blue));
  font-variant-numeric:tabular-nums;
}
.after-list h3{
  font-size:var(--fs-h4);margin:0 0 12px;
  padding-right:44px;   /* 번호와 겹치지 않게 */
}
.after-list p{margin:0;color:var(--ink-2);}

/* 제출 버튼 바로 아래. 「상담료 없음」이 히어로에만 있으면
   모바일에서 버튼으로부터 네 화면 위에 있게 된다. */
.submit-note{
  margin:12px 0 0;   /* 버튼과 같은 왼쪽 기준선. 가운데로 놓으면 버튼에서 떨어져 보인다 */
  font-size:var(--fs-meta);color:var(--ink-3);line-height:1.7;
}


/* ── 50-section-bg.css ── */
/* 섹션 전체 배경 실사는 2026-08-17 대표 지시로 걷었다.
 * 소제목 옆 포인트 이미지(assets/pt/)로 바뀌었다.
 * 되돌릴 일이 있을까 봐 파일만 남긴다.
 */


/* ── 60-index-refine.css ── */
/* ── 홈 본문 정리 ───────────────────────────
 * 담당: source/pages/index.html 의 히어로 아래.
 * 히어로(.hero, 10-hero.css)는 손대지 않는다.
 *
 * 대표 지시 셋.
 *   1) 섹션을 덮던 큰 배경 사진을 걷고, 소제목 옆에 작은 실사 한 장을 포인트로 둔다.
 *   2) 인터페이스를 단조롭게. 상자와 그림자를 덜어낸다.
 *   3) 레이아웃을 디벨롭.
 *
 * 문법은 하나다. 얇은 선(헤어라인) + 넉넉한 여백 + 좌표 라벨 + 비대칭.
 * 리듬은 섹션마다 다르다. 번호 행, 두 칸, 큰 숫자, 세로 선, 링크 줄.
 *
 * 홈 섹션은 .ix 로 잡는다. 옛 .hs 계열을 본문에서 뺐으므로
 * 50-section-bg.css 의 배경 사진과 10-hero.css 의 카드 장식은 홈에 걸리지 않는다.
 */

/* ⑧ 상담 띠는 지금 모양 그대로 둔다. 다만 .hs 를 떼면서
 * 여백을 여기서 다시 잡는다. 푸터도 미드나잇이라 붙으면 한 덩어리로 보인다.
 * .hs 를 떼야 10-hero.css 의 파란 윗줄이 산다.
 * 50-section-bg.css 의 .hs::before 가 같은 가짜요소를 나중에 덮어써서
 * 줄이 보이지 않던 상태였다. */
.ix-cta{
  padding-block:clamp(64px,7.2vw,104px);
  padding-bottom:clamp(72px,7.8vw,112px);
}

/* ── 섹션 뼈대 ─────────────────────────────── */
.ix{
  --pic:clamp(140px,15vw,200px);
  padding-block:clamp(76px,9vw,132px);
}
.ix .sec-more{margin-top:clamp(32px,3.6vw,48px);}

/* 사진 크기를 섹션마다 달리해 눈이 같은 자리에 멈추지 않게 한다 */
.ix-svc { --pic:clamp(150px,17vw,224px); }
.ix-fit { --pic:clamp(140px,15vw,196px); }
.ix-pr  { --pic:clamp(130px,14vw,178px); }
.ix-case{ --pic:clamp(150px,16.5vw,214px); }
.ix-lib { --pic:clamp(140px,15vw,196px); }

/* ── 소제목 덩어리 ─────────────────────────── */
.ix-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--pic);
  column-gap:clamp(28px,4.6vw,76px);
  border-top:1px solid var(--line);
  padding-top:var(--gap-sm);
  margin-bottom:clamp(40px,5vw,72px);
}
.ix-head .ix-label{grid-column:1;grid-row:1;}
.ix-head h2{
  grid-column:1;grid-row:2;
  margin-top:clamp(16px,2.2vw,32px);
  font-size:var(--fs-h1);
  letter-spacing:-.035em;
  line-height:1.2;
}
.ix-head .lede{
  grid-column:1;grid-row:3;
  margin:clamp(12px,1.6vw,24px) 0 0;
}

/* 부제가 없는 소제목(이런 경우·진행 사례)은 글이 짧아 사진이 높이를 정한다.
 * 아래 여백까지 그대로 두면 제목만 덩그러니 뜬다. 한 번 줄여 준다 */
.ix-fit .ix-head,
.ix-case .ix-head{margin-bottom:clamp(28px,3.4vw,52px);}

/* 사진은 위로 끌어올려 라벨 선에 걸친다. 반듯하게 맞추지 않는다 */
.ix-pic{
  grid-column:2;grid-row:1 / span 3;
  align-self:start;
  margin:calc(-1 * clamp(40px,5.2vw,84px)) 0 0;
}
.ix-pic img{
  width:100%;
  aspect-ratio:3 / 4;
  object-fit:cover;
  background:var(--paper-2);
}
/* 정사각 원본을 세로로 자른다. 가로 위치만 조절하면 된다 */
.ix-svc  .ix-pic img{object-position:82% center;}
.ix-fit  .ix-pic img{object-position:10% center;}
.ix-pr   .ix-pic img{object-position:30% center;}
.ix-case .ix-pic img{object-position:78% center;}
.ix-lib  .ix-pic img{object-position:55% center;}

/* 좌우를 뒤집는 섹션. 같은 자리에 두면 다섯 번이 한 덩어리로 보인다 */
.ix-head-mirror{grid-template-columns:var(--pic) minmax(0,1fr);}
.ix-head-mirror .ix-label,
.ix-head-mirror h2,
.ix-head-mirror .lede{grid-column:2;}
.ix-head-mirror .ix-pic{grid-column:1;}

/* ── 좌표 라벨 ─────────────────────────────── */
.ix-label{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
}
.ix .eyebrow{
  margin:0;
  font-size:var(--fs-meta);
  font-weight:700;
  letter-spacing:.14em;
  color:var(--ink-3);
}
.ix .eyebrow::before{content:"[";margin-right:.34em;}
.ix .eyebrow::after{content:"]";margin-left:.34em;}
.ix-no{
  font-size:var(--fs-meta);
  font-weight:700;
  letter-spacing:.12em;
  color:var(--ink-3);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

@media (max-width:860px){
  .ix-head,
  .ix-head-mirror{grid-template-columns:minmax(0,1fr);}
  .ix-head .ix-label,
  .ix-head h2,
  .ix-head .lede,
  .ix-head-mirror .ix-label,
  .ix-head-mirror h2,
  .ix-head-mirror .lede{grid-column:1;}
  .ix-pic{
    grid-column:1;grid-row:2;
    width:clamp(104px,29vw,148px);
    justify-self:end;
    margin:clamp(16px,4vw,24px) 0 0;
  }
  .ix-head-mirror .ix-pic{justify-self:start;}
  .ix-head h2{grid-row:3;margin-top:clamp(16px,3.4vw,24px);}
  .ix-head .lede{grid-row:4;}
}

/* ── ② 신뢰 한 줄. 파란 점을 빼고 선으로만 나눈다 ── */
.ix-trust{padding-block:clamp(44px,5vw,72px);}
.ix-trust .trust-list{gap:0;}
.ix-trust .trust-list li{
  padding:12px 0;
  border-top:1px solid var(--line);
}
.ix-trust .trust-list li:first-child{border-top:0;padding-top:0;}
.ix-trust .trust-list li::before{content:none;}

/* ── ③ 서비스. 번호를 세우고 선으로 나눈 여섯 줄 ── */
.svc-rows{
  list-style:none;
  margin:0;padding:0;
  counter-reset:svc;
}
.svc-rows li{
  counter-increment:svc;
  display:grid;
  grid-template-columns:clamp(46px,5.4vw,74px) minmax(0,1fr);
  column-gap:clamp(16px,2.4vw,32px);
  row-gap:8px;
  padding-block:var(--gap);
  border-top:1px solid var(--line);
}
.svc-rows li:last-child{border-bottom:1px solid var(--line);}
.svc-rows li::before{
  content:counter(svc,decimal-leading-zero);
  grid-column:1;grid-row:1;
  font-size:var(--fs-meta);
  font-weight:700;
  letter-spacing:.12em;
  line-height:1;
  padding-top:.55em;
  color:var(--acc-ink,var(--ink-3));
  font-variant-numeric:tabular-nums;
}
.svc-rows h3{grid-column:2;grid-row:1;}
.svc-rows p{
  grid-column:2;grid-row:2;
  margin:0;
  color:var(--ink-2);
  font-size:var(--fs-body);
}
@media (min-width:900px){
  .svc-rows li{
    grid-template-columns:clamp(56px,5.6vw,84px) minmax(0,7fr) minmax(0,11fr);
    row-gap:0;
    padding-block:clamp(24px,2.8vw,40px);
  }
  .svc-rows p{grid-column:3;grid-row:1;}
}

/* ── ④ 이런 경우. 번호 없이 두 칸으로 ─────── */
.fit-rows{
  list-style:none;
  margin:0;padding:0;
  display:grid;
}
.fit-rows li{
  border-top:1px solid var(--line);
  padding-block:var(--gap);
}
.fit-rows li:last-child{border-bottom:1px solid var(--line);}
.fit-rows b{
  display:block;
  font-size:var(--fs-h4);
  font-weight:700;
  letter-spacing:-.022em;
  line-height:1.36;
  margin-bottom:8px;
  text-wrap:balance;
}
.fit-rows span{
  display:block;
  color:var(--ink-2);
  font-size:var(--fs-body);
}
@media (min-width:820px){
  .fit-rows{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(36px,5vw,84px);
  }
  .fit-rows li:last-child{border-bottom:0;}
  .fit-rows li:nth-last-child(-n+2){border-bottom:1px solid var(--line);}
}

/* ── ⑤ 원칙. 큰 숫자 하나가 칸을 연다 ─────── */
.pr-cols{
  list-style:none;
  margin:0;padding:0;
  counter-reset:pr;
  display:grid;
  gap:clamp(32px,3.6vw,52px);
}
@media (min-width:920px){
  .pr-cols{grid-template-columns:repeat(3,minmax(0,1fr));}
}
.pr-cols li{
  counter-increment:pr;
  border-top:1px solid var(--line);
  padding-top:clamp(16px,1.8vw,24px);
}
.pr-cols li::before{
  content:counter(pr,decimal-leading-zero);
  display:block;
  font-size:var(--fs-h1);
  font-weight:800;
  letter-spacing:-.04em;
  line-height:1;
  margin-bottom:clamp(16px,2vw,28px);
  color:var(--acc-ink,var(--purple));
  font-variant-numeric:tabular-nums;
}
.pr-cols h3{margin-bottom:8px;}
.pr-cols p{
  margin:0;
  color:var(--ink-2);
  font-size:var(--fs-body);
}

/* ── ⑥ 진행 사례. 세로 선으로 셋을 가른다 ── */
.case-cols{
  list-style:none;
  margin:0;padding:0;
  display:grid;
}
.case-cols li{
  border-top:1px solid var(--line);
  padding-block:clamp(24px,2.6vw,32px);
}
.case-cols h3{margin-bottom:8px;}
.case-cols p{
  margin:0;
  color:var(--ink-2);
  font-size:var(--fs-body);
}
@media (min-width:860px){
  .case-cols{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:0;}
  .case-cols li{
    padding-block:clamp(24px,2.8vw,36px) 0;
    padding-right:clamp(24px,3vw,48px);
  }
  .case-cols li + li{
    border-left:1px solid var(--line);
    padding-left:clamp(24px,3vw,48px);
  }
  .case-cols li:last-child{padding-right:0;}
}

/* ── ⑦ 자료실. 한 줄에 하나씩 여는 링크 ──── */
.lib-rows{list-style:none;margin:0;padding:0;}
.lib-rows li{border-top:1px solid var(--line);}
.lib-rows li:last-child{border-bottom:1px solid var(--line);}
.lib-row{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  row-gap:8px;
  padding-block:var(--gap);
  color:inherit;
  text-decoration:none;
}
.lib-row h3{color:var(--ink);transition:color .2s ease;}
.lib-row p{
  margin:0;
  color:var(--ink-2);
  font-size:var(--fs-body);
}
.lib-row .more{justify-self:start;}
.lib-row:hover h3{color:var(--blue);}
.lib-row:hover .more::after{transform:translateX(3px);}
@media (min-width:900px){
  .lib-row{
    grid-template-columns:minmax(0,7fr) minmax(0,10fr) auto;
    column-gap:clamp(24px,3vw,48px);
    row-gap:0;
    align-items:center;
    padding-block:clamp(24px,2.8vw,36px);
  }
  .lib-row .more{justify-self:end;}
}


/* ── 70-sa-refine.css ── */
/* 70-sa-refine.css
 * 담당: services.html · about.html
 *
 * 대표 지시 셋을 여기서 받는다.
 *   ① 실사는 섹션 배경에서 걷어내고 소제목 옆 작은 한 장으로만 쓴다
 *   ② 인터페이스를 단조롭게, 상자와 색면을 덜어낸다
 *   ③ 레이아웃을 디벨롭한다
 *
 * 레퍼런스(02_레퍼런스/레이아웃)에서 가져온 것은 넷이다.
 *   여백 리듬, 비대칭 배치, 헤어라인 구분, 작은 좌표 라벨.
 * 가져오지 않은 것도 넷이다.
 *   흑백 미니멀, 장식 세리프, 8px 라벨, 가운데 정렬.
 * 세무사사무소는 신뢰를 파는 곳이고 나이 드신 분도 읽는다.
 * 그래서 글자는 15px 아래로 내려가지 않고, 브랜드 색은 아주 조금 남긴다.
 *
 * 이 파일은 style.css 와 40-pages.css 뒤에 붙는다.
 * 앞선 조각을 고치지 않고 여기서만 덮어쓴다.
 */

/* ═══ 페이지 머리, 소제목 옆 실사 포인트 ═══════════ */

.sa-head{
  padding-block:clamp(52px,6.6vw,100px) clamp(40px,5vw,72px);
  border-bottom:1px solid var(--line);
  overflow:visible;
}
/* 색 막대를 걷는다. 아래 눈썹 헤어라인이 그 자리를 대신한다 */
.sa-head .wrap::before{display:none;}

.sa-head-in{display:grid;gap:clamp(32px,4vw,52px);align-items:end;}
@media (min-width:900px){
  .sa-head-in{
    grid-template-columns:minmax(0,7fr) minmax(0,3fr);
    column-gap:clamp(44px,6.4vw,116px);
  }
}
.sa-head-txt h1{max-width:14ch;margin-bottom:var(--gap-sm);}
.sa-head-txt .lede{max-width:44ch;}

/* 사진은 한 장, 작게. 오른쪽으로 몰아 비대칭을 만든다 */
.sa-pt{margin:0;justify-self:end;width:100%;max-width:260px;}
@media (min-width:900px){.sa-pt{max-width:none;}}
.sa-pt img{
  width:100%;aspect-ratio:3/4;object-fit:cover;
  border-radius:var(--radius-xs);
}
.sv-page-head .sa-pt img{object-position:68% 52%;}

/* about 쪽머리는 다른 쪽이 실사를 놓는 자리에 사무소 심볼을 놓는다 */
.ab-pt{margin:0;justify-self:end;width:100%;max-width:210px;}
.ab-pt img{display:block;width:100%;height:auto;}
@media (max-width:899px){.ab-pt{max-width:132px;justify-self:start;}}

/* ═══ 두 쪽 공통 리듬 ═════════════════════════════ */

/* 여백 리듬·타이포 위계·대괄호 좌표 라벨은 05-base-refine.css 가 잡는다.
 * 여기서 다시 잡지 않는다. 사이트 전체가 같은 문법이어야 한다.
 * 다만 모의 세무감사 머리는 .sec-head 가 아니라서 대괄호가 붙지 않는다.
 * 같은 라벨로 보이게 여기서만 채운다. */
.sv-audit-head .eyebrow::before{content:"[";margin-right:.5em;opacity:.5;}
.sv-audit-head .eyebrow::after{content:"]";margin-left:.5em;opacity:.5;}

/* ═══ services.html ═══════════════════════════════ */

/* ── 서비스 여섯. 굵은 막대를 헤어라인으로 낮춘다 ── */
.sv-svc{padding-top:clamp(56px,7vw,104px);}
.sa-sec .sv-card{border-top:1px solid var(--line);}
.sa-sec .sv-card::before{color:var(--blue);letter-spacing:.18em;}
.sa-sec .sv-card:hover{border-top-color:var(--ink-3);}
.sa-sec .sv-card:hover::before{color:var(--blue);}
@media (min-width:1040px){
  .sv-grid{
    row-gap:clamp(64px,7.4vw,112px);
    column-gap:clamp(40px,4.4vw,72px);
  }
  .sa-sec .sv-card:nth-child(1){border-top-width:1px;border-top-color:var(--blue);}
}

/* ── 모의 세무감사. 노을빛 면과 발광을 걷는다 ──
 * 이 쪽의 주인공이라 크기로 세우고 색으로 세우지 않는다.
 * 톤은 한 단계만 눌러 앞뒤 흰 면과 구분한다. */
.sa-sec.sv-audit{
  background:var(--paper-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding-block:clamp(84px,11vw,176px);
}
.sv-audit::before{display:none;}
@media (min-width:1000px){
  .sv-audit-in{
    grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    column-gap:clamp(48px,6.4vw,120px);
    align-items:start;
  }
}
/* 이 쪽에서 가장 큰 글자. 다만 「모의 세무감사」가 석 줄로 쪼개지지 않을 만큼만 키운다 */
.sv-audit-head{max-width:none;}
/* font-size 는 40-pages.css 가 이미 --fs-display 로 준다.
   타입 스케일 정리 전에는 62 대 72 로 값이 달라 덮어쓰기가 일을 했는데,
   같은 단으로 흡수되면서 같은 값을 두 번 쓰는 죽은 줄이 됐다.
   여기서는 line-height 만 1.06 에서 1.08 로 바꾼다. */
.sv-audit-head h2{line-height:1.08;letter-spacing:-.042em;}
.sv-audit-body{max-width:56ch;}

/* 네 항목의 상자·그림자를 걷고 칸마다 헤어라인만 남긴다 */
.sa-sec .sv-audit-list{
  margin-top:clamp(56px,7vw,104px);
  background:none;border:0;border-radius:0;box-shadow:none;
  gap:0;
}
.sa-sec .sv-audit-list li{
  background:none;
  padding:clamp(20px,2.4vw,28px) 0;
  border-top:1px solid var(--line);
}
.sa-sec .sv-audit-list li::before{
  margin-bottom:clamp(12px,1.5vw,16px);letter-spacing:.18em;
}
@media (min-width:900px){
  .sa-sec .sv-audit-list{
    grid-template-columns:repeat(4,minmax(0,1fr));
    column-gap:clamp(28px,3.4vw,52px);
  }
}

/* ── 차별점 다섯 ── */
.sa-sec .sv-diff li{border-top:1px solid var(--line);}
.sa-sec .sv-diff li::before{letter-spacing:.18em;}
@media (min-width:900px){
  .sa-sec .sv-diff{
    column-gap:clamp(32px,4vw,64px);
    row-gap:clamp(48px,5.6vw,84px);
  }
}

/* ── 이런 경우 여덟. 마름모 마커를 걷는다 ── */
.sv-fit-sec{border-top:1px solid var(--line);}
.sa-sec .sv-fit li{padding:clamp(24px,2.6vw,32px) 0;}
.sa-sec .sv-fit b{display:block;margin-bottom:8px;}
.sa-sec .sv-fit b::before{display:none;}
.sa-sec .sv-fit span{padding-left:0;}
/* 마지막 줄의 밑선은 지운다. 바로 아래 「맞지 않습니다」의 윗선과 겹쳐 보인다 */
@media (max-width:819px){
  .sa-sec .sv-fit li:last-child{border-bottom:0;}
}
@media (min-width:820px){
  .sa-sec .sv-fit{column-gap:clamp(48px,6.4vw,104px);}
  .sa-sec .sv-fit li:nth-last-child(-n+2){border-bottom:0;}
}

/* ── 맞지 않는 경우. 상자를 걷고 윗선 하나로 ── */
.sa-sec .sv-caution{
  margin-top:clamp(52px,6.4vw,92px);
  padding:clamp(24px,3vw,36px) 0 0;
  background:none;border:0;border-top:1px solid var(--ink-3);border-radius:0;
  max-width:72ch;
}
.sa-sec .sv-caution ul{padding-left:20px;}

/* ═══ about.html ══════════════════════════════════ */

/* ── 프로필. 사진을 키우고 글은 아래에서 시작한다 ── */
.ab-profile{padding-bottom:clamp(40px,5vw,72px);}

.sa-sec .ab-photo::before{display:none;}
.sa-sec .ab-photo img{border-radius:var(--radius-xs);box-shadow:none;}
@media (min-width:900px){
  .sa-sec .ab-grid{
    grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);
    column-gap:clamp(48px,6.6vw,116px);
  }
  .ab-career{padding-top:clamp(40px,6vw,104px);}
}

/* ── 목록. 알약 배지와 점을 걷고 헤어라인만 남긴다 ── */
.sa-sec .ab-list li{
  gap:clamp(12px,1.5vw,16px);
  padding:var(--gap-xs) 0;
  border-bottom:1px solid var(--line-soft);
}
.sa-sec .ab-list li:first-child{border-top:1px solid var(--line);}
.sa-sec .ab-list span{
  width:auto;min-width:1.5em;padding:0;text-align:left;
  background:none;border:0;border-radius:0;
  font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.06em;color:var(--ink-3);
}
.sa-sec .ab-list span:empty{display:none;}

/* 경력·학력·전문분야는 문장이 아니라 목록의 이름표다.
   같은 크기로 키우면 위계가 무너지므로 한 단계 내린다 */
.ab-career h2,
.sa-sec .ab-two h2{font-size:var(--fs-h3);letter-spacing:-.028em;}

/* ── 학력·전문분야. 프로필에 붙여 한 덩어리로 읽히게 ── */
.sa-sec.ab-detail{padding-top:clamp(24px,3vw,44px);}
.sa-sec .ab-two h2{margin-bottom:clamp(16px,2.1vw,28px);}
@media (min-width:820px){
  .sa-sec .ab-two{column-gap:clamp(48px,6.6vw,116px);}
}

/* ── 세 사람이 차례로. 채운 원을 비운다 ──
 * 순서를 보여 주는 원과 잇는 선은 남긴다.
 * 파란 채움과 6px 링만 걷어 낸다. */
.ab-team{
  background:var(--paper-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.sa-sec .ab-steps li::before{
  background:var(--paper-2);
  border:1px solid var(--line);
  color:var(--ink);
  box-shadow:none;
  font-size:var(--fs-eyebrow);letter-spacing:.16em;
}
.sa-sec .ab-steps li:not(:last-child)::after{background:var(--line);}
@media (max-width:899px){
  .sa-sec .ab-steps li:not(:last-child)::after{
    width:1px;left:calc(clamp(46px,4.6vw,58px) / 2 - .5px);
  }
}
@media (min-width:900px){
  .sa-sec .ab-steps li:not(:last-child)::after{
    height:1px;top:calc(clamp(46px,4.6vw,58px) / 2 - .5px);
  }
}

/* ── 원칙 ── */
.ab-principles .pr-list li{border-top:1px solid var(--line);}
.ab-principles .pr-list li::before{top:-1px;color:var(--purple);letter-spacing:.18em;}
@media (min-width:920px){
  .ab-principles .pr-list{
    column-gap:clamp(32px,4.4vw,68px);
    row-gap:clamp(40px,4.6vw,64px);
  }
}

/* 다른 목록 여섯과 같은 문법으로. 첫 줄 위를 닫는다 */
.sv-fit li{border-top:1px solid var(--line);}
.sv-fit li:not(:last-child){border-bottom:0;}

/* 원칙은 홈과 같은 모양으로. 카피가 같은데 모양이 둘이면 다른 것처럼 읽힌다 */
.ab-pr .pr-list{display:grid;gap:clamp(24px,3vw,44px);}
@media (min-width:920px){.ab-pr .pr-list{grid-template-columns:repeat(3,minmax(0,1fr));}}
.ab-pr .pr-list li{counter-increment:pr;position:relative;padding-top:var(--gap-sm);
  border-top:1px solid var(--line);}
.ab-pr .pr-list li::before{
  content:counter(pr,decimal-leading-zero);
  position:static;display:block;
  font-size:var(--fs-h1);font-weight:800;line-height:1;
  letter-spacing:-.04em;color:var(--acc-ink,var(--purple));
  font-variant-numeric:tabular-nums;margin-bottom:clamp(8px,1.2vw,16px);
}

/* ── 위촉장·표창장 (2026-08-19 신설) ──────────
 * A4 스캔이라 세로로 길다. 종이처럼 보이게 흰 바탕에 얇은 테두리만 준다.
 * 작게 두면 글씨가 안 읽히므로 눌러서 크게 보는 길을 함께 둔다.
 */
.cert-grid{
  list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(24px,3vw,40px);
  /* 5장이라 4열이면 마지막 하나가 혼자 떨어진다. 3열로 두어 3+2 로 앉힌다 */
  grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
}
.cert-open{
  display:block;width:100%;padding:0;cursor:zoom-in;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);
  overflow:hidden;line-height:0;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.cert-open img{width:100%;height:auto;display:block;}
.cert-open:hover,.cert-open:focus-visible{
  border-color:var(--blue);
  box-shadow:0 10px 30px rgba(16,32,56,.13);
  transform:translateY(-2px);
}
.cert-say{padding-top:16px;}
.cert-say h3{
  font-size:var(--fs-body);line-height:1.4;
  margin:0 0 4px;color:var(--ink);
}
.cert-say p{
  margin:0;color:var(--ink-3);
  font-size:var(--fs-meta);line-height:1.55;
}

/* 크게 보기 */
.cert-lightbox{
  position:fixed;inset:0;z-index:120;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,3vw,44px);
  background:rgba(10,16,28,.86);
}
.cert-lightbox[hidden]{display:none;}
.cert-stage{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px;max-height:100%;}
.cert-stage img{
  max-width:min(100%,760px);max-height:78vh;width:auto;height:auto;
  background:var(--paper);border-radius:var(--radius-sm);
  box-shadow:0 24px 70px rgba(0,0,0,.45);
}
.cert-stage figcaption{
  color:#fff;text-align:center;max-width:60ch;
  font-size:var(--fs-meta);line-height:1.55;
}
.cert-close{
  position:absolute;top:clamp(12px,2vw,24px);right:clamp(12px,2vw,24px);
  padding:8px 16px;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;
  border:1px solid rgba(255,255,255,.42);border-radius:var(--radius-pill);
  font-size:var(--fs-meta);font-weight:600;
}
.cert-close:hover{background:rgba(255,255,255,.26);border-color:#fff;}


/* ── 80-cl-refine.css ── */
/* 80-cl-refine.css
 * 담당: cases.html · library.html
 *
 * 레퍼런스 세 장에서 가져온 것.
 *   여백 리듬(요소 사이를 크게 벌린다), 비대칭(한쪽으로 몰아 앉힌다),
 *   헤어라인(상자 대신 얇은 선), 좌표 라벨(01 / 04), 타이포 위계(제목이 주인공).
 * 버린 것.
 *   섹션 배경 실사, 카드 상자와 그림자, 파랑 그라디언트, 회색 띠.
 * 대신 소제목 옆에 세로 실사를 한 장만 포인트로 둔다.
 *
 * 남의 조각과 style.css 는 건드리지 않는다. 필요한 것은 전부 이 파일에 둔다.
 * 이 파일은 이름 순서상 맨 뒤라 앞 조각을 덮는다.
 */

/* 섹션 호흡(--sec-y)과 대괄호 좌표 라벨, 배경 실사 걷어내기는
   05-base-refine.css 가 사이트 전체로 잡아 두었다. 여기서 다시 잡지 않는다. */

/* ═══ 쪽머리, 글 왼쪽 실사 오른쪽 ═══════════════════ */

.cases-head,.lib-head{
  padding-block:clamp(52px,7vw,104px) clamp(32px,3.6vw,52px);
}
.ph-in{
  display:grid;
  gap:clamp(24px,3.4vw,56px);
  align-items:start;
}
@media (min-width:820px){
  .ph-in{grid-template-columns:minmax(0,1fr) auto;}
}
.ph-copy h1{margin-bottom:clamp(16px,1.8vw,24px);}
.ph-copy .lede{max-width:46ch;}

.ph-pt{
  margin:0;
  width:min(58%,260px);
  justify-self:start;
  position:relative;
}
@media (min-width:820px){
  .ph-pt{width:clamp(180px,20vw,240px);justify-self:end;margin-top:clamp(4px,1.6vw,24px);}
}
/* 사진 위에 짧은 선을 하나 얹어 좌표를 찍는다 */
.ph-pt::before{
  content:"";display:block;
  width:clamp(34px,4vw,52px);height:2px;
  margin-bottom:clamp(12px,1.4vw,16px);
  background:var(--blue);
}
.cases-head .ph-pt::before{background:var(--amber);}
.ph-pt img{
  width:100%;aspect-ratio:3/4;object-fit:cover;
  display:block;border-radius:0;
}

/* ═══ 소제목 공통 문법 ═══════════════════════════════
   얇은 선 하나를 긋고 왼쪽 끝만 색으로 덮는다.
   오른쪽 위에는 좌표를 작게 찍는다. */
.hd{
  position:relative;
  display:flex;flex-wrap:wrap;
  align-items:flex-end;justify-content:space-between;
  gap:16px clamp(24px,3vw,48px);
  border-top:1px solid var(--line);
  padding-top:var(--gap);
  margin-bottom:clamp(40px,5.2vw,84px);
}
.hd::after{
  content:"";position:absolute;left:0;top:-1px;
  width:clamp(40px,4.6vw,64px);height:2px;
  background:var(--blue);
}
.hd[data-idx]::before{
  content:attr(data-idx);
  position:absolute;right:0;top:clamp(20px,2.4vw,30px);
  font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.14em;
  font-variant-numeric:tabular-nums;color:var(--ink-3);
}
.hd .sec-head{margin-bottom:0;max-width:44ch;flex:1 1 22ch;}
.hd .sec-head .lede{max-width:42ch;}
/* 제목과 리드가 맞붙으면 한 덩어리로 뭉쳐 보인다 */
.hd .sec-head h2 + .lede{margin-top:clamp(12px,1.4vw,16px);}
.hd .lib-headlink{margin:0;padding-bottom:2px;}

/* 좁은 화면에서는 눈썹과 좌표가 같은 줄에 나란히 앉는다 */
@media (max-width:719px){
  .hd[data-idx] .eyebrow{padding-right:6em;}
}

/* ═══ cases.html ═══════════════════════════════════ */

/* ── 사례 다섯. 두 갈래로 크게 벌려 엇갈리게 앉힌다 ── */
.case-sec{padding-top:clamp(40px,5vw,72px);}

.case-gal{gap:clamp(48px,6vw,92px);}

.case-item{
  padding-top:var(--gap);
  border-top:1px solid var(--line);
}
/* 큰 앰버 숫자를 걷고 오른쪽 위 작은 좌표로 바꾼다.
   숫자가 제목과 크기를 다투던 것을 없앤다 */
.case-item::before{
  content:counter(cg,decimal-leading-zero);
  position:absolute;right:0;top:clamp(20px,2.4vw,30px);
  margin:0;
  font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.14em;
  font-variant-numeric:tabular-nums;
  color:var(--amber-ink);   /* 15px 글씨다. --amber 는 흰 바탕 2.04:1 로 크게 미달이었다 */
  line-height:1.4;
}
.case-item h2{
  font-size:var(--fs-h2);
  margin-bottom:clamp(8px,1.2vw,16px);
  padding-right:4em;
  max-width:20ch;
}
.case-item .case-what{
  font-size:var(--fs-lead);
  margin-bottom:clamp(8px,1.1vw,16px);
}
.case-item p:not(.case-what){max-width:52ch;}

/* 넓은 화면에서는 한 칸에 하나씩, 좌우로 크게 벌려 엇갈리게 앉힌다.
   줄을 못 박지 않으면 셋째와 넷째가 한 줄에 나란히 붙어 지그재그가 깨진다 */
@media (min-width:1000px){
  .case-gal{
    grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:var(--gap);
    row-gap:clamp(76px,9vw,152px);
  }
  .case-item:nth-child(1){grid-row:1;grid-column:1 / span 8;}
  .case-item:nth-child(2){grid-row:2;grid-column:7 / span 6;}
  .case-item:nth-child(3){grid-row:3;grid-column:1 / span 6;}
  .case-item:nth-child(4){grid-row:4;grid-column:7 / span 6;}
  .case-item:nth-child(5){grid-row:5;grid-column:1 / span 6;}
  .case-item:first-child::before{font-size:var(--fs-meta);}
  .case-item:first-child h2{font-size:var(--fs-h1);max-width:16ch;}
  .case-item:first-child .case-what{font-size:var(--fs-h4);}
}

/* 선을 하나 더 그으면 글줄 폭만큼만 그어져 끊긴 선처럼 보인다.
   여백만으로 떼어 놓는다 */
.case-note{
  max-width:56ch;
  margin-top:clamp(52px,6.4vw,104px);
  font-size:var(--fs-meta);
}

/* ── 후기 소제목만 같은 문법으로. 카드와 바탕은 그대로 둔다 ── */
.rev-wall .hd{
  border-top-color:rgba(120,90,55,.30);
  margin-bottom:0;
}
.rev-wall .hd::after{background:#B06B2A;}

/* ═══ library.html ═════════════════════════════════ */

/* ── 도구 다섯. 상자를 걷고 색인처럼 눕힌다 ── */
.tool-list{
  list-style:none;margin:0;padding:0;
  counter-reset:tl;
  display:block;
}
.tool-list li{counter-increment:tl;}
.tool{
  display:grid;
  grid-template-columns:clamp(40px,4.4vw,58px) minmax(0,1fr);
  grid-template-areas:"n t" ". d" ". m";
  column-gap:clamp(16px,2.2vw,32px);
  align-items:start;
  padding:clamp(24px,2.6vw,36px) 0;
  border-top:1px solid var(--line);
  text-decoration:none;color:inherit;
  transition:border-top-color .22s ease;
}
.tool-list li:last-child .tool{border-bottom:1px solid var(--line);}
.tool-n{
  grid-area:n;
  font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.14em;
  color:var(--blue);line-height:1.7;
}
.tool h3{grid-area:t;transition:color .2s ease;}
.tool p{
  grid-area:d;margin:8px 0 0;
  color:var(--ink-2);font-size:var(--fs-body);
  max-width:56ch;
}
.tool .more{grid-area:m;margin-top:16px;}
.tool:hover{border-top-color:var(--blue);}
.tool:hover h3{color:var(--blue);}

@media (min-width:900px){
  .tool{
    grid-template-columns:clamp(48px,5vw,66px) minmax(0,.86fr) minmax(0,1.24fr);
    grid-template-areas:"n t d" "n t m";
    column-gap:clamp(24px,3.4vw,60px);
    padding:clamp(24px,3vw,40px) 0;
  }
  .tool p{margin:0;}
  .tool .more{align-self:end;margin-top:var(--gap-xs);}
  /* 첫 칸만 제목을 키워 눈이 여기서 출발하게 한다 */
  .tool-list li:first-child h3{font-size:var(--fs-h3);}
}

/* ── 영상 넷. 파랑 무대와 큰 재생 단추를 걷고 세로 썸네일만 세운다 ──
   ⚠ 이름을 yt- 에서 vd- 로 바꿨다. 20-library.css 의 옛 무대 규칙이
   .yt-item 을 12칼럼 격자에 못 박아 두어, 같은 이름을 쓰면 그 자리 지정이
   그대로 살아 칸이 0px 로 찌그러진다. 이름을 갈라 아예 떼어 놓는다. */
.vd-row{
  display:grid;
  gap:clamp(24px,2.6vw,40px) clamp(16px,2.2vw,32px);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:900px){
  .vd-row{grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;}
  /* 두 번째와 네 번째를 아래로 내려 줄을 어긋나게 한다 */
  .vd-row .vd-item:nth-child(even){margin-top:clamp(28px,4.4vw,80px);}
}
.vd-item{
  display:flex;flex-direction:column;
  text-decoration:none;color:inherit;
}
.vd-shot{
  display:block;position:relative;
  aspect-ratio:9/16;overflow:hidden;
  background:var(--paper-2);
}
.vd-shot img{width:100%;height:100%;object-fit:cover;}
/* 재생 표시는 모서리에 작게. 넷이 나란히 서므로 가운데 큰 원은 시끄럽다 */
.vd-play{
  position:absolute;left:12px;bottom:12px;
  width:34px;height:34px;border-radius:50%;
  background:rgba(11,16,32,.62);
  display:flex;align-items:center;justify-content:center;
  transition:background .22s ease;
}
.vd-play::before{
  content:"";
  margin-left:4px;
  border-left:11px solid #fff;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
}
.vd-item:hover .vd-play{background:var(--blue);}
.vd-title{
  font-size:var(--fs-lead);
  margin:var(--gap-xs) 0 0;
  transition:color .2s ease;
}
.vd-item:hover .vd-title{color:var(--blue);}
.vd-foot{
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:4px clamp(12px,1.6vw,20px);
  margin-top:clamp(8px,1vw,12px);
}
.vd-views{font-size:var(--fs-meta);color:var(--ink-3);}
.vd-item .more{font-size:var(--fs-meta);font-weight:600;color:var(--ink-3);}
.vd-item:hover .more{color:var(--blue);}

/* ── 블로그 넷. 큰 상자를 걷고 사진 아래에 글을 붙인다 ── */
.blog-grid{
  gap:clamp(32px,4.4vw,72px);
  align-items:start;
}
@media (min-width:900px){
  .blog-grid{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);}
}
.blog-lead{
  background:none;border:0;border-radius:0;
  min-height:0;padding:0;box-shadow:none;
  border-top:1px solid var(--line);
  padding-top:var(--gap);
}
.blog-lead:hover{box-shadow:none;transform:none;}
.blog-shot img{
  width:100%;height:clamp(230px,26vw,340px);
  object-fit:cover;object-position:center top;border-radius:0;
  
}
.blog-lead .blog-tag,
.blog-lead .blog-date,
.blog-lead h3,
.blog-lead .more{margin-left:0;margin-right:0;}
.blog-lead .blog-tag{
  margin-top:0;margin-bottom:6px;
  font-size:var(--fs-eyebrow);letter-spacing:.14em;
}
.blog-lead h3{margin:8px 0 0;font-size:var(--fs-h3);max-width:24ch;}
.blog-lead .more{margin-top:clamp(16px,2.2vw,28px);padding-top:0;margin-bottom:0;}

.blog-list li:first-child{border-top:1px solid var(--line);}
/* 20-library.css 가 세로쌓기(column)로 두어 썸네일 아래로 글이 떨어졌다.
   가로로 눕혀야 목록이 짧아지고 날짜와 제목이 한눈에 들어온다 */
.blog-list a{
  flex-direction:row;
  gap:clamp(16px,1.8vw,24px);
  padding:var(--gap) 0;
}
.blog-thumb{
  flex:0 0 clamp(84px,8vw,112px);
  border-radius:0;
}
.blog-thumb img{height:clamp(84px,8vw,112px);}
.blog-list h3{font-size:var(--fs-lead);max-width:26ch;}

/* ── 채널 넷. 상자를 걷고 선 위에 나란히 올린다 ── */
.ch-list{
  display:grid;
  gap:clamp(24px,3vw,44px) clamp(24px,2.6vw,40px);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:560px){.ch-list{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:1000px){.ch-list{grid-template-columns:repeat(4,minmax(0,1fr));}}
.ch{
  display:flex;flex-direction:column;
  border-top:1px solid var(--line);
  padding-top:var(--gap-sm);
  text-decoration:none;color:inherit;
  transition:border-top-color .22s ease;
}
.ch:hover{border-top-color:var(--blue);}
.ch h3{margin-bottom:8px;transition:color .2s ease;}
.ch:hover h3{color:var(--blue);}
.ch p{color:var(--ink-2);font-size:var(--fs-body);max-width:34ch;}
.ch .more{margin-top:auto;padding-top:var(--gap-xs);}
.ch-logo{margin-bottom:clamp(12px,1.4vw,16px);}
.ch-logo img{width:clamp(34px,3vw,40px);height:auto;border-radius:var(--radius-sm);}

/* 사진 아래 회색 바탕이 드러나던 것을 막는다 */
.blog-shot{background:none;margin-bottom:clamp(16px,2.2vw,28px);}

/* 눈썹은 사이트 전체가 대괄호 하나로 간다.
   막대와 대괄호가 섞이면 한 쪽에 규칙이 둘로 읽힌다. */
/* 색막대와 대괄호가 같은 ::before 를 다투어 「[」 가 아래로 떨어지고
   「]」 가 멀리 밀려나 있었다. 막대를 확실히 걷고 대괄호 하나로 간다. */
.cases-head .eyebrow, .lib-head .eyebrow, .hd .eyebrow{
  /* inline 은 세로 마진을 안 먹어 눈썹 아래 여백이 죽는다. block 으로 둔다 */
  display:block;align-items:initial;gap:0;
}
.cases-head .eyebrow::before, .lib-head .eyebrow::before, .hd .eyebrow::before{
  content:"[";
  width:auto;height:auto;background:none;flex:none;
  margin-right:.5em;opacity:.5;
}
.cases-head .eyebrow::after, .lib-head .eyebrow::after, .hd .eyebrow::after{
  content:"]";
  width:auto;height:auto;background:none;flex:none;
  margin-left:.5em;opacity:.5;
}


/* ── 95-header.css ── */
/* 머리띠 다듬기.
 *
 * 고친 것 넷.
 * ① 「상담 신청」이 메뉴와 버튼에 두 번 나오던 것을 넓은 화면에서 하나로 줄였다.
 *    좁은 화면은 오른쪽 버튼이 숨으므로 메뉴 쪽이 남아 있어야 한다.
 * ② 전화번호가 버튼과 똑같이 굵어 시선이 둘로 갈리던 것을 보조 위계로 내렸다.
 *    전화번호는 안내이지 눌러야 할 행동이 아니다.
 * ③ 버튼이 커서 투박하던 것을 단정하게 줄였다.
 * ④ 스크롤해 내려가면 아래에 옅은 그림자가 지도록 했다. 본문과 겹칠 때 경계가 산다.
 */

/* ⚠ 이 값은 헤더 버튼이 나타나는 폭과 반드시 같아야 한다.
   .header-cta 는 960px 이하에서 숨는다(style.css). 그러니 메뉴 안 상담 신청은
   961px 부터 접어야 한다. 전에는 1000px 이라, 961~999px 39px 구간에서
   「상담 신청」이 메뉴와 버튼으로 두 번 나왔다. 한쪽만 옮기면 그 구멍이 되살아난다. */
@media (min-width:961px){
  .nav a.nav-dup{display:none;}
}

.site-header{
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(1.6) blur(18px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.site-header.is-stuck{
  background:rgba(255,255,255,.9);
  border-bottom-color:var(--line-soft);
  box-shadow:0 1px 22px rgba(15,23,42,.055);
}
.header-in{height:clamp(62px,6.2vw,72px);}

.nav{gap:clamp(16px,2vw,32px);}
.nav a{font-size:var(--fs-meta);letter-spacing:-.012em;padding:8px 2px;border-bottom-width:1.5px;}

/* 라벨을 앞에 붙여 이 숫자가 무엇인지 밝힌다 */
.header-tel{
  display:inline-flex;align-items:baseline;gap:8px;
  color:var(--ink-2);font-weight:700;font-size:var(--fs-meta);letter-spacing:-.005em;
  transition:color .2s ease;
}
.header-tel span{
  /* 라벨과 번호의 크기 차이가 0.5px 뿐이라 굵기로 위계를 준다.
     12.5px 을 하한 위로 올리면서 둘이 거의 같아졌다.
     색·크기로 이미 위계가 서 있어 굵기에 새 값(500)을 들이지 않고 토큰 안에서 해결한다. */
  font-size:var(--fs-eyebrow);font-weight:var(--fw-body);letter-spacing:.05em;color:var(--ink-3);
}
.header-tel:hover{color:var(--ink);}

.header-cta{gap:clamp(12px,1.4vw,20px);}
.header-cta .btn{
  padding:8px 16px;font-size:var(--fs-meta);border-radius:var(--radius-sm);
  letter-spacing:-.015em;box-shadow:none;
}
.header-cta .btn-primary{box-shadow:0 1px 2px rgba(0,113,193,.18);}
.header-cta .btn-primary:hover{box-shadow:0 3px 12px rgba(0,113,193,.24);}

/* 좁은 화면에서는 메뉴 안에 들어간 상담 신청을 눈에 띄게 둔다.
   위 961px 의 짝이다. 함께 움직인다. */
@media (max-width:960px){
  .nav a.nav-dup{color:var(--blue);}
}


/* ── 97-first-call.css ── */
/* 대표의 첫 통화 블록 (09_비교 After 전용, CONCEPT Emphasize 1·2)
 * 구성은 .ix-head + .svc-rows 를 그대로 쓴다. 여기서는 사진 위치와 버튼 줄만 잡는다 */
.ix-call .ix-pic img{object-position:center 18%;}
.call-rows h3{font-size:var(--fs-h4);}
.call-btns{margin-top:clamp(28px,3.4vw,48px);}

/* 어두운 띠 위 링크. 기본 파랑은 --midnight 위에서 대비가 모자란다 */
.cta-band .more{color:#E3EAF5;}
/* 보낸 뒤 목록이 넷이 되면 3+1 로 하나가 혼자 떨어진다. 넓은 폭에서 2+2 로 */
@media (min-width:900px){
  .after-list.af-4{grid-template-columns:repeat(2,minmax(0,1fr));}
}


/* ── 98-surface.css ── */
/* 면과 모양 (2026-09-25). 기준 문서는 04_디자인/design.md.
 *
 * 선 위에 떠 있던 정보를 둥근 면에 올린다. 레퍼런스는 modena.ee(판·알약 버튼)와
 * taxguide.im(한국어 둥근 카드·떠 있는 헤더). 앞 조각은 고치지 않고 여기서 덮는다.
 * ⚠ services·cases 의 어긋난 갤러리 배치는 건드리지 않는다. 카드 모양만 바꾼다.
 */

:root{
  --radius-xl:28px;                   /* 판. 레퍼런스 두 곳의 판 모서리(약 30px)에 맞췄다 */
  --inset:clamp(8px,1.4vw,24px);      /* 판을 화면 가장자리에서 들이는 폭 */
}

/* ══ 판: 히어로, 틴트 섹션, 어두운 상담 띠 ══════════════
   세 덩어리가 같은 들여쓰기와 같은 모서리를 가져야 한 사이트로 읽힌다 */
.hero{
  margin:8px var(--inset) 0;
  border-radius:var(--radius-xl);
}
section.tint{
  margin-inline:var(--inset);
  border-radius:var(--radius-xl);
}
/* 판이 연달아 오면 맞닿지 않게 한 줄 띄운다 */
.hero + section.tint,
section.tint + .cta-band,
section.tint + section.tint{margin-top:8px;}
.cta-band{
  margin-inline:var(--inset);
  margin-bottom:var(--inset);
  border-radius:var(--radius-xl);
  overflow:hidden;
}

/* ══ 사진 ══════════════════════════════════ */
.ix-pic img,
.sa-pt img,
.hd-pic,
.ab-profile img{border-radius:var(--radius-lg);}

/* ══ 목록을 카드로 ════════════════════════════
   카드 바탕은 섹션 바탕의 반대편. 흰 섹션이면 옅은 면, 틴트 판이면 흰 면 */
.svc-rows,
.fit-rows,
.case-cols,
.lib-rows{display:grid;gap:12px;}

.svc-rows li,
.fit-rows li,
.case-cols li,
.lib-rows li,
.sv-card,
.case-item,
.after-list li{
  background:var(--paper-2);
  border:0;
  border-radius:var(--radius-lg);
  padding:var(--gap);
}
.tint .svc-rows li,
.tint .fit-rows li,
.tint .case-cols li,
.tint .lib-rows li,
.tint .sv-card,
.tint .case-item,
.tint .after-list li,
.after-send .after-list li{background:var(--paper);}

/* 줄 목록에 있던 마지막 줄 선을 걷는다 */
.svc-rows li:last-child,
.fit-rows li:last-child,
.lib-rows li:last-child,
.fit-rows li:nth-last-child(-n+2){border-bottom:0;}

/* 카드 안에서는 앞 조각의 위아래 여백을 쓰지 않는다. 패딩이 대신한다 */
.lib-row{padding-block:0;}
.case-cols li{padding:var(--gap);}
@media (min-width:900px){
  .svc-rows li{padding:var(--gap);}
  .case-cols{gap:12px;}
  .case-cols li + li{border-left:0;}
}

/* 번호가 절대 위치로 붙는 목록은 카드 안쪽으로 들인다 */
.after-list li::before{top:var(--gap);right:var(--gap);}
.after-list h3{padding-right:56px;}

/* 누르는 카드는 올라온다 */
.lib-row,
.tool{border-radius:var(--radius-lg);}
.lib-rows li:has(.lib-row:hover),
.tool:hover{box-shadow:var(--shadow-sm);}

/* 자료실 도구 카드 */
.tool{
  background:var(--paper-2);
  border:0;
  padding:var(--gap);
}
.tint .tool{background:var(--paper);}

/* ══ 버튼, 알약과 화살표 ══════════════════════ */
.btn{border-radius:var(--radius-pill);}

/* 주 행동에만 흰 원 안 화살표. 누르면 다음으로 간다는 표시다 */
.btn-sunset,
.btn-primary{padding-left:8px;}
.btn-sunset::before,
.btn-primary::before{
  content:"";
  flex:0 0 auto;
  width:32px;height:32px;
  border-radius:50%;
  background:rgba(255,255,255,.2) no-repeat center / 16px 16px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E");
  transition:transform .22s ease;
}
.btn-sunset:hover::before,
.btn-primary:hover::before{transform:translateX(2px);}

/* 헤더의 작은 버튼은 자리가 좁고 반복되므로 뺀다 */
.header-cta .btn::before,
.nav .btn::before{content:none;}
.header-cta .btn-sunset,
.header-cta .btn-primary{padding-left:16px;}

/* ══ 헤더, 스크롤하면 떠 있는 판 (넓은 화면만) ══════════
   좁은 화면은 메뉴 펼침과 부딪치므로 그대로 둔다. 961px 은 95-header.css 와 짝이다 */
@media (min-width:961px){
  .site-header{transition:background .25s ease, border-color .25s ease;}
  .site-header .header-in{
    transition:background .25s ease, box-shadow .25s ease, border-radius .25s ease;
  }
  .site-header.is-stuck{
    background:transparent;
    backdrop-filter:none;
    border-bottom-color:transparent;
    box-shadow:none;
  }
  /* 여백으로 밀면 헤더 높이가 바뀌어 본문이 튄다. sticky 기준 위치만 내린다 */
  .site-header.is-stuck{top:8px;}
  .site-header.is-stuck .header-in{
    background:rgba(255,255,255,.92);
    backdrop-filter:saturate(1.6) blur(18px);
    border-radius:var(--radius-pill);
    box-shadow:var(--shadow);
  }
}

@media (prefers-reduced-motion:reduce){
  .btn-sunset::before,
  .btn-primary::before,
  .site-header .header-in{transition:none;}
}

/* ══ 앞 조각의 머리선 장식을 카드에 맞게 정리 ══════════
   카드가 되면 머리선이 없으므로 그 위에 얹던 짧은 선도 걷는다 */
.case-item::after{content:none;}
.case-item::before{top:var(--gap);right:var(--gap);}
/* 20ch 제한이 카드 안쪽 여백과 겹쳐 「사전답변으/로」처럼 낱말이 끊겼다 */
.case-item h2{max-width:none;padding-right:3em;}

/* 서비스 첫 카드는 파란 머리선 대신 옅은 파랑 면으로 머리글임을 표시한다.
   --blue 글씨는 --blue-soft 위 4.61:1 */
@media (min-width:1040px){
  .sv-card:nth-child(1){border-top:0;background:var(--blue-soft);}
}
.sa-sec .sv-card:hover{border-top-color:transparent;}

/* 자료실 도구 카드 사이를 띄운다. 줄 목록일 때는 선이 경계였다 */
.tool-list{display:grid;gap:12px;}
.tool-list li:last-child .tool{border-bottom:0;}