/* 방문 · 문의 (design 08 · desktop 2431:3988, mobile 2433:4208) */

/* §1 band: title stack (cols 1–7, right-aligned) + room photo (cols 9–14) */
.vs-hero { z-index: 1; }
.vs-hero-g { display: grid; grid-template-columns: minmax(0, 720fr) minmax(0, 536fr); column-gap: 16px; align-items: start; min-height: 520px; }
.vs-title { margin: 92px 0 0 16px; width: max-content; max-width: 100%; display: flex; flex-direction: column; align-items: flex-end; gap: 20px; }
.vs-lede { font: 400 22px/34px var(--sans); text-align: right; }
.vs-room { width: 100%; height: 520px; object-fit: cover; }
.vs-monk { position: absolute; z-index: 2; pointer-events: none; height: auto; }
.vs-monk-guide { left: 52px; bottom: -58px; width: 212px; }

/* §2 visit info: two lists of rows + a button under each */
.vs-info .in { display: flex; flex-direction: column; gap: 32px; }
.vs-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; align-items: start; }
.vs-col { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; min-width: 0; }
.vs-col .vrow { min-height: 100px; }
.vs-col .vrow .k { width: 156px; }
.vs-col .vrow .k span { width: auto; }
.vs-col .vrow .v { max-width: none; }
.vs-monk-lantern { right: 60px; bottom: -110px; width: 220px; }

/* §3 getting here */
.vs-getting { z-index: 0; }
.vs-how { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
.vs-how > div { display: flex; flex-direction: column; gap: 20px; padding: 24px 0 8px; border-top: 1px solid rgba(6, 43, 28, .2); }
.vs-how h3 { display: flex; align-items: center; gap: 12px; font: 600 20px/30px var(--sans); }
.vs-how h3 .i { --s: 28px; color: var(--deep); }
.vs-p { width: 28px; height: 28px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; background: var(--deep); color: var(--paper); font: 600 20px/26px var(--sans); }
.vs-how p { font: 400 17px/28px var(--sans); }

/* §4 from the temple gate: heading + illustration, then the step-by-step directions */
.vs-way { position: relative; overflow: hidden; }
.vs-pat { position: absolute; pointer-events: none; background: 0 0 / 100% 100% no-repeat; }
.vs-pat-tr { top: 0; right: 0; width: 416px; height: 416px; background-image: url(../img/patterns/visit-joinery-tr.svg); }
.vs-pat-bl { bottom: 0; left: 0; width: 416px; height: 416px; background-image: url(../img/patterns/visit-joinery-bl.svg); }
.vs-way .in { position: relative; display: flex; flex-direction: column; gap: 40px; }
.vs-way-head { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.vs-way-tx { display: flex; flex-direction: column; gap: 20px; }
.vs-way-tx p { font: 400 16px/24px var(--sans); }
.vs-temple { width: 330px; height: auto; flex: none; margin-right: 0; }

.vs-steps { position: relative; }
.vs-stage { display: flex; flex-direction: column; gap: 40px; }
.vs-step { display: grid; grid-template-columns: minmax(0, 800fr) minmax(0, 424fr); column-gap: 48px; align-items: start; }
.vs-scene { width: 100%; height: 560px; object-fit: cover; border-radius: 16px; }
.vs-tx { display: flex; flex-direction: column; gap: 24px; padding-top: 24px; color: #000; }
.vs-n { font: 400 18px/27px var(--sans); }
.vs-t { font: 600 32px/48px var(--sans); }
.vs-d { font: 400 20px/30px var(--sans); max-width: 400px; }
/* stepper mode (JS on): slides stack and cross-fade (DISSOLVE 250 ms ease-out) */
.vs-steps.js .vs-stage { display: grid; }
.vs-steps.js .vs-step { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .25s ease-out, visibility 0s linear .25s; }
.vs-steps.js .vs-step.on { opacity: 1; visibility: visible; transition: opacity .25s ease-out, visibility 0s; }
.vs-ctl { position: absolute; right: 0; bottom: 24px; width: calc((100% - 48px) * 424 / 1224); display: flex; flex-direction: column; gap: 28px; }
.vs-bars { display: flex; gap: 8px; }
.vs-bar { flex: 1 1 0; height: 12px; border-radius: 6px; background: rgba(0, 0, 0, .18); position: relative; }
.vs-bar::before { content: ""; position: absolute; inset: -16px 0; }
.vs-bar[aria-current="step"] { background: #000; }
.vs-bar:hover { background: rgba(0, 0, 0, .4); }
.vs-bar[aria-current="step"]:hover { background: #000; }
.vs-pn { display: flex; gap: 12px; }
.vs-circ { width: 64px; height: 64px; border-radius: 999px; border: 1px solid #000; display: inline-flex; align-items: center; justify-content: center; font: 400 28px/42px var(--sans); color: #000; }
.vs-circ:hover:not(:disabled) { background: rgba(0, 0, 0, .06); }
.vs-circ:disabled { opacity: .22; cursor: default; }

/* §5 contact */
.vs-c-head { display: flex; flex-direction: column; gap: 20px; }
.vs-contact .form { gap: 24px; }
.vs-policy { text-decoration: underline; text-underline-offset: 3px; }
.vs-side { position: relative; }
.vs-monk-bow { position: absolute; left: calc(100% * 144 / 536); top: 358px; width: 280px; height: auto; transform: scaleX(-1); pointer-events: none; }
.vs-contact .g14 { min-height: 708px; }

@media (max-width: 1180px) and (min-width: 900px) {
  .vs-monk-lantern, .vs-monk-guide { display: none; }
}

/* ---------- mobile ---------- */
@media (max-width: 899px) {
  .vs-hero-g { display: flex; flex-direction: column; gap: 18px; min-height: 0; }
  .vs-title { margin: 0; width: auto; align-items: flex-start; gap: 18px; }
  .vs-title .gl-2 { --h: 96px; }
  .vs-lede { font: 400 18px/29px var(--sans); text-align: left; }
  .vs-room { height: auto; aspect-ratio: 350 / 300; }
  .vs-monk-guide { left: auto; right: 20px; bottom: -114px; width: 100px; transform: scaleX(-1); }

  .vs-info .in { gap: 20px; }
  .vs-cols { display: flex; flex-direction: column; align-items: flex-start; }
  .vs-col, .vs-col .vrows { display: contents; }
  .vs-col .vrow { min-height: 0; width: 100%; }
  .vs-col .vrow .k { width: auto; }
  .vs-o1 { order: 1; } .vs-o2 { order: 2; } .vs-o3 { order: 3; } .vs-o4 { order: 4; } .vs-o5 { order: 5; }
  .vs-o6 { order: 6; margin-top: 20px; }
  .vs-maps { flex-direction: column; align-items: flex-start; gap: 10px; }
  .vs-o7 { order: 7; margin-top: 10px; }

  .vs-how { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .vs-how > div { gap: 12px; padding: 20px 0 8px; }
  .vs-how p { font: 400 15px/24px var(--sans); }
  .vs-monk-lantern-m { right: 24px; top: -68px; width: 88px; }

  .vs-way .in { gap: 24px; }
  .vs-pat-tr { width: 132px; height: 132px; background-image: url(../img/patterns/visit-joinery-tr-m.svg); }
  .vs-way-head { flex-direction: column-reverse; align-items: flex-start; gap: 24px; }
  .vs-way-tx { gap: 24px; }
  .vs-way-tx p { font: 400 15px/24px var(--sans); }
  .vs-temple { width: 160px; }
  .vs-step { display: flex; flex-direction: column; gap: 20px; }
  .vs-scene { height: auto; aspect-ratio: 350 / 250; }
  .vs-tx { gap: 8px; padding-top: 0; }
  .vs-n { font: 400 15px/24px var(--sans); }
  .vs-t { font: 600 24px/36px var(--sans); }
  .vs-d { font: 400 15px/24px var(--sans); max-width: none; }
  .vs-steps.js .vs-stage { padding-bottom: 124px; }
  .vs-ctl { bottom: 0; width: 100%; gap: 20px; }
  .vs-circ { width: 56px; height: 56px; }

  .vs-contact .form { gap: 18px; }
  .vs-contact .stack.contact-form { --gap: 18px; }
  .vs-c-head p { font: 400 16px/26px var(--sans); }
  .vs-contact .g14 { min-height: 0; --mgap: 18px; }
  .vs-side { display: flex; flex-direction: column; }
  .vs-side .direct { padding: 32px 24px; }
  .vs-monk-bow { position: static; align-self: flex-end; width: 160px; margin-top: 18px; }
}