/* 매장: 회벽처럼 밝은 건축 사진집 */
.st-hero { padding-top: clamp(110px, 16vh, 170px); }
.st-hero__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; padding-inline: var(--gutter); margin-bottom: clamp(28px, 4vw, 56px); }
.st-hero__pick { display: grid; gap: 12px; justify-items: end; }
.st-hero__frame { position: relative; height: 92svh; overflow: hidden; background: #1c1612; will-change: clip-path; }

.st-intro { padding-block: clamp(70px, 9vw, 150px) clamp(40px, 5vw, 70px); display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px 60px; align-items: end; }

.st-gallery { overflow: hidden; }
.st-gallery__stick { height: 100svh; display: flex; align-items: center; overflow: hidden; }
.st-gallery__track { display: flex; gap: clamp(14px, 2vw, 28px); width: max-content; padding-inline: var(--gutter); will-change: transform; }
.st-shot { position: relative; flex: none; height: 74svh; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: #d7d1c7; }
.st-shot:first-child { aspect-ratio: 16 / 10; }
.st-shot img { width: 116%; max-width: none; height: 100%; margin-left: -8%; object-fit: cover; }

.st-info { display: grid; grid-template-columns: 1.1fr 1fr; gap: 50px clamp(40px, 7vw, 120px); padding-block: clamp(60px, 8vw, 130px); }
.st-table { margin-top: 26px; border-top: 1px solid var(--line); }
.st-table > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.st-table dt { color: var(--muted); font-size: 14px; padding-top: 2px; }
.st-table dd { font-weight: 500; }

.st-map { width: 100%; margin-top: 26px; background: #fff; border-radius: var(--radius); padding: 14px; }
.st-seat rect { fill: #f3efe8; stroke: #181410; stroke-width: .35; transition: fill .3s; }
.st-seat text { font-size: 3.6px; font-weight: 600; fill: #181410; font-family: var(--body); }
.st-seat .st-seat__cap { font-size: 2.8px; font-weight: 400; fill: #6d655b; }
.st-seat:hover rect, .st-seat:focus rect { fill: #f6d8c9; }
.st-seat--portal rect { fill: #e3dfd8; stroke-dasharray: 1.2 1; }
.st-legend { display: flex; gap: 18px; margin-top: 12px; font-size: 13px; color: var(--muted); }
.st-legend li { display: flex; align-items: center; gap: 6px; }
.st-legend li::before { content: ''; width: 14px; height: 14px; border-radius: 3px; background: #f3efe8; border: 1px solid #181410; }
.st-legend li[data-k='portal']::before { background: #e3dfd8; border-style: dashed; }

.st-way { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px clamp(40px, 6vw, 100px); padding-block: 0 clamp(90px, 11vw, 170px); align-items: start; }
.st-way__map { border-radius: var(--radius); overflow: hidden; }
.st-loc { width: 100%; height: auto; }
.st-way__text { display: grid; gap: 16px; justify-items: start; }
.st-way__sub { margin-top: 20px; }
.st-news { display: grid; width: 100%; border-top: 1px solid var(--line); }
.st-news a { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); transition: color .3s; }
.st-news a:hover { color: var(--accent); }
.st-news span { color: var(--muted); font-size: 13px; padding-top: 2px; }
.st-news b { font-weight: 500; }
.st-way__text .btn { margin-top: 12px; }

@media (max-width: 899px) {
  .st-hero__pick { justify-items: start; }
  .st-hero__frame { height: 68svh; }
  .st-intro, .st-info, .st-way { grid-template-columns: 1fr; }
  .st-gallery__stick { height: auto; overflow-x: auto; padding-block: 10px; scrollbar-width: none; scroll-snap-type: x mandatory; }
  .st-gallery__track { will-change: auto; }
  .st-shot, .st-shot:first-child { height: 60svh; aspect-ratio: 4 / 5; scroll-snap-align: center; }
  .st-shot img { width: 100%; margin: 0; }
  .st-table > div { grid-template-columns: 84px 1fr; }
}