/* 리조트 홈페이지(v2) — 같은 틀 + 블록. 대표 색은 --brand(리조트마다). 손님 사이트(public/site)와 관리자 미리 보기가 같이 쓴다(D-059). */
.st-root { --brand: #1F3D2B; --brand-ink: #fff; --st-ink: #15181C; --st-text: #3D434B; --st-sub: #6B727C; --st-line: #E6E8EB; --st-bg: #FAFAF8;
  background: var(--st-bg); color: var(--st-text); font-family: var(--font, 'Pretendard', system-ui, sans-serif); line-height: 1.6; }
.st-head { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 18px; padding: 12px clamp(16px, 4vw, 48px); background: color-mix(in srgb, #fff 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--st-line); }
.st-logo { display: flex; align-items: center; text-decoration: none; color: var(--st-ink); font-size: 18px; }
.st-logo img { height: 34px; width: auto; }
.st-nav { display: flex; gap: 4px; overflow-x: auto; flex: 1; }
.st-nav a { padding: 8px 12px; border-radius: 999px; text-decoration: none; color: var(--st-text); font-weight: 600; white-space: nowrap; font-size: 15px; }
.st-nav a.on, .st-nav a:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--brand); }
.st-book { padding: 9px 16px; border-radius: 999px; background: var(--brand); color: var(--brand-ink); text-decoration: none; font-weight: 800; white-space: nowrap; }
.st-main { display: grid; gap: clamp(28px, 6vw, 72px); padding-bottom: 64px; }
.st-foot { padding: 32px clamp(16px, 4vw, 48px) 48px; background: #15181C; color: #A3A9B1; font-size: 13px; display: grid; gap: 8px; }
.st-foot-name { margin: 0; color: #fff; font-weight: 800; font-size: 15px; }
.st-foot-biz { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.st-foot-panple { margin: 0; color: #7D838B; font-size: 12px; }
@media (max-width: 720px) { .st-head { flex-wrap: wrap; } .st-nav { order: 3; width: 100%; flex: none; } }

/* 블록 공통 */
.sb { width: min(1120px, calc(100% - 32px)); margin: 0 auto; display: grid; gap: 18px; }
.sb-title { margin: 0; font-size: clamp(22px, 3vw, 30px); color: var(--st-ink); letter-spacing: -.01em; }
.sb-body p { margin: 0 0 10px; white-space: pre-wrap; }
.sb-empty { color: var(--st-sub); text-align: center; padding: 24px; border: 1px dashed var(--st-line); border-radius: 12px; }
.sb-noimg { background: repeating-linear-gradient(135deg, #EEF0F2 0 12px, #F5F6F7 12px 24px); min-height: 160px; border-radius: 12px; }
.sb-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.sb-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--brand); color: var(--brand); text-decoration: none; font-weight: 700; background: #fff; }
.sb-btn-main { background: var(--brand); color: var(--brand-ink); }
.sb-btn-big { min-height: 52px; padding: 0 24px; font-size: 16px; }
.sb-grid { display: grid; gap: 16px; }
.sb-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sb-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .sb-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sb-grid-2, .sb-grid-3 { grid-template-columns: minmax(0, 1fr); } }
.sb-slider { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 16px; }
.sb-slide { scroll-snap-align: start; }

/* 첫 화면 */
.sb-hero { width: 100%; position: relative; }
.sb-hero-img { width: 100%; height: clamp(320px, 62vh, 640px); object-fit: cover; display: block; border-radius: 0; }
.sb-hero-full .sb-hero-text, .sb-hero-slider .sb-hero-text { position: absolute; inset: auto 0 0 0; padding: clamp(20px, 5vw, 56px); color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); }
.sb-hero-text h1 { margin: 0 0 8px; font-size: clamp(28px, 5vw, 52px); line-height: 1.2; letter-spacing: -.02em; }
.sb-hero-text p { margin: 0 0 16px; font-size: clamp(15px, 2vw, 19px); }
.sb-hero-full .sb-btn:not(.sb-btn-main), .sb-hero-slider .sb-btn:not(.sb-btn-main) { background: rgba(255, 255, 255, .92); }
.sb-hero-split { width: min(1120px, calc(100% - 32px)); grid-template-columns: 1.2fr 1fr; align-items: center; margin-top: 24px; }
.sb-hero-split .sb-hero-img { height: clamp(260px, 48vh, 520px); border-radius: 20px; }
.sb-hero-split h1 { color: var(--st-ink); }
@media (max-width: 760px) { .sb-hero-split { grid-template-columns: minmax(0, 1fr); } }

/* 소개 글 */
.sb-text-center { text-align: center; max-width: 760px; }
.sb-text-center .sb-btns { justify-content: center; }
.sb-text-side { grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(18px, 4vw, 48px); }
.sb-text-right .sb-side-img { order: 2; }
.sb-side-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }
@media (max-width: 760px) { .sb-text-side { grid-template-columns: minmax(0, 1fr); } .sb-text-right .sb-side-img { order: 0; } }
.sb-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.sb-stats li { display: grid; gap: 2px; padding: 18px; background: #fff; border: 1px solid var(--st-line); border-radius: 14px; text-align: center; }
.sb-stats b { font-size: 28px; color: var(--brand); }
.sb-stats span { color: var(--st-sub); font-size: 14px; }

/* 객실 */
.sb-room { display: grid; background: #fff; border: 1px solid var(--st-line); border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit; }
.sb-room-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; min-height: 0; }
.sb-room-body { padding: 14px 16px 16px; display: grid; gap: 4px; }
.sb-room-body h3, .sb-room-page h1 { margin: 0; color: var(--st-ink); }
.sb-room-meta { margin: 0; color: var(--st-sub); font-size: 13.5px; }
.sb-room-sum { margin: 0; font-size: 14px; }
.sb-room-price { margin: 0; color: var(--brand); font-weight: 800; }
.sb-list { display: grid; gap: 16px; }
.sb-list .sb-room { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
@media (max-width: 640px) { .sb-list .sb-room { grid-template-columns: minmax(0, 1fr); } }
.sb-group { display: grid; gap: 10px; }
.sb-group-title { margin: 8px 0 0; color: var(--brand); }
.sb-room-page .sb-hero-img { border-radius: 16px; height: clamp(240px, 50vh, 520px); }
.sb-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sb-tags li { padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 8%, #fff); color: var(--brand); font-size: 13px; font-weight: 600; }

/* 사진 */
.sb-fig { margin: 0; display: grid; gap: 6px; }
.sb-fig img, .sb-fig .sb-noimg { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.sb-fig figcaption { font-size: 13px; color: var(--st-sub); }
.sb-gallery-single .sb-fig img { aspect-ratio: 16 / 9; }

/* 시설 · 서비스 */
.sb-card { display: grid; gap: 6px; }
.sb-card-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.sb-card h3 { margin: 4px 0 0; color: var(--st-ink); font-size: 17px; }
.sb-card p { margin: 0; font-size: 14px; }
.sb-icons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.sb-icons li { display: grid; gap: 2px; padding: 14px 16px; background: #fff; border: 1px solid var(--st-line); border-left: 4px solid var(--brand); border-radius: 12px; }
.sb-icons b { color: var(--st-ink); }
.sb-cards-table table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; }
.sb-cards-table th, .sb-cards-table td { padding: 12px 14px; border-bottom: 1px solid var(--st-line); text-align: left; vertical-align: top; }
.sb-cards-table th { width: 30%; color: var(--st-ink); background: color-mix(in srgb, var(--brand) 5%, #fff); }

/* 오시는 길 */
.sb-map-box { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; padding: 20px; background: #fff; border: 1px solid var(--st-line); border-radius: 16px; }
@media (max-width: 760px) { .sb-map-box { grid-template-columns: minmax(0, 1fr); } }
.sb-addr { margin: 0 0 10px; font-weight: 700; color: var(--st-ink); }
.sb-dirs { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.sb-contact { display: grid; grid-template-columns: 80px 1fr; gap: 6px 10px; margin: 0; }
.sb-contact dt { color: var(--st-sub); }
.sb-contact dd { margin: 0; }

/* 버튼 블록 */
.sb-cta { grid-template-columns: 1fr auto; align-items: center; padding: clamp(20px, 4vw, 36px); border-radius: 20px; background: var(--brand); color: var(--brand-ink); }
.sb-cta h2 { margin: 0; font-size: clamp(20px, 3vw, 26px); }
.sb-cta p { margin: 4px 0 0; opacity: .9; }
.sb-cta .sb-btn { background: #fff; color: var(--brand); border-color: #fff; }
.sb-cta-card { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; }
@media (max-width: 640px) { .sb-cta { grid-template-columns: minmax(0, 1fr); } }