[data-bg="ink"]{--ln:rgba(255,255,255,.14);--sub:rgba(245,244,240,.66)}
[data-bg="paper"]{--ln:rgba(11,12,16,.14);--sub:rgba(11,12,16,.66)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* 첫 화면 */
.ab-hero{position:relative;background:#f4f3f1}
.ab-hero .abh{height:100vh;height:100svh;min-height:520px}
.ab-foot{position:absolute;left:40px;right:40px;bottom:26px;display:flex;justify-content:space-between;color:#fff;mix-blend-mode:difference;z-index:3;pointer-events:none}

/* 표지 */
.cover{padding:24vh 0 18vh}
.cover .mono{display:block;opacity:.6}
.cover h2{font-size:clamp(52px,8.4vw,150px);font-weight:700;letter-spacing:-.06em;line-height:1;margin:5vh 0 6vh}
.cover-b{display:grid;grid-template-columns:4fr 8fr;gap:40px;border-top:1px solid var(--ln);padding-top:28px}
.cover-b p{font-size:clamp(20px,1.7vw,26px);line-height:1.6;letter-spacing:-.02em;max-width:760px}

/* 질문 */
.qa{display:grid;grid-template-columns:4fr 8fr;gap:40px;padding:16vh 0}
.q{position:sticky;top:110px;align-self:start}
.q .mono{display:block;opacity:.6;margin-bottom:22px}
.q h3{font-size:clamp(26px,2.4vw,40px);font-weight:700;letter-spacing:-.045em;line-height:1.25}
.a p{font-size:clamp(20px,1.65vw,26px);line-height:1.75;letter-spacing:-.02em;max-width:820px}
.a p + p{margin-top:1.3em}
.a b{font-weight:700;box-shadow:inset 0 -.38em 0 rgba(217,197,154,.45)}
[data-bg="ink"] .a b{box-shadow:inset 0 -.38em 0 rgba(217,197,154,.28)}

/* 질문 사이: 사진 + 대표 말 한 줄 */
.shot{position:relative;height:120vh;overflow:hidden}
.shot-pic{position:absolute;inset:0;clip-path:inset(12% 14% 12% 14%)}
.shot-pic img{position:absolute;inset:-10% 0;width:100%;height:120%;object-fit:cover;filter:brightness(.7)}
.shot-q{position:absolute;left:40px;right:40px;bottom:12vh;color:#fff;font-size:clamp(34px,4.6vw,80px);font-weight:700;letter-spacing:-.05em;line-height:1.12;max-width:1100px}
.shot-q .w{opacity:.2;display:inline}
@media (min-width:861px){.shot-pic img.pos-l{object-position:8% 50%}}

/* 끝: 숫자 띠 + 사무실 */
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ln);border-bottom:1px solid var(--ln);margin-top:8vh}
.facts div{padding:30px 24px 30px 0}
.facts div + div{border-left:1px solid var(--ln);padding-left:24px}
.facts b{display:block;font-size:clamp(40px,4vw,68px);font-weight:700;letter-spacing:-.05em;line-height:1}
.facts b i{font-style:normal;font-size:.5em;margin-left:4px;color:var(--navy)}
.facts div > span{display:block;margin-top:12px;font-size:14px;color:var(--sub)}
.end-h{font-size:clamp(36px,4.6vw,78px);font-weight:700;letter-spacing:-.05em;line-height:1.06}
.of{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:8vh}
.of div{border-top:1px solid var(--ln);padding-top:18px;font-size:16px;line-height:1.6}
.of .mono{display:block;opacity:.6;margin-bottom:10px}

/* 오시는 길: 왼쪽 지도(흑백 톤, 각진 모서리) + 오른쪽 정보 줄 */
.loc{display:grid;grid-template-columns:7fr 5fr;gap:40px;margin-top:8vh;align-items:stretch}
.loc-map{position:relative;min-height:460px;background:#d9d8d4;border:1px solid var(--ln);overflow:hidden;z-index:0}
.loc-map .leaflet-tile-pane{filter:grayscale(1) contrast(1.05) brightness(1.02)}
.loc-map img.leaflet-tile{width:256.5px!important;height:256.5px!important;mix-blend-mode:normal!important} /* 지도 조각 경계에 가는 흰 줄이 보여(Leaflet 기본 plus-lighter 섞기) 보통 섞기 + 반 픽셀 겹침 */
.loc-map .leaflet-control-attribution{font-size:10px;background:rgba(245,244,240,.8)}
.loc-map .leaflet-bar a{border-radius:0!important;color:var(--ink)}
.loc-map .leaflet-bar{border-radius:0;box-shadow:none;border:1px solid rgba(11,12,16,.3)}
.loc-pin{width:18px;height:18px;background:var(--ink);border:3px solid #fff;box-shadow:0 0 0 1px var(--ink)}
.loc-map .loc-tag{font-family:var(--mono);font-size:11px;letter-spacing:.08em;background:var(--ink);color:var(--white);border:0;border-radius:0;padding:6px 9px;box-shadow:none}
.loc-map .loc-tag::before{display:none}
.loc-info{display:flex;flex-direction:column}
.loc-info > div{border-top:1px solid var(--ln);padding:16px 0 18px;font-size:16px;line-height:1.6}
.loc-info > div:last-child{border-bottom:1px solid var(--ln)}
.loc-info .mono{display:block;opacity:.6;margin-bottom:8px}
.loc-info a{border-bottom:1px solid currentColor}
.loc-go{margin-top:8px;font-size:14px;color:var(--sub)}
.loc-go a{color:var(--ink)}
.loc-copy{margin-left:6px;background:transparent;border:1px solid rgba(11,12,16,.32);border-radius:0;font:600 12px var(--sans);color:var(--ink);padding:3px 8px;cursor:pointer;white-space:nowrap;vertical-align:2px}
.loc-copy:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}

@media (max-width:860px){
  .ab-foot{left:20px;right:20px}
  .cover{padding:14vh 0 10vh}
  .cover-b,.qa,.of,.loc{grid-template-columns:1fr;gap:16px}
  .loc-map{min-height:320px}
  .qa{padding:10vh 0}
  .q{position:static}
  .shot{height:90vh}
  .shot-pic{clip-path:inset(8% 0 8% 0)}
  .shot-q{left:20px;right:20px;font-size:32px}
  .facts{grid-template-columns:1fr 1fr}
  .facts div:nth-child(3){border-left:0;padding-left:0}
  .facts div:nth-child(n+3){border-top:1px solid var(--ln)}
}