/* =========================================================
   인성회계법인 리뉴얼 프로토타입 — 공통 스타일
   디자인 기준: insungacc.com (검은 히어로 · #3366CC 포인트 · IBM Plex Sans KR)
   ========================================================= */
:root {
  --blue: #3366cc;
  --blue-700: #2a55ad;
  --blue-800: #1d3d80;
  --blue-900: #0f2557;
  --blue-50: #f0f4ff;
  --blue-100: #e2eaff;
  --soft: #f8f9fe;
  --ink: #1a1a1a;
  --ink-2: #333;
  --ink-3: #555;
  --muted: #6b7280;
  --line: #e5e7eb;
  --line-2: #d4d9e3;
  --dark: #141414;
  --dark-2: #202020;
  --dark-3: #2c2c2c;
  --tbd: #fff3c4;
  --tbd-ink: #7a5600;
  --container: 1280px;
  --header-h: 76px;
  --radius: 8px;
  --font: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; font-family: var(--font); color: var(--ink); background: #fff; font-size: 16px; line-height: 1.7; word-break: keep-all; overflow-wrap: break-word; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; line-height: 1.35; letter-spacing: -0.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 1000; background: var(--blue); color: #fff; padding: 10px 16px; border-radius: 6px; }
.skip-link:focus { top: 12px; }
.container { width: 100%; max-width: calc(var(--container) + 48px); margin: 0 auto; padding: 0 24px; }
.eyebrow { display: inline-block; color: var(--blue); font-size: 15px; font-weight: 500; letter-spacing: 0; margin-bottom: 12px; }
.eyebrow.on-dark { color: #8fb0ff; }
.muted { color: var(--muted); }

/* ---------- 버튼 ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 22px; border-radius: 999px; font-size: 15px; font-weight: 500; border: 1px solid transparent; transition: background .2s, color .2s, border-color .2s; white-space: nowrap; }
.btn-pill { border-color: var(--blue); color: var(--blue); background: var(--blue-50); }
.btn-pill:hover { background: var(--blue); color: #fff; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-700); }
.btn-dark { background: #404040; color: #fff; border-radius: 4px; }
.btn-dark:hover { background: #222; }
.btn-ghost-light { border-color: rgba(255,255,255,.6); color: #fff; }
.btn-ghost-light:hover { background: #fff; color: var(--ink); }
.btn-lg { height: 52px; padding: 0 28px; font-size: 16px; }
.btn-block { width: 100%; }
.link-arrow { color: var(--blue); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.link-arrow::after { content: "→"; transition: transform .2s; }
.link-arrow:hover::after { transform: translateX(3px); }

/* =========================================================
   헤더 · GNB (마우스 오버 시 전체 폭 드롭다운)
   ========================================================= */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h); background: #fff; border-bottom: 1px solid var(--line); transition: background .25s, border-color .25s, color .25s; }
.site-header .header-inner { position: relative; display: flex; align-items: center; height: 100%; }
.logo { flex: 0 0 auto; display: flex; align-items: center; width: 210px; }
.logo img { width: 196px; height: auto; }
.logo .logo-white { display: none; }
.gnb { flex: 1 1 auto; display: flex; justify-content: center; height: 100%; }
.gnb-list { list-style: none; display: flex; height: 100%; }
.gnb-item { position: relative; width: 168px; height: 100%; }
.gnb-link { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 17px; font-weight: 500; color: var(--ink); transition: color .2s; }
.gnb-item.is-current > .gnb-link { color: var(--blue); }
.gnb-item:hover > .gnb-link, .gnb-item:focus-within > .gnb-link { color: var(--blue); }
.gnb-sub { position: absolute; top: 100%; left: 0; width: 100%; padding: 26px 14px 30px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility .2s; text-align: center; }
.gnb-sub .gnb-eyebrow { display: block; font-size: 12px; color: var(--blue); font-weight: 600; letter-spacing: .02em; margin-bottom: 10px; text-transform: none; }
.gnb-sub ul { list-style: none; }
.gnb-sub li + li { margin-top: 2px; }
.gnb-sub a { display: block; padding: 7px 6px; font-size: 15px; color: var(--ink-3); border-radius: 6px; line-height: 1.45; }
.gnb-sub a:hover, .gnb-sub a:focus-visible { color: var(--blue); background: var(--blue-50); }
.gnb-sub a[aria-current="page"] { color: var(--blue); font-weight: 600; }
.gnb-item:hover .gnb-sub-bg, .gnb-item:focus-within .gnb-sub-bg { opacity: 1; }
.gnb-panel { position: absolute; left: 0; right: 0; top: var(--header-h); height: var(--panel-h, 340px); background: #fff; border-top: 1px solid var(--line); box-shadow: 0 18px 30px -18px rgba(15, 37, 87, .25); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; z-index: -1; }
.gnb-panel .panel-inner { height: 100%; display: flex; align-items: flex-start; padding-top: 28px; }
.gnb-panel .panel-brand { width: 250px; padding-right: 20px; }
.gnb-panel .panel-brand strong { display: block; font-size: 18px; line-height: 1.45; color: var(--ink); margin-bottom: 10px; }
.gnb-panel .panel-brand p { font-size: 14px; color: var(--muted); line-height: 1.6; }
.gnb-panel .panel-brand a { display: inline-block; margin-top: 16px; color: var(--blue); font-weight: 600; font-size: 18px; }
.site-header.is-open { background: #fff; border-color: var(--line); }
.site-header.is-open .gnb-panel { opacity: 1; visibility: visible; }
.site-header.is-open .gnb-sub { opacity: 1; visibility: visible; transform: none; }
.site-header.is-open .gnb-item:hover .gnb-sub { background: linear-gradient(180deg, var(--blue-50), rgba(240,244,255,0)); }
.header-util { flex: 0 0 auto; display: flex; align-items: center; gap: 22px; }
.header-tel { display: inline-flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 500; letter-spacing: .01em; }
.header-tel svg { width: 18px; height: 18px; }
.menu-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; padding: 10px; }
.menu-toggle span { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s, opacity .2s; }
.menu-toggle span + span { margin-top: 6px; }

/* 홈 히어로 위: 투명 + 흰 글자 */
.site-header.is-transparent:not(.is-open):not(.is-scrolled) { background: transparent; border-color: transparent; color: #fff; }
.site-header.is-transparent:not(.is-open):not(.is-scrolled) .gnb-link { color: #fff; }
.site-header.is-transparent:not(.is-open):not(.is-scrolled) .logo .logo-dark { display: none; }
.site-header.is-transparent:not(.is-open):not(.is-scrolled) .logo .logo-white { display: block; }
.site-header.is-transparent:not(.is-open):not(.is-scrolled) .btn-pill { background: transparent; color: #fff; border-color: rgba(255,255,255,.75); }
.site-header.is-transparent:not(.is-open):not(.is-scrolled) .btn-pill:hover { background: #fff; color: var(--ink); }

/* 모바일 메뉴 */
.mnav { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.45); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.mnav.is-open { opacity: 1; visibility: visible; }
.mnav-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(88vw, 400px); background: #fff; overflow-y: auto; transform: translateX(100%); transition: transform .25s; display: flex; flex-direction: column; }
.mnav.is-open .mnav-panel { transform: none; }
.mnav-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.mnav-head img { width: 150px; }
.mnav-close { width: 40px; height: 40px; border: 0; background: transparent; font-size: 26px; line-height: 1; }
.mnav-list { list-style: none; padding: 8px 0; }
.mnav-list > li { border-bottom: 1px solid var(--line); }
.mnav-list button { width: 100%; display: flex; justify-content: space-between; align-items: center; border: 0; background: none; padding: 16px 20px; font-size: 17px; font-weight: 600; text-align: left; }
.mnav-list button::after { content: "+"; font-weight: 400; color: var(--blue); font-size: 22px; }
.mnav-list button[aria-expanded="true"]::after { content: "−"; }
.mnav-list ul { list-style: none; padding: 0 20px 14px; display: none; }
.mnav-list button[aria-expanded="true"] + ul { display: block; }
.mnav-list ul a { display: block; padding: 9px 12px; color: var(--ink-3); border-radius: 6px; }
.mnav-list ul a:hover { background: var(--blue-50); color: var(--blue); }
.mnav-foot { margin-top: auto; padding: 18px 20px 28px; display: grid; gap: 10px; }

/* =========================================================
   메인 히어로 (검은 배경 · 별똥별 캔버스 · 상담폼)
   ========================================================= */
.hero { position: relative; background: var(--dark); color: #fff; padding: calc(var(--header-h) + 70px) 0 90px; overflow: hidden; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero .container { position: relative; display: grid; grid-template-columns: 1fr 620px; gap: 56px; align-items: center; }
.hero-mark { width: 152px; margin-bottom: 30px; }
.hero h1 { font-size: 44px; font-weight: 600; line-height: 1.42; letter-spacing: -0.03em; }
.hero h1 .line { display: block; }
.hero h1 .line:first-child { font-weight: 400; }
.hero-lead { margin-top: 30px; font-size: 17px; color: rgba(255,255,255,.88); line-height: 1.65; }
.hero-tel { display: inline-flex; align-items: center; gap: 10px; margin-top: 44px; font-size: 24px; }
.hero-tel svg { width: 24px; height: 24px; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.hero-badges span { font-size: 13px; padding: 5px 12px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; color: rgba(255,255,255,.85); }
.hero-form { background: rgba(43,43,43,.92); border: 1px solid #555; padding: 40px 32px 36px; }
.hero-form h2 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.hero-form h2 + .form-grid { margin-top: 6px; }
.hero-form .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 40px; margin-bottom: 30px; }
.hero-form .field-line input, .hero-form .field-line textarea, .hero-form .field-line select { width: 100%; background: transparent; border: 0; border-bottom: 1px solid #ddd; color: #fff; padding: 14px 6px 8px; font: inherit; font-size: 14px; border-radius: 0; }
.hero-form .field-line select option { color: var(--ink); }
.hero-form .field-line textarea { min-height: 76px; resize: vertical; }
.hero-form ::placeholder { color: #aaa; }
.hero-form .agree { margin: 20px 0 22px; }
.hero-form .agree label { color: #ddd; }
.hero-form .btn-submit-line { width: 100%; height: 46px; border-radius: 999px; background: transparent; border: 1px solid #ccc; color: #fff; font-weight: 600; }
.hero-form .btn-submit-line:hover { background: #fff; color: var(--ink); }

/* 서비스 흐르는 띠 */
.marquee { background: #fff; border-top: 2px solid #3a3a3a; border-bottom: 1px solid #ccc; overflow: hidden; }
.marquee-track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee a { padding: 12px 24px; white-space: nowrap; font-size: 16px; color: var(--ink-2); }
.marquee a:hover { color: var(--blue); }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =========================================================
   섹션 공통
   ========================================================= */
.section { padding: 110px 0; }
.section-sm { padding: 72px 0; }
.section.bg-soft, .section-sm.bg-soft { background: var(--soft); }
.section.bg-blue { background: var(--blue-50); }
.section-head { margin-bottom: 48px; }
.section-head.center { text-align: center; }
.section-head h2 { font-size: 36px; font-weight: 600; }
.section-head p { margin-top: 14px; color: var(--ink-3); font-size: 17px; }
.section-head.center p { max-width: 720px; margin-left: auto; margin-right: auto; }

/* 엔티티 소개(GEO 핵심 블록) */
.entity { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: start; }
.entity h2 { font-size: 34px; font-weight: 600; }
.entity .lead { margin-top: 20px; font-size: 18px; color: var(--ink-2); line-height: 1.75; }
.entity .lead strong { color: var(--blue); font-weight: 600; }
.fact-table { width: 100%; border-collapse: collapse; border-top: 2px solid var(--blue-800); font-size: 15px; }
.fact-table th, .fact-table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.fact-table th { width: 130px; background: var(--soft); font-weight: 600; color: var(--ink-2); }
.fact-table caption { caption-side: top; text-align: left; font-size: 14px; color: var(--muted); padding-bottom: 10px; }

/* About 블록 (사람 걷는 배경 + 파란 카드) */
.about-band { position: relative; background: #f3f4f8 url(/assets/img/people-walk.webp) center/cover no-repeat; padding: 140px 0 120px; }
.about-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(248,249,254,.2), rgba(248,249,254,.9) 85%); }
.about-band .container { position: relative; display: grid; grid-template-columns: 320px 1fr 300px; gap: 40px; align-items: end; }
.blue-card { background: #4267c7; color: #fff; padding: 34px 26px 60px; min-height: 380px; }
.blue-card .eyebrow { color: #fff; font-weight: 400; }
.blue-card h2 { font-size: 26px; font-weight: 600; margin-bottom: 30px; }
.blue-card p { font-size: 15px; opacity: .92; }
.about-cta h3 { font-size: 26px; font-weight: 600; }
.about-cta p { margin: 14px 0 28px; color: var(--ink-3); }

/* 서비스 카드 */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.svc-card { position: relative; display: flex; flex-direction: column; min-height: 300px; padding: 28px 24px; border: 1px solid var(--line); background: #fff; transition: border-color .2s, box-shadow .2s, transform .2s; overflow: hidden; }
.svc-card:hover { border-color: var(--blue); box-shadow: 0 16px 34px -20px rgba(51,102,204,.55); transform: translateY(-3px); }
.svc-card .en { font-size: 13px; color: var(--blue); font-weight: 500; }
.svc-card h3 { font-size: 21px; font-weight: 600; margin: 6px 0 12px; }
.svc-card p { font-size: 15px; color: var(--ink-3); line-height: 1.65; }
.svc-card .more { margin-top: auto; padding-top: 20px; font-size: 14px; color: var(--blue); font-weight: 500; }
.svc-card .tag { position: absolute; top: 18px; right: 18px; font-size: 12px; background: var(--blue-50); color: var(--blue); border-radius: 999px; padding: 2px 10px; }
.svc-card.photo { color: #fff; border: 0; background: #222 center/cover no-repeat; }
.svc-card.photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,20,45,.15), rgba(10,20,45,.85)); }
.svc-card.photo > * { position: relative; }
.svc-card.photo .en { color: #a9c1ff; }
.svc-card.photo p { color: rgba(255,255,255,.88); }
.svc-card.photo .more { color: #fff; }

/* 플랫폼 배너 */
.platform-band { background: var(--blue-50); display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; padding: 64px 100px; }
.platform-band h2 { font-size: 34px; font-weight: 600; line-height: 1.45; }
.platform-band p { margin: 26px 0 34px; font-size: 17px; color: var(--ink-2); }
.platform-band ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: -12px 0 30px; }
.platform-band li { font-size: 13px; background: #fff; border: 1px solid var(--blue-100); color: var(--blue-800); padding: 4px 12px; border-radius: 999px; }

/* 패밀리 서비스(와이텍스 · 연말정산) */
.family-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.family-card { border: 1px solid var(--line); padding: 36px 34px; background: #fff; display: flex; flex-direction: column; }
.family-card.navy { background: #001a77; color: #fff; border: 0; }
.family-card .eyebrow { margin-bottom: 6px; }
.family-card.navy .eyebrow { color: #9fb7ff; }
.family-card h3 { font-size: 26px; font-weight: 600; margin-bottom: 14px; }
.family-card p { color: var(--ink-3); }
.family-card.navy p { color: rgba(255,255,255,.85); }
.family-card .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 26px 0 30px; }
.family-card .stat { border-top: 1px solid var(--line-2); padding-top: 12px; }
.family-card.navy .stat { border-color: rgba(255,255,255,.3); }
.family-card .stat b { display: block; font-size: 24px; font-weight: 600; color: var(--blue); }
.family-card.navy .stat b { color: #fff; }
.family-card .stat span { font-size: 13px; color: var(--muted); }
.family-card.navy .stat span { color: rgba(255,255,255,.7); }
.family-card .actions { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; }

/* 구성원 */
.member-scroller { display: grid; grid-auto-flow: column; grid-auto-columns: 250px; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; scrollbar-width: thin; }
.member-scroller > * { scroll-snap-align: start; }
.member-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 22px; }
.member { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.member .photo { aspect-ratio: 412 / 316; background: #c9cdd9; overflow: hidden; }
.member .photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.member .body { padding: 16px 18px 20px; }
.member h2, .member h3 { font-size: 20px; font-weight: 600; }
.member h2 small, .member h3 small { font-size: 13px; color: var(--blue); font-weight: 600; margin-left: 6px; }
.member .career { font-size: 14px; color: var(--ink-3); margin-top: 4px; }
.member .tags { list-style: none; display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.member .tags li { font-size: 12px; background: var(--soft); border: 1px solid var(--line); border-radius: 4px; padding: 1px 7px; color: var(--ink-3); }
.scroller-nav { display: flex; gap: 8px; }
.scroller-nav button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-2); background: #fff; font-size: 18px; }
.scroller-nav button:hover { border-color: var(--blue); color: var(--blue); }
.head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 36px; }

/* 고객사 로고 */
.clients { overflow: hidden; }
.client-row { display: flex; width: max-content; animation: marquee 60s linear infinite; }
.client-row.reverse { animation-direction: reverse; }
.client-row + .client-row { margin-top: 10px; }
.client-row li { list-style: none; width: 150px; height: 64px; display: flex; align-items: center; justify-content: center; padding: 0 14px; }
.client-row img { max-height: 46px; width: auto; object-fit: contain; }
.client-grid { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.client-grid li { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); height: 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px; }
.client-grid img { max-height: 48px; width: auto; }
.client-grid span { font-size: 12px; color: var(--muted); }

/* FAQ */
.faq-list { border-top: 2px solid var(--blue-800); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 34px 1fr 24px; gap: 8px; align-items: start; padding: 22px 8px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "Q"; font-weight: 700; color: var(--blue); font-size: 18px; line-height: 1.5; }
.faq-item summary::after { content: "+"; color: var(--blue); font-size: 24px; line-height: 1.1; text-align: right; }
.faq-item[open] summary::after { content: "−"; }
.faq-item h3 { font-size: 17px; font-weight: 600; line-height: 1.55; }
.faq-answer { display: grid; grid-template-columns: 34px 1fr; gap: 8px; padding: 0 8px 26px; }
.faq-answer::before { content: "A"; font-weight: 700; color: var(--ink-3); font-size: 18px; }
.faq-answer .a-body { color: var(--ink-2); font-size: 16px; }
.faq-answer .a-body p + p, .faq-answer .a-body p + ul, .faq-answer .a-body ul + p { margin-top: 10px; }
.faq-answer .a-body ul { padding-left: 18px; }
.faq-answer .a-links { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 14px; }
.faq-answer .a-links a { color: var(--blue); }
.faq-answer .a-links a::after { content: " →"; }
.faq-cat-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.faq-cat-nav a { border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 16px; font-size: 14px; }
.faq-cat-nav a:hover { border-color: var(--blue); color: var(--blue); }
.faq-group + .faq-group { margin-top: 70px; }
.faq-group > h2 { font-size: 26px; font-weight: 600; margin-bottom: 8px; }
.faq-group > p { color: var(--muted); margin-bottom: 22px; }

/* Contact 블록 */
.contact-block { display: grid; grid-template-columns: 620px 1fr; gap: 40px; align-items: stretch; }
.office-card { position: relative; color: #fff; padding: 40px 28px; min-height: 400px; background: #2c4c9c url(/assets/img/building-blue.webp) center/cover; }
.office-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(44,76,156,.95) 35%, rgba(44,76,156,.35)); }
.office-card > * { position: relative; }
.office-card h3 { font-size: 26px; font-weight: 600; margin: 4px 0 36px; }
.office-card .btns { display: grid; gap: 12px; justify-items: start; }
.office-card .btns a { background: #fff; color: var(--blue); border-radius: 999px; padding: 8px 26px; font-size: 15px; }
.quick-links { display: grid; gap: 16px; }
.quick-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 26px 28px; border: 1px solid var(--line); background: #fff; transition: border-color .2s; }
.quick-link:hover { border-color: var(--blue); }
.quick-link h3 { font-size: 20px; font-weight: 600; }
.quick-link p { font-size: 14px; color: var(--muted); margin-top: 4px; }
.quick-link .arrow { width: 40px; height: 40px; border-radius: 50%; background: var(--blue-50); color: var(--blue); display: grid; place-items: center; flex: 0 0 auto; }

/* CTA 띠 */
.cta-band { background: var(--dark); color: #fff; padding: 72px 0; }
.cta-band .container { display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; }
.cta-band h2 { font-size: 30px; font-weight: 600; }
.cta-band p { color: rgba(255,255,255,.75); margin-top: 8px; }
.cta-band .actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* =========================================================
   서브 페이지
   ========================================================= */
.page-hero { padding: calc(var(--header-h) + 64px) 0 56px; background: #fff; }
.page-hero .container { display: grid; grid-template-columns: 1fr 520px; gap: 60px; align-items: center; }
.page-hero.no-image .container { grid-template-columns: 1fr; }
.page-hero h1 { font-size: 46px; font-weight: 600; letter-spacing: -0.03em; }
.page-hero .lead { margin-top: 22px; font-size: 18px; color: var(--ink-2); max-width: 760px; line-height: 1.75; }
.page-hero .hero-img { aspect-ratio: 520 / 300; overflow: hidden; }
.page-hero .hero-img img { width: 100%; height: 100%; object-fit: cover; }
.page-hero .hero-actions { margin-top: 30px; display: flex; gap: 10px; flex-wrap: wrap; }
.page-hero.dark { background: var(--dark); color: #fff; }
.page-hero.dark .lead { color: rgba(255,255,255,.85); }
.breadcrumb { font-size: 14px; color: var(--muted); margin-bottom: 22px; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumb li + li::before { content: "›"; margin-right: 6px; color: #aaa; }
.breadcrumb a:hover { color: var(--blue); }
.page-hero.dark .breadcrumb { color: rgba(255,255,255,.6); }
.meta-line { margin-top: 18px; font-size: 13px; color: var(--muted); }

/* 하위 메뉴 탭 (insungacc 서비스 페이지 탭 바 형태) */
.local-nav { position: sticky; top: var(--header-h); z-index: 50; background: var(--soft); border-top: 1px solid var(--line); border-bottom: 1px solid #b9c6e0; }
.local-nav .container { overflow-x: auto; scrollbar-width: none; }
.local-nav .container::-webkit-scrollbar { display: none; }
/* 폭이 넉넉하면 가운데, 좁으면 margin:auto 가 0 이 되어 첫 항목부터 스크롤된다 */
.local-nav ul { list-style: none; display: flex; gap: 4px; width: max-content; margin: 0 auto; }
.local-nav a { display: block; padding: 18px 22px; font-size: 16px; white-space: nowrap; color: var(--ink-2); border-bottom: 2px solid transparent; }
.local-nav a:hover { color: var(--blue); }
.local-nav a[aria-current="page"] { color: var(--blue); font-weight: 600; border-color: var(--blue); }

/* 핵심 요약 상자 */
.summary-box { border: 1px solid var(--blue-100); background: var(--blue-50); padding: 34px 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.summary-box .label { display: inline-block; font-size: 13px; font-weight: 600; color: #fff; background: var(--blue); border-radius: 4px; padding: 2px 10px; margin-bottom: 14px; }
.summary-box .answer { font-size: 18px; line-height: 1.75; color: var(--ink); }
.summary-box .answer strong { color: var(--blue-800); }
.summary-box dl { margin: 0; display: grid; grid-template-columns: 110px 1fr; border-top: 1px solid var(--blue-100); }
.summary-box dt, .summary-box dd { margin: 0; padding: 11px 4px; border-bottom: 1px solid var(--blue-100); font-size: 15px; }
.summary-box dt { color: var(--blue-800); font-weight: 600; }

/* 번호 아코디언 (insungacc 01~08 형태) */
.split { display: grid; grid-template-columns: 400px 1fr; gap: 40px; align-items: start; }
.split-media { position: sticky; top: calc(var(--header-h) + 80px); background: #eef0f5 center/cover; min-height: 520px; padding: 30px 26px; }
.split-media.light::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.92) 30%, rgba(255,255,255,.35)); }
.split-media { position: sticky; }
.split-media > * { position: relative; }
.split-media h2 { font-size: 30px; font-weight: 600; margin-bottom: 18px; }
.split-media p { color: var(--ink-2); }
.num-list { border-top: 2px solid var(--blue-800); }
.num-item { border-bottom: 1px solid var(--line); }
.num-item summary { list-style: none; display: grid; grid-template-columns: 48px 1fr 28px; align-items: center; gap: 4px; padding: 18px 20px 18px 40px; cursor: pointer; }
.num-item summary::-webkit-details-marker { display: none; }
.num-item .no { font-weight: 600; font-size: 17px; color: var(--ink-2); }
.num-item h3 { font-size: 18px; font-weight: 600; }
.num-item summary::after { content: ""; width: 20px; height: 20px; justify-self: end; background: linear-gradient(var(--blue-800), var(--blue-800)) center/20px 1.5px no-repeat, linear-gradient(var(--blue-800), var(--blue-800)) center/1.5px 20px no-repeat; transition: transform .2s; }
.num-item[open] summary::after { background: linear-gradient(var(--blue-800), var(--blue-800)) center/20px 1.5px no-repeat; }
.num-item .num-body { padding: 0 20px 24px 92px; color: var(--ink-3); }
.num-item .num-body ul { padding-left: 18px; }
.num-item .num-body li + li { margin-top: 4px; }

.contact-layout { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; }

/* 일반 콘텐츠 */
.prose { max-width: 860px; }
.prose h2 { font-size: 28px; font-weight: 600; margin: 0 0 16px; }
.prose h3 { font-size: 20px; font-weight: 600; margin: 32px 0 10px; }
.prose p + p { margin-top: 14px; }
.prose ul, .prose ol { padding-left: 20px; margin-top: 10px; }
.prose li + li { margin-top: 6px; }
.content-block + .content-block { margin-top: 90px; }
.block-head { margin-bottom: 30px; }
.block-head h2 { font-size: 30px; font-weight: 600; }
.block-head p { margin-top: 10px; color: var(--ink-3); }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.feature-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.feature { border: 1px solid #a9bff0; padding: 30px 24px; background: #fff; }
.feature .ico { width: 46px; height: 46px; margin-bottom: 18px; }
.feature .num { font-size: 15px; color: var(--blue); font-weight: 600; }
.feature h3 { font-size: 19px; font-weight: 600; margin: 6px 0 14px; }
.feature p { color: var(--ink-3); font-size: 15px; }
.feature ul { list-style: none; font-size: 15px; color: var(--ink-3); }
.feature ul li { position: relative; padding-left: 14px; }
.feature ul li + li { margin-top: 5px; }
.feature ul li::before { content: "•"; position: absolute; left: 0; color: var(--ink-3); }

.steps { list-style: none; display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 0; counter-reset: step; border-top: 2px solid var(--blue-800); }
.steps li { counter-increment: step; padding: 26px 22px 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; }
.steps li:last-child { border-right: 0; }
.steps li::before { content: "STEP " counter(step, decimal-leading-zero); display: block; font-size: 13px; font-weight: 600; color: var(--blue); margin-bottom: 10px; }
.steps h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.steps p { font-size: 14.5px; color: var(--ink-3); }

.compare { width: 100%; border-collapse: collapse; font-size: 15px; }
.compare caption { caption-side: top; text-align: left; font-size: 14px; color: var(--muted); padding-bottom: 10px; }
.compare th, .compare td { border: 1px solid var(--line); padding: 14px 16px; text-align: left; vertical-align: top; }
.compare thead th { background: var(--blue-800); color: #fff; font-weight: 600; }
.compare tbody th { background: var(--soft); width: 180px; font-weight: 600; }
.table-wrap { overflow-x: auto; }

.callout { border-left: 4px solid var(--blue); background: var(--soft); padding: 20px 24px; color: var(--ink-2); }
.callout strong { color: var(--blue-800); }
.callout + .callout { margin-top: 14px; }
.law { font-size: 14px; color: var(--muted); }

.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.related a { border: 1px solid var(--line); padding: 22px 22px; display: block; transition: border-color .2s; }
.related a:hover { border-color: var(--blue); }
.related .en { font-size: 12px; color: var(--blue); }
.related h3 { font-size: 18px; font-weight: 600; margin: 2px 0 6px; }
.related p { font-size: 14px; color: var(--muted); }

/* 인사말 */
.greeting { display: grid; grid-template-columns: 330px 1fr; gap: 80px; align-items: start; }
.greeting .hello { font-weight: 600; font-size: 18px; margin-bottom: 26px; }
.greeting .hello em { font-style: normal; color: var(--blue); }
.greeting .body p + p { margin-top: 18px; }
.greeting .sign { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 30px; }
.greeting .sign img { width: 110px; }

/* 오시는 길 */
.office-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.office { border: 1px solid var(--line); background: #fff; }
.office h2, .office h3 { background: var(--dark-2); color: #fff; font-size: 19px; font-weight: 600; padding: 12px 20px; text-align: center; }
.office.sub h2, .office.sub h3 { background: #8a8a8a; }
.office .map { aspect-ratio: 16/10; background: #e8ecf4; display: grid; place-items: center; color: var(--muted); font-size: 14px; text-align: center; padding: 10px; }
.office address { font-style: normal; padding: 18px 20px 6px; }
.office .links { padding: 6px 20px 20px; display: flex; gap: 14px; font-size: 14px; }
.office .links a { color: var(--blue); }

/* 게시판 */
.board { width: 100%; border-collapse: collapse; border-top: 2px solid var(--ink); font-size: 15px; }
.board th, .board td { padding: 16px 12px; border-bottom: 1px solid var(--line); text-align: center; }
.board td.title { text-align: left; }
.board td.title a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #b8c3dc; }
.board td.title a:hover { color: var(--blue); text-decoration-color: currentColor; }
.board .empty { padding: 60px 0; color: var(--muted); }

/* =========================================================
   폼
   ========================================================= */
.form-card { background: var(--soft); padding: 48px 70px 56px; }
.form-card .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 40px; }
.form-card .full { grid-column: 1 / -1; }
.field label, .field .label { display: block; font-size: 15px; margin-bottom: 8px; color: var(--ink-2); }
.field .req { color: #d33; margin-left: 2px; }
.field input, .field select, .field textarea { width: 100%; height: 44px; border: 1px solid #c9cbd1; background: #fff; padding: 0 12px; font: inherit; font-size: 15px; border-radius: 0; color: var(--ink); }
.field textarea { height: auto; min-height: 110px; padding: 12px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); outline: 1px solid var(--blue); }
.field .hint { font-size: 13px; color: var(--muted); margin-top: 6px; }
.field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select { border-color: #d33; }
.field .err { display: none; font-size: 13px; color: #d33; margin-top: 6px; }
.field.is-invalid .err { display: block; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { margin: 0; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips span { display: inline-block; border: 1px solid #c9cbd1; background: #fff; padding: 7px 14px; border-radius: 999px; font-size: 14px; cursor: pointer; }
.chips input:checked + span { border-color: var(--blue); background: var(--blue); color: #fff; }
.chips input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.agree { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 26px 0 22px; }
.agree input { width: 20px; height: 20px; accent-color: var(--blue); }
.agree label { font-size: 15px; }
.agree .view { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 5px; font-weight: 600; font-size: 15px; }
.agree.is-invalid label { color: #d33; }
.agree .err { display: none; flex-basis: 100%; margin: 0; color: #d33; font-size: 13px; }
.agree.is-invalid .err { display: block; }
.hero-form .agree .err { color: #ff8a8a; }
.form-note { font-size: 13px; color: var(--muted); margin-top: 12px; text-align: center; }
.form-done { display: none; text-align: center; padding: 40px 10px; }
.form-done strong { display: block; font-size: 22px; margin-bottom: 10px; }
form.is-done .form-body { display: none; }
form.is-done .form-done { display: block; }
.hero-form .form-done strong { color: #fff; }
.hero-form .form-done p { color: #ccc; }

.form-intro { margin-bottom: 36px; }
.form-intro h2 { font-size: 30px; font-weight: 600; }
.form-intro p { margin-top: 14px; color: var(--ink-3); }

/* 문의 탭 (업무 제휴 · 채용 · 윤리신고) */
.contact-hero { position: relative; height: 390px; background: #ccc url(/assets/img/tablet-hands.webp) center/cover; }
.contact-tabs { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(1100px, calc(100% - 48px)); display: grid; grid-template-columns: repeat(4, 1fr); }
.contact-tabs a { background: #fff; text-align: center; padding: 12px; color: var(--muted); border-bottom: 1px solid var(--blue-800); border-left: 1px solid var(--line); }
.contact-tabs a[aria-current="page"] { background: #4267c7; color: #fff; font-weight: 600; border-color: #4267c7; }

/* =========================================================
   모달
   ========================================================= */
.modal { position: fixed; inset: 0; z-index: 300; display: none; align-items: flex-start; justify-content: center; padding: 60px 16px; background: rgba(0,0,0,.6); overflow-y: auto; }
.modal.is-open { display: flex; }
.modal-dialog { position: relative; width: 100%; max-width: 500px; background: #fff; padding: 52px 50px 46px; }
.modal-dialog.wide { max-width: 760px; }
.modal-close { position: absolute; top: -16px; right: -16px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #ddd; background: #fff; font-size: 20px; line-height: 1; }
.modal h2 { font-size: 26px; font-weight: 600; }
.modal .tel-box { background: var(--soft); padding: 20px 20px; margin: 26px 0 26px; font-size: 14px; color: var(--ink-3); }
.modal .tel-box b { display: block; font-size: 19px; color: var(--ink); margin-top: 14px; }
.modal .stack { display: grid; gap: 16px; }
.policy-text { font-size: 14px; color: var(--ink-3); max-height: 60vh; overflow-y: auto; white-space: pre-wrap; border: 1px solid var(--line); padding: 18px; margin-top: 20px; }
body.modal-open { overflow: hidden; }

/* 플로팅 빠른 메뉴 */
.quick { position: fixed; right: 22px; bottom: 26px; z-index: 90; display: grid; gap: 10px; }
.quick a, .quick button { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; text-align: center; font-size: 11px; line-height: 1.2; font-weight: 600; border: 0; box-shadow: 0 8px 20px -8px rgba(0,0,0,.35); }
.quick .q-inquiry { background: var(--blue); color: #fff; }
.quick .q-tel { background: #fff; color: var(--blue); }
.quick .q-refund { background: #001a77; color: #fff; }
.quick .q-top { background: #fff; color: var(--ink); font-size: 18px; }

/* 확인 필요(프로토타입 검토 표시) */
.tbd { background: var(--tbd); color: var(--tbd-ink); border-radius: 3px; padding: 0 4px; font-size: .8em; font-weight: 600; white-space: nowrap; cursor: help; margin-left: 4px; }
html.hide-tbd .tbd { display: none; }
.proto-bar { position: fixed; left: 16px; bottom: 16px; z-index: 95; display: flex; align-items: center; gap: 10px; background: #111; color: #fff; border-radius: 999px; padding: 6px 8px 6px 16px; font-size: 13px; box-shadow: 0 8px 22px -10px rgba(0,0,0,.6); }
.proto-bar a { color: #ffd76a; }
.proto-bar button { background: #333; border: 0; border-radius: 999px; color: #fff; padding: 5px 12px; font-size: 12px; }

/* =========================================================
   푸터
   ========================================================= */
.site-footer { background: var(--dark-2); color: #bbb; padding: 40px 0 34px; font-size: 14px; }
.footer-top { display: flex; justify-content: space-between; gap: 40px; padding-bottom: 30px; border-bottom: 1px solid #555; }
.footer-logo img { width: 180px; margin-bottom: 18px; }
.footer-info p { line-height: 1.85; }
.footer-info .sep { margin: 0 10px; color: #666; }
.footer-tel svg { width: 18px; height: 18px; flex: 0 0 auto; }
.footer-tel { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; color: #fff; font-size: 18px; font-weight: 600; }
.footer-nav { display: grid; grid-template-columns: repeat(5, auto); gap: 8px 36px; }
.footer-nav h2 { color: #fff; font-size: 15px; font-weight: 600; margin-bottom: 10px; }
.footer-nav ul { list-style: none; }
.footer-nav li + li { margin-top: 4px; }
.footer-nav a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; padding-top: 22px; }
.footer-bottom ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.footer-bottom a { color: #ddd; font-weight: 600; }
.footer-bottom a:hover { color: #fff; }
.family-links { display: flex; gap: 10px; flex-wrap: wrap; }
.family-links a { border: 1px solid #555; border-radius: 4px; padding: 4px 12px; font-weight: 400; font-size: 13px; color: #ccc; }

/* =========================================================
   반응형
   ========================================================= */
@media (max-width: 1240px) {
  .gnb-item { width: 140px; }
  .gnb-panel .panel-brand { display: none; }
  .header-tel { display: none; }
  .hero .container { grid-template-columns: 1fr 520px; }
  .svc-grid { grid-template-columns: repeat(3, 1fr); }
  .platform-band { padding: 50px 50px; }
  .contact-block { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1024px) {
  :root { --header-h: 64px; }
  .gnb, .header-util .btn-pill, .header-tel { display: none; }
  .menu-toggle { display: block; margin-left: auto; }
  .header-util { margin-left: auto; gap: 0; }
  .contact-layout { grid-template-columns: 1fr !important; }
  .logo img { width: 160px; }
  .hero { padding-top: calc(var(--header-h) + 40px); }
  .hero .container { grid-template-columns: 1fr; }
  .hero h1 { font-size: 34px; }
  .entity, .page-hero .container, .split, .greeting, .contact-block, .platform-band { grid-template-columns: 1fr; }
  .split-media { position: relative; top: 0; min-height: 280px; }
  .about-band .container { grid-template-columns: 1fr; }
  .svc-grid, .feature-grid, .feature-grid.cols-4, .member-grid, .related, .office-list { grid-template-columns: repeat(2, 1fr); }
  .family-grid, .summary-box { grid-template-columns: 1fr; }
  .client-grid { grid-template-columns: repeat(4, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .footer-top { flex-direction: column; }
  .footer-nav { grid-template-columns: repeat(3, auto); }
  .greeting { gap: 40px; }
}
@media (max-width: 640px) {
  body { font-size: 15px; }
  .section { padding: 72px 0; }
  .section-head h2, .entity h2, .platform-band h2 { font-size: 26px; }
  .page-hero h1 { font-size: 32px; }
  .page-hero .lead { font-size: 16px; }
  .hero h1 { font-size: 28px; }
  .hero-form { padding: 28px 20px; }
  .hero-form .form-grid, .form-card .form-grid { grid-template-columns: 1fr; }
  .form-card { padding: 30px 20px; }
  .svc-grid, .feature-grid, .feature-grid.cols-2, .feature-grid.cols-4, .member-grid, .related, .office-list, .steps { grid-template-columns: 1fr; }
  .steps li { border-right: 0; }
  .client-grid { grid-template-columns: repeat(2, 1fr); }
  .summary-box { padding: 24px 20px; }
  .summary-box dl { grid-template-columns: 90px 1fr; }
  .num-item summary { padding-left: 8px; grid-template-columns: 38px 1fr 24px; }
  .num-item .num-body { padding-left: 50px; }
  .modal-dialog { padding: 40px 22px 30px; }
  .modal-close { top: 8px; right: 8px; }
  .footer-nav { grid-template-columns: repeat(2, auto); }
  .contact-tabs { grid-template-columns: repeat(2, 1fr); }
  .quick { right: 12px; bottom: 76px; }
  .quick a, .quick button { width: 50px; height: 50px; }
  .proto-bar { left: 8px; right: 8px; bottom: 8px; justify-content: space-between; }
  .fact-table th { width: 96px; }
  .hero-lead br, .platform-band p br { display: none; }
  .quick .q-tel, .quick .q-refund { display: none; }
  .proto-bar { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}