/* 가늠 세무회계 — 리뉴얼(대표 #1319 · 일 #1735) 공용 스타일. 쪽 6개가 이 파일 하나를 쓴다.
   강조는 색이 아니라 옅은 면(--face)과 짙은 면(--deep)으로 한다(00_브랜드시트). */
:root {
  --ink: #2A2620;
  --sub: #5C5548;
  --line: #D8D2C6;
  --line2: #C9C2B4;
  --deep: #454039;
  --deep2: #3A362F;
  --on-deep: #F5F2EC;
  --on-deep2: #B8B2A6;
  --line-deep: #565046;
  --face: #EDE8DE;
  --paper: #F7F5F0;
  --bg: #FFFFFF;
  --r: 12px;
  --wrap: 1200px;
  --head: 76px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head) + 16px); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
  font-size: 16px; line-height: 1.7; letter-spacing: -0.01em; word-break: keep-all;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.3; letter-spacing: -0.025em; font-weight: 700; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--deep); color: var(--on-deep); padding: 10px 16px; border-radius: 8px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid #8F877A; outline-offset: 2px; }
.small { font-size: 14.5px; color: var(--sub); }

/* ── 머리 ─────────────────────────────────────────── */
.site-head { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.97); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; align-items: center; gap: 28px; height: var(--head); }
.logo { display: inline-flex; flex-direction: column; text-decoration: none; color: var(--ink); white-space: nowrap; line-height: 1.25; }
.logo b { font-size: 21px; font-weight: 700; letter-spacing: -0.03em; }
.logo span { font-size: 13px; color: var(--sub); }
.gnb-nav { margin-left: auto; }
.gnb { display: flex; gap: 2px; }
.gnb > li { position: relative; }
.gnb > li > a { display: block; padding: 10px 14px; font-size: 16px; font-weight: 600; text-decoration: none; border-radius: 8px; }
.gnb > li > a:hover { background: var(--paper); }
.gnb > li > a[aria-current] { background: var(--face); }
.gnb .sub { position: absolute; top: 100%; left: 0; min-width: 220px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 32px -16px rgba(42,38,32,.3); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s, transform .15s, visibility .15s; }
.gnb > li:hover .sub, .gnb > li:focus-within .sub { opacity: 1; visibility: visible; transform: none; }
.gnb .sub a { display: block; padding: 8px 12px; font-size: 15px; text-decoration: none; border-radius: 8px; }
.gnb .sub a:hover { background: var(--face); }
.head-tel { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: var(--deep); color: var(--on-deep); font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.head-tel:hover { background: var(--deep2); }
.head-tel svg { width: 16px; height: 16px; }
.head-fee, .mobile-menu { display: none; }

/* ── 공용 조각 ─────────────────────────────────────── */
.sec { padding: 112px 0; }
.sec.tint { background: var(--paper); }
.sec.deep { background: var(--deep); color: var(--on-deep); }
.eyebrow { display: inline-block; font-size: 14px; font-weight: 700; color: var(--sub); letter-spacing: 0.04em; margin-bottom: 14px; }
.deep .eyebrow { color: var(--on-deep2); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 48px; }
.sec-head h2 { font-size: 40px; }
.sec-head p { color: var(--sub); max-width: 460px; }
.more { font-weight: 700; color: var(--ink); text-underline-offset: 4px; }
.btns { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 24px; border-radius: 10px; font-weight: 700; font-size: 16px; text-decoration: none; border: 1px solid var(--deep); white-space: nowrap; }
.btn.solid { background: var(--deep); color: var(--on-deep); }
.btn.solid:hover { background: var(--deep2); }
.btn.line { background: #fff; color: var(--ink); }
.btn.line:hover { background: var(--face); }
.photo { border-radius: var(--r); overflow: hidden; background: var(--face); }
.photo img { width: 100%; height: 100%; object-fit: cover; }

/* ── 홈 첫 화면: 맡길 일 고르기 ───────────────────── */
.hero { position: relative; display: flex; align-items: center; min-height: min(calc(100vh - var(--head)), 780px); overflow: hidden; color: var(--on-deep); background: var(--deep2); }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(42,38,32,.92) 0%, rgba(42,38,32,.84) 42%, rgba(42,38,32,.35) 72%, rgba(42,38,32,.2) 100%); }
.hero .wrap { position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 64px; align-items: center; padding-top: 72px; padding-bottom: 72px; }
.hero .office { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-bottom: 18px; margin-bottom: 28px; border-bottom: 1px solid rgba(245,242,236,.28); font-size: 15px; color: var(--on-deep2); }
.hero .office b { font-size: 17px; color: var(--on-deep); }
.hero h1 { font-size: 60px; letter-spacing: -0.04em; line-height: 1.2; margin-bottom: 20px; }
.hero .lead { font-size: 19px; color: #E4DFD5; max-width: 520px; }
.hero-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 32px; }
.hero-links a { font-weight: 700; text-underline-offset: 5px; text-decoration-color: rgba(245,242,236,.5); font-variant-numeric: tabular-nums; }
.hero-links a:hover { text-decoration-color: currentColor; }
.pick { background: var(--face); color: var(--ink); border-radius: 16px; padding: 10px; box-shadow: 0 32px 64px -32px rgba(0,0,0,.6); }
.pick a { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "no t go" "no f go"; column-gap: 12px; align-items: center; padding: 14px 16px; border-radius: 10px; text-decoration: none; }
.pick a + a { border-top: 1px solid var(--line2); }
.pick a:hover { background: #fff; }
.pick a:hover + a { border-top-color: transparent; }
.pick .no { grid-area: no; font-size: 13px; font-weight: 700; color: var(--sub); font-variant-numeric: tabular-nums; }
.pick strong { grid-area: t; font-size: 18px; line-height: 1.4; }
.pick .for { grid-area: f; font-size: 14px; color: var(--sub); line-height: 1.5; }
.pick i { grid-area: go; font-style: normal; font-size: 18px; }
.pick a.all { display: block; text-align: center; padding: 12px; font-size: 15px; font-weight: 700; color: var(--sub); text-decoration: underline; text-underline-offset: 4px; }

/* ── 서비스 목록 ───────────────────────────────────── */
.svcs { border-top: 2px solid var(--ink); }
.svc { display: grid; grid-template-columns: 280px minmax(0, 1fr) 48px; gap: 40px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.svc .photo { aspect-ratio: 4 / 3; }
.svc .no { display: block; font-size: 14px; font-weight: 700; color: var(--sub); margin-bottom: 6px; }
.svc h3 { font-size: 26px; margin-bottom: 10px; }
.svc p { color: var(--sub); max-width: 640px; }
.svc .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.svc .tags li { font-size: 13px; padding: 3px 10px; border-radius: 999px; background: var(--face); }
.svc .go { justify-self: end; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line2); font-size: 18px; transition: background .15s, color .15s; }
.svc:hover h3 { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.svc:hover .go { background: var(--deep); color: var(--on-deep); border-color: var(--deep); }

/* ── 일하는 순서 ───────────────────────────────────── */
.flow-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.flow-wrap .photo { aspect-ratio: 4 / 5; background: var(--deep2); }
.flow-wrap h2 { font-size: 36px; margin-bottom: 28px; }
.steps { counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; gap: 2px 16px; padding: 18px 0; border-top: 1px solid var(--line-deep); }
.steps li:last-child { border-bottom: 1px solid var(--line-deep); }
.steps li::before { grid-row: 1 / 3; content: counter(s, decimal-leading-zero); font-weight: 700; color: var(--on-deep2); font-size: 15px; padding-top: 2px; font-variant-numeric: tabular-nums; }
.steps strong, .steps span { grid-column: 2; }
.steps strong { display: block; font-size: 18px; }
.steps span { display: block; color: var(--on-deep2); font-size: 15.5px; }

/* ── 세무사 소개 ───────────────────────────────────── */
.person { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 56px; align-items: start; }
.person .photo { aspect-ratio: 4 / 5; }
.person .role { display: inline-block; font-size: 14px; font-weight: 700; padding: 3px 12px; border-radius: 999px; background: var(--face); }
.person h3 { font-size: 36px; margin: 12px 0 4px; }
.person .lic { font-size: 16px; color: var(--sub); margin-bottom: 22px; font-variant-numeric: tabular-nums; }
.person .say { font-size: 19px; line-height: 1.6; margin-bottom: 28px; max-width: 560px; }
.person dl { margin: 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px 16px; border-top: 1px solid var(--line); padding-top: 22px; }
.person dt { color: var(--sub); font-weight: 600; }
.person dd { margin: 0; }
.team { margin-top: 72px; padding-top: 48px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
.member .photo { aspect-ratio: 4 / 5; margin-bottom: 20px; }
.member .role { display: inline-block; font-size: 14px; font-weight: 700; padding: 3px 12px; border-radius: 999px; background: var(--face); }
.member h3 { font-size: 26px; margin: 10px 0 4px; }
.member .say { color: var(--sub); margin-bottom: 16px; }
.member dl { margin: 0; border-top: 1px solid var(--line); padding-top: 14px; }
.member dt { color: var(--sub); font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.member dd { margin: 0; font-size: 15.5px; }

/* ── 인사말 ───────────────────────────────────────── */
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 72px; }
.about h2 { font-size: 40px; }
.about-body p { font-size: 18px; line-height: 1.75; }
.about-body p + p { margin-top: 18px; }
.about-body .sign { margin-top: 28px; color: var(--sub); }
.about-body .sign b { margin-left: 6px; font-size: 20px; color: var(--ink); }
.facts { margin: 40px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.facts div { padding: 18px 16px 0 0; }
.facts dt { color: var(--sub); font-size: 14px; font-weight: 600; }
.facts dd { margin: 4px 0 0; font-size: 17px; font-weight: 700; }

/* ── 세무 소식 · 자주 묻는 질문 ─────────────────────── */
.sec-head h2.big { font-size: 56px; letter-spacing: -0.03em; }
.news { border-top: 2px solid var(--ink); }
.news li { display: grid; grid-template-columns: 140px 96px minmax(0, 1fr); gap: 4px 24px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.news time { color: var(--sub); font-variant-numeric: tabular-nums; }
.news .tag { justify-self: start; font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--face); }
.news h3 { font-size: 19px; }
.news p { grid-column: 3; color: var(--sub); }
.faq-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 72px; }
.faq-wrap h2 { font-size: 40px; }
.faq { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; font-size: 18px; font-weight: 700; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-weight: 400; color: var(--sub); }
.faq details[open] summary::after { content: '−'; }
.faq details p { padding: 0 0 22px; color: var(--sub); }

/* ── 연간 일정 ─────────────────────────────────────── */
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--face); gap: 4px; }
.seg button { font: inherit; font-size: 15px; font-weight: 700; height: 42px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; color: var(--sub); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--deep); color: var(--on-deep); }
.monthly { margin: 24px 0 20px; padding: 16px 20px; border-radius: 10px; background: #fff; border: 1px solid var(--line); }
.monthly strong { margin-right: 10px; }
.monthly span { color: var(--sub); }
.cal { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.cal li { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 148px; padding: 16px; border-radius: 10px; background: #fff; border: 1px solid var(--line); }
.cal b { font-size: 15px; }
.cal span { font-size: 15px; line-height: 1.5; }
.cal time { margin-top: auto; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cal .empty { background: transparent; border-style: dashed; }
.cal .empty span { color: var(--sub); }
.cal .now { background: var(--deep); border-color: var(--deep); color: var(--on-deep); }
.cal .now.empty span { color: var(--on-deep2); }
.cal .now b::after { content: ' · 이달'; font-weight: 600; color: var(--on-deep2); }

/* ── 보수표 ───────────────────────────────────────── */
.fee-head { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 56px; align-items: end; margin-bottom: 40px; }
.fee-head h2 { font-size: 40px; margin-bottom: 8px; }
.fee-head h2 + p { font-size: 18px; margin-bottom: 14px; }
.fee-head .photo { aspect-ratio: 3 / 2; }
.calc { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 16px 24px; align-items: center; padding: 20px 24px; border-radius: var(--r); background: var(--face); margin-bottom: 32px; }
.calc .seg { background: #fff; }
.band { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 15px; white-space: nowrap; }
.band select, .form select { appearance: none; -webkit-appearance: none; font: inherit; font-size: 16px; font-weight: 500; color: var(--ink); height: 46px; padding: 0 40px 0 14px; border-radius: 8px; border: 1px solid #A39B8D; background: #fff linear-gradient(45deg, transparent 50%, #5C5548 50%) calc(100% - 20px) 20px / 6px 6px no-repeat; background-image: linear-gradient(45deg, transparent 50%, #5C5548 50%), linear-gradient(135deg, #5C5548 50%, transparent 50%); background-position: calc(100% - 20px) 20px, calc(100% - 14px) 20px; background-size: 6px 6px; background-repeat: no-repeat; }
.mine { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 4px 28px; }
.mine div { display: flex; align-items: baseline; gap: 10px; }
.mine span { font-size: 14.5px; color: var(--sub); }
.mine strong { font-size: 26px; font-variant-numeric: tabular-nums; }
.mine p { font-size: 14.5px; color: var(--sub); }
.fees { width: 100%; border-collapse: collapse; font-size: 16px; }
.fees caption { text-align: left; font-weight: 700; padding-bottom: 12px; }
.fees thead th { padding: 14px 12px; border-bottom: 2px solid var(--ink); text-align: left; font-size: 14.5px; color: var(--sub); }
.fees td, .fees tbody th { padding: 16px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.fees tbody th { font-weight: 700; white-space: nowrap; }
.fees td:nth-child(2), .fees td:nth-child(3), .fees thead th:nth-child(2), .fees thead th:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fees td:nth-child(2), .fees td:nth-child(3) { font-weight: 700; }
.fees td:last-child { color: var(--sub); font-size: 15px; }
.fees tr.on { background: var(--face); }
.fee-more { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 40px 0 20px; }
.fee-more > div { padding: 24px 28px; border-radius: var(--r); border: 1px solid var(--line); }
.fee-more h3 { font-size: 19px; margin-bottom: 8px; }
.price { margin: 0; }
.price div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.price div:last-child { border-bottom: 0; }
.price dt { color: var(--ink); }
.price dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── 오시는 길 ─────────────────────────────────────── */
.visit { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.visit .photo { aspect-ratio: 3 / 2; }
.visit h2 { font-size: 36px; }
.visit h2 + .small { margin: 6px 0 28px; }
.info { margin: 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px 16px; }
.info dt { color: var(--sub); font-weight: 600; }
.info dd { margin: 0; font-variant-numeric: tabular-nums; }
.info .big { font-size: 22px; font-weight: 700; text-decoration: none; }

/* ── 문의 ─────────────────────────────────────────── */
.ask { display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: start; }
.ask h2 { font-size: 36px; margin-bottom: 14px; }
.ask .side > p { color: var(--sub); margin-bottom: 24px; }
.ask .aside { padding: 22px 24px; border-radius: 12px; background: var(--face); }
.ask .aside strong { display: block; margin-bottom: 6px; }
.ask .aside p { font-size: 15px; color: var(--sub); }
.form { background: #fff; border: 1px solid var(--line2); border-radius: var(--r); padding: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; color: var(--sub); font-weight: 600; }
.form .full { grid-column: 1 / -1; }
.form input, .form select, .form textarea { font: inherit; font-size: 16px; color: var(--ink); height: 52px; padding: 0 14px; border-radius: 8px; border: 1px solid #A39B8D; background-color: #fff; }
.form select { padding-right: 40px; background-position: calc(100% - 20px) 23px, calc(100% - 14px) 23px; }
.form textarea { height: auto; padding: 12px 14px; resize: vertical; line-height: 1.6; }
.form input:focus, .form select:focus, .form textarea:focus, .band select:focus { border-color: var(--deep); outline: none; box-shadow: 0 0 0 3px rgba(69,64,57,.2); }
.consent { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 18px; display: grid; gap: 8px; }
.consent label { flex-direction: row; gap: 12px; align-items: flex-start; font-weight: 500; color: var(--ink); font-size: 15px; line-height: 1.65; cursor: pointer; }
.consent input { width: 18px; height: 18px; margin: 4px 0 0; accent-color: var(--deep); flex: none; }
.consent label a { text-decoration: underline; text-underline-offset: 3px; }
.consent p { margin-left: 30px; font-size: 14px; color: var(--sub); }
.form button { grid-column: 1 / -1; height: 56px; border: 0; border-radius: 10px; background: var(--deep); color: var(--on-deep); font: inherit; font-weight: 700; font-size: 17px; cursor: pointer; }
.form button:hover { background: var(--deep2); }
.sent { background: var(--face); border-radius: var(--r); padding: 40px 32px; }
.sent strong { display: block; font-size: 21px; margin-bottom: 8px; }
.sent p { color: var(--sub); }

/* ── 서비스 쪽 ─────────────────────────────────────── */
.crumb { padding: 20px 0 0; font-size: 14px; color: var(--sub); }
.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.crumb span { margin: 0 8px; }
.page-hero { padding: 32px 0 64px; }
.page-hero .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.page-hero h1 { font-size: 48px; margin-bottom: 16px; }
.page-hero .lead { font-size: 18px; color: var(--sub); margin-bottom: 24px; }
.page-hero .photo { aspect-ratio: 4 / 3; }
.page-hero .who { display: grid; gap: 8px; padding: 18px 22px; border-radius: 10px; background: var(--face); }
.page-hero .who li { position: relative; padding-left: 20px; }
.page-hero .who li::before { content: ''; position: absolute; left: 2px; top: 12px; width: 8px; height: 2px; background: var(--ink); }
.page-hero .btns { margin-top: 28px; }
.tabs { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; position: sticky; top: var(--head); z-index: 30; }
.tabs ul { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.tabs ul::-webkit-scrollbar { display: none; }
.tabs a { display: block; padding: 16px 18px; font-size: 16px; font-weight: 600; color: var(--sub); text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current] { color: var(--ink); border-bottom-color: var(--ink); }
.part { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 56px; padding: 64px 0; border-bottom: 1px solid var(--line); }
.part:last-of-type { border-bottom: 0; }
.part .num { display: block; font-size: 14px; font-weight: 700; color: var(--sub); margin-bottom: 8px; }
.part h2 { font-size: 30px; }
.part .main > * + * { margin-top: 18px; }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.checks li { padding: 18px 20px; border-radius: 10px; background: var(--face); }
.checks strong { display: block; font-size: 17px; margin-bottom: 2px; }
.checks span { display: block; color: var(--sub); font-size: 15px; }
.ways { margin: 0; border-top: 2px solid var(--ink); }
.ways > div { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 20px 4px; border-bottom: 1px solid var(--line); }
.ways dt { font-weight: 700; font-size: 17px; }
.ways dd { margin: 0; color: var(--sub); }
.flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; counter-reset: f; }
.flow li { counter-increment: f; padding: 20px 18px; border: 1px solid var(--line2); border-radius: 10px; background: #fff; }
.flow li::before { content: counter(f); display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--deep); color: var(--on-deep); font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.flow strong { display: block; font-size: 17px; margin-bottom: 4px; }
.flow span { display: block; font-size: 14.5px; color: var(--sub); line-height: 1.6; }
.part .price { border-top: 2px solid var(--ink); }
.part .price div:last-child { border-bottom: 1px solid var(--line); }
.callout { padding: 18px 22px; border-radius: 10px; border: 1px solid var(--line2); font-size: 15.5px; }
.warn { padding: 22px 26px; border-radius: 10px; background: var(--face); border-left: 4px solid var(--deep); }
.end { background: var(--paper); padding: 64px 0; }
.end .wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: stretch; }
.end .photo { min-height: 280px; }
.end .links { display: grid; gap: 12px; }
.end a { display: block; padding: 24px 28px; background: #fff; border-radius: var(--r); border: 1px solid var(--line); text-decoration: none; }
.end a:hover { border-color: var(--deep); }
.end strong { display: block; font-size: 19px; margin-bottom: 4px; }
.end span { display: block; color: var(--sub); font-size: 15px; }

/* ── 바닥 ─────────────────────────────────────────── */
.site-foot { background: var(--deep); color: var(--on-deep2); padding: 56px 0 72px; font-size: 14.5px; }
.site-foot .top { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding-bottom: 24px; border-bottom: 1px solid var(--line-deep); margin-bottom: 24px; }
.site-foot .logo { color: var(--on-deep); }
.site-foot .logo span { color: var(--on-deep2); }
.site-foot .links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-foot .links a { color: var(--on-deep); font-weight: 600; text-decoration: none; }
.site-foot .links a:hover { text-decoration: underline; }
.site-foot dl { margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 6px 24px; }
.site-foot dl div { display: flex; gap: 8px; }
.site-foot dd { margin: 0; color: var(--on-deep); }
.site-foot p { line-height: 1.8; }
.site-foot .legal { margin-top: 20px; }

/* ── 데모 띠 ───────────────────────────────────────── */
[data-demo-band] { position: fixed; left: 0; right: 0; bottom: 0; z-index: 46; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px 10px; background: #fff; color: var(--ink); border-top: 1px solid var(--ink); padding: 7px 52px 7px 16px; font-size: 14px; line-height: 1.5; }
[data-demo-band] strong { font-weight: 700; letter-spacing: 0.04em; }
[data-demo-band] a { text-decoration: underline; text-underline-offset: 3px; }
[data-demo-band] button { all: unset; cursor: pointer; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; }

/* ── 1100 아래 ─────────────────────────────────────── */
@media (max-width: 1100px) {
  .site-head .wrap { gap: 16px; }
  .gnb > li > a { padding: 10px 10px; font-size: 15px; }
  .hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 40px; }
  .hero h1 { font-size: 50px; }
  .svc { grid-template-columns: 220px minmax(0, 1fr) 48px; gap: 28px; }
  .person { grid-template-columns: 300px minmax(0, 1fr); gap: 40px; }
  .team { gap: 32px 20px; }
  .news li { grid-template-columns: 120px 88px minmax(0, 1fr); }
  .cal { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fee-head { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; }
  .calc { grid-template-columns: auto auto; }
  .mine { grid-column: 1 / -1; justify-content: flex-start; }
  .part { grid-template-columns: 220px minmax(0, 1fr); gap: 40px; }
}

/* ── 960 아래: 모바일 머리 ─────────────────────────── */
@media (max-width: 960px) {
  :root { --head: 60px; }
  .wrap { padding: 0 20px; }
  .site-head { backdrop-filter: none; background: #fff; } /* 흐림이 있으면 고정 메뉴판이 머리 안에 갇힌다 */
  .site-head .wrap { gap: 10px; }
  .gnb-nav, .head-tel { display: none; }
  .logo b { font-size: 18px; }
  .logo span { font-size: 12.5px; }
  .head-fee { margin-left: auto; display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); /* 바탕을 주면 켜진 메뉴처럼 보인다(#1742) */ font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; }
  .mobile-menu { display: block; }
  .mobile-menu summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; cursor: pointer; }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu summary svg { width: 24px; height: 24px; }
  .mobile-menu nav { position: fixed; left: 0; right: 0; top: var(--head); bottom: 0; background: #fff; overflow-y: auto; overscroll-behavior: contain; padding: 12px 20px 120px; border-top: 1px solid var(--line); }
  .mobile-menu nav a { display: block; padding: 14px 4px; font-size: 18px; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line); }
  .mobile-menu nav .sub a { padding-left: 18px; font-size: 16px; font-weight: 500; color: var(--sub); }
  .mobile-menu nav > a[aria-current] { background: var(--face); padding-left: 12px; }
  .sec { padding: 72px 0; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 32px; }
  .sec-head h2 { font-size: 30px; }
  .sec-head h2.big { font-size: 40px; }
  .about, .faq-wrap { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .about h2, .faq-wrap h2 { font-size: 30px; }
  .about-body p { font-size: 16.5px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news li { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 18px 0; }
  .news li > * { grid-column: 1; }
  .faq summary { font-size: 16.5px; }
  .hero { display: block; min-height: 0; }
  .hero::before { background: linear-gradient(180deg, rgba(42,38,32,.86) 0%, rgba(42,38,32,.9) 100%); }
  .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 32px; padding-bottom: 40px; }
  .hero .office { margin-bottom: 20px; padding-bottom: 14px; font-size: 14px; }
  .hero h1 { font-size: 38px; margin-bottom: 12px; }
  .hero .lead { font-size: 16px; }
  .hero-links { margin-top: 18px; gap: 6px 20px; font-size: 15px; }
  .svc { grid-template-columns: 160px minmax(0, 1fr); gap: 20px; padding: 22px 0; }
  .svc .go { display: none; }
  .svc h3 { font-size: 21px; margin-bottom: 6px; }
  .flow-wrap, .visit, .ask, .page-hero .wrap, .fee-head { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .flow-wrap .photo { aspect-ratio: 3 / 2; }
  .flow-wrap h2, .ask h2, .visit h2 { font-size: 28px; }
  .person { grid-template-columns: 220px minmax(0, 1fr); gap: 28px; }
  .person h3 { font-size: 30px; }
  .person .say { font-size: 17px; }
  .cal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fee-head h2 { font-size: 32px; }
  .fee-head .photo { aspect-ratio: 16 / 9; }
  .form { grid-template-columns: 1fr; padding: 22px; }
  .page-hero { padding: 20px 0 40px; }
  .page-hero h1 { font-size: 34px; }
  .page-hero .lead { font-size: 16px; }
  .tabs a { padding: 13px 12px; font-size: 15px; }
  .part { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 44px 0; }
  .part h2 { font-size: 24px; }
  .end .wrap { grid-template-columns: 1fr; }
  .end .photo { min-height: 0; aspect-ratio: 16 / 9; }
  [data-demo-band] { display: block; padding: 6px 48px 6px 12px; font-size: 12px; text-align: left; }
  [data-demo-band] strong { margin-right: 6px; }
  [data-demo-band] a { margin-left: 6px; }
  .site-foot { padding-bottom: 110px; }
}

/* ── 600 아래 ─────────────────────────────────────── */
@media (max-width: 600px) {
  .hero h1 { font-size: 32px; }
  .hero .office b { font-size: 16px; }
  .pick { padding: 6px; }
  .pick a { padding: 11px 12px; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 10px; }
  .pick strong { font-size: 16.5px; }
  .pick .for { font-size: 13px; }
  .svc { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: start; }
  .svc p { font-size: 15px; }
  .svc .tags { display: none; }
  .person { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .person .photo { max-width: 280px; }
  .team { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .member .photo { max-width: 280px; }
  .sec-head h2.big { font-size: 36px; }
  .person dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .person dd + dt { margin-top: 10px; }
  .cal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cal li { min-height: 128px; padding: 14px; }
  .cal span { font-size: 14px; }
  .cal time { font-size: 18px; }
  .calc { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .calc .seg { justify-self: start; }
  .band { justify-content: space-between; }
  .band select { flex: 1; max-width: 220px; }
  .mine { flex-direction: column; gap: 4px; }
  .mine div { justify-content: space-between; width: 100%; }
  .mine strong { font-size: 22px; }
  .fees, .fees tbody { display: block; }
  .fees caption { display: block; font-size: 15px; }
  .fees thead { display: none; }
  .fees tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 14px 8px; border-bottom: 1px solid var(--line); }
  .fees td, .fees tbody th { padding: 0; border: 0; }
  .fees tbody th { grid-column: 1 / -1; }
  .fees td:nth-child(2)::before { content: '월 기장료'; float: left; font-weight: 500; color: var(--sub); font-size: 14.5px; }
  .fees td:nth-child(3)::before { content: '연 세무조정료'; float: left; font-weight: 500; color: var(--sub); font-size: 14.5px; }
  .fees td:nth-child(2), .fees td:nth-child(3) { grid-column: 1 / -1; display: block; }
  .fees td:last-child { grid-column: 1 / -1; font-size: 14px; margin-top: 4px; }
  .fee-more { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .fee-more > div { padding: 20px; }
  .price div { flex-direction: column; gap: 2px; }
  .price dd { text-align: left; white-space: normal; }
  .info { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .info dd + dt { margin-top: 12px; }
  .checks { grid-template-columns: 1fr; }
  .ways > div { grid-template-columns: 1fr; gap: 4px; }
  .flow { grid-template-columns: 1fr; }
  .page-hero .btns { display: grid; grid-template-columns: 1fr; }
}
@media (max-width: 374px) {
  .logo span { display: none; }
  .head-fee { padding: 0 12px; }
  .hero h1 { font-size: 29px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }