
  .sec{padding-block:var(--sec)}
  .sec.alt{background:var(--alt)}   /* 섹션 구분은 배경색 교차만으로 (구분선 제거 2026-08-04) */

  /* ===== 연락 + 지도 =====
     이 페이지의 주역은 지도다. 지도를 크게 두고 연락 정보를 좌측 컬럼으로 붙인다. */
  .visit{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);gap:clamp(1.8rem,4vw,3.4rem);align-items:start}
  .vinfo{margin:0;border-top:1px solid var(--ink)}
  .vinfo .row{display:grid;grid-template-columns:5.4rem minmax(0,1fr);gap:1rem;align-items:baseline;
       padding:1.1rem 0;border-bottom:1px solid var(--line)}
  .vinfo dt{color:var(--meta);font-size:.96rem;font-weight:600}
  .vinfo dd{margin:0;font-size:1.1rem;font-weight:700;letter-spacing:-.01em}
  .vinfo a{color:var(--pine);border-bottom:1px solid var(--pine-tint)}
  .vactions{margin-top:1.6rem}
  .maplink{display:inline-flex;align-items:center;gap:.6rem;min-height:52px;padding:0 1.6rem;font:inherit;font-size:1.02rem;
       font-weight:700;color:#fff;background:var(--pine);border:0;cursor:pointer;
       transition:background var(--t-fast),transform var(--t-fast) var(--ease-out)}
  .maplink:hover{background:var(--pine-deep)}
  .maplink:active{transform:scale(.97)}
  .maplink:disabled{background:var(--charcoal);cursor:default}
  .maplink svg{width:19px;height:19px}

  .vmap{position:relative;aspect-ratio:16/11;background:var(--alt);border:1px solid var(--line);
       display:grid;place-items:center;text-align:center;color:var(--meta);padding:1.4rem;line-height:1.8}
  .vmap svg{width:38px;height:38px;color:var(--pine);opacity:.55;margin-bottom:.7rem}
  .vmap b{color:var(--ink)}
  .vmap.on{display:block;padding:0;border-color:var(--line)}
  .vmap.on iframe{width:100%;height:100%;border:0;display:block}

  /* ===== 교통 안내 = 세로 구분선 컬럼 =====
     business(모서리 마스크)·support(행 리스트)와 다른 리듬을 주려고 신문식 다단 컬럼으로 짰다. */
  .transit{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid var(--ink)}
  .transit .col{padding:clamp(1.6rem,3vw,2.4rem) clamp(1.2rem,2.4vw,2rem);border-bottom:1px solid var(--line)}
  .transit .col + .col{border-left:1px solid var(--line)}
  .transit .ic{display:block;width:34px;height:34px;color:var(--pine);margin-bottom:1rem}
  .transit .ic svg{width:100%;height:100%}
  .transit h3{font-size:1.2rem;font-weight:800;letter-spacing:-.015em;margin-bottom:.6rem}
  .transit p{font-size:1.02rem;line-height:1.8;color:var(--body)}

  @media (max-width:920px){
    .visit{grid-template-columns:1fr}
    .transit{grid-template-columns:1fr}
    .transit .col + .col{border-left:0}
  }

/* ↓ 빌드가 덧붙임 — 좁은 화면 연락처 표 (scripts/build-site.py) */
.vinfo dd{overflow-wrap:anywhere}
/* 360px 이하(옛 폰)에서는 값 칸이 210px 남짓이라 이메일과 주소가 어정쩡하게
   잘린다. 이 구간만 라벨을 값 위로 올려 한 줄을 통째로 쓰게 한다. */
@media (max-width:360px){
  .vinfo .row{grid-template-columns:1fr;gap:.15rem}
}
