/* 모퉁이공인중개사사무소 — 동네 공인중개사사무소 디자인 샘플 (디코랩)
   구성: 지도 고정 화면 분할 — 왼쪽 동네 지도는 붙어 있고 오른쪽 패널만 스크롤된다.
   색은 동네 지도 실물에서: 지도 종이, 지도 잉크, 창문 불빛, 공원, 하천, 건물 */
:root {
  --color-mapsheet: #EFEBDD;  /* 지도 종이 — 지도 면, 안내 띠, 푸터 */
  --color-paper: #FBFAF5;     /* 오른쪽 패널 배경 */
  --color-ink: #2B3238;       /* 지도 잉크 — 글자·선 */
  --color-lamp: #F4A62A;      /* 창문 불빛 — 켜진 구역, 전화 상담 버튼 */
  --color-lamp-soft: #F8D69A;
  --color-route: #C9701C;     /* 지도 위 걷는 길 점선 */
  --color-park: #BFD8A3;
  --color-stream: #9FCBDD;
  --color-block: #DCD5C3;     /* 건물 */
  --color-road-edge: #D6CFBC;
  --color-bus: #4F7FA3;
  --color-muted: #5A6167;
  --color-line: rgba(43, 50, 56, .16);

  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui,
          "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-display: "Sunflower", var(--font);

  --fs-h1: clamp(2.15rem, 1.5rem + 2.6vw, 3.4rem);
  --fs-h2: clamp(1.65rem, 1.3rem + 1.3vw, 2.35rem);
  --fs-h3: 1.25rem;
  --fs-body: 1.0625rem;
  --fs-small: .875rem;

  --radius: 10px;
  --header-h: 60px;
  --strip-h: clamp(210px, 29vh, 270px);
  --gutter: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--color-ink);
  background: var(--color-paper);
  word-break: keep-all;
  overflow-wrap: anywhere;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1.28; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--color-ink); color: #fff; border-radius: 8px; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--color-route); outline-offset: 3px; }

/* 실제 정보 자리 */
.ph { display: inline-block; padding: 0 .4em; border: 1.5px dashed currentColor; border-radius: 6px; opacity: .8; font-size: .92em; line-height: 1.5; }

/* 지도 범례 견본 — 소제목과 지도 표시를 잇는다 */
.sw { display: inline-block; flex: none; width: 22px; height: 14px; border-radius: 4px; border: 1.5px solid var(--color-ink); background: var(--color-paper); vertical-align: -2px; }
.sw--ink { background: var(--color-mapsheet); }
.sw--lamp { background: var(--color-lamp); }
.sw--park { background: var(--color-park); }
.sw--ring { border-style: dashed; border-radius: 50%; width: 16px; height: 16px; background: transparent; }
.sw--route { border: 0; height: 4px; border-radius: 0; background: radial-gradient(circle, var(--color-route) 2px, transparent 2.5px) 0 50% / 7px 4px repeat-x; }

/* 샘플 안내 띠 */
.sample-banner { background: #E4DECB; color: var(--color-ink); font-size: var(--fs-small); line-height: 1.6; border-bottom: 1.5px solid var(--color-ink); }
.sample-banner__inner { display: flex; gap: 10px; align-items: baseline; padding: 8px var(--gutter); }
.sample-banner__tag { flex: none; padding: 1px 8px; border-radius: 6px; background: var(--color-ink); color: #fff; font-weight: 700; font-size: .78rem; }
.sample-banner a { font-weight: 700; }

/* 헤더 — backdrop-filter 를 쓰지 않는다(모바일 메뉴가 헤더 높이로 잘리는 문제) */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--color-paper); border-bottom: 1.5px solid var(--color-ink); }
.site-header__inner { display: flex; align-items: center; height: var(--header-h); padding: 0 var(--gutter); gap: 12px; }
.site-header__brand { display: flex; align-items: center; gap: 18px; margin-right: auto; min-width: 0; }
.logo { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.logo svg { width: 36px; height: 36px; flex: none; }
.logo b { display: flex; flex-direction: column; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; line-height: 1.05; letter-spacing: -.01em; }
.logo small { font-family: var(--font); font-size: .66rem; font-weight: 600; letter-spacing: 0; color: var(--color-muted); margin-top: 2px; }
.site-header__area { display: none; font-family: var(--font-display); font-weight: 500; font-size: .95rem; padding: 2px 10px; border: 1.5px solid var(--color-ink); border-radius: 6px; background: var(--color-mapsheet); }
.site-header__side { display: flex; align-items: center; gap: 8px; }
.gnb { display: flex; align-items: center; gap: 2px; }
.gnb a { position: relative; padding: 8px 8px; text-decoration: none; font-weight: 600; font-size: .94rem; border-radius: 8px; white-space: nowrap; }
.gnb a:not(.gnb__call):hover { background: var(--color-mapsheet); }
.gnb a.is-active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 1px; height: 3px; border-radius: 3px; background: var(--color-lamp); }
.gnb__call { margin-left: 8px; background: var(--color-lamp); border: 1.5px solid var(--color-ink); font-variant-numeric: tabular-nums; }
.header-call { display: none; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 1.5px solid var(--color-ink); border-radius: 8px; background: var(--color-lamp); color: var(--color-ink); text-decoration: none; font-weight: 700; font-size: .9rem; }
.header-call svg { width: 18px; height: 18px; }
.menu-toggle { display: none; width: 44px; height: 44px; border: 0; background: none; padding: 0; cursor: pointer; position: relative; }
.menu-toggle__bar, .menu-toggle__bar::before, .menu-toggle__bar::after { position: absolute; left: 10px; width: 24px; height: 2.5px; border-radius: 2px; background: var(--color-ink); content: ""; transition: transform .25s, opacity .2s; }
.menu-toggle__bar { top: 21px; }
.menu-toggle__bar::before { left: 0; top: -7px; }
.menu-toggle__bar::after { left: 0; top: 7px; }
.site-header.is-open .menu-toggle__bar { background: transparent; }
.site-header.is-open .menu-toggle__bar::before { transform: translateY(7px) rotate(45deg); }
.site-header.is-open .menu-toggle__bar::after { transform: translateY(-7px) rotate(-45deg); }

/* 버튼 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px; border-radius: var(--radius); font-weight: 700; font-size: 1rem; text-decoration: none; border: 1.5px solid var(--color-ink); cursor: pointer; font-family: inherit; color: var(--color-ink); font-variant-numeric: tabular-nums; transition: transform .18s ease, background-color .18s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn--lamp { background: var(--color-lamp); }
.btn--lamp:hover { background: #F7B54B; }
.btn--line { background: var(--color-paper); }
.btn--line:hover { background: var(--color-mapsheet); }
.btn--kakao { background: #FEE500; color: #191919; }

/* ---------------- 지도 (공통) ---------------- */
.split { position: relative; }
.atlas { position: relative; background: var(--color-mapsheet); overflow: hidden; }
.atlas__frame { position: absolute; inset: 0; }
.town-map { width: 100%; height: 100%; }
.atlas__compass { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; }
.atlas__caption { position: absolute; left: 16px; bottom: 16px; max-width: min(430px, calc(100% - 32px)); padding: 14px 16px; background: var(--color-paper); border: 1.5px solid var(--color-ink); border-radius: var(--radius); }
.atlas__now { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.3; }
.atlas__now b { font-weight: 700; }
.atlas__desc { margin-top: 4px; font-size: .92rem; line-height: 1.6; color: var(--color-muted); }
.atlas__fold { display: none; }

/* 지도 그림 */
.cam { transition: transform .9s cubic-bezier(.65, 0, .35, 1); }
.is-reduced .cam, .cam.no-anim { transition: none; }
.m-sheet { fill: var(--color-mapsheet); }
.m-hill__fill { fill: #DAE5C6; }
.m-hill__lines ellipse { fill: none; stroke: #BFD1A6; stroke-width: 2; }
.m-trees circle { fill: #A8C78C; }
.m-bank { fill: #D5E6C4; }
.m-bankline { fill: none; stroke: #D5E6C4; stroke-width: 130; }
.m-water { fill: none; stroke: var(--color-stream); stroke-width: 46; }
.m-park__fill { fill: var(--color-park); }
.m-park__walk { fill: none; stroke: #F4F0E2; stroke-width: 6; stroke-linecap: round; }
.m-park__pond { fill: var(--color-stream); }
.m-road-edge { fill: none; stroke: var(--color-road-edge); }
.m-road { fill: none; stroke: #fff; }
.m-centerline { fill: none; stroke: #EBD7A9; stroke-width: 2; stroke-dasharray: 14 12; }
.m-bridge { fill: none; stroke: #8E8775; stroke-width: 3; }
.m-zebra rect { fill: #CFC7B2; }
.bld rect { fill: var(--color-block); transition: fill .45s ease calc(var(--d, 0) * 45ms); }
.m-market { fill: url(#awning); stroke: #C3A266; stroke-width: 2; }
.m-market__roof { stroke: #C3A266; stroke-width: 1.5; }
.m-office { fill: var(--color-lamp); stroke: var(--color-ink); stroke-width: 2.5; }
.m-office__win { fill: #FFF4DA; }
.m-school { fill: #EFE7D3; stroke: #C5B894; stroke-width: 2; }
.m-school__bld { fill: #D6CBAF; }
.m-school__track { fill: #E0AE86; }
.m-school__field { fill: #CADFB0; }
.m-library, .m-aptshop { fill: #E7DDC5; stroke: #C5B894; stroke-width: 2; }
.m-play { fill: #F2E4BD; stroke: #C5B894; stroke-width: 2; }
.m-station rect { fill: var(--color-ink); }
.m-station text { fill: #fff; font: 700 19px var(--font-display); text-anchor: middle; }
.m-exits rect { fill: #fff; stroke: var(--color-ink); stroke-width: 2; }
.m-exits text { font: 800 13px var(--font); text-anchor: middle; fill: var(--color-ink); }
.lb { font-family: var(--font-display); font-weight: 500; font-size: 18px; text-anchor: middle; fill: #6B6556; paint-order: stroke; stroke: var(--color-mapsheet); stroke-width: 5px; stroke-linejoin: round; }
.lb--road { fill: #8E8775; stroke: #fff; font-size: 15px; }
.lb--sm { font-size: 13px; }
.lb--water { fill: #3F7C96; stroke: #D5E6C4; font-size: 26px; font-weight: 700; }
.lb--green { fill: #4A6835; stroke: #DAE5C6; font-size: 20px; font-weight: 700; }
.lb--place { fill: var(--color-ink); font-size: 20px; font-weight: 700; }
.lb--place.lb--sm { font-size: 16px; }
.lb--tiny { font-size: 12px; stroke-width: 4px; }
.lb--office { fill: var(--color-ink); font-size: 19px; font-weight: 700; text-anchor: end; }
.m-pin path { fill: var(--color-lamp); stroke: var(--color-ink); stroke-width: 3; }
.m-pin circle { fill: var(--color-ink); }

/* 강조 층 — 지금 읽는 블록에 맞춰 켜진다 */
.lyr { opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.atlas[data-focus="station"] .lyr--station,
.atlas[data-focus="school"] .lyr--school,
.atlas[data-focus="park"] .lyr--park,
.atlas[data-focus="market"] .lyr--market,
.atlas[data-focus="walk"] .lyr--walk,
.atlas[data-focus="office"] .lyr--office,
.atlas[data-focus="visit"] .lyr--visit,
.atlas[data-focus="visit"] .lyr--office { opacity: 1; }
.ly-ring { fill: rgba(43, 50, 56, .05); stroke: var(--color-ink); stroke-width: 2.5; stroke-dasharray: 10 8; }
.ly-ring--office { fill: rgba(244, 166, 42, .22); stroke: var(--color-route); stroke-dasharray: none; stroke-width: 3; }
.ly-bus { fill: none; stroke: var(--color-bus); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.ly-stop circle { fill: var(--color-bus); stroke: #fff; stroke-width: 3; }
.ly-stop text { fill: #fff; font: 800 12px var(--font); text-anchor: middle; }
.ly-tag rect { fill: var(--color-ink); }
.ly-tag text { fill: #fff; font: 700 17px var(--font-display); text-anchor: middle; }
.ly-outline { fill: none; stroke: var(--color-route); stroke-width: 5; }
.ly-route { fill: none; stroke: var(--color-route); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: .1 13; }
.ly-zebra { fill: rgba(244, 166, 42, .25); stroke: var(--color-route); stroke-width: 4; }
.ly-front { fill: none; stroke: var(--color-route); stroke-width: 9; stroke-linecap: round; opacity: .85; }
.ly-flag circle { fill: var(--color-route); stroke: #fff; stroke-width: 3; }
.ly-flag path { fill: none; stroke: var(--color-ink); stroke-width: 3; stroke-linejoin: round; }
.atlas[data-focus="park"] .m-park__fill, .atlas[data-focus="park"] .m-hill__fill { fill: #ADCE8C; }
.m-park__fill, .m-hill__fill { transition: fill .45s ease; }

/* 생활권(가~바) */
.zone rect { fill: var(--color-lamp); fill-opacity: 0; stroke: var(--color-ink); stroke-opacity: 0; stroke-width: 2.5; stroke-dasharray: 9 7; transition: fill-opacity .4s ease, stroke-opacity .4s ease; }
.zone__badge, .zone__name { opacity: 0; transition: opacity .35s ease; }
.zone__badge circle { fill: #fff; stroke: var(--color-ink); stroke-width: 2.5; transition: fill .35s ease; }
.zone__badge text { font: 700 19px var(--font-display); text-anchor: middle; fill: var(--color-ink); }
.zone__name { font: 700 19px var(--font-display); fill: var(--color-ink); paint-order: stroke; stroke: #fff; stroke-width: 5px; stroke-linejoin: round; }
.atlas[data-focus="overview"] .zone rect { stroke-opacity: .3; }
.atlas[data-focus="overview"] .zone__badge { opacity: .9; }
.atlas[data-focus="zones"] .zone rect { stroke-opacity: .35; }
.atlas[data-focus="zones"] .zone__badge { opacity: 1; }
.atlas[data-focus="zones"] .zone.is-part rect { fill-opacity: .1; stroke-opacity: .75; }
.atlas[data-focus="zones"] .zone.is-full rect { fill-opacity: .2; stroke-opacity: 1; stroke-dasharray: none; }
.atlas[data-focus="zones"] .zone.is-full .zone__name,
.atlas[data-focus="zones"] .zone.is-part .zone__name,
.atlas[data-focus="zones"] .zone.is-hover .zone__name { opacity: 1; }
.atlas[data-focus="zones"] .zone.is-full .zone__badge circle { fill: var(--color-lamp); }
.atlas[data-focus="zones"] .zone.is-hover rect { stroke-opacity: 1; stroke-width: 5; stroke-dasharray: none; }
/* 창문 불빛: 맞는 구역의 건물이 하나씩 켜진다 */
.atlas[data-focus="zones"] .bld rect { fill: #E4DED0; }
.atlas[data-focus="zones"] .bld.is-part rect { fill: var(--color-lamp-soft); }
.atlas[data-focus="zones"] .bld.is-full rect { fill: var(--color-lamp); }

/* ---------------- 오른쪽 패널 ---------------- */
.panel { padding: 0 var(--gutter); }
.panel > section { max-width: 640px; }
.section { padding: 72px 0; border-top: 1.5px solid var(--color-ink); }
.section-head { margin-bottom: 30px; }
.kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 12px; font-weight: 700; font-size: .92rem; color: var(--color-muted); }
.section-head h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); margin-bottom: 12px; }
.section-head p:not(.kicker) { color: var(--color-muted); max-width: 36em; }

/* 1. 히어로 */
.hero { padding: 40px 0 56px; }
.hero__where { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--color-muted); margin-bottom: 12px; }
.hero__where::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--color-lamp); border: 1.5px solid var(--color-ink); }
.hero__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: 1.2; letter-spacing: -.025em; margin-bottom: 18px; }
.hero__lead { max-width: 32em; margin-bottom: 26px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.hero__hint { font-size: var(--fs-small); color: var(--color-muted); margin-bottom: 28px; }
.hint-pc { display: none; }
.hero__facts { margin: 0; border-top: 1.5px solid var(--color-ink); }
.hero__facts div { display: grid; grid-template-columns: 5.5em 1fr; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--color-line); }
.hero__facts dt { font-weight: 700; }
.hero__facts dd { margin: 0; color: var(--color-muted); font-variant-numeric: tabular-nums; }

/* 등장: 보이는 상태가 기본, has-motion 일 때만 숨겼다 보여 준다 */
.has-motion [data-hero-item] { opacity: 0; transform: translateY(16px); }
.has-motion .is-ready [data-hero-item] { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.has-motion .is-ready [data-hero-item]:nth-child(2) { transition-delay: .08s; }
.has-motion .is-ready [data-hero-item]:nth-child(3) { transition-delay: .16s; }
.has-motion .is-ready [data-hero-item]:nth-child(4) { transition-delay: .24s; }
.has-motion .is-ready [data-hero-item]:nth-child(5) { transition-delay: .3s; }
.has-motion .is-ready [data-hero-item]:nth-child(6) { transition-delay: .36s; }
.has-motion .reveal { opacity: 0; transform: translateY(20px); }
.has-motion .reveal.is-in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }

/* 2. 동네 안내 */
.step { padding: 30px 0; border-top: 1px solid var(--color-line); }
.step__legend { display: flex; align-items: center; gap: 9px; font-size: var(--fs-small); font-weight: 600; color: var(--color-muted); margin-bottom: 10px; }
.step h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.55rem; margin-bottom: 10px; }
.step__facts { list-style: none; margin: 18px 0 0; padding: 0; }
.step__facts li { display: grid; grid-template-columns: 7.2em 1fr; gap: 10px; padding: 9px 0; border-top: 1px dashed rgba(43, 50, 56, .25); font-size: .98rem; }
.step__facts b { font-weight: 700; }
.step__facts span { color: var(--color-muted); }

/* 3. 생활권 찾기 */
.conds fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.conds legend { width: 100%; margin-bottom: 10px; font-weight: 700; }
.conds legend small { font-weight: 500; color: var(--color-muted); margin-left: 6px; }
.cond { position: relative; cursor: pointer; }
.cond input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cond span { display: flex; flex-direction: column; min-height: 58px; padding: 8px 14px 8px 38px; border-radius: var(--radius); border: 1.5px solid var(--color-ink); background: var(--color-paper); line-height: 1.35; transition: background-color .18s ease; position: relative; }
.cond span::before { content: ""; position: absolute; left: 12px; top: 13px; width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--color-ink); background: #fff; }
.cond b { font-size: .98rem; }
.cond small { font-size: .78rem; color: var(--color-muted); margin-top: 2px; }
.cond input:checked + span { background: var(--color-lamp); }
.cond input:checked + span::before { background: var(--color-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.cond input:checked + span small { color: var(--color-ink); }
.cond input:focus-visible + span { outline: 3px solid var(--color-route); outline-offset: 2px; }
.finder__summary { margin: 22px 0 14px; padding: 12px 14px; border-left: 4px solid var(--color-lamp); background: var(--color-mapsheet); border-radius: 0 var(--radius) var(--radius) 0; font-weight: 600; }
.zones { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.zcard { position: relative; padding: 18px 18px 16px; border: 1.5px solid var(--color-line); border-radius: var(--radius); background: var(--color-paper); transition: background-color .3s ease, border-color .3s ease, opacity .3s ease; }
.zcard__head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.zcard__badge { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--color-ink); background: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; transition: background-color .3s ease; }
.zcard h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; }
.zcard__match { margin-left: auto; font-size: .82rem; font-weight: 700; color: var(--color-muted); white-space: nowrap; }
.zcard__type { font-size: var(--fs-small); color: var(--color-muted); margin-bottom: 10px; }
.zcard__tags { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.zcard__tags li { padding: 1px 9px; border-radius: 6px; border: 1px solid var(--color-line); font-size: .8rem; font-weight: 600; color: var(--color-muted); }
.zcard__tags li.is-hit { background: var(--color-ink); border-color: var(--color-ink); color: #fff; }
.zcard__good { margin-bottom: 6px; }
.zcard__but { font-size: .94rem; color: var(--color-muted); }
.zcard__but b { color: var(--color-ink); margin-right: 4px; }
.zcard__see { margin-top: 10px; min-height: 40px; padding: 0 12px; border: 1.5px solid var(--color-ink); border-radius: 8px; background: transparent; font: inherit; font-size: .88rem; font-weight: 700; color: var(--color-ink); cursor: pointer; }
.zcard__see:hover { background: var(--color-mapsheet); }
.zcard.is-full { border-color: var(--color-ink); background: #FFF6E3; }
.zcard.is-full .zcard__badge { background: var(--color-lamp); }
.zcard.is-full .zcard__match { color: #9A5310; }
.zcard.is-part .zcard__badge { background: var(--color-lamp-soft); }
.zcard.is-none { opacity: .62; }
.zcard.is-picked { border-color: var(--color-route); outline: 2px solid var(--color-route); outline-offset: 1px; opacity: 1; }
.finder__next { margin-top: 24px; display: grid; gap: 12px; justify-items: start; padding: 20px; border: 1.5px solid var(--color-ink); border-radius: var(--radius); background: var(--color-mapsheet); }
.finder__next p { font-weight: 600; }
.finder__note { margin-top: 14px; font-size: var(--fs-small); color: var(--color-muted); }

/* 4. 상담 과정 */
.steps { list-style: none; margin: 0; padding: 0; position: relative; }
.steps li { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding-bottom: 26px; }
.steps li:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 4px; border-left: 2px dotted var(--color-route); }
.steps__no { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--color-ink); background: var(--color-paper); font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; }
.steps li:nth-child(2) .steps__no { background: var(--color-lamp); }
.steps h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); margin: 8px 0 4px; }
.steps p { color: var(--color-muted); }

/* 5. 사무소 */
.agent { display: grid; grid-template-columns: 104px 1fr; gap: 18px; align-items: start; padding: 20px; border: 1.5px solid var(--color-ink); border-radius: var(--radius); margin-bottom: 18px; }
.agent__photo { width: 104px; height: auto; }
.agent__role { font-size: var(--fs-small); font-weight: 700; color: var(--color-muted); }
.agent__name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; margin: 2px 0 8px; }
.agent__note { color: var(--color-muted); font-size: .98rem; }
.office__grid { display: grid; gap: 18px; }
.hours, .sign { padding: 20px; border: 1.5px solid var(--color-line); border-radius: var(--radius); }
.hours h3, .sign h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); margin-bottom: 10px; }
.hours table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours th, .hours td { text-align: left; padding: 9px 6px; border-bottom: 1px solid var(--color-line); }
.hours th { font-weight: 700; white-space: nowrap; }
.hours td { white-space: nowrap; }
.hours tr.is-today { background: #FFF1D3; }
.hours tr.is-today th::after { content: "오늘"; margin-left: 6px; padding: 0 6px; border-radius: 5px; background: var(--color-lamp); font-size: .75rem; vertical-align: 1px; }
.hours__note, .sign__note { margin-top: 10px; font-size: var(--fs-small); color: var(--color-muted); }
.sign dl { margin: 0; }
.sign dl div { display: grid; grid-template-columns: 5.5em 1fr; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--color-line); font-size: .95rem; }
.sign dt { font-weight: 700; }
.sign dd { margin: 0; }

/* 6. FAQ */
.qa { border-bottom: 1.5px solid var(--color-ink); }
.qa:first-child { border-top: 1.5px solid var(--color-ink); }
.qa h3 { font-size: 1.05rem; }
.qa button { width: 100%; display: flex; justify-content: space-between; gap: 16px; align-items: center; text-align: left; padding: 18px 2px; border: 0; background: none; font: inherit; font-weight: 700; color: inherit; cursor: pointer; line-height: 1.45; }
.qa button::after { content: ""; flex: none; width: 26px; height: 26px; border-radius: 6px; border: 1.5px solid var(--color-ink); background: linear-gradient(var(--color-ink), var(--color-ink)) center / 12px 2px no-repeat, linear-gradient(var(--color-ink), var(--color-ink)) center / 2px 12px no-repeat; transition: transform .25s ease, background-color .2s; }
.qa button[aria-expanded="true"]::after { transform: rotate(45deg); background-color: var(--color-lamp); }
.qa__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.qa__panel > div { overflow: hidden; min-height: 0; }
.qa__panel p { padding: 0 2px 18px; color: var(--color-muted); }
.qa h3:has(button[aria-expanded="true"]) + .qa__panel { grid-template-rows: 1fr; }
.no-js .qa__panel, html:not(.js) .qa__panel { grid-template-rows: 1fr; }

/* 7. 오시는 길 */
.info { margin: 0 0 22px; border-top: 1.5px solid var(--color-ink); }
.info div { display: grid; grid-template-columns: 5.5em 1fr; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--color-line); }
.info dt { font-weight: 700; }
.info dd { margin: 0; color: var(--color-muted); }
.contact { display: flex; flex-wrap: wrap; gap: 10px; }

/* 푸터 — 지도 종이색 */
.site-footer { background: var(--color-mapsheet); border-top: 1.5px solid var(--color-ink); font-size: var(--fs-small); padding: 40px var(--gutter) calc(40px + 64px + env(safe-area-inset-bottom)); color: var(--color-muted); }
.site-footer__inner { display: grid; gap: 18px; max-width: 1200px; }
.site-footer__logo { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--color-ink); margin-bottom: 10px; }
.site-footer__biz { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.site-footer__biz div { display: flex; gap: 6px; }
.site-footer__biz dt { font-weight: 700; color: var(--color-ink); }
.site-footer__biz dd { margin: 0; }
.site-footer__links { margin-top: 12px; display: flex; gap: 16px; }
.site-footer__links .strong { font-weight: 800; color: var(--color-ink); }
.site-footer__credit a { font-weight: 700; color: var(--color-ink); }

/* 모바일 하단 고정 바 */
.quickbar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr 1.3fr; background: var(--color-paper); border-top: 1.5px solid var(--color-ink); padding-bottom: env(safe-area-inset-bottom); }
.quickbar a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 58px; text-decoration: none; font-weight: 700; font-size: .93rem; }
.quickbar a + a { border-left: 1px solid var(--color-line); }
.quickbar svg { width: 20px; height: 20px; }
.quickbar__call { background: var(--color-lamp); }
body.nav-open .quickbar { visibility: hidden; }

/* ---------------- 모바일·태블릿: 지도가 헤더 아래 띠로 따라온다 ---------------- */
@media (max-width: 1023px) {
  .atlas { position: sticky; top: var(--header-h); z-index: 30; height: var(--strip-h); border-bottom: 1.5px solid var(--color-ink); }
  html.map-folded { --strip-h: 46px; }
  .atlas__compass { display: none; }
  .atlas__caption { left: 0; right: 0; bottom: 0; max-width: none; padding: 7px var(--gutter) 8px; border: 0; border-top: 1.5px solid var(--color-ink); border-radius: 0; }
  .atlas__now { font-size: .95rem; gap: 7px; }
  .atlas__now .sw { width: 18px; height: 11px; }
  .atlas__now .sw--ring { width: 13px; height: 13px; }
  .atlas__desc { font-size: .78rem; line-height: 1.45; margin-top: 1px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .atlas__fold { display: block; position: absolute; top: 8px; right: 8px; min-height: 32px; padding: 0 10px; border: 1.5px solid var(--color-ink); border-radius: 8px; background: var(--color-paper); font: inherit; font-size: .78rem; font-weight: 700; color: var(--color-ink); cursor: pointer; }
  html.map-folded .atlas__frame { visibility: hidden; }
  html.map-folded .atlas__caption { top: 0; bottom: 0; left: 0; right: 0; border: 0; border-radius: 0; display: flex; align-items: center; padding: 0 var(--gutter); }
  html.map-folded .atlas__desc { display: none; }
  html.map-folded .atlas__fold { top: 6px; }
  html.map-folded .atlas__caption { border-top: 0; }
  .panel > section, .step { scroll-margin-top: calc(var(--header-h) + var(--strip-h) + 8px); }
  .hint-mo { display: inline; }
}
@media (max-width: 1399px) {
  .header-call { display: inline-flex; }
  .menu-toggle { display: block; }
  .gnb { position: fixed; z-index: 45; left: 0; right: 0; top: var(--menu-top, var(--header-h)); bottom: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 12px var(--gutter) 40px; background: var(--color-paper); overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease, visibility 0s .2s; }
  .site-header.is-open .gnb { visibility: visible; opacity: 1; transform: none; transition: opacity .2s ease, transform .2s ease; }
  .gnb a { padding: 15px 4px; font-size: 1.1rem; border-radius: 0; border-bottom: 1px solid var(--color-line); }
  .gnb a.is-active::after { left: auto; right: 4px; top: 50%; bottom: auto; width: 10px; height: 10px; border-radius: 50%; transform: translateY(-50%); }
  .gnb__call { margin: 18px 0 0; text-align: center; border-radius: var(--radius); border-bottom: 1.5px solid var(--color-ink) !important; }
}
@media (max-width: 420px) {
  .header-call span { display: none; }
  .header-call { width: 42px; padding: 0; justify-content: center; }
  .logo small { font-size: .6rem; }
}

@media (max-width: 639px) {
  .step__facts li { grid-template-columns: 1fr; gap: 0; }
  .hero { padding-top: 28px; }
}
@media (min-width: 640px) {
  .office__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__inner { grid-template-columns: 1fr auto; align-items: end; }
}

/* ---------------- 데스크톱: 화면 분할 ---------------- */
@media (min-width: 1024px) {
  :root { --header-h: 68px; --gutter: 24px; }
  .site-header__inner { padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  .site-header__brand { padding: 0 24px; border-right: 1.5px solid var(--color-ink); height: 100%; }
  .site-header__area { display: inline-block; }
  .site-header__side { padding: 0 32px; justify-content: flex-end; }
  .hint-mo { display: none; }
  .split { display: grid; grid-template-columns: 1fr 1fr; }
  /* 지도 열 바탕: 캡처처럼 지도가 화면보다 위·아래에 있을 때도 왼쪽이 비지 않게 */
  .split::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 50%; border-right: 1.5px solid var(--color-ink);
    background: repeating-linear-gradient(0deg, transparent 0 44px, #E3DDCB 44px 45px), repeating-linear-gradient(90deg, transparent 0 44px, #E3DDCB 44px 45px), var(--color-mapsheet); }
  .atlas { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); align-self: start; z-index: 1; }
  .panel { padding: 0 clamp(28px, 4.5vw, 80px); }
  .panel > section { max-width: 600px; scroll-margin-top: calc(var(--header-h) + 8px); }
  .step { scroll-margin-top: calc(var(--header-h) + 8px); }
  .hero { min-height: calc(100vh - var(--header-h)); display: flex; flex-direction: column; justify-content: center; padding: 56px 0 64px; }
  .hint-pc { display: inline; }
  .section { padding: 104px 0; }
  .step { min-height: 56vh; padding: 40px 0; }
  .quickbar { display: none; }
  .site-footer { padding: 40px 32px; }
}

/* 동작 줄이기 — 마지막 안전망. 3단계(색·투명도 피드백)는 다시 살린다 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover { transform: none; }
  .lyr, .bld rect, .zone rect, .zone__badge, .zone__name, .cond span, .zcard, .qa__panel { transition-duration: .2s !important; }
  .cam { transition: none !important; }
}
.is-reduced .btn:hover { transform: none; }
.is-reduced html, html.is-reduced { scroll-behavior: auto; }