/* 시안 v2 (2026-11-11): 모던·깔끔. 흰 바탕, 넓은 여백, 가는 선, 검정에 가까운 한 가지 색. */
:root {
  --ink: #0c0f13;
  --ink-2: #4b5560;
  --ink-3: #8b949e;
  --line: #e7e9ec;
  --soft: #f5f6f7;
  --bg: #ffffff;
  --accent: #0c0f13;
  --mark: #005aab; /* 대한감정평가법인 로고의 파란색(로고 이미지에서 추출). 2026-11-11 이사님 요청으로 청록에서 변경 */      /* 강조는 이 색 하나만, 아껴 쓴다 */
  --mark-soft: #eaf2fa;
  --warn: #a2470b;
  --warn-soft: #fdf3ea;
  --wrap: 1120px;
  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --serif: "Noto Serif KR", "Nanum Myeongjo", serif;
  --head: var(--sans);
}
html[data-head="serif"] { --head: var(--serif); }

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* display를 지정한 요소도 hidden이면 반드시 숨긴다 */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.65; word-break: keep-all;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
h1, h2, h3 { margin: 0; font-family: var(--head); letter-spacing: -0.03em; line-height: 1.22; font-weight: 700; }
html[data-head="serif"] h1, html[data-head="serif"] h2 { letter-spacing: -0.045em; font-weight: 600; }
p { margin: 0 0 0.8em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
.muted { color: var(--ink-2); }
.small { font-size: 14.5px; }
.num { font-variant-numeric: tabular-nums; }
.nb { white-space: nowrap; } /* 좁은 화면에서 낱말 하나만 다음 줄로 떨어지지 않게 묶는다 */

/* 시험 화면 표시줄 */
.draft { background: var(--soft); color: var(--ink-2); font-size: 12.5px; padding: 6px 16px; display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; }
.draft button { font: inherit; border: 1px solid var(--ink-3); background: #fff; border-radius: 99px; padding: 2px 10px; cursor: pointer; color: var(--ink); }
.draft button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* 머리 */
.site-head .wrap { display: flex; align-items: center; gap: 32px; min-height: 92px; }
/* 왼쪽 맨 위: 사진 + 이름 + 소속 (2026-11-11 이사님 요청) */
.brand { text-decoration: none; display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.brand img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: 50% 16%; background: var(--soft); flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.35; }
.brand strong { font-weight: 700; font-size: 17.5px; letter-spacing: -0.025em; }
.brand small { font-size: 13.5px; color: var(--ink-2); }
.foot-ci { height: 28px; width: auto; display: block; margin-bottom: 14px; }
.nav { display: flex; gap: 4px 26px; flex-wrap: wrap; margin-left: auto; font-size: 14.5px; }
.nav a { text-decoration: none; color: var(--ink-2); padding: 6px 0; border-bottom: 1.5px solid transparent; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current] { color: var(--ink); border-color: var(--ink); }

/* 첫 화면 */
.hero { padding: clamp(56px, 11vh, 132px) 0 72px; }
.hero h1 { font-size: clamp(34px, 5.6vw, 68px); }
.hero .lead { margin-top: 18px; color: var(--ink-2); font-size: 18px; }

.search { display: flex; align-items: center; gap: 12px; margin-top: clamp(36px, 6vh, 64px); max-width: 820px; border-bottom: 2px solid var(--ink); padding-bottom: 10px; }
.search input { flex: 1; min-width: 0; font: inherit; font-size: clamp(19px, 2.4vw, 26px); letter-spacing: -0.02em; border: 0; background: transparent; padding: 10px 2px; color: var(--ink); outline: none; }
.search input::placeholder { color: var(--ink-3); }
.search:focus-within { border-color: var(--mark); }
.search .btn { flex: none; }
.hint { margin-top: 14px; font-size: 14px; color: var(--ink-3); display: flex; gap: 6px 18px; flex-wrap: wrap; }

.btn {
  font: inherit; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; padding: 12px 22px; border-radius: 99px; border: 1.5px solid var(--ink);
  background: var(--ink); color: #fff; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; transition: transform .12s ease, background .12s ease;
}
.btn:hover { background: #262b31; }
.btn:active { transform: scale(0.98); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--ink); background: transparent; }
.btn:focus-visible, .field input:focus-visible, .field select:focus-visible, .addr-list button:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; }

.who { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: clamp(40px, 7vh, 72px); }
.who .photo { width: 76px; height: 76px; border-radius: 50%; background: var(--soft); flex: none; object-fit: cover; object-position: 50% 16%; }
.who p { margin: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.who strong { color: var(--ink); font-weight: 700; font-size: 17px; letter-spacing: -0.02em; display: block; }
.who .ci { height: 30px; width: auto; margin-left: 8px; padding-left: 24px; border-left: 1px solid var(--line); box-sizing: content-box; }

/* 조회 진행 */
.status { margin-top: 28px; color: var(--ink-2); font-size: 15px; min-height: 1.6em; }
.status.err { color: var(--warn); }
.addr-list { list-style: none; margin: 4px 0 0; padding: 0; max-width: 820px; border-top: 1px solid var(--line); }
.addr-list:empty { border: 0; }
.addr-list button { width: 100%; text-align: left; font: inherit; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 16px 2px; cursor: pointer; color: var(--ink); display: block; }
.addr-list button:hover { background: var(--soft); }
.addr-list small { display: block; color: var(--ink-3); font-size: 13.5px; margin-top: 2px; }
.tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 99px; background: var(--mark-soft); color: var(--mark); margin-left: 8px; vertical-align: 2px; }

/* 결과 구획: 상자 대신 가는 선으로 나눈다 */
.card { border-top: 1px solid var(--line); padding: 36px 0 8px; margin-top: 36px; max-width: 820px; }
.card h2 { font-size: clamp(22px, 2.6vw, 28px); margin-bottom: 6px; }
.card h3 { font-size: 18px; margin: 28px 0 8px; letter-spacing: -0.02em; }

.fields { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; margin-top: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--ink-2); }
.field input, .field select { font: inherit; font-size: 17px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); color: var(--ink); min-width: 160px; }
.field input:hover, .field select:hover { border-color: var(--ink-3); }
.radio { display: inline-flex; background: var(--soft); border-radius: 99px; padding: 4px; }
.radio label { border-radius: 99px; padding: 9px 20px; cursor: pointer; font-size: 15.5px; color: var(--ink-2); }
.radio input { position: absolute; opacity: 0; }
.radio label:has(input:checked) { background: var(--ink); color: #fff; font-weight: 600; }
.radio label:has(input:focus-visible) { outline: 2px solid var(--mark); outline-offset: 2px; }

/* 문의 양식 */
.form { max-width: 720px; margin-top: clamp(32px, 5vh, 52px); display: grid; gap: 26px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form .field { display: block; font-size: 14px; color: var(--ink-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.form .field input:not([type="radio"]):not([type="checkbox"]), .form textarea { display: block; width: 100%; min-width: 0; margin-top: 7px; }
.form .field .err { display: block; margin-top: 6px; }
.form .field .err:empty { display: none; }
.form textarea { font: inherit; font-size: 17px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); color: var(--ink); resize: vertical; line-height: 1.6; }
.form textarea:hover { border-color: var(--ink-3); }
.form textarea:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; }
.form legend { padding: 0; margin-bottom: 8px; }
.opt { font-size: 12px; color: var(--ink-3); margin-left: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { border: 1px solid var(--line); border-radius: 99px; padding: 9px 18px; cursor: pointer; font-size: 15.5px; color: var(--ink); background: #fff; }
.chips label:hover { border-color: var(--ink-3); }
.chips input { position: absolute; opacity: 0; }
.chips label:has(input:checked) { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 600; }
.chips label:has(input:focus-visible) { outline: 2px solid var(--mark); outline-offset: 2px; }
.err { color: var(--warn); font-size: 13.5px; min-height: 0; }
.err:empty { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent { border-top: 1px solid var(--line); padding-top: 26px; }
.consent h2 { font-size: 17px; letter-spacing: -0.02em; }
.consent dl { display: grid; grid-template-columns: 6.5em 1fr; gap: 8px 16px; margin: 16px 0 14px; font-size: 14.5px; }
.consent dt { color: var(--ink-3); }
.consent dd { margin: 0; color: var(--ink-2); }
.check { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--ink); cursor: pointer; margin-top: 14px; }
.check input { width: 20px; height: 20px; accent-color: var(--ink); }
.form .next { margin-top: 0; }

.value { margin-top: 20px; }
.value .label { font-size: 14px; color: var(--ink-2); }
.value .amount { font-family: var(--sans); font-size: clamp(38px, 6.4vw, 72px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.1; margin-top: 4px; }
.value .read { color: var(--ink-2); margin-top: 6px; }
.meta { display: flex; gap: 4px 18px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-3); margin-top: 10px; }
.note { font-size: 14px; color: var(--ink-2); margin-top: 20px; padding-left: 14px; border-left: 2px solid var(--mark); }
.note.warn { border-color: var(--warn); color: var(--warn); }
.todo-note { font-size: 13.5px; color: var(--ink-3); margin-top: 14px; }

table { border-collapse: collapse; width: 100%; margin-top: 24px; font-size: 15.5px; }
th, td { padding: 13px 2px; border-bottom: 1px solid var(--line); text-align: right; }
th:first-child, td:first-child { text-align: left; color: var(--ink-2); }
th { font-weight: 500; color: var(--ink-3); font-size: 13px; }
tr.on td { color: var(--mark); font-weight: 700; }
.table-scroll { overflow-x: auto; }

.gate { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.period { display: grid; gap: 18px; margin-top: 26px; }
.period strong { display: block; font-size: 13.5px; font-weight: 500; color: var(--ink-3); }
.period div > span.num, .period .big { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.period .left strong { font-size: 20px; font-weight: 700; color: var(--mark); letter-spacing: -0.02em; }
.period .over strong { color: var(--warn); }
.next { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }

/* 안내 페이지 */
.band-title { font-size: clamp(24px, 3vw, 34px); margin-bottom: 36px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 64px; }
.two h3 { font-size: 13.5px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; font-family: var(--sans); padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.plain { list-style: none; margin: 0; padding: 0; }
.plain li { padding: 22px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 15.5px; }
.plain li strong { display: block; color: var(--ink); font-size: 18.5px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.4; margin-bottom: 8px; }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin: 0; }
.facts > div { border-top: 1px solid var(--ink); padding-top: 16px; }
.facts dt { font-size: 13.5px; color: var(--ink-3); margin-bottom: 14px; }
.facts dd { margin: 0; font-size: 18.5px; letter-spacing: -0.025em; line-height: 1.5; }
.facts dd strong { font-weight: 700; }
.facts dd.note-line { font-size: 14px; color: var(--ink-2); letter-spacing: 0; margin-top: 12px; line-height: 1.55; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; counter-reset: s; }
.steps li { counter-increment: s; color: var(--ink-2); font-size: 15px; }
.steps li::before { content: "0" counter(s); display: block; font-size: 13px; font-weight: 500; color: var(--ink-3); letter-spacing: 0.04em; margin-bottom: 14px; }
.steps li strong { display: block; color: var(--ink); font-size: 19px; font-weight: 600; letter-spacing: -0.025em; margin-bottom: 6px; }
/* 한 문항씩 묻기 (GOV.UK의 질문 화면 방식을 참고: 상자·화살표 없이 큰 질문 하나와 답 버튼만) */
.ask { max-width: 760px; min-height: 250px; padding: 0 0 40px; margin-bottom: 40px; border-bottom: 1px solid var(--line); }
.ask-step { font-size: 13px; font-weight: 500; color: var(--ink-3); letter-spacing: 0.04em; margin: 0 0 14px; }
.ask-q { font-family: var(--head); font-size: clamp(24px, 3.4vw, 38px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.3; outline: none; }
.ask-hint { color: var(--ink-2); font-size: 16px; margin: 14px 0 0; min-height: 1.65em; }
.ask-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.ask-btns button[data-a="yes"], .ask-btns button[data-a="no"] { min-width: 120px; justify-content: center; background: #fff; color: var(--ink); border-color: var(--ink); }
.ask-btns button[data-a="yes"]:hover, .ask-btns button[data-a="no"]:hover { background: var(--ink); color: #fff; }
.ask-back { font: inherit; font-size: 14px; color: var(--ink-3); background: none; border: 0; padding: 0; margin-top: 22px; cursor: pointer; }
.ask-back:hover { color: var(--ink); }
.ask[data-state="need"] .ask-q { color: var(--mark); }

/* 업무 목록: 이름 / 한 줄 설명 / 문의. 가는 선으로만 나눈다 */
.services { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.services li { display: grid; grid-template-columns: 240px 1fr auto; gap: 8px 32px; align-items: baseline; padding: 28px 0; border-bottom: 1px solid var(--line); }
.services h2 { font-size: clamp(20px, 2.2vw, 25px); }
.services p { margin: 0; color: var(--ink-2); font-size: 16.5px; }
.svc-link { text-decoration: none; font-size: 15px; font-weight: 600; white-space: nowrap; border-bottom: 1.5px solid var(--ink); padding-bottom: 2px; }
.svc-link:hover { color: var(--mark); border-color: var(--mark); }
@media (max-width: 760px) { .services li { grid-template-columns: 1fr; padding: 22px 0; } .svc-link { justify-self: start; margin-top: 6px; } }

/* 아코디언: 접어 두고 눌러서 펼치는 목록 */
.acc { border-top: 1px solid var(--ink); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 240px 1fr 28px; gap: 8px 32px; align-items: baseline; padding: 28px 0; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary h2 { font-size: clamp(20px, 2.2vw, 25px); }
.acc-one { color: var(--ink-2); font-size: 16.5px; }
/* 오른쪽의 + 표시. 펼치면 − 로 바뀐다 */
.acc summary::after { content: ""; width: 16px; height: 16px; align-self: center; justify-self: end;
  background: linear-gradient(var(--ink), var(--ink)) center / 16px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.5px 16px no-repeat; transition: transform .2s ease; }
.acc details[open] summary::after { background: linear-gradient(var(--ink), var(--ink)) center / 16px 1.5px no-repeat; }
.acc summary:hover h2 { color: var(--mark); }
.acc summary:focus-visible { outline: 2px solid var(--mark); outline-offset: 4px; }
.acc details[open] summary { padding-bottom: 12px; }
.acc-body { padding: 0 60px 32px 272px; }
.acc-body dl { display: grid; grid-template-columns: 9em 1fr; gap: 12px 20px; margin: 8px 0 24px; font-size: 16px; }
.acc-body dt { color: var(--ink-3); font-size: 14px; padding-top: 2px; }
.acc-body dd { margin: 0; color: var(--ink); line-height: 1.6; }
.acc-lead { margin: 8px 0 20px; font-size: 16px; line-height: 1.7; color: var(--ink); max-width: 62ch; }
.acc-body .in-acc { margin: 0 0 16px; min-width: 0; width: 100%; }
.acc-body .cases.in-acc td:first-child { width: 36%; }
.acc-body > .small { margin: 0 0 22px; }
.acc-body h3 { font-size: 17px; margin: 28px 0 4px; padding-top: 24px; border-top: 1px solid var(--line); }
.dot-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; }
.dot-list li { position: relative; padding-left: 16px; }
.dot-list li::before { content: ""; position: absolute; left: 2px; top: 0.72em; width: 5px; height: 5px; border-radius: 50%; background: var(--mark); }
.dot-list .sub { display: block; font-size: 13.5px; color: var(--ink-3); }
@media (max-width: 760px) { .dot-list { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .acc summary { grid-template-columns: 1fr 24px; padding: 22px 0; gap: 6px 16px; }
  .acc summary h2 { grid-column: 1; }
  .acc-one { grid-column: 1; grid-row: 2; font-size: 15px; }
  .acc summary::after { grid-column: 2; grid-row: 1; }
  .acc-body { padding: 0 0 26px; }
  .acc-body dl { grid-template-columns: 1fr; gap: 2px; }
  .acc-body dd { margin-bottom: 12px; }
}

/* 같은 메뉴 안의 페이지 사이 이동 */
.subnav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: clamp(28px, 5vh, 48px); }
.subnav a { text-decoration: none; font-size: 14.5px; padding: 8px 16px; border-radius: 99px; border: 1px solid var(--line); color: var(--ink-2); }
.subnav a:hover { border-color: var(--ink-3); color: var(--ink); }
.subnav a[aria-current] { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; }
.hero:has(.subnav) { padding-top: clamp(32px, 6vh, 64px); }

/* 세 칸짜리 비교 표 */
.cases.wide3 td:first-child { width: 22%; color: var(--ink); }
.cases.wide3 td:last-child, .cases.wide3 th:last-child { white-space: normal; width: auto; }
.cases.wide3 td { color: var(--ink-2); }
.cases.wide3 td strong { color: var(--ink); }
.cases .plain-cell { color: var(--ink-2); }

/* 상황별 표: 가는 선만 쓰는 표 */
.sub-title { font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; margin-bottom: 4px; }
.cases { margin-top: 8px; font-size: 16px; min-width: 560px; }
.cases th { text-align: left; border-bottom: 1px solid var(--ink); padding: 12px 16px 12px 0; }
.cases td { text-align: left; padding: 18px 16px 18px 0; vertical-align: top; color: var(--ink); line-height: 1.5; }
.cases td:first-child { color: var(--ink); width: 50%; }
.cases td:nth-child(2) { color: var(--ink-2); }
.cases td:last-child, .cases th:last-child { text-align: left; white-space: nowrap; padding-right: 0; width: 7em; }
table .sub { font-size: 13px; color: var(--ink-3); margin-left: 6px; }
.cases .sub { display: block; font-size: 13.5px; color: var(--ink-3); margin-top: 2px; }
.cases td.no { color: var(--ink-3); }
.cases td.yes { color: var(--mark); font-weight: 700; }
.cases td.yes::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--mark); margin-right: 8px; vertical-align: 2px; }

/* 판단 흐름도 (쓰지 않음 — 상자와 화살표로 그린 첫 시안. 어색하다는 지적으로 위 방식으로 바꿨다) */
.flow { max-width: 860px; }
.flow .q { border: 1.5px solid var(--ink); border-radius: 14px; padding: 18px 22px; background: #fff; }
.flow .q-no { font-size: 12.5px; color: var(--ink-3); font-weight: 500; letter-spacing: 0.02em; }
.flow .q p { margin: 4px 0 0; font-size: 19px; letter-spacing: -0.025em; line-height: 1.45; }
.flow .q p strong { font-weight: 700; }
.flow .ans { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.flow .ans + .ans { margin-top: 12px; padding-top: 12px; }
.yn { display: inline-block; min-width: 52px; text-align: center; font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--ink-3); color: var(--ink-2); background: #fff; }
.out { font-size: 14.5px; font-weight: 700; padding: 5px 14px; border-radius: 99px; white-space: nowrap; }
.out.need { background: var(--mark); color: #fff; }
.out.skip { background: var(--soft); color: var(--ink); border: 1px solid var(--line); }
.why { font-size: 14px; color: var(--ink-2); }
.flow .down { display: flex; align-items: center; gap: 10px; height: 46px; margin-left: 36px; padding-left: 16px; border-left: 1.5px solid var(--ink); position: relative; }
.flow .down::after { content: ""; position: absolute; left: -5.5px; bottom: -1px; width: 8px; height: 8px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg); }
.flow .split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* 평가기간 띠 */
.tl { max-width: 860px; display: grid; gap: 14px; }
.tl-row { display: grid; grid-template-columns: 56px 1fr 170px; align-items: center; gap: 16px; }
.tl-name { font-weight: 700; font-size: 17px; letter-spacing: -0.02em; }
.tl-len { font-size: 15px; color: var(--ink-2); }
.tl-track { position: relative; height: 34px; border-radius: 8px; background: repeating-linear-gradient(135deg, var(--soft) 0 6px, #fff 6px 12px); border: 1px solid var(--line); }
.tl-fill { position: absolute; top: -1px; bottom: -1px; background: var(--mark); border-radius: 8px; opacity: 0.9; }
.tl-mark { position: absolute; left: 50%; top: -7px; bottom: -7px; width: 0; border-left: 2.5px solid var(--ink); }
.tl-mark::before { content: ""; position: absolute; left: -7.5px; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); }
.tl-axis .tl-track { height: 22px; background: none; border: 0; }
.tl-axis .tl-track span { position: absolute; top: 4px; transform: translateX(-50%); font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.tl-axis .tl-track span:first-child { transform: none; }
.tl-axis .tl-track span:last-child { transform: translateX(-100%); }
.callout { max-width: 860px; margin: 26px 0 0; padding: 14px 18px; border-left: 3px solid var(--mark); background: var(--mark-soft); border-radius: 0 10px 10px 0; font-size: 16px; }

/* 기준 카드 */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vcard { border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
.vcard h3 { font-size: 16px; font-family: var(--sans); letter-spacing: -0.02em; margin-bottom: 16px; }
.mini { margin-top: 0; font-size: 15px; }
.mini th, .mini td { padding: 10px 0; text-align: left; }
.mini th:last-child, .mini td:last-child { text-align: right; }
.mini td:first-child { color: var(--ink-2); }
.mini tr:last-child td { border-bottom: 0; }
.checks { list-style: none; margin: 0; padding: 0; font-size: 15.5px; }
.checks li { padding: 6px 0 6px 28px; position: relative; }
.checks li::before { content: ""; position: absolute; left: 3px; top: 12px; width: 13px; height: 7px; border-left: 2px solid var(--mark); border-bottom: 2px solid var(--mark); transform: rotate(-45deg); }
.range { position: relative; height: 46px; margin-top: 16px; }
.range::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: var(--line); }
.range-band { position: absolute; left: 25%; right: 25%; top: 4px; height: 14px; background: var(--mark-soft); border: 1px solid var(--mark); border-radius: 4px; }
.range-me { position: absolute; left: 50%; top: 1px; width: 0; height: 20px; border-left: 2.5px solid var(--ink); }
.range-l, .range-c, .range-r { position: absolute; top: 27px; font-size: 12.5px; color: var(--ink-3); transform: translateX(-50%); white-space: nowrap; }
.range-l { left: 25%; } .range-c { left: 50%; color: var(--ink); font-weight: 600; } .range-r { left: 75%; }
.vnote { font-size: 13.5px; color: var(--ink-2); margin: 10px 0 0; }
.big-num { font-size: 46px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; margin: 0 0 14px; }
.big-num small { font-size: 16px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink-2); margin-left: 6px; }

/* 전후 비교 표와 비율 막대 */
.cases.ba td:nth-child(2) { color: var(--ink-3); }
.cases.ba td:last-child { color: var(--ink); }
.delta { display: inline-block; margin-left: 8px; font-size: 13.5px; font-weight: 600; color: var(--mark); white-space: nowrap; }
.tl.ratio { margin-top: 36px; }
.tl.ratio .tl-row { grid-template-columns: 44px 1fr 70px; }
.tl.ratio .tl-track { background: none; border: 0; }
.tl.ratio .tl-len { font-size: 20px; color: var(--ink); letter-spacing: -0.02em; }
.tl-fill.muted-fill { background: var(--ink-3); opacity: 0.45; }
.tl.ratio::before { content: "부채비율"; font-size: 13.5px; font-weight: 600; color: var(--ink-3); }

/* 예시 카드 두 장 */
.cards.two-col { grid-template-columns: 1fr 1fr; margin-top: 14px; }
.vcard-kicker { font-size: 13px; color: var(--ink-3); margin: 0 0 4px; }
.mini.ex th, .mini.ex td { vertical-align: top; padding: 12px 10px 12px 0; }
.mini.ex th { font-size: 12.5px; color: var(--ink-3); font-weight: 500; border-bottom: 1px solid var(--ink); }
.mini.ex td:last-child, .mini.ex th:last-child { padding-right: 0; white-space: nowrap; }
.mini.ex td:last-child { color: var(--ink); font-weight: 600; }
.mini.ex td strong { color: var(--ink); }
.mini.ex .sub { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.vcard .vnote strong { color: var(--ink); }

/* 진행 순서를 선으로 잇기 */
.steps.linked li { position: relative; padding-top: 22px; }
.steps.linked li::before { margin-bottom: 10px; }
.steps.linked li::after { content: ""; position: absolute; top: 5px; left: 0; right: -32px; height: 1.5px; background: var(--ink); }
.steps.linked li:last-child::after { right: 0; }
.steps.linked li strong::before { content: ""; position: absolute; top: 0; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--ink); z-index: 1; }

@media (max-width: 900px) { .facts, .steps { grid-template-columns: 1fr 1fr; } .cards, .cards.two-col { grid-template-columns: 1fr; } .steps.linked li::after { right: 0; } }
@media (max-width: 760px) {
  /* 좁은 화면에서는 표를 옆으로 밀지 않고 칸 안에서 줄을 바꾼다 */
  .cases { min-width: 0; font-size: 15px; }
  .cases td, .cases th { padding-right: 12px; }
  .cases td:first-child { width: auto; }
  .cases.wide3 td:first-child { width: 26%; }
  .delta { display: block; margin-left: 0; }
  .tl.ratio .tl-row { grid-template-columns: 30px 1fr 60px; }
  .tl.ratio .tl-len { grid-column: auto; margin-top: 0; font-size: 18px; }
  .flow .split { grid-template-columns: 1fr; gap: 0; }
  .flow .q p { font-size: 17.5px; }
  .tl-row { grid-template-columns: 44px 1fr; }
  .tl-len { grid-column: 2; margin-top: -8px; font-size: 14px; }
  .tl-axis .tl-len { display: none; }
  .tl-axis .tl-track span:nth-child(3) { display: none; }
}
@media (max-width: 760px) { .two { grid-template-columns: 1fr; gap: 40px; } .band-title { margin-bottom: 24px; } }
@media (max-width: 480px) { .facts, .steps { grid-template-columns: 1fr; gap: 28px; } }

/* 원칙 세 줄 */
.band { border-top: 1px solid var(--line); padding: 64px 0; }
.principles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; counter-reset: p; }
.principles li { counter-increment: p; font-size: 19px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.4; }
.principles li::before { content: "0" counter(p); display: block; font-size: 13px; font-weight: 500; color: var(--ink-3); letter-spacing: 0.04em; margin-bottom: 14px; }

/* 건물 픽토그램 띠: 1200×170 타일을 가로로 이어 붙이고 아주 천천히 흘린다 */
.skyline {
  --tile-h: 136px;
  --tile-w: calc(var(--tile-h) * 1200 / 170);
  height: var(--tile-h); margin-top: 24px;
  background: url("/pictos.svg?v=2") repeat-x 0 100% / var(--tile-w) var(--tile-h);
  animation: skyline-drift 150s linear infinite;
}
@keyframes skyline-drift { to { background-position-x: calc(var(--tile-w) * -1); } }
.skyline + * { border-top: 0; }
main:has(.skyline) + .site-foot { border-top: 0; }

.site-foot { border-top: 1px solid var(--line); padding: 32px 0 56px; font-size: 13px; color: var(--ink-3); }
.site-foot p { margin: 0 0 4px; }

@media (max-width: 760px) {
  body { font-size: 16px; }
  .wrap { padding: 0 20px; }
  .site-head .wrap { flex-wrap: wrap; gap: 6px 20px; padding-top: 14px; padding-bottom: 10px; min-height: 0; }
  .form-row { grid-template-columns: 1fr; }
  .consent dl { grid-template-columns: 1fr; gap: 2px; }
  .consent dd { margin-bottom: 10px; }
  .brand img { width: 44px; height: 44px; }
  .brand strong { font-size: 16.5px; }
  .nav { margin-left: 0; gap: 0 18px; font-size: 14px; flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; }
  .hero { padding: 44px 0 48px; }
  .principles { grid-template-columns: 1fr; gap: 28px; }
  .principles li { font-size: 18px; }
  .principles li::before { margin-bottom: 6px; }
  .field { flex: 1 1 140px; }
  .field input, .field select { min-width: 0; width: 100%; }
  .band { padding: 44px 0; }
  .skyline { --tile-h: 100px; }
  .who .photo { width: 64px; height: 64px; }
  .who .ci { height: 24px; margin-left: 0; padding-left: 0; border-left: 0; flex-basis: 100%; object-fit: contain; object-position: left; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } .skyline { animation: none; } }

/* 소개 페이지 */
.about-top { display: grid; grid-template-columns: 280px 1fr; gap: 56px; align-items: end; }
.about-photo { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 12%; border-radius: 18px; background: var(--soft); }
.about-hero h1 { font-size: clamp(34px, 5vw, 60px); }
.cases td a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.cases td a:hover { color: var(--mark); text-decoration-color: var(--mark); }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.plain-list .muted { color: var(--ink-3); font-size: 14.5px; margin-left: 6px; }
.cases tr.todo td { color: var(--ink-3); }
.cases tr.todo td:last-child { font-style: normal; background: repeating-linear-gradient(135deg, transparent 0 8px, var(--soft) 8px 16px); }
@media (min-width: 901px) { .steps.three { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) {
  .about-top { grid-template-columns: 1fr; gap: 28px; align-items: start; }
  .about-photo { max-width: 200px; }
}

/* 개인정보 처리방침 */
.policy h3 { font-size: 18px; margin: 40px 0 10px; }
.policy h3:first-of-type { margin-top: 0; }
.policy p { max-width: 68ch; color: var(--ink-2); line-height: 1.75; margin: 0 0 10px; font-size: 16px; }
.policy p a, .consent p a { color: var(--ink); text-underline-offset: 4px; }
.policy .cases { margin-bottom: 8px; }
.dot-list.one { grid-template-columns: 1fr; color: var(--ink-2); font-size: 16px; }
.foot-links { margin-top: 6px; }
.foot-links a { color: inherit; text-underline-offset: 4px; }

/* 조회 결과의 토지·건물 정보 */
.sub-value { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.sub-value .amount { font-size: clamp(24px, 3.2vw, 34px); }
.sub-value .label .muted { font-weight: 400; margin-left: 6px; }
.info-title { font-family: var(--sans); font-size: 15px; font-weight: 600; margin: 30px 0 6px; }
.info-title .muted, .info-sub .muted { font-weight: 400; font-size: 13px; color: var(--ink-3); margin-left: 6px; }
.info-sub { font-weight: 600; font-size: 14.5px; margin: 18px 0 2px; }
table.info { width: 100%; font-size: 15px; }
table.info td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
table.info td:first-child { width: 8.5em; color: var(--ink-3); white-space: nowrap; }
details.more { margin-top: 22px; border-top: 1px solid var(--line); }
details.more summary { cursor: pointer; padding: 14px 0; font-size: 15px; font-weight: 600; color: var(--mark); }
details.more summary:focus-visible { outline: 2px solid var(--mark); outline-offset: 4px; }

/* 지도 조회 */
.map-toggle { margin-top: 18px; padding: 0; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--mark); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.map-toggle:focus-visible { outline: 2px solid var(--mark); outline-offset: 4px; }
#map-box { margin-top: 14px; }
#map { height: min(62vh, 520px); min-height: 320px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; isolation: isolate; background: var(--soft); cursor: crosshair; }
#map-hint { margin-top: 10px; }
#map-hint.err { color: #b3261e; }
#map .leaflet-control-attribution { font-size: 11px; }