/* preview.css — preview area, device-frame, 테넌트 사이트 (ps-*), 섹션 스타일 */

/* ===== PREVIEW ===== */
.preview-area {
  background: var(--bg-canvas);
  background-image: radial-gradient(circle, rgba(20,24,26,.04) 1px, transparent 1px);
  background-size: 16px 16px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 80px;
  min-height: 0;
}
.preview-area::-webkit-scrollbar { width: 10px; height: 10px; }
.preview-area::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; border: 2px solid var(--bg-canvas); }


.device-frame {
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow-3);
  overflow: clip;
  transition: max-width .35s cubic-bezier(.4,.2,.2,1);
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  flex-shrink: 0;
}
.device-frame.tablet { max-width: 820px; }
.device-frame.mobile { max-width: 390px; }

.preview-content {
  /* 테마 변수(--t-*)는 tokens.css 의 :root 가 단일 소스.
     빌더와 home.html 은 render.js 가 #previewContent 에 STATE.theme 값을
     인라인으로 덮어쓰므로 여기서 다시 선언하지 않는다. */
  font-family: var(--font-sans);
  color: var(--t-text);
  background: var(--t-surface);
  position: relative;
}


/* === 모바일/태블릿 햄버거 메뉴 드로어 ===
   .sr-filter-sheet 기준으로 열림·닫힘 대칭 전환(.show 토글). backdrop 표준: rgba(15,23,42,.55)+blur(2px).
   빌더(render.js)는 .show 로 삽입 → 최종 상태 즉시 표시(무전환), 고객(site-chrome.js)은 rAF 로 .show 부여해 슬라이드. */
.ps-mnav-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  display: flex;
  justify-content: flex-end;                 /* 우측 앵커 — 전환 중에도 유지 위해 base 로 이동 */
  z-index: 150;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: all .2s ease-out;
}
.ps-mnav-backdrop.show { opacity: 1; visibility: visible; pointer-events: auto; }
/* 고객 standalone 페이지에서 site-chrome.js 가 주입한 드로어는 뷰포트 전체를 덮는다.
   빌더 프리뷰는 data-sc-injected 가 없으므로 위의 absolute(프리뷰 컬럼 기준)를 유지. */
.ps-mnav-backdrop[data-sc-injected] { position: fixed !important; inset: 0 !important; }
.ps-mnav-panel {
  position: sticky;
  top: 0;
  align-self: flex-start;
  width: 86%;
  max-width: 360px;
  height: calc(100vh - var(--topbar-h, 96px));
  background: var(--t-surface);
  box-shadow: -10px 0 32px rgba(0,0,0,.18);
  display: flex; flex-direction: column;
  transform: translateX(100%);               /* 오른쪽 밖 → 우→좌 슬라이드(방향 유지) */
  transition: all .2s ease-out;
}
.ps-mnav-backdrop.show .ps-mnav-panel { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .ps-mnav-backdrop, .ps-mnav-panel { transition-duration: 0s; }
}

/* Top: 로고 + 닫기 */
.ps-mnav-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
}
.ps-mnav-logo {
  height: 26px;
  width: auto;
  display: block;
}
div.ps-mnav-logo {
  width: 130px;
  background-size: contain; background-position: left center; background-repeat: no-repeat;
}
.ps-mnav-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--t-bg); border: none;
  color: var(--t-text-2);
  cursor: pointer;
  display: grid; place-items: center;
  font-family: inherit;
  transition: all .2s ease-out;
}
.ps-mnav-close:hover { background: var(--t-surface-2); color: var(--t-text); }
.ps-mnav-close svg { width: 18px; height: 18px; }

/* Body — 스크롤 가능한 본문 */
.ps-mnav-body {
  flex: 1; overflow-y: auto;
  padding: 4px 0 16px;
}

/* User card — 로그인 상태일 때 상단 강조 */
.ps-mnav-user-card {
  display: flex; align-items: center; gap: 14px;
  margin: 8px 16px 18px;
  padding: 16px 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--t-primary) 12%, transparent), color-mix(in srgb, var(--t-primary) 4%, transparent));
  border: 1px solid color-mix(in srgb, var(--t-primary) 22%, transparent);
  border-radius: 14px;
}
.ps-mnav-avatar-lg {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--t-primary); color: #fff;
  display: grid; place-items: center;
  font-weight: 800; font-size: 17px;
  flex-shrink: 0;
}
.ps-mnav-user-info { min-width: 0; }
.ps-mnav-user-name {
  font-size: 15px; font-weight: 800;
  color: var(--t-text);
  letter-spacing: -.01em;
  margin-bottom: 3px;
}
.ps-mnav-user-meta {
  font-size: 12px;
  color: var(--t-text-2);
}

/* Section grouping */
.ps-mnav-section {
  padding: 0 0 6px;
  margin-bottom: 4px;
}
.ps-mnav-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--t-text-2);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 12px 22px 8px;
}

/* Nav list — bigger, with chevron */
.ps-mnav-list {
  display: flex; flex-direction: column;
  padding: 0 8px;
}
.ps-mnav-link {
  display: flex; align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 13px 14px;
  font-size: 15px; font-weight: 600;
  color: var(--t-text);
  background: transparent; border: none;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  text-align: left;
  font-family: inherit;
  transition: all .2s ease-out;
}
.ps-mnav-link:hover { background: var(--t-bg); }
.ps-mnav-link.active {
  background: color-mix(in srgb, var(--t-primary) 10%, transparent);
  color: var(--t-primary);
  font-weight: 700;
}
.ps-mnav-chev {
  width: 16px; height: 16px;
  color: var(--t-text-2);
  flex-shrink: 0;
}
.ps-mnav-link.active .ps-mnav-chev { color: var(--t-primary); }

/* Language — 전체 너비 리스트 + 체크마크 */
.ps-mnav-lang-list {
  display: flex; flex-direction: column;
  padding: 0 8px;
}
.ps-mnav-lang-item {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  background: transparent; border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px; font-weight: 500;
  color: var(--t-text);
  cursor: pointer;
  transition: all .2s ease-out;
}
.ps-mnav-lang-item:hover { background: var(--t-bg); }
.ps-mnav-lang-item.active {
  color: var(--t-primary);
  background: color-mix(in srgb, var(--t-primary) 10%, transparent);
}
.ps-mnav-lang-name { text-align: left; }
.ps-mnav-lang-check {
  width: 18px; height: 18px;
  color: var(--t-primary);
  flex-shrink: 0;
}

/* Footer fixed CTA */
.ps-mnav-footer {
  display: flex; gap: 8px;
  padding: 14px 16px 18px;
  border-top: 1px solid var(--t-border-soft);
  background: var(--t-surface);
}
.ps-mnav-btn {
  flex: 1;
  height: 46px;
  border-radius: 8px;
  background: var(--t-surface);
  color: var(--t-text);
  border: 1px solid var(--t-border);
  font-size: 14.5px; font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all .2s ease-out;
}
.ps-mnav-btn:hover { background: var(--t-bg); border-color: var(--t-border-strong); }
.ps-mnav-btn.outline { background: var(--t-surface); }
.ps-mnav-btn.primary {
  background: var(--t-primary);
  color: #fff;
  border-color: var(--t-primary);
}
.ps-mnav-btn.primary:hover { background: var(--t-primary-strong); border-color: var(--t-primary-strong); }
.ps-mnav-btn.ghost {
  background: transparent;
  color: var(--t-text-2);
  border-color: var(--t-border);
}
.ps-mnav-btn.ghost:hover { background: var(--t-bg); color: var(--t-text); }
.ps-modal {
  background: var(--t-surface);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(20,24,26,.30);
  width: 100%; max-width: 420px;
  max-height: calc(100vh - 160px);
  overflow: hidden;
  animation: slideUp .25s cubic-bezier(.4,.2,.2,1);
  position: relative;
  display: flex; flex-direction: column;
}
.ps-modal .ps-modal-body { flex: 1; overflow-y: auto; min-height: 0; }
.ps-modal-close {
  position: absolute; top: 12px; right: 12px;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: transparent; color: var(--t-text-2);
  font-size: 18px; line-height: 1;
}
.ps-modal-close:hover { background: var(--t-bg); color: var(--t-text); }
.ps-modal-head { padding: 26px 24px 8px; }
.ps-modal-head h3 {
  margin: 0 0 6px; font-size: 18px; font-weight: 800;
  letter-spacing: -.02em; color: var(--t-text);
}
.ps-modal-head p { margin: 0; font-size: 13px; color: var(--t-text-2); }
.ps-modal-body { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.ps-form-row { display: flex; flex-direction: column; gap: 5px; }
.ps-form-row label {
  font-size: 12px; font-weight: 600; color: var(--t-text);
  letter-spacing: -.005em;
}
/* 성/이름 2분할 */
.ps-name-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* 그리드 셀에서 input 이 본래 너비로 넘쳐 잘리지 않도록 셀 폭으로 축소 허용 (TMS-A-120: 회원가입 이름 필드 잘림) */
.ps-name-grid .ps-input { min-width: 0; }
.ps-input {
  width: 100%;
  height: 42px; padding: 0 13px;
  border: 1px solid var(--t-border); border-radius: var(--t-radius);
  background: var(--t-surface); color: var(--t-text);
  font-size: 13.5px; font-family: inherit;
  transition: all .2s ease-out;
}
.ps-input:focus {
  outline: none;
  border-color: var(--t-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-primary) 14%, transparent);
}
.ps-input::placeholder { color: var(--t-text-3); }
/* 비활성 입력(인증요청·인증완료 후 잠금) — 회색 처리 (TMS-A-251) */
.ps-input:disabled, .ps-input[disabled] {
  background: var(--t-bg);
  color: var(--t-text-3);
  -webkit-text-fill-color: #9AA3AF;   /* iOS Safari: 비활성 텍스트 흐려짐 보정 */
  border-color: var(--t-border);
  cursor: not-allowed;
  opacity: 1;
}
/* 비회원 예약조회 결과/에러 */
.ps-lookup-host:empty { display: none; }
/* 회원가입 에러 — 스크롤되는 body 밖(foot 위)에 고정 노출. body padding(0 24px)과 정렬 (TMS-A-253) */
.ps-auth-err-foot { padding: 8px 24px 0; }
:is(.device-frame.mobile, body.vp-mobile) .ps-auth-err-foot { padding: 8px 20px 0; }
.ps-lookup-loading { font-size: 13px; color: var(--t-text-2); padding: 4px 0; }
.ps-lookup-error {
  font-size: 13px; color: #B00020;
  background: #FEF2F2; border: 1px solid #FECACA;
  border-radius: 8px; padding: 10px 12px;
}
.ps-lookup-result {
  border: 1px solid var(--t-border);
  border-radius: 8px; padding: 14px; background: var(--t-bg);
}
.ps-lookup-ok { font-size: 13px; font-weight: 700; color: #15803D; margin-bottom: 10px; }
.ps-lookup-dl { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ps-lookup-dl > div { display: flex; gap: 12px; font-size: 13px; }
.ps-lookup-dl dt { flex: 0 0 84px; color: var(--t-text-2); }
.ps-lookup-dl dd { margin: 0; font-weight: 600; color: var(--t-text); }
.ps-lookup-detail { margin-top: 12px; width: 100%; }
/* 비회원 예약조회 — 다건 매칭 목록 (TMS-A-255) */
.ps-lookup-list { display: flex; flex-direction: column; gap: 8px; }
.ps-lookup-item {
  display: flex; flex-direction: column; gap: 4px;
  width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--t-border); border-radius: 8px;
  padding: 12px 14px; background: var(--t-bg); font: inherit;
}
.ps-lookup-item:hover { background: var(--t-surface-2); border-color: var(--t-border-strong); }
.ps-lookup-item-main { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ps-lookup-item-main strong { font-size: 14px; color: var(--t-text); }
.ps-lookup-item-rn { font-size: 12px; color: var(--t-text-2); }
.ps-lookup-item-sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--t-text-2); }
.ps-lookup-item-status { font-weight: 600; color: #15803D; }
.ps-input-action { display: flex; gap: 8px; }
.ps-input-action .ps-input { flex: 1; min-width: 0; }
.ps-input-btn {
  flex-shrink: 0;
  height: 42px; padding: 0 14px;
  border-radius: var(--t-radius);
  background: var(--t-surface); color: var(--t-text);
  border: 1px solid var(--t-border);
  font-size: 12.5px; font-weight: 600;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: all .2s ease-out;
}
.ps-input-btn:hover:not(:disabled) { background: var(--t-bg); border-color: var(--t-border-strong); }
.ps-input-btn:disabled { opacity: .55; cursor: not-allowed; }
.ps-input-btn.ghost { background: transparent; color: var(--t-text-2); border-color: var(--t-border); }
/* 인증코드 재발송 링크 (TMS-A-251) */
.ps-auth-resend {
  margin-top: 8px; align-self: flex-start;
  background: none; border: none; padding: 0;
  font-family: inherit; font-size: 12.5px;
  color: var(--t-primary); text-decoration: underline; cursor: pointer;
}
.ps-auth-resend:disabled { color: var(--t-text-3); cursor: not-allowed; text-decoration: none; }
.ps-input-btn.done {
  background: color-mix(in srgb, var(--t-primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--t-primary) 35%, transparent);
  color: var(--t-primary);
  cursor: default;
}
.ps-phone-input { position: relative; display: flex; align-items: stretch; }
.ps-phone-cc {
  height: 42px; padding: 0 8px 0 12px;
  border: 1px solid var(--t-border); border-right: none;
  border-radius: var(--t-radius) 0 0 var(--t-radius);
  background: var(--t-surface); color: var(--t-text);
  font-size: 13px; font-family: inherit; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; cursor: pointer;
  transition: all .2s ease-out;
}
.ps-phone-cc:hover { background: var(--t-bg); }
.ps-phone-input.open .ps-phone-cc {
  border-color: var(--t-primary);
  z-index: 1;
}
.ps-phone-cc-chev { width: 10px; height: 10px; transition: all .2s ease-out; }
.ps-phone-input.open .ps-phone-cc-chev { transform: rotate(180deg); }
.ps-phone-input > .ps-input {
  flex: 1;
  border-radius: 0 var(--t-radius) var(--t-radius) 0;
  min-width: 0;
}
.ps-phone-cc-menu {
  position: absolute; top: calc(100% + 4px); left: 0;
  min-width: 220px; max-height: 240px; overflow-y: auto;
  background: var(--t-surface);
  border: 1px solid var(--t-border); border-radius: var(--t-radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  z-index: 10; padding: 4px 0;
  display: none;
}
.ps-phone-input.open .ps-phone-cc-menu { display: block; }
.ps-phone-cc-search {
  position: sticky; top: 0; z-index: 1;
  padding: 8px;
  background: var(--t-surface);
  border-bottom: 1px solid var(--t-border-soft);
}
.ps-phone-cc-search input {
  width: 100%; height: 32px;
  padding: 0 10px;
  border: 1px solid var(--t-border);
  border-radius: calc(var(--t-radius) - 1px);
  background: var(--t-bg);
  font-family: inherit; font-size: 12.5px;
  color: var(--t-text);
}
.ps-phone-cc-search input::placeholder { color: var(--t-text-3); }
.ps-phone-cc-search input:focus {
  outline: none;
  background: var(--t-surface);
  border-color: var(--t-primary);
}
.ps-phone-cc-empty {
  padding: 16px 12px;
  text-align: center;
  color: var(--t-text-2);
  font-size: 12.5px;
}
.ps-phone-cc-item {
  width: 100%; padding: 9px 12px;
  font-size: 12.5px; font-family: inherit;
  display: flex; align-items: center; gap: 10px;
  background: none; border: none; text-align: left;
  color: var(--t-text); cursor: pointer;
}
.ps-phone-cc-item:hover { background: var(--t-bg); }
.ps-phone-cc-item.active {
  background: color-mix(in srgb, var(--t-primary) 8%, transparent);
  color: var(--t-primary); font-weight: 700;
}
.ps-phone-cc-flag { font-size: 16px; line-height: 1; flex-shrink: 0; }
.ps-phone-cc-name { flex: 1; }
.ps-phone-cc-dial { color: var(--t-text-2); font-variant-numeric: tabular-nums; }
.ps-phone-cc-item.active .ps-phone-cc-dial { color: inherit; }
.ps-modal-empty {
  padding: 14px 16px;
  background: var(--t-bg);
  border: 1px dashed var(--t-border);
  border-radius: var(--t-radius);
  font-size: 12.5px; color: var(--t-text-2); line-height: var(--lh-normal);
}
.ps-modal-foot {
  padding: 12px 24px 24px;
  display: flex; gap: 8px;
}
.ps-modal-btn {
  flex: 1; height: 44px;
  border-radius: var(--t-radius);
  font-size: 14px; font-weight: 700;
  font-family: inherit;
  transition: all .2s ease-out;
}
.ps-modal-btn.outline {
  background: var(--t-surface);
  color: var(--t-text);
  border: 1px solid var(--t-border);
}
.ps-modal-btn.outline:hover { background: var(--t-bg); border-color: var(--t-border-strong); }
.ps-modal-btn.primary {
  background: var(--t-primary); color: #fff; border: 1px solid var(--t-primary);
}
.ps-modal-btn.primary:hover { background: var(--t-primary-strong); border-color: var(--t-primary-strong); }
/* :is(.device-frame.mobile, body.vp-mobile) .ps-modal { max-width: 320px; } */

/* 검색 조건 미선택 안내 팝업 — 뷰포트 중앙 고정(빌더 패널 변수 비의존) (TMS-A-230) */
.tms-search-alert {
  position: fixed; inset: 0;
  background: rgba(20,24,26,.45);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; z-index: 1000;
}
.tms-search-alert .ps-modal { max-width: 360px; text-align: center; }
.tms-search-alert .ps-modal-head { padding: 26px 24px 8px; }
.tms-search-alert .ps-modal-foot { padding: 16px 24px 24px; }
:is(.device-frame.mobile, body.vp-mobile) .ps-modal-head { padding: 22px 20px 6px; }
:is(.device-frame.mobile, body.vp-mobile) .ps-modal-head h3 { font-size: 16px; }
:is(.device-frame.mobile, body.vp-mobile) .ps-modal-body { padding: 14px 20px 6px; }
:is(.device-frame.mobile, body.vp-mobile) .ps-modal-foot { padding: 10px 20px 20px; }

.ps-modal .ps-modal-foot.stack { flex-direction: column; }
.ps-modal-link {
  text-align: right; font-size: 12.5px; color: var(--t-text-2);
  background: none; border: none; padding: 0; cursor: pointer;
  text-decoration: underline; align-self: flex-end;
  font-family: inherit;
}
.ps-modal-link:hover { color: var(--t-text); }
/* 로그인 모달 보조 링크 행 — 아이디 찾기 · 비밀번호 찾기 양옆 배치 (TMS-A-122) */
.ps-modal-link-row { display: flex; justify-content: space-between; gap: 12px; }
.ps-modal-link-row .ps-modal-link { align-self: auto; text-align: left; }
.ps-modal-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 0 2px;
  color: var(--t-text-3); font-size: 11.5px;
}
.ps-modal-divider::before, .ps-modal-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--t-border);
}
.ps-social-row {
  display: flex; gap: 14px; justify-content: center;
}
.ps-social-btn {
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent;
  transition: all .2s ease-out;
  padding: 0;
}
.ps-social-btn svg { width: 20px; height: 20px; display: block; }
.ps-social-btn:hover { filter: brightness(0.94); transform: translateY(-1px); }
.ps-social-btn.kakao  { background: #FEE500; color: #181600; }
.ps-social-btn.naver  { background: #03C75A; color: #fff; }
.ps-social-btn.google { background: #fff; border-color: #DADCE0; }
.ps-social-btn.apple  { background: #000; color: #fff; }
.ps-check-list { display: flex; flex-direction: column; gap: 0; }
.ps-check-row {
  /* 커스텀 체크박스 API — base.css */
  --chk-size: 15px;
  --chk-accent: var(--t-primary);
  display: flex; align-items: center; gap: 9px;
  padding: 9px 2px;
  font-size: 12.5px; color: var(--t-text);
  cursor: pointer;
  border-bottom: 1px solid var(--t-border-soft);
}
.ps-check-row:last-child { border-bottom: none; }
.ps-check-row.all { font-weight: 700; }
.ps-check-row a,
.ps-check-row .ps-check-view {
  margin-left: auto; color: var(--t-text-2); font-size: 11.5px;
  text-decoration: underline;
}
/* 직접입력 약관 '보기' 버튼 — 링크 톤 (TMS-A-243) */
.ps-check-view { background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; }
.ps-check-required { color: var(--t-primary); font-weight: 600; margin-right: 4px; }
.ps-check-optional { color: var(--t-text-2); font-weight: 600; margin-right: 4px; opacity: .72; }
.ps-modal-foot-note {
  text-align: center; font-size: 12px; color: var(--t-text-2);
  padding: 0 24px 18px;
  background: var(--t-surface);
}
.ps-modal-foot-note button {
  background: none; border: none; padding: 0;
  color: var(--t-primary); font-weight: 700; font-family: inherit;
  font-size: inherit; cursor: pointer; text-decoration: underline;
  margin-left: 4px;
}
:is(.device-frame.mobile, body.vp-mobile) .ps-modal-foot-note { padding: 0 20px 16px; }

/* === 정류장 정보 모달 === */
.ps-modal.ps-stop-modal {
  max-width: 480px;
  max-height: calc(100vh - 100px);
}
.ps-stop-head {
  padding: 24px 24px 16px;
  border-bottom: 1px solid var(--t-border-soft);
}
.ps-stop-head h3 {
  margin: 0;
  font-size: 20px; font-weight: 800;
  color: var(--t-text); letter-spacing: -.02em;
}
.ps-stop-intro {
  margin: 8px 0 0;
  font-size: 14px; line-height: var(--lh-normal);
  color: var(--t-primary);
  font-weight: 700;
}
.ps-stop-scroll {
  flex: 1; min-height: 0;
  overflow-y: auto;
}
.ps-stop-loading {
  padding: 56px 24px; text-align: center;
  color: var(--t-text-3); font-size: 13px;
}
.ps-stop-image {
  width: calc(100% - 48px);
  margin: 16px 24px;
  aspect-ratio: 4/3;
  background: var(--t-bg);
  border-radius: 10px;
  overflow: hidden;
}
.ps-stop-image img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.ps-stop-body {
  padding: 16px 24px;
  border-top: 1px solid var(--t-border-soft);
}
.ps-stop-subtitle {
  font-size: 15px; font-weight: 700;
  color: var(--t-text);
  line-height: var(--lh-normal);
  margin-bottom: 10px;
}
.ps-stop-detail {
  font-size: 13.5px;
  line-height: var(--lh-relaxed);
  color: var(--t-text-2);
  white-space: pre-line;
}
.ps-stop-footer {
  padding: 16px 24px 24px;
  border-top: 1px solid var(--t-border-soft);
  background: var(--t-surface);
}
.ps-stop-map-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 13px 16px;
  background: var(--t-primary); color: #fff;
  border-radius: 8px;
  font-size: 14px; font-weight: 700;
  text-decoration: none;
  font-family: inherit;
  transition: all .2s ease-out;
}
.ps-stop-map-btn:hover { background: var(--t-primary-strong); }

:is(.device-frame.mobile, body.vp-mobile) .ps-stop-head { padding: 20px 16px 12px; }
:is(.device-frame.mobile, body.vp-mobile) .ps-stop-image { margin: 12px 16px; width: calc(100% - 32px); }
:is(.device-frame.mobile, body.vp-mobile) .ps-stop-body { padding: 12px 16px; }
:is(.device-frame.mobile, body.vp-mobile) .ps-stop-footer { padding: 12px 16px 20px; }

/* ===== PREVIEW SECTION WRAPPER ===== */
.ps {
  position: relative;
  cursor: pointer;
  transition: border-color .1s;
}
.ps:hover { border-color: rgba(14,95,74,.35); }
.ps.selected { border-color: var(--brand) !important; }
.ps.locked:hover { border-color: rgba(180,83,9,.35); }
.ps.locked.selected { border-color: var(--status-draft) !important; }
.ps-tag {
  position: absolute; top: -1px; left: -1px;
  background: var(--brand);
  color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 3px 8px;
  border-radius: 0 0 6px 0;
  font-family: var(--font-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  z-index: 5;
  opacity: 0;
  transition: opacity .12s;
  pointer-events: none;
}
.ps:hover .ps-tag, .ps.selected .ps-tag { opacity: 1; }
.ps.locked .ps-tag { background: var(--status-draft); }
.ps.hidden-here {
  opacity: 0.25;
  position: relative;
}
.ps.hidden-here::after {
  content: attr(data-hidden-msg);
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(2px);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
  pointer-events: none;
  font-family: var(--font-sans);
}

/* ===== SECTION INSERTER (between preview sections) =====
   Wrapper has height:0 so adjacent sections sit flush; line and button overlay
   the boundary via absolute positioning. */
.ps-insert {
  position: relative;
  height: 0;
  pointer-events: none;
  font-family: var(--font-sans);
  /* Keep the insert line/+ button above adjacent section content so it isn't covered. */
  z-index: 7;
}
.ps-insert::before {
  content: '';
  position: absolute;
  left: 8%; right: 8%; top: 0;
  height: 1px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s ease;
}
/* Reveal the line only around the currently selected section (before/after). */
.ps.selected + .ps-insert::before,
.ps-insert:has(+ .ps.selected)::before {
  transform: scaleX(1);
}
.ps-insert-btn {
  position: absolute;
  top: 0; left: 50%;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--brand);
  background: #fff;
  color: var(--brand);
  display: grid; place-items: center;
  cursor: pointer;
  z-index: 6;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.6);
  transition: opacity .15s, transform .18s cubic-bezier(.4,.2,.2,1), background .15s, color .15s;
  padding: 0;
  pointer-events: auto;
}
/* Reveal the + button only adjacent to the selected section. */
.ps.selected + .ps-insert .ps-insert-btn,
.ps-insert:has(+ .ps.selected) .ps-insert-btn {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.ps-insert-btn:hover {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 3px 10px rgba(14,95,74,.35);
  transform: translate(-50%, -50%) scale(1.1);
}
.ps-insert-btn svg { width: 12px; height: 12px; }


/* ===== TENANT SITE STYLES — HEADER ===== */
.ps-header {
  background: #fff;
  border-bottom: 1px solid var(--t-border);
  /* 좌우는 기본 24px, 컨테이너 폭이 1240px 넘으면 자동으로 여백 확장 (헤더 내용물은 최대 1240px) */
  padding-inline: max(24px, calc((100% - 1160px) / 2));
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px;
  height: 60px;
  flex-shrink: 0;
}
:is(.device-frame.mobile, body.vp-mobile) .ps-header,
:is(.device-frame.tablet, body.vp-tablet) .ps-header { padding: 14px 18px; gap: 12px; }

/* 스크롤 고정 — 헤더 섹션의 .ps 래퍼를 sticky 처리 (preview-area 스크롤 기준) */
.ps.sticky-section {
  position: sticky;
  top: 0;
  z-index: 40;
}
.ps.sticky-section > .ps-header,
.ps-header.sticky {
  box-shadow: 0 2px 4px rgba(0,0,0,.05);
}
/* PREVIEW_MODE(standalone)에서는 .ps 래퍼가 없어 inner header에 sticky */
.ps-header.sticky {
  position: sticky;
  top: 0;
  z-index: 40;
}

/* 헤더 반응형은 위 :is(.device-frame.X, body.vp-X) 룰이 전담한다 — 값이 어긋난
   @media (max-width:639px) { .ps-header { padding-inline:16px } } 중복은 제거됨. */

/* Header control common height — keeps lang selector / buttons / user menu visually aligned */
.ps-lang-selector,
.ps-header-btn,
.ps-user-menu {
  min-height: 38px;
  box-sizing: border-box;
}

.tenant-logo-img {
  height: 38px;
  border-radius: 4px;
  flex-shrink: 0;
}
img.tenant-logo-img {
  width: auto;
  display: block;
  /* 너비·높이를 모두 지정한 경우(인라인 style) 비율 왜곡 방지 */
  object-fit: contain;
}
div.tenant-logo-img {
  width: 120px;
  background-size: contain;
  background-position: left;
  background-repeat: no-repeat;
}

.ps-header-spacer {
  flex: 1;
  display: none;
}
/* GNB navigation links — flex:1 로 로고와 액션 사이를 채우고, 정렬은 justify-content 로 제어.
   헤더 modifier 클래스(gnb-left|gnb-center|gnb-right, types/header.js·site-chrome.js)로 전환. */
.ps-header-gnb {
  display: flex; align-items: center; gap: 4px;
  flex: 1;
  justify-content: center;   /* 기본값(gnbAlign 미설정) = 중앙 */
}
.ps-header.gnb-left   .ps-header-gnb { justify-content: flex-start; }
.ps-header.gnb-center .ps-header-gnb { justify-content: center; }
.ps-header.gnb-right  .ps-header-gnb { justify-content: flex-end; }
/* GNB 글자색 — 헤더 인라인 변수(--gnb-color*) 우선, 미설정 시 테마 토큰 폴백.
   변수는 types/header.js·site-chrome.js 의 tmsHeaderInlineStyle 이 .ps-header 에 심는다. */
.ps-header-gnb-link {
  padding: 8px 14px;
  font-size: 14px; font-weight: 600;
  color: var(--gnb-color, var(--t-text-2));
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: all .2s ease-out;
}
.ps-header-gnb-link:hover { background: var(--t-bg); color: var(--gnb-color-hover, var(--t-text)); text-decoration: none; }
.ps-header-gnb-link.active { color: var(--gnb-color-active, var(--t-primary, #2563EB)); }
/* GNB·actions 는 1024px 미만(태블릿+모바일)에서 햄버거 드로어로 전환 — 데스크톱(≥1024)만 인라인.
   (세 요소의 전환점을 1024 로 통일해 태블릿에서 로그인·언어가 사라지는 데드존 제거) */
:is(.device-frame.mobile, body.vp-mobile) .ps-header-gnb,
:is(.device-frame.tablet, body.vp-tablet) .ps-header-gnb { display: none; }


.ps-header-actions {
  display: flex; align-items: center; gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}
:is(.device-frame.mobile, body.vp-mobile) .ps-header-actions,
:is(.device-frame.tablet, body.vp-tablet) .ps-header-actions { display: none; }
.ps-lang-selector {
  position: relative;
  user-select: none;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: var(--t-radius);
  font-size: 13px;
  font-weight: 500;
  color: var(--t-text);
  cursor: pointer;
  background: var(--t-bg);
}
.ps-lang-selector:hover { background: var(--t-surface-2); }
.ps-lang-selector svg { width: 11px; height: 11px; opacity: 0.6; }
.ps-lang-code {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--t-primary);
  color: #fff;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0;
}
/* 국기 이모지로 표시할 때는 배경/색상 제거하고 폰트 키움 */
.ps-lang-code.ps-lang-flag,
.ps-lang-option-code.ps-lang-flag {
  background: transparent !important;
  color: inherit !important;
  font-size: 18px;
  line-height: 1;
}
.ps-lang-option-code.ps-lang-flag { font-size: 16px; }

/* Language selector dropdown — lists the 제공 언어 set in 사이트 설정 */
.ps-lang-selector > svg { transition: all .2s ease-out; }
.ps-lang-selector.open > svg { transform: rotate(180deg); }
.ps-lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 190px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: var(--t-radius);
  box-shadow: 0 10px 28px rgba(0,0,0,.16);
  padding: 5px;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 60;
}
.ps-lang-selector.open .ps-lang-menu { display: flex; }
.ps-lang-option {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px;
  border-radius: calc(var(--t-radius) - 1px);
  font-size: 13px; font-weight: 500;
  color: var(--t-text);
  text-align: left;
  white-space: nowrap;
}
.ps-lang-option:hover { background: var(--t-bg); }
.ps-lang-option.active { font-weight: 700; }
.ps-lang-option-code {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--t-bg);
  color: var(--t-text-2);
  display: grid; place-items: center;
  font-size: 9px; font-weight: 700;
  flex-shrink: 0;
}
.ps-lang-option.active .ps-lang-option-code { background: var(--t-primary); color: #fff; }
.ps-lang-option-label { flex: 1; }
.ps-lang-option-check { display: flex; width: 14px; flex-shrink: 0; color: var(--t-primary); }
.ps-lang-option-check svg { width: 14px; height: 14px; opacity: 1; }

.ps-header-btn {
  padding: 8px 14px;
  border-radius: var(--t-radius);
  font-size: 13px;
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  background: none;
  color: var(--t-text);
  white-space: nowrap;
}
.ps-header-btn:hover { background: var(--t-bg); }
.ps-header-btn.outline {
  background: #FFFFFF;
  border-color: var(--t-border);
}
.ps-header-btn.outline:hover { background: var(--t-bg); border-color: var(--t-border-strong); }
.ps-header-btn.primary {
  background: var(--t-primary);
  color: #fff;
  border-color: var(--t-primary);
}
.ps-header-btn.primary:hover { background: var(--t-primary-strong); }

.ps-user-menu {
  position: relative;
  user-select: none;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: var(--t-radius);
  font-size: 13px;
  font-weight: 500;
  color: var(--t-text);
  cursor: pointer;
  background: var(--t-bg);
}
.ps-user-menu:hover { background: var(--t-surface-2); }
.ps-user-menu > svg { width: 11px; height: 11px; opacity: 0.6; transition: all .2s ease-out; }
.ps-user-menu.open > svg { transform: rotate(180deg); }
.ps-user-menu-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: var(--t-radius);
  box-shadow: 0 10px 28px rgba(0,0,0,.16);
  padding: 5px;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 60;
}
.ps-user-menu.open .ps-user-menu-list { display: flex; }
.ps-user-menu-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px;
  border-radius: calc(var(--t-radius) - 1px);
  font-size: 13px; font-weight: 500;
  color: var(--t-text);
  background: none; border: none; text-align: left;
  font-family: inherit;
  cursor: pointer;
}
.ps-user-menu-item:hover { background: var(--t-bg); }
.ps-user-menu-item svg { width: 15px; height: 15px; opacity: 0.7; flex-shrink: 0; }
.ps-user-menu-divider { height: 1px; background: var(--t-border-soft); margin: 4px 2px; }

.ps-user-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--t-primary);
  color: #fff;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

.tenant-nav-mobile {
  display: none;
  width: 22px; height: 22px;
  color: var(--t-text);
  margin-left: auto;
  cursor: pointer;
}
/* 햄버거는 1024px 미만(태블릿+모바일)에서 노출 — 데스크톱(≥1024)만 GNB 인라인.
   드로어가 nav·로그인·언어를 모두 담으므로 태블릿에서도 이들 접근 보장 (TMS-A-115 후속) */
:is(.device-frame.mobile, body.vp-mobile) .tenant-nav-mobile,
:is(.device-frame.tablet, body.vp-tablet) .tenant-nav-mobile { display: block; }
.ps-hero {
  color: #fff;
  padding-block: 40px;
  padding-inline: max(24px, calc((100% - 1160px) / 2));
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: min-height .25s cubic-bezier(.4,.2,.2,1);
  row-gap: 32px;
}
/* .device-frame.tablet .ps-hero { padding: 0 36px;} */
.device-frame.mobile .ps-hero { padding: 32px 16px;}

/* Auto-height tiers based on enabled content fields (0~4) */
.ps-hero.hero-h-4 { min-height: 440px; }
/* 수동 높이 옵션 (배너 높이: 낮게/보통/높게/풀스크린) */
.ps-hero.hero-h-sm   { min-height: 280px; }
.ps-hero.hero-h-md   { min-height: 440px; }
.ps-hero.hero-h-lg   { min-height: 620px; }
.ps-hero.hero-h-full { min-height: 100vh; }

.device-frame.tablet .ps-hero.hero-h-4 { min-height: 380px; }
.device-frame.tablet .ps-hero.hero-h-sm { min-height: 240px; }
.device-frame.tablet .ps-hero.hero-h-md { min-height: 380px; }
.device-frame.tablet .ps-hero.hero-h-lg { min-height: 520px; }

.device-frame.mobile .ps-hero.hero-h-4 { min-height: 340px; }
.device-frame.mobile .ps-hero.hero-h-sm { min-height: 220px; }
.device-frame.mobile .ps-hero.hero-h-md { min-height: 340px; }
.device-frame.mobile .ps-hero.hero-h-lg { min-height: 460px; }

.ps-hero.center .ps-hero-content {text-align: center; align-items: center; }
.ps-hero.right .ps-hero-content {text-align: right; align-items: flex-end; }
.ps-hero-content {
  position: relative;   /* keep — layers text above the dark overlay (paint order via DOM) */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* padding-bottom: 32px; */
}
.ps-hero-eyebrow {
  font-size: 13px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  opacity: .85; margin-bottom: 18px;
  font-family: var(--font-mono);
  color: var(--hero-eyebrow, inherit);
}
.device-frame.mobile .ps-hero-eyebrow { font-size: 11px; margin-bottom: 12px; }
.ps-hero-title {
  font-size: 44px; font-weight: 800;
  line-height: var(--lh-tight); letter-spacing: -.03em;
  max-width: 720px; margin-bottom: 18px;
  white-space: pre-wrap;
  color: var(--hero-title, inherit);
}
.ps-hero.center .ps-hero-title { margin-left: auto; margin-right: auto; }
.ps-hero.right .ps-hero-title { margin-left: auto; }
.device-frame.tablet .ps-hero-title { font-size: 36px; }
.device-frame.mobile .ps-hero-title { font-size: 26px; line-height: var(--lh-tight); margin-bottom: 12px; }
.ps-hero-sub {
  font-size: 16px; opacity: .85;
  max-width: 520px; margin-bottom: 18px; line-height: var(--lh-normal);
  color: var(--hero-sub, inherit);
}
.ps-hero.center .ps-hero-sub { margin-left: auto; margin-right: auto; }
.ps-hero.right .ps-hero-sub { margin-left: auto; }
.device-frame.mobile .ps-hero-sub { font-size: 13px; margin-bottom: 18px; }
.ps-hero-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--cta-bg, #fff);
  color: var(--cta-text, var(--t-primary));
  font-weight: 700;
  padding: 14px 28px;
  border-radius: var(--t-radius);
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  text-decoration: none;
  cursor: pointer;
  transition: all .2s ease-out;
}
.ps-hero-cta:hover {
  background: var(--cta-text, var(--t-primary));
  color: var(--cta-bg, #fff);
  box-shadow: 0 14px 36px rgba(0,0,0,.28);
  transform: translateY(-2px);
}
.ps-hero-cta:active { transform: translateY(0); }

.ps-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.25) 100%);
  pointer-events: none;
}
/* 히어로 슬라이드 스택 — .rd-hero / .rd-stop-banner 와 동일 구조(absolute 스택 + opacity 크로스페이드).
   section 배경 위 · overlay/content/dots 아래 (히어로 내부는 z-index:auto 라 DOM 순서로 쌓인다) (TMS-A-252) */
.ps-hero-slides { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.ps-hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  background-size: cover; background-position: center;   /* url() 이 아닌 bg(그라데이션) 폴백용 */
  transition: opacity .8s ease-in-out;
  pointer-events: none;
}
.ps-hero-slide.active { opacity: 1; z-index: 1; }
.ps-hero-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .ps-hero-slide { transition: none; } }
.ps-hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.30);
  color: #FFFFFF;
  display: grid; place-items: center;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
  z-index: 5;
  transition: all .2s ease-out;
  font-family: var(--font-sans);
}

.ps-hero-arrow svg { width: 20px; height: 20px; }
.ps-hero-arrow:hover { background-color: rgba(255,255,255,1); color: var(--t-text); }
.ps-hero-prev { left: calc(50% - 640px);}
.ps-hero-next { right: calc(50% - 640px);}
/* .ps-hero-prev { left: max(24px, calc(50% - 580px));}
.ps-hero-next { right: max(24px, calc(50% - 580px));} */
.device-frame.tablet .ps-hero-arrow, .device-frame.mobile .ps-hero-arrow { display: none; }

.ps-hero-dots {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}
.device-frame.mobile .ps-hero-dots { bottom: 32px; }
.ps-hero-dot {
  width: 8px; height: 8px;
  border: none; padding: 0;      /* <span> → <button> 전환(접근성) 시 UA 기본값 제거 */
  border-radius: 999px;
  background: rgba(255,255,255,0.45);
  cursor: pointer;
  transition: all .2s ease-out;
}
.ps-hero-dot:hover { background: rgba(255,255,255,0.7); }
.ps-hero-dot.active {
  background: #fff;
  width: 24px;
  border-radius: 4px;
}

/* ===== 반응형 스코프 규약 (이 파일 전반) =====
   스토어프론트 반응형은 미디어쿼리가 아니라 클래스 스코프로 쓴다. 스코프가 둘이다:
     .device-frame.tablet|.mobile  — 빌더 캔버스. 디바이스 스위처가 붙인다(js/render.js).
     body.vp-tablet|.vp-mobile     — 실제 뷰포트. js/site-chrome.js 가 붙인다(고객 페이지 10종).
   .device-frame 이 없는 고객 페이지(search-results 의 #srBuilderSearch 검색바, site-chrome 이
   주입하는 .ps-modal 등)에도 같은 룰이 걸리도록 `:is(...)` 로 두 스코프를 함께 받는다 —
   값을 한 곳에만 두어 미디어쿼리 중복을 만들지 않는다. :is() 의 명시도는 인자 중 최대값이라
   기존 (0,3,0) 이 유지되므로 우선순위 관계도 그대로다.
   ※ home 전용 섹션(.ps-hero/.route-slider/.ps-product 등)은 .device-frame 만으로 충분하다
     — home 은 두 스코프가 동시에 걸린다.

   ===== SEARCHBAR — standalone / non-hero placement =====
   히어로 밖에 놓인 검색바(= 히어로가 아닌 섹션의 형제, 또는 검색결과 페이지의 #srBuilderSearch)
   기본 배치. 히어로 바로 뒤에 오는 검색바는 render.js 가 히어로 안으로 nest 하며, 그 경우의
   재배치는 아래 "Searchbar nested inside the hero banner" 블록이 담당한다.
   상단 음수 마진(옛 히어로 오버랩)은 두지 않는다 — 히어로 밖에서 음수 top 은 이전 섹션을 침범한다. */
.ps-search-wrapper {
  margin-block: 0 56px;   /* 하단만 다음 섹션과의 간격 (TMS-A-226) */
  margin-inline: max(24px, calc((100% - 1160px) / 2));
  position: relative;
}
:is(.device-frame.tablet, body.vp-tablet) .ps-search-wrapper { margin: 0 28px 44px; }
:is(.device-frame.mobile, body.vp-mobile) .ps-search-wrapper { margin: 0 16px 32px; }

/* ===== SEARCHBAR — nested inside the hero banner (home + builder) =====
   render.js 가 히어로 바로 뒤 검색바를 히어로 안(도트 바로 앞)으로 splice 한 경우에만 적용.
   위 standalone 블록의 여백을 히어로 안에서 걷어내고, 히어로 하단에 pin 한다. */
.ps-hero:has(.ps-search-wrapper) {
  overflow: visible;          /* let .ps-spop popovers drop below the hero edge */
}
/* Strip the standalone margins inside the hero. The .device-frame-scoped selector
   is needed so this beats `.device-frame.tablet/.mobile .ps-search-wrapper`
   (0,3,0) in the builder canvas — a plain `.ps-hero .ps-search-wrapper` (0,2,0)
   would otherwise lose to it and re-leak the inset/bottom margins. */
.ps-hero .ps-search-wrapper,
.device-frame .ps-hero .ps-search-wrapper {
  margin: 0;
  position: relative;
}
/* Pin to the bottom band of the hero.
   Preview: wrapper is a direct flex child. Builder: the flex child is its .ps wrapper. */
.ps-hero > .ps-search-wrapper,
.ps-hero > .ps:has(> .ps-search-wrapper) { margin-top: auto; }

/* Carousel dots default to absolute bottom:40px — would overlap the bottom searchbar.
   When a searchbar is present, drop them into flow so they sit just below it (the
   searchbar is spliced right before .ps-hero-dots, keeping the dots the last child). */
/* .ps-hero:has(.ps-search-wrapper) .ps-hero-dots {
  position: relative; bottom: auto; left: auto; transform: none;
  align-self: center; margin-top: 24px;
} */

.ps-hero:has(.ps-hero-dots) {
  padding-bottom: 72px;
}
.device-frame.mobile .ps-hero:has(.ps-hero-dots) {
  padding-bottom: 64px;
}

/* No margin-bottom:-1px here on purpose. Nothing in this component has a `border`
   (only border-radius), so there is no tab border to hide over the panel's — the
   classic reason for the overlap does not apply. Overlapping the whole strip made
   every INACTIVE tab lay its bottom 1px of grey on the white .ps-search (the strip
   paints above it via z-index), showing as a grey lip. The 1px anti-hairline guard
   now lives on .active alone — the only tab that shares the panel's colour. */
.ps-search-tabs {
  display: flex;
  width: fit-content;
  position: relative;
  z-index: 5;
}
:is(.device-frame.mobile, body.vp-mobile) .ps-search-tabs { width: 100%; }
/* Three-state hierarchy: the ONLY white state is .active (it fuses with the .ps-search
   panel below), and --t-primary is reserved for .active alone — default/hover stay
   neutral grayscale so hover never previews the "selected" color.
   A plain brightness ladder instead: border-soft (dimmed) → surface-2 (lifting) →
   surface (fully raised, panel color). Neutral tokens, unaffected by tenant theming. */
.ps-search-tab {
  padding: 12px 28px;
  font-size: 14px;
  font-weight: 600;
  cursor: default;                    /* the fixed oneway/roundtrip label is not clickable */
  color: var(--t-text-2);
  background: var(--t-border-soft);
  border-radius: 12px 12px 0 0;
  line-height: inherit;               /* switchable tabs are <button> — UA drops the inherited line-height */
  transition: background-color .16s ease-out, color .16s ease-out, box-shadow .16s ease-out;
}
/* only the switchable tabs are interactive (<button>); the fixed label stays a <span> */
.ps-search-tab[data-trip-tab] { cursor: pointer; }
.ps-search-tab[data-trip-tab]:hover:not(.active) {
  color: var(--t-text);
  background: var(--t-surface-2);
}
/* Inset ring: tabs sit flush against each other and overlap the panel seam, so an
   outward offset would bleed onto the neighbour and under .ps-search. */
.ps-search-tab[data-trip-tab]:focus-visible {
  outline: 2px solid var(--t-primary);
  outline-offset: -2px;
}
.ps-search-tab.active {
  background: var(--t-surface);
  font-weight: 700;
  color: var(--t-primary);
  box-shadow: 0 -6px 12px -6px rgba(0,0,0,.06);
}
:is(.device-frame.mobile, body.vp-mobile) .ps-search-tab { padding-inline: 16px; font-size: 13px; flex: 1; text-align: center;}

.ps-search {
  background: var(--t-surface);
  margin: 0;
  padding: 16px;
  border-radius: 0 12px 12px 12px;
  box-shadow: 0 18px 40px -14px rgba(0,0,0,.16), 0 6px 14px -6px rgba(0,0,0,.07);
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1fr 0.8fr auto;
  gap: 8px;
  align-items: center;
}
/* No tabs (순환/투어/여행 상품) → .ps-search is the first child, round all corners. */
.ps-search-wrapper > .ps-search:first-child {
  border-radius: 12px;
}
.ps-search.has-return {
  grid-template-columns: 1fr 1fr 1.8fr 0.8fr auto;
}
.ps-search.date-first {
  grid-template-columns: 1fr 1.2fr 1.2fr 0.8fr auto;
}
.ps-search.date-first.has-return {
  grid-template-columns: 1.8fr 1fr 1fr 0.8fr auto;
}
:is(.device-frame.tablet, body.vp-tablet) .ps-search,
:is(.device-frame.tablet, body.vp-tablet) .ps-search.has-return,
:is(.device-frame.tablet, body.vp-tablet) .ps-search.date-first,
:is(.device-frame.tablet, body.vp-tablet) .ps-search.date-first.has-return { grid-template-columns: 1fr; gap: 8px; }
:is(.device-frame.mobile, body.vp-mobile) .ps-search,
:is(.device-frame.mobile, body.vp-mobile) .ps-search.has-return,
:is(.device-frame.mobile, body.vp-mobile) .ps-search.date-first,
:is(.device-frame.mobile, body.vp-mobile) .ps-search.date-first.has-return { grid-template-columns: 1fr; padding: 12px; gap: 8px; border-top-right-radius: 0;}

.search-field {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--t-bg);
  border: 1px solid var(--t-border);
  position: relative;
}
.search-field[data-spop-trigger] { cursor: pointer; transition: all .2s ease-out; }
.search-field[data-spop-trigger]:hover { border-color: var(--t-border-strong); }
.search-field.spop-open { border-color: var(--t-border-strong); background: var(--t-surface); }

/* === 출발/도착 팝오버 (customer-site) === */
.ps-spop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  min-width: 360px; max-width: 440px;
  background: var(--t-surface);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.14), 0 4px 12px rgba(0,0,0,.06);
  padding: 16px;
}
:is(.device-frame.tablet, body.vp-tablet) .ps-spop, :is(.device-frame.mobile, body.vp-mobile) .ps-spop { min-width: unset; max-width: unset; width: 100%; }
/* 진입 페이드는 '열리는 순간' 1회만. 팝오버 내부 클릭도 renderPreview() 로 전체를 다시 그려
   .ps-spop 노드가 매번 새로 생기는데, 그때마다 fadeIn 이 재생되면 창이 깜박이는 것처럼 보인다. */
.ps-spop.ps-spop-enter { animation: fadeIn .2s ease-out; }
.ps-spop-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
  font-size: 15px; font-weight: 800; color: var(--t-text);
  letter-spacing: -.01em;
  line-height: 1.47;
}
.ps-spop-head strong{
  font-weight: 700;
}
/* 헤더 핀 — 모양·색은 .search-pin-from/-to 가 결정(출발=녹/도착=적). 여기선 크기만 덮어쓴다. */
.ps-spop-head .search-field-icon { width: 18px; height: 18px; }
.ps-spop-depth1 {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-bottom: 8px;
}
.ps-spop-pill {
  padding: 6px 12px;
  border-radius: 999px;
  background: transparent;
  color: var(--t-text-2);
  font-size: 13px; font-weight: 500;
  font-family: inherit;
  border: none; cursor: pointer;
  transition: all .2s ease-out;
}
.ps-spop-pill:hover { background: var(--t-bg); color: var(--t-text); }
.ps-spop-pill.active {
  background: var(--t-primary);
  color: #fff; font-weight: 700;
}
.ps-spop-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.ps-spop-chip {
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--t-bg);
  color: var(--t-text);
  font-size: 12.5px; font-weight: 500;
  font-family: inherit;
  border: none; cursor: pointer;
  transition: all .2s ease-out;
}
.ps-spop-chip:hover { background: var(--t-surface-2); }
.ps-spop-chip.active { background: var(--t-primary); color: #fff; font-weight: 700; }
.ps-spop-divider {
  height: 1px;
  margin: 12px 0;
  border-top: 1px dashed var(--t-border);
  background: none;
}
.ps-spop-keypoints-head {
  display: flex; align-items: center; gap: 6px;
  line-height: 1.47;
  margin-bottom: 8px;
  font-size: 13px; font-weight: 700; color: var(--t-text);
}
.ps-spop-keypoints-head .search-field-icon { width: 14px; height: 14px; }

/* === 검색바: 일정/인원 팝오버 === */
.ps-spop.ps-spop-date { min-width: unset; max-width: unset; width: 304px;}
.ps-spop.ps-spop-date.wide { min-width: unset; max-width: unset; width: 600px;}
:is(.device-frame.tablet, body.vp-tablet) .ps-spop.ps-spop-date {width: calc(50% + 4px);}
:is(.device-frame.tablet, body.vp-tablet) .ps-spop.ps-spop-date.wide {width: 100%;}
:is(.device-frame.mobile, body.vp-mobile) .ps-spop.ps-spop-date,
:is(.device-frame.mobile, body.vp-mobile) .ps-spop.ps-spop-date.wide { width: 100%; }
.ps-spop-date-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.ps-spop-date-head strong {
  font-size: 14px; font-weight: 700; color: var(--t-text); letter-spacing: -.01em;
}
.ps-spop-date-hint { font-size: 11.5px; color: var(--t-primary); font-weight: 500; }
.ps-cal-two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
:is(.device-frame.mobile, body.vp-mobile) .ps-cal-two { grid-template-columns: 1fr; gap: 16px; }
/* 뼈대(헤더·nav·요일·그리드·셀)는 base.css 의 CALENDAR 공통 섹션이 담당한다.
   여기서는 테넌트 테마 토큰을 --cal-* 로 매핑하고, 이 달력에만 있는
   왕복 range 표현만 정의한다. */
.ps-spop.ps-spop-date {
  --cal-text: var(--t-text);
  --cal-text-2: var(--t-text-2);
  --cal-text-3: var(--t-text-3);
  --cal-text-muted: var(--t-text-4);
  --cal-accent-strong: var(--t-primary-strong);
  --cal-hover-bg: var(--t-primary-soft);
  --cal-sun: #E74C3C;
  /* 열 간격 0 필수 — 왕복 range 막대(.in-range 배경)가 셀 사이에서 끊기면 안 된다 */
  --cal-gap: 2px 0;
}
.ps-cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); }
/* position: relative — .selected::before 원형 배경의 기준 */
.ps-cal-cell { display: grid; place-items: center; position: relative; }
.ps-cal-cell.in-range {
  background: #EAF2FF;
  border-radius: 0;
}
.ps-cal-cell.selected {
  background: transparent; color: #fff;
  font-weight: 700; z-index: 1;
}
.ps-cal-cell.selected::before {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 100%; height: 100%; border-radius: 50%;
  background: var(--t-primary); z-index: -1;
}
/* 범위(왕복) 시작/끝 셀: 원형 안쪽 반만 range 배경으로 채워 막대와 연결.
   border-radius 0 필수 — 공통 셀의 6px 이 남아 있으면 gradient 모서리가 깎여
   옆 .in-range 칸과 이어지는 부분에 틈이 생긴다. */
.ps-cal-cell.selected.start,
.ps-cal-cell.selected.end { border-radius: 0; }
.ps-cal-cell.selected.start { background: linear-gradient(to right, transparent 50%, #EAF2FF 50%); }
.ps-cal-cell.selected.end { background: linear-gradient(to left, transparent 50%, #EAF2FF 50%); }
.ps-cal-cell.selected.start ~ .ps-cal-cell.in-range { background: #EAF2FF; }
.ps-spop-date-foot { display: flex; justify-content: flex-end; margin-top: 12px; }
.ps-spop-confirm {
  padding: 9px 22px;
  background: var(--t-primary); color: #fff;
  border: none; border-radius: 6px;
  font-family: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer;
  transition: all .2s ease-out;
}
.ps-spop-confirm:hover { background: var(--t-primary-strong); }
.ps-spop-confirm.wide { width: 100%; height: 40px; }

/* 인원 팝오버 */
.ps-spop.ps-spop-person {
  min-width: 240px; max-width: 280px;
}
.ps-spop-person-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.ps-spop-person-label { font-size: 13.5px; font-weight: 600; color: var(--t-text); }
.ps-spop-person-counter {
  display: inline-flex; gap: 0;
  border: 1px solid var(--t-border); border-radius: 6px;
  overflow: hidden;
}
.ps-spop-counter-btn {
  width: 30px; height: 30px;
  background: var(--t-surface); border: none;
  font-family: inherit; font-size: 16px; color: var(--t-text-2); font-weight: 600;
  cursor: pointer;
  display: grid; place-items: center;
  transition: all .2s ease-out;
}
.ps-spop-counter-btn:hover:not(:disabled) { background: var(--t-bg); }
.ps-spop-counter-btn:disabled { color: var(--t-text-4); cursor: not-allowed; }
.ps-spop-person-count {
  min-width: 36px; text-align: center;
  font-size: 14px; font-weight: 700; color: var(--t-text);
  padding: 0 4px;
  line-height: normal;
  display: flex;;
  align-items: center;
  justify-content: center;
  border-inline: 1px solid var(--t-border-soft);
}

.search-field > div {
  display: flex; flex-direction: column;
  /* min-width: 0; */
  width: 100%;
}
/* Merged date field (roundtrip: 가는날 + 오는날 in one bordered container) */
.search-field.merged {}
.search-field.merged > div { flex: 1; }
.search-field-divider {
  width: 1px;
  align-self: stretch;
  background: var(--t-border);
  flex-shrink: 0;
}
/* 검색 필드 아이콘 4종 — 전부 솔리드 글리프. viewBox 24 기준 가로 18/24 로 광학 크기를 맞췄고,
   안쪽 디테일은 흰색으로 덮지 않고 evenodd 로 뚫어 필드 배경이 비치게 한다(마스크는 알파 기반).
   mask + currentColor 방식이라 모양(--ico)과 색(color)이 분리되고, 색은 테마 토큰을 따라간다.
   이 정의가 유일한 소스 — search-results.css 도, render.js 의 팝오버 헤더도 여기를 재사용한다.
   .search-field-icon 은 사실상 공용 마스크 아이콘 엔진(크기+currentColor+mask)이고,
   .search-pin-from/-to, .search-cal, .search-person 이 그 위에 모양·색을 얹는 구조다. */
.search-field-icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
          mask: var(--ico) center / contain no-repeat;
}
/* 출발/도착 핀 — 솔리드. 마스크는 알파 기반이라 안쪽 원을 흰색으로 덮을 수 없어
   fill-rule='evenodd' 로 실제 구멍을 뚫는다(구멍 너머로 필드 배경이 비침).
   출발=녹 / 도착=적이 기본값 — 테넌트가 --t-pin-* 로 덮어쓸 수 있다. */
.search-pin-from {
  color: var(--t-pin-from, #16A34A);
  --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' fill-rule='evenodd' d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0zm-9 3a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'/></svg>");
}
.search-pin-to {
  color: var(--t-pin-to, #DC2626);
  --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' fill-rule='evenodd' d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0zm-9 3a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'/></svg>");
}
/* 날짜/인원도 핀과 같은 솔리드 톤. 상단 고리·머리는 별도 엘리먼트라 합집합으로 합쳐지고,
   구분선·날짜칸만 같은 path 안에서 evenodd 로 뚫는다(겹치는 엘리먼트가 없어야 구멍이 유지됨). */
.search-cal {
  color: var(--t-text-2);
  --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><rect x='7' y='1.5' width='2' height='5' rx='1'/><rect x='15' y='1.5' width='2' height='5' rx='1'/><path fill-rule='evenodd' d='M3 7a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm1.5 2.5h15v2h-15zM6.5 14.5h3.5v3.5H6.5zm7.5 0h3.5v3.5H14z'/></svg>");
}
.search-person {
  color: var(--t-text-2);
  --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><circle cx='12' cy='7' r='4.5'/><path d='M12 14c-4.8 0-8.5 3-8.5 6.7 0 1 .8 1.8 1.8 1.8h13.4c1 0 1.8-.8 1.8-1.8 0-3.7-3.7-6.7-8.5-6.7z'/></svg>");
}
.search-field-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: .02em;
  color: var(--t-text-2); margin-bottom: 2px;
}
.search-field-value {
  font-size: 14px; font-weight: 600;
  color: var(--t-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-go {
  background: var(--t-primary); color: #fff;
  border-radius: 8px;
  padding: 16px 22px;
  font-size: 14px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  align-self: stretch;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s ease-out;
}
.search-go:hover { background: var(--t-primary-strong); }
.search-go svg { width: 16px; height: 16px; color: #fff; }

.ps-block { padding-block: 64px; padding-inline: max(24px, calc((100% - 1160px) / 2)); position: relative; background-color: #fff;}
.ps-block:nth-child(odd) { background-color: #f7f7f7; }
/* 풀-블리드 variant — 컨텐츠 (slider 등) 가 좌우 edge 까지 가도록 padding-inline 제거.
   타이틀/헤더 영역만 일반 ps-block 과 동일한 좌우 여백 유지. */
.ps-block-bleed { padding-inline: 0 !important; }
.ps-block-bleed > .ps-block-head {
  padding-inline: max(24px, calc((100% - 1160px) / 2));
}
.device-frame.tablet .ps-block-bleed > .ps-block-head { padding-inline: 24px; }
.device-frame.mobile .ps-block-bleed > .ps-block-head { padding-inline: 16px; }
.device-frame.tablet .ps-block { padding-block: 48px; }
.device-frame.mobile .ps-block { padding: 32px 16px; }
.ps-block.alt { background: var(--t-bg); }

/* Asset slot — per-asset width control inside assetpack list */
.asset-slot-width {
  display: flex; align-items: center; gap: 8px;
  margin-top: 6px;
}
.asset-slot-width .field-range { height: 3px; }
.asset-width-label {
  font-size: 10px; font-weight: 600;
  color: var(--text-3);
  font-family: var(--font-mono);
  min-width: 38px;
  text-align: right;
}

/* Asset position picker — 3x3 layout grid (8 anchors, center is empty). */
.asset-pos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
  width: 72px;
  aspect-ratio: 3 / 2;
  margin-top: 4px;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  box-sizing: border-box;
}
.asset-pos-cell {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 2px;
  cursor: pointer;
  padding: 0;
  min-width: 0;
  min-height: 0;
  transition: all .2s ease-out;
}
.asset-pos-cell:hover { border-color: var(--brand); }
.asset-pos-cell.active {
  background: var(--brand);
  border-color: var(--brand);
}
.asset-pos-cell-spacer { background: transparent; }

/* Asset overlays — decorative images positioned at 8 anchors above bg image/color.
   <img> overlays render at the source's natural pixel size; gradient placeholders
   fall back to a fixed 120×80 box. */
.asset-overlay {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  max-width: 100%;
  margin: 20px;
}
img.asset-overlay { display: block; height: auto; }
.asset-overlay-placeholder {
  width: 120px; height: 80px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.asset-overlay.top-left     { top: 0; left: 0; }
.asset-overlay.top-center   { top: 0; left: 50%; transform: translateX(-50%); }
.asset-overlay.top-right    { top: 0; right: 0; }
.asset-overlay.middle-left  { top: 50%; left: 0; transform: translateY(-50%); }
.asset-overlay.middle-right { top: 50%; right: 0; transform: translateY(-50%); }
.asset-overlay.bottom-left  { bottom: 0; left: 0; }
.asset-overlay.bottom-center{ bottom: 0; left: 50%; transform: translateX(-50%); }
.asset-overlay.bottom-right { bottom: 0; right: 0; }
/* Image assets are decorative — only show on desktop, hide on tablet/mobile. */
.device-frame.tablet .asset-overlay,
.device-frame.mobile .asset-overlay { display: none; }
.ps-block-head {
  display: flex; align-items: end; justify-content: space-between;
  margin-bottom: 24px;
  position: relative;
  z-index: 3;
}
.ps-block-head.center { justify-content: center; text-align: center; }
.ps-block-title {
  font-size: 26px; font-weight: 800;
  letter-spacing: -.025em;
  color: var(--block-title, var(--t-text)); line-height: var(--lh-tight);
}
.device-frame.mobile .ps-block-title { font-size: 19px; }
.ps-block-sub {
  font-size: 14px;
  color: var(--block-sub, var(--t-text-2));
  margin-top: 6px;
}
.device-frame.mobile .ps-block-sub { font-size: 12px; }
.ps-block-link { color: var(--t-primary); font-size: 13px; font-weight: 600; }

/* ===== ROUTE LIST (sequence display) ===== */
.route-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  z-index: 3;
}

/* === 노선도 레이아웃 === */
.route-map-tabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 18px;
  position: relative; z-index: 3;
}
.route-map-tab {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--t-border);
  background: var(--t-surface);
  color: var(--t-text);
  font-size: 14px; font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all .2s ease-out;
}
.route-map-tab:hover { background: var(--t-bg); }
.route-map-tab.active {
  background: var(--t-primary);
  border-color: var(--t-primary);
  color: #fff;
}
.device-frame.mobile .route-map-tab { padding: 7px 12px; font-size: 13px; }
.route-map-wrap {
  position: relative;
  padding: 0;
  background: var(--t-surface);
  border-radius: 12px;
  border: 1px solid var(--t-border);
  z-index: 3;
  overflow: hidden;
}
.route-map-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: 24px 28px 0 0;
}
.route-map-view-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px;
  background: var(--t-primary);
  color: #fff;
  border-radius: 6px;
  font-size: 13px; font-weight: 700;
  text-decoration: none;
  transition: all .2s ease-out;
}
.route-map-view-btn:hover { background: var(--t-primary-strong); }
.route-map-view-btn svg { width: 14px; height: 14px; }

.route-map-scroll {
  padding: 44px 44px 84px 44px;
  background: var(--t-surface);
  position: relative;
}
.route-map-scroll:has(.route-map-grid.multi-row) { padding-inline: 20px; }

.route-map-grid {
  position: relative;
  width: 100%;
}
.route-map-row {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
}
/* multi-row 일 때만 row 좌우에 패딩을 줘서 첫·마지막 dot이 곡선 안으로 들어오지 않게 */
.route-map-grid.multi-row .route-map-row { padding: 0 48px; }
/* 라인 — row의 padding box 안에서 첫 dot 중심 ~ 마지막 dot 중심 */
.route-map-row::before {
  content: '';
  position: absolute;
  top: 50%; left: 7px; right: 7px;
  height: 2px;
  background: var(--route-line-bg);
  transform: translateY(-50%);
  z-index: 0;
}
.route-map-grid.multi-row .route-map-row::before {
  left: 56px; right: 56px;  /* 48px padding + 8px half-dot */
}
.route-map-stop {
  position: relative;
  /* flex: 0 0 12px; */
  flex-shrink: 0;
  flex-grow: 0;
  z-index: 2;
  display: flex; justify-content: center;
}
.route-map-dot {
  width: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--route-mid-border);
  box-sizing: border-box;
  flex-shrink: 0;
  aspect-ratio: 1/1;
  display: grid; place-items: center;
}
.route-map-stop.first .route-map-dot, .route-map-stop.last .route-map-dot {
  border-color: #fff;
}
.route-map-stop.first .route-map-dot {
  background: var(--route-departure-bg);
  box-shadow: 0 0 0 2px var(--route-departure-bg);
}
.route-map-stop.last .route-map-dot {
  background: var(--route-arrival-bg);
  box-shadow: 0 0 0 2px var(--route-arrival-bg);
}
/* 순환노선 — 마지막 정류장 마커 안에 회전 아이콘. 노선도가 직선(S자)이라
   '여기서 출발지로 돌아온다'를 마커 하나로 알린다.
   크기·도착 컬러·링(box-shadow)은 .last 규칙 그대로 쓰고, 글리프가 마커를 꽉 채우도록
   흰 테두리만 없앤다. */
.route-map-stop.circular .route-map-dot {
  color: #fff;
  border: none;
  position: relative;
}
.route-map-stop.circular .route-map-dot::before {
  content: attr(data-circ-label);   /* 다국어 — routegrid.js 가 rg.circularBadge 번역값을 심는다 */
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  border-radius: 999px;
  border: 1px solid var(--route-arrival-border);
  width: max-content;
  line-height: 1.3;
  background: var(--route-arrival-bg);
  padding: 1px 4px;
  font-size: 10px;
  font-weight: 400;
  color: #fff;
}
.route-map-stop.circular .route-map-dot svg { width: 12px; height: 12px; }

/* 정류장 사이 진행방향 화살표 (한눈에 보는 코스 — 노선도) */
.route-map-arrow {
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 2;
}
/* sr-uchart-arrow 와 동일한 흰 원 + chevron 스타일 (TMS-A-205) */
.route-map-arrow-ic {
  width: 14px; height: 14px;
  display: grid; place-items: center;
  background: #fff;
  color: var(--t-primary);
  border-radius: 50%;
}
.route-map-arrow-ic svg { width: 12px; height: 12px; }
/* 모든 row: 라벨은 항상 dot 위쪽. 긴 sub는 공백 기준 자동 줄바꿈 */
/* 정류장명 — 순환노선 sr-uchart-name 과 동일 스타일(수평·가운데·3줄 말줄임), dot 아래 (TMS-A-205) */
.route-map-label {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 92px;
  font-size: 12px;
  font-weight: 600;
  color: var(--block-text, var(--t-text));
  text-align: center;
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  z-index: 2;
  word-break: keep-all;
}
/* 출발지 라벨도 다른 정류장 라벨과 동일 웨이트 (TMS-A-206) — first 굵게 제거 */
/* U-turn 곡선 — row 간 수직 갭에 위치, 양 row의 라인과 연결 */
.route-map-uturn {
  position: relative;
  height: 130px;  /* 라벨 + 곡선 모두 들어갈 충분한 수직 공간 */
}
.route-map-uturn.uturn-right::after,
.route-map-uturn.uturn-left::after {
  content: '';
  position: absolute;
  top: -7px; bottom: -7px;
  width: 48px;
  border: 2px solid var(--route-line-bg);
  box-sizing: border-box;
}
.route-map-uturn.uturn-right::after {
  right: 7px;
  border-left: none;
  border-radius: 0 24px 24px 0;
}
.route-map-uturn.uturn-left::after {
  left: 7px;
  border-right: none;
  border-radius: 24px 0 0 24px;
}
/* 가로 도표(.route-map-scroll/-grid/-label/-uturn)의 모바일 오버라이드는 없다 —
   모바일에서는 세로 레이아웃(.route-map-v-*)으로 아예 교체되기 때문이다.
   빌더/home: js/types/routegrid.js 가 STATE.currentDevice==='mobile' 에서 early return,
   route-detail: js/route-detail.js 가 innerWidth<=640 에서 early return.
   즉 .device-frame.mobile 이 되는 조건이 곧 가로 도표가 사라지는 조건이라,
   빌더 스위처로 mobile 을 강제해도 그 룰들은 매칭될 수 없었다(삭제됨).
   단, .route-map-tab 의 모바일 룰은 살아있다 — 탭은 모바일 분기 안에서도 렌더된다. */

/* 모바일: 노선도 세로 1열 리스트 */
.route-map-view-btn.full {
  display: flex; width: 100%;
  justify-content: center;
  padding: 12px 16px;
  /* margin-bottom: 14px; */
  font-size: 14px;
  border-radius: 0;
}
.route-map-vertical {
  position: relative;
  padding: 16px 18px;
  background: var(--t-surface);
}
.route-map-v-stop {
  position: relative;
  display: flex; align-items: flex-start;
  padding: 8px 0;
  min-height: 36px;
  column-gap: 12px;
}
/* 세로 라인 — 각 stop의 dot 중심을 통과 */
.route-map-v-stop:not(.last)::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 18px; bottom: -18px;
  width: 2px;
  background: var(--route-line-bg);
}
.route-map-v-dot {
  width: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--route-mid-border);
  box-sizing: border-box;
  z-index: 1;
  flex-shrink: 0;
  margin-top: 3px;
  aspect-ratio: 1/1;
  display: grid; place-items: center;
}
.route-map-v-stop.first .route-map-v-dot, .route-map-v-stop.last .route-map-v-dot {
  border-color: #fff;
}
.route-map-v-stop.first .route-map-v-dot {
  background: var(--route-departure-bg);
  box-shadow: 0 0 0 2px var(--route-departure-bg);
}
.route-map-v-stop.last .route-map-v-dot {
  background: var(--route-arrival-bg);
  box-shadow: 0 0 0 2px var(--route-arrival-bg);
}
/* 순환노선 — 마지막 정류장 마커 안에 회전 아이콘 (가로 노선도와 동일 규칙).
   도착 컬러·링은 위 .last 규칙 그대로, 여기서는 흰 테두리만 없앤다. */
.route-map-v-stop.circular .route-map-v-dot {
  color: #fff;
  border: none;
  position: relative;
}
.route-map-v-stop.circular .route-map-v-dot::before {
  content: attr(data-circ-label);   /* 다국어 — routegrid.js 가 rg.circularBadge 번역값을 심는다 */
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  border-radius: 999px;
  border: 1px solid var(--route-arrival-border);
  width: max-content;
  line-height: 1.3;
  background: var(--route-arrival-bg);
  padding: 1px 4px;
  font-size: 10px;
  font-weight: 400;
  color: #fff;
}
.route-map-v-stop.circular .route-map-v-dot svg { width: 12px; height: 12px; }
.route-map-v-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--block-text, var(--t-text));
  line-height: var(--lh-normal);
}
.route-map-v-stop.first .route-map-v-label { font-weight: 600; }

/* ===== 스토어프론트 슬라이더 공통 (노선 .route-slider / 상품 .ps-product-slider) =====
   두 슬라이더는 DOM 구조가 같다:  .{slider} > .{track}(스크롤러) > .{card}
   여기엔 두 곳이 완전히 동일한 것만 둔다 — 스크롤러 동작 / 카드 폭(브레이크포인트) / 화살표 / 도트.
   카드 내부 디자인(라운드·패딩·타이포·그림자)은 각 컴포넌트 블록에서 따로 잡는다.
   이동·페이지네이션 동작은 js/ui/slider.js 가 data-slider-* 훅으로 구동하며,
   넘길 게 없을 때의 컨트롤 숨김은 모듈이 부여하는 [data-slider-inert] 로 css/slider.css 가 처리한다. */
/* flow-root — 트랙의 음수 마진(아래 --shadow-room 상쇄)이 부모-첫자식 마진 상쇄로 호스트
   밖으로 새어나가는 것을 막는다. 새어나가면 호스트 박스가 --shadow-room 만큼 커지고 카드가
   그만큼 아래에 놓여, top:calc(50% - 26px) 로 잡은 화살표가 --shadow-room/2 만큼 어긋난다.
   position:relative 는 BFC 를 만들지 않아 이 역할을 못 한다. 배치는 block 과 동일하므로
   화살표(absolute)·도트·트랙 모두 영향 없다. */
.route-slider,
.ps-product-slider { position: relative; display: flow-root; }

/* 트랙 = 스크롤러. 스크롤바만 숨기고 가로 스크롤 자체는 유지 */
.route-slider-track,
.ps-product-slider .ps-product-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;

  /* 카드 그림자용 세로 여유 — 트랙은 스크롤러(overflow-y:hidden)이자 마스크 대상이라 카드
     box-shadow 를 잘라낸다. 클리핑 경계를 그림자만큼 밖으로 밀고, 같은 크기의 음수 마진으로
     레이아웃 비용을 0 으로 되돌린다(도트·화살표·섹션 간격 모두 불변).
     overflow-y:visible / overflow-y:clip + overflow-clip-margin 은 대안이 못 된다 —
     overflow-x:auto 와 조합되면 각각 auto / hidden 으로 강제되기 때문(CSS Overflow 3).
     세로만 준다: 가로는 아래 mask 가 어차피 가장자리를 페이드아웃시켜 효과가 없고,
     padding-inline 은 카드의 퍼센트 flex-basis 와 scrollWidth(=도트 개수 역산)를 바꾼다.
     18px = 카드 호버 그림자의 실측 세로 번짐 15px + 여유 3px. blur/2 로 계산하면 과소평가된다 —
     실제 가우시안 꼬리는 blur 의 0.8 배쯤까지 나간다(헤드리스 측정). 그림자 값을 바꾸면
     이 값도 같이 재야 한다. 음수 마진으로 상쇄되므로 넉넉히 잡아도 레이아웃 비용은 0. */
  --shadow-room: 18px;
  padding-block: var(--shadow-room);
  margin-block: calc(var(--shadow-room) * -1);
}
.route-slider-track::-webkit-scrollbar,
.ps-product-slider .ps-product-track::-webkit-scrollbar { display: none; }

/* 카드 폭 — 데스크탑 4개 (gap 16 × 3 = 48). 폭/스냅만 공통, 시각 디자인은 컴포넌트별 */
.route-slider-card,
.ps-product-slider .ps-product-card {
  flex: 0 0 calc((100% - 48px) / 4);
  scroll-snap-align: start;
}
/* 태블릿 — 3개 (gap 16 × 2 = 32) */
.device-frame.tablet .route-slider-card,
.device-frame.tablet .ps-product-slider .ps-product-card { flex-basis: calc((100% - 32px) / 3); }
/* 모바일 — 1개 + peek */
.device-frame.mobile .route-slider-card,
.device-frame.mobile .ps-product-slider .ps-product-card { flex-basis: 82%; }

/* 화살표 — 트랙 좌우 20px 바깥에 걸쳐 배치(ps-block 의 좌우 여백 안쪽이라 잘리지 않는다).
   세로는 도트 영역(26px)만큼 올려 카드의 시각적 중심에 맞춘다. */
.route-slider-arrow,
.ps-product-arrow {
  position: absolute;
  z-index: 2;
  top: calc(50% - 26px);
  transform: translateY(-50%);
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  border: 1px solid var(--t-border);
  border-radius: 999px;
  background: var(--t-surface);
  color: var(--t-text);
  box-shadow: 0 2px 10px rgba(15, 23, 42, .10);
  cursor: pointer;
  transition: all .2s ease-out;
}
.route-slider-arrow.prev,
.ps-product-arrow.prev { left: -20px; }
.route-slider-arrow.next,
.ps-product-arrow.next { right: -20px; }
.route-slider-arrow svg,
.ps-product-arrow svg { width: 20px; height: 20px; }
.route-slider-arrow:hover,
.ps-product-arrow:hover { background: var(--t-bg); border-color: var(--t-border-strong); }
/* 모바일만 화살표 숨김 — 터치에선 스와이프가 1차 조작이고, 40px 버튼이 좁은 화면에서 카드를 가린다.
   태블릿은 마우스/트랙패드 조작도 있어 노출한다. */
.device-frame.mobile .route-slider-arrow,
.device-frame.mobile .ps-product-arrow { display: none; }

/* 도트 — 활성은 길쭉한 pill, 비활성은 작은 점 */
.route-slider-dots,
.ps-product-pagination {
  display: flex; justify-content: center; align-items: center;
  gap: 6px;
  margin-top: 24px;
}
.route-slider-dot,
.ps-product-page-dot {
  width: 8px; height: 8px;
  border: none; padding: 0;
  border-radius: 999px;
  background: var(--t-text-3);
  cursor: pointer;
  transition: all .2s ease-out;
}
.route-slider-dot.active,
.ps-product-page-dot.active { width: 22px; background: var(--t-text); }

/* 스크롤 여지 힌트 — 더 볼 카드가 있는 쪽에서 카드가 서서히 사라지게 한다.
   오버레이를 덧씌우지 않고 트랙 자체를 마스크해 카드를 투명하게 만든다. 뒤의 섹션 배경이
   그대로 비치므로 배경색(cfg.bgColor)이든 배경이미지(cfg.bgImage)든 무관하게 성립한다.
   표시 조건은 모듈이 끝 도달 시 화살표에 거는 :disabled 를 그대로 읽는다(JS 추가 없음).
   화살표가 숨겨지는 모바일에서도 disabled 는 그대로 반영되므로 동일하게 동작한다. */

/* 페이드 "폭"은 고정하고 가장자리 알파만 전환한다. 폭(램프 위치)을 애니메이션하면 램프가
   가로로 움직여 옆에서 밀려 들어오는 것처럼 보이기 때문. 알파만 바꾸면 제자리에서 opacity 처럼
   서서히 나타나고 사라진다.
   --edge-*: 트랙 가장자리 픽셀의 마스크 알파. 1 = 불투명(힌트 없음) / 0 = 완전 투명(힌트 최대).
   <number> 로 등록해야 보간된다 — 미등록 커스텀 속성은 문자열 치환이라 1→0 이 즉시 점프한다.
   inherits:true 여야 host 에서 준 값을 트랙이 물려받는다. @property 미지원 브라우저에서는
   등록만 무시되고 힌트 자체는 그대로 동작한다(전환만 없음). */
@property --edge-l { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --edge-r { syntax: '<number>'; inherits: true; initial-value: 1; }

/* 전환은 값이 바뀌는 host 에 건다. 트랙은 매 프레임 보간된 값을 상속받으므로 별도 transition 불필요 */
.route-slider,
.ps-product-slider {
  --fade-w: 56px;   /* 페이드 폭 — 전환 대상이 아니다(고정) */
  --edge-l: 1;
  --edge-r: 1;
  transition: --edge-l .2s ease-out, --edge-r .2s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .route-slider,
  .ps-product-slider { transition: none; }
}
/* 좁은 화면은 페이드 폭도 줄인다 (폭은 상태와 무관하므로 host 에 한 번만) */
.device-frame.tablet .route-slider,
.device-frame.tablet .ps-product-slider { --fade-w: 40px; }
.device-frame.mobile .route-slider,
.device-frame.mobile .ps-product-slider { --fade-w: 28px; }

/* 그쪽에 더 볼 카드가 있을 때만 가장자리를 투명하게 = 힌트 ON.
   [data-slider-bound] 는 모듈 바인딩 전(모든 화살표가 enabled)의 깜빡임 방지 */
.route-slider[data-slider-bound]:has([data-slider-prev]:not(:disabled)),
.ps-product-slider[data-slider-bound]:has([data-slider-prev]:not(:disabled)) { --edge-l: 0; }
.route-slider[data-slider-bound]:has([data-slider-next]:not(:disabled)),
.ps-product-slider[data-slider-bound]:has([data-slider-next]:not(:disabled)) { --edge-r: 0; }

/* 램프 위치(0 → --fade-w)는 고정. 가장자리 알파가 1 이면 램프 전체가 불투명 = 힌트 없음 */
.route-slider-track,
.ps-product-slider .ps-product-track {
  -webkit-mask-image: linear-gradient(to right,
      rgba(0,0,0,var(--edge-l)) 0, #000 var(--fade-w),
      #000 calc(100% - var(--fade-w)), rgba(0,0,0,var(--edge-r)) 100%);
          mask-image: linear-gradient(to right,
      rgba(0,0,0,var(--edge-l)) 0, #000 var(--fade-w),
      #000 calc(100% - var(--fade-w)), rgba(0,0,0,var(--edge-r)) 100%);
}

/* ===== 노선 슬라이더 (route-slider) — 카드 디자인 전용 =====
   구조/폭/컨트롤은 위 "슬라이더 공통" 블록 참고. 여기는 노선 카드 고유 외형만. */
.route-slider-card {
  background: var(--t-surface);
  border: 1px solid var(--t-border);
  border-radius: 12px;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
  transition: all .2s ease-out;
}
/* 호버 그림자 — 음수 spread 로 "세로로만 번지는" 그림자를 만든다. 트랙은 가로 스크롤러라
   좌우 끝(첫/마지막 카드)에서 그림자가 수직선으로 잘리는데, 하필 그 끝에서는 가장자리 마스크가
   불투명해져(--edge-*: 1) 페이드로 가려주지도 못한다. spread 를 음수로 주면 그림자 사각형이
   카드보다 안쪽으로 줄어들어 좌우로 나가는 양이 거의 없고, 잘릴 것이 없으면 경계도 안 보인다.
   실측(헤드리스): 경계 계단 대비 8.0 → 2.0 (사실상 비가시), 그림자 존재감은 14 → 23 으로 강해짐.
   세로 번짐은 카드 아래 15px 로 --shadow-room 안에 들어온다. */
.route-slider-card:hover {
  box-shadow: 0 12px 16px -14px rgba(15, 23, 42, .26);
  border-color: var(--t-border-strong);
}
.route-slider-thumb {
  aspect-ratio: 4 / 3;
  background: var(--t-bg);
  overflow: hidden;
}
.route-slider-thumb img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
.route-slider-body {
  padding: 18px 20px 22px;
  display: flex; flex-direction: column;
  gap: 14px;
}
.route-slider-name {
  font-size: 17px; font-weight: 700;
  color: var(--t-text);
  letter-spacing: -.02em;
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--t-border);
  line-height: var(--lh-snug);
}
.route-slider-info {
  display: flex; flex-direction: column;
  gap: 6px;
}
.route-slider-row {
  display: flex; align-items: center;
  gap: 14px;
  font-size: 13.5px;
  line-height: var(--lh-normal);
}
.route-slider-label {
  font-weight: 600;
  color: var(--t-text);
  min-width: 56px;
  flex-shrink: 0;
}
.route-slider-value {
  color: var(--t-text-2);
  font-variant-numeric: tabular-nums;
}

/* 태블릿 — 카드 내부 타이포/여백만 (폭·컨트롤은 "슬라이더 공통" 블록) */
.device-frame.tablet .route-slider-name { font-size: 15px; }
.device-frame.tablet .route-slider-body { padding: 14px 16px 18px; gap: 12px; }
.device-frame.tablet .route-slider-row { font-size: 12.5px; }
.device-frame.tablet .route-slider-label { min-width: 48px; }

/* 모바일 — 카드 내부 타이포/여백만 */
.device-frame.mobile .route-slider-name { font-size: 14.5px; }
.device-frame.mobile .route-slider-body { padding: 12px 14px 16px; gap: 10px; }
.device-frame.mobile .route-slider-row { font-size: 12px; }
.device-frame.mobile .route-slider-label { min-width: 44px; }

.route-list-empty {
  background: var(--t-bg);
  border: 1px dashed var(--t-border);
  border-radius: 12px;
  padding: 48px 24px;
  text-align: center;
  font-size: 13px;
  color: var(--t-text-2);
  line-height: var(--lh-relaxed);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 3;
  gap: 12px;
}
.route-list-empty-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--t-border);
  display: grid; place-items: center;
  color: var(--t-text-3);
}
.route-list-empty-icon svg { width: 20px; height: 20px; }

.route-item {
  background: var(--t-surface);
  border: 1px solid var(--t-border);
  border-radius: 12px;
  /* padding: 24px 28px; */
  transition: all .2s ease-out;
  overflow: hidden;
}
.route-item:hover {
  border-color: var(--t-border-strong);
  box-shadow: 0 4px 14px rgba(0,0,0,0.04);
}
/* .device-frame.mobile .route-item { padding: 20px 18px; } */

.route-item-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 24px 28px;
  cursor: pointer;
  user-select: none;
  transition: all .3s ease-out;
  line-height: normal;
  position: relative;
}
.device-frame.mobile .route-item-head { padding: 18px; }
.route-item-head::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 28px;
  right: 28px;
  height: 1px;
  background: var(--t-border-soft);
  opacity: 1;
  transition: opacity .2s ease-out;
}
.route-item.collapsed .route-item-head::before {
  opacity: 0;
}
.device-frame.mobile .route-item-head::before {
  left: 18px;
  right: 18px;
}
.route-item-head:hover .route-item-name { color: var(--t-primary); }
.route-item-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--t-text);
  letter-spacing: -.01em;
  margin: 0;
  transition: all .2s ease-out;
  flex-shrink: 0;
}
.device-frame.mobile .route-item-name { font-size: 15px; }
.route-item-summary {
  flex: 1;
  font-size: 12.5px;
  color: var(--t-text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0;
  transition: all .2s ease-out;
}
.route-item.collapsed .route-item-summary {
  opacity: 1;
}
.device-frame.mobile .route-item-summary { display: none; }
.route-item-toggle-icon {
  width: 16px; height: 16px;
  color: var(--t-text-2);
  flex-shrink: 0;
  transition: all .3s ease-out;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 아이콘 소스는 오른쪽(›) chevron(ICN.chevR). 아코디언 관례에 맞춰
     펼침 = 위(⌃) → -90° 회전 / 접힘 = 아래(⌄) → +90° 회전 */
  transform: rotate(-90deg);
}
.route-item-toggle-icon svg { width: 100%; height: 100%; }
.route-item.collapsed .route-item-toggle-icon {
  /* 접힘 상태 = 아래(⌄) */
  transform: rotate(90deg);
}

.route-stops {
  position: relative;
  display: grid;
  grid-template-rows: 1fr;
  padding: 20px 28px;
  opacity: 1;
  transition: all .3s ease-out;
}
.device-frame.mobile .route-stops { padding: 8px 18px; }
.route-stops-inner {
  /* overflow: hidden; */
  min-height: 0;               /* allow grid child to shrink below its content height */
}
.route-item.collapsed .route-stops {
  grid-template-rows: 0fr;
  opacity: 0;
  padding-block: 0;
}
.route-stop {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 8px 0;
  position: relative;
  min-height: 32px;
}
.device-frame.mobile .route-stop { gap: 12px; }

/* Per-stop connector line: from this dot's center down to the next stop's dot center.
   This keeps the line bounded by actual dot positions regardless of variable stop content height. */
.route-stop:not(.last)::before {
  content: "";
  position: absolute;
  left: 5px;       /* dot center within .route-stop = radius(6) - line halfWidth(1) */
  top: 18px;       /* current dot center: padding-top(8) + margin-top(4) + radius(6) */
  bottom: -18px;   /* extend into next stop down to its dot center */
  width: 2px;
  background: var(--route-line-bg);
  z-index: 0;
}
.route-stop-dot {
  width: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #4A8FE7;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  margin-top: 4px;
  aspect-ratio: 1/1;
  display: grid; place-items: center;
}
.route-stop-dot.origin, .route-stop-dot.endpoint {
  border-color: #fff;
}
.route-stop-dot.origin {
  background: var(--route-departure-bg);
  box-shadow: 0 0 0 2px var(--route-departure-bg);
}
.route-stop-dot.endpoint {
  background: var(--route-arrival-bg);
  box-shadow: 0 0 0 2px var(--route-arrival-bg);
}
/* 순환노선 — 마지막 정류장 마커 안에 회전 아이콘 (노선도와 동일 규칙).
   크기·도착 컬러·링은 .endpoint 규칙 그대로 쓰고, 글리프가 마커를 꽉 채우도록
   흰 테두리만 없앤다. */
.route-stop.circular .route-stop-dot {
  color: #fff;
  border: none;
  position: relative;
}
.route-stop.circular .route-stop-dot::before {
  content: attr(data-circ-label);   /* 다국어 — routegrid.js 가 rg.circularBadge 번역값을 심는다 */
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  border-radius: 999px;
  border: 1px solid var(--route-arrival-border);
  width: max-content;
  line-height: 1.3;
  background: var(--route-arrival-bg);
  padding: 1px 4px;
  font-size: 10px;
  font-weight: 400;
  color: #fff;
}
.route-stop.circular .route-stop-dot svg { width: 12px; height: 12px; }
.route-stop-info {
  flex: 1;
  min-width: 0;
}
.route-stop-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--t-text);
  line-height: var(--lh-normal);
}
.device-frame.mobile .route-stop-name { font-size: 13px; }
.route-stop-sub {
  font-size: 12px;
  color: var(--t-text-2);
  margin-top: 3px;
}
.route-stop-times {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.route-stop-time {
  display: inline-block;
  padding: 3px 9px;
  background: #F0F4FA;
  border-radius: 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: #455A75;
  font-variant-numeric: tabular-nums;
}
.route-stop-loc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: var(--t-surface);
  border: 1px solid var(--t-border);
  border-radius: 14px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--t-text-2);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
  transition: all .2s ease-out;
}
.route-stop-loc:hover {
  border-color: var(--t-border-strong);
  color: var(--t-text);
}
.route-stop-loc svg { width: 11px; height: 11px; }
/* 모바일에선 아이콘만 남겨 콤팩트하게 — 예약완료/예약상세/결제 요약 행이 좁은 화면에서
   밀리지 않도록. 이 버튼은 .device-frame 이 없는 페이지들에서 렌더되므로 body.vp-* 도 받는다. */
:is(.device-frame.mobile, body.vp-mobile) .route-stop-loc span { display: none; }
:is(.device-frame.mobile, body.vp-mobile) .route-stop-loc { padding: 5px 8px; }

/* ===== FEATURED PRODUCT SECTION =====
   Shared card design: light card, thumb on top + info below.
   2 layout variants: grid / slider. */
.ps-product-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  overflow: hidden;
  text-align: left;
  border: 1px solid var(--t-border-soft);
  padding: 10px;
  border-radius: 12px;
}
.ps-product-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: var(--t-surface-2);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.ps-product-tag {
  position: absolute;
  top: 10px; left: 10px;
  display: inline-flex; align-items: center;
  height: 22px;
  padding: 0 8px;
  font-size: 11px; font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,.72);
  border-radius: 4px;
  letter-spacing: .02em;
  backdrop-filter: blur(4px);
}
/* Sold-out state — dark overlay + center label, dimmed info text. */
.ps-product-sold-out-overlay {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
  z-index: 2;
}
.ps-product-sold-out-label {
  padding: 8px 18px;
  font-size: 15px; font-weight: 800;
  letter-spacing: .12em;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(2px);
}
.ps-product-card--sold-out .ps-product-title,
.ps-product-card--sold-out .ps-product-sub,
.ps-product-card--sold-out .ps-product-price,
.ps-product-card--sold-out .ps-product-price-orig {
  color: var(--t-text-3);
}
.ps-product-card--sold-out .ps-product-price { text-decoration: line-through; }
.ps-product-card--sold-out .ps-product-tag { opacity: 0.7; }
.ps-product-info {
  padding-top: 12px;
  display: flex; 
  flex-direction: column; 
  gap: 4px;
  flex-grow: 1;
  justify-content: space-between;
}
.ps-product-title {
  font-size: 14px; font-weight: 500;
  color: var(--t-text);
  line-height: var(--lh-normal);
  letter-spacing: -.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
          line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ps-product-sub {
  font-size: 12.5px;
  color: var(--block-text, var(--t-text-2));
  line-height: var(--lh-normal);
  display: -webkit-box;
  -webkit-line-clamp: 1;
          line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 0;
  margin-bottom: auto;
}
/* 하단 행 — 가격(좌) + 상품보기 버튼(우) */
.ps-product-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 18px;
}
.ps-product-price-row {
  display: flex; align-items: baseline; gap: 8px;
  min-width: 0;
}
.ps-product-book {
  display: inline-flex; align-items: center; gap: 4px;
  flex-shrink: 0;
  padding: 6px 14px;
  font-size: 12.5px; font-weight: 700;
  color: #fff;
  background: var(--t-primary, #2563EB);
  border: none; border-radius: 24px 24px 24px 0;
  cursor: pointer; white-space: nowrap;
  transition: all .2s ease-out;
  display: none; /* 기능이 없어서 일단 숨김 */
}
.ps-product-book:hover { background: var(--t-primary-strong, #1D4ED8); }
.ps-product-book:active { transform: translateY(1px); }
.ps-product-book svg { width: 13px; height: 13px; }
.ps-product-card--sold-out .ps-product-book { opacity: .45; pointer-events: none; }
.ps-product-price {
  font-size: 15px; font-weight: 600;
  color: var(--t-text);
}
.ps-product-price-orig {
  font-size: 13px;
  color: var(--t-text-3);
  text-decoration: line-through;
}

/* Empty placeholder */
.ps-featured .ps-block-head,
.ps-featured .ps-product,
.ps-featured .ps-product-empty,
.ps-featured .ps-product-criteria {
  position: relative;
  z-index: 3;
}
/* ===== Product display-criteria filter bar (region / day-of-week) ===== */
.ps-product-criteria {
  display: flex;
  gap: 4px;
  padding: 6px;
  margin-bottom: 18px;
  background: #fff;
  border: 1px solid var(--t-border);
  border-radius: 999px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ps-product-criteria::-webkit-scrollbar { display: none; }
.ps-product-criteria-tab {
  flex: 1;
  padding-block: 12px;
  border: none;
  background: transparent;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--t-text);
  cursor: pointer;
  transition: all .2s ease-out;
  /* min-width: max-content; */
  /* white-space: nowrap; */
}
.ps-product-criteria-tab:hover { background: var(--t-surface-2); }
.ps-product-criteria-tab.active {
  background: var(--t-primary, #5B5BD6);
  color: #fff;
}
/* Weekend accent colors apply only to inactive day pills (kept readable);
   active state always uses the unified brand color across region/day variants. */
.ps-product-criteria-day .ps-product-criteria-tab.accent-sat:not(.active) { color: #2563EB; }
.ps-product-criteria-day .ps-product-criteria-tab.accent-sun:not(.active) { color: #DC2626; }
.device-frame.mobile .ps-product-criteria-tab { padding-block: 8px; font-size: 13px; }

.ps-product-empty {
  border: 1px dashed var(--t-border);
  border-radius: 12px;
  padding: 40px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--t-text-3);
  text-align: center;
  font-size: 13px;
}
.ps-product-empty-icon { width: 28px; height: 28px; opacity: .5; }
.ps-product-empty-icon svg { width: 100%; height: 100%; }

/* ===== HTML CODE SECTION ===== */
.ps-htmlcode {
  position: relative;
}
.ps-htmlcode.ps-htmlcode-full {
  margin: 0;
  padding: 0;
}
.ps-htmlcode-empty {
  border: 1px dashed var(--t-border);
  border-radius: 8px;
  padding: 40px 20px;
  font-size: 13px;
  color: var(--t-text-3);
  text-align: center;
  background: var(--t-bg);
}

/* Layout: grid — 4-col uniform */
.ps-product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px 16px;
}
.device-frame.tablet .ps-product-grid { grid-template-columns: repeat(3, 1fr); }
.device-frame.mobile .ps-product-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; }

/* Layout: slider — 카드 디자인 전용. 구조/폭/컨트롤은 "슬라이더 공통" 블록(노선 슬라이더 위) 참고 */
.ps-product-slider .ps-product-card {
  background: var(--t-surface);
  border: 1px solid var(--t-border);
  border-radius: 0;
  padding: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .04);   /* 노선 슬라이더 카드와 동일한 정지 그림자 */
  transition: all .2s ease-out;
}
/* 호버 그림자 — 노선 슬라이더 카드와 동일 값. 음수 spread 를 쓰는 이유는 그쪽 주석 참고. */
.ps-product-slider .ps-product-card:hover {
  box-shadow: 0 12px 16px -14px rgba(15, 23, 42, .26);
  border-color: var(--t-border-strong);
}
/* 카드 내부 이미지 — 패딩 인셋 (각진 모서리) */
.ps-product-slider .ps-product-thumb {
  border-radius: 0;
  aspect-ratio: 4 / 3;
}
.ps-product-slider .ps-product-info {
  padding-top: 12px;
  gap: 4px;
}
.ps-product-slider .ps-product-title {
  font-size: 14.5px; font-weight: 500;
  -webkit-line-clamp: 2;
          line-clamp: 2;
}
.ps-product-slider .ps-product-sub {
  font-size: 12.5px;
  color: var(--t-text-2);
}
.ps-product-slider .ps-product-price-row {
  margin-top: 0;
}
.ps-product-slider .ps-product-price {
  font-size: 16px; font-weight: 700;
}

/* === 카드 섹션 (그리드 전용, 데스크탑/태블릿 max 3열, 모바일 1열) === */
.ps-cards-card {
  display: flex; flex-direction: column;
  background: transparent;
  text-align: left;
}
.ps-cards-thumb {
  width: 100%;
  aspect-ratio: 3 / 2;
  background-color: var(--t-surface-2);
  background-size: cover;
  background-position: center;
}
.ps-cards-info {
  padding: 16px 0 0;
  display: flex; flex-direction: column; gap: 12px;
}
.ps-cards-title {
  font-size: 17px; font-weight: 500;
  color: var(--t-text);
  line-height: var(--lh-normal);
  letter-spacing: -.01em;
  margin: 0;
}
.ps-cards-body {
  font-size: 13.5px;
  color: var(--block-text, var(--t-text-2));
  line-height: var(--lh-normal);
  margin: 0;
  white-space: pre-line;
}
.ps-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 24px;
}
.device-frame.tablet .ps-cards-grid { grid-template-columns: repeat(3, 1fr); gap: 28px 18px; }
.device-frame.mobile .ps-cards-grid { grid-template-columns: 1fr; gap: 32px; }
.ps-cards-empty {
  padding: 48px 24px;
  background: var(--t-bg);
  border: 1px dashed var(--t-border);
  border-radius: 12px;
  text-align: center;
  color: var(--t-text-2);
  font-size: 13px;
}
.ps-cards-empty-icon { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--t-surface-2); color: var(--t-text-3); margin-bottom: 10px; }
.ps-cards-empty-icon svg { width: 20px; height: 20px; }


/* ===== CUSTOMER CENTER SECTION =====
   Sits at the bottom of the page, just above the footer.
   Title row + "홈페이지 바로가기" button on right, info in 2x2 grid below. */
.ps-cc {
  padding-block: 28px;
  padding-inline: max(24px, calc((100% - 1160px) / 2));
}
.device-frame.tablet .ps-cc { padding: 24px 36px; }
.device-frame.mobile .ps-cc { padding: 20px 22px; }
.ps-cc-inner { max-width: 1200px; margin: 0 auto; }
.ps-cc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--t-border);
}
.ps-cc-title {
  font-size: 18px; font-weight: 800;
  color: var(--cc-title, var(--t-text));
  letter-spacing: -.01em;
}
.ps-cc-website-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  font-size: 13px; font-weight: 600;
  color: var(--cc-title, var(--t-text));
  background: #fff;
  border: 1px solid var(--t-border);
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: all .2s ease-out;
  white-space: nowrap;
}
.ps-cc-website-btn:hover { background: var(--t-bg); border-color: var(--t-border-strong); }
.ps-cc-website-btn svg { width: 14px; height: 14px; }
.ps-cc-website-btn-arrow {
  margin-left: 2px;
  transition: all .2s ease-out;
}
.ps-cc-website-btn:hover .ps-cc-website-btn-arrow { transform: translateX(2px); }
/* 2x2 grid (4 items: phone, hours, languages, email). */
.ps-cc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 32px;
}
.ps-cc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.ps-cc-row-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--t-surface-2);
  display: grid; place-items: center;
  color: var(--t-text-2);
  flex-shrink: 0;
}
.ps-cc-row-icon svg { width: 16px; height: 16px; }
.ps-cc-row-value {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--cc-text, var(--t-text));
  line-height: var(--lh-normal);
  word-break: break-all;
  flex: 1;
  min-width: 0;
}
/* Mobile: 1 column + button below title. */
.device-frame.mobile .ps-cc-head { flex-direction: column; align-items: flex-start; gap: 10px; }
.device-frame.mobile .ps-cc-website-btn { align-self: stretch; justify-content: center; }
.device-frame.mobile .ps-cc-grid { grid-template-columns: 1fr; gap: 10px; }
/* Hidden state — only visible in builder, not in published output. */
.ps-cc-hidden {
  padding: 16px 140px;
}
.device-frame.tablet .ps-cc-hidden { padding: 14px 36px; }
.device-frame.mobile .ps-cc-hidden { padding: 12px 22px; }
.ps-cc-hidden-msg {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  border: 1px dashed var(--t-border);
  border-radius: 8px;
  background: var(--t-bg);
  font-size: 12.5px;
  color: var(--t-text-2);
}
.ps-cc-hidden-msg svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ===== BANNER SECTION =====
   Single-slide carousel with dot navigation (only shown when 2+ images). */
.ps-banner {
  position: relative;
  padding-block: 24px;
  padding-inline: max(24px, calc((100% - 1160px) / 2));
}
.device-frame.tablet .ps-banner { padding: 20px 36px; }
.device-frame.mobile .ps-banner { padding: 14px 22px; }
/* 슬라이드를 겹쳐 쌓는 컨테이너 — 비율/라운딩/hover 는 여기가 갖는다.
   (슬라이드가 absolute 라 자기 비율을 못 가지며, hover 로 들어 올리면 스택 밖으로 밀린다) */
.ps-banner-stack {
  position: relative;
  width: 100%;
  /* Fixed 8:1 ratio — recommended source size 1280×160. */
  aspect-ratio: 8 / 1;
  border-radius: 4px;
  overflow: hidden;
  background-color: var(--t-surface-2);
  transition: all .2s ease-out;
}
/* .ps-banner-stack:hover { transform: translateY(-1px); } */
.ps-banner-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: all .2s ease-out;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  text-decoration: none;
}
.ps-banner-slide.active { opacity: 1; z-index: 1; }
.ps-banner-placeholder {
  padding: 60px 24px;
  border: 1px dashed var(--t-border);
  border-radius: 12px;
  text-align: center;
  font-size: 13px;
  color: var(--t-text-2);
  background: var(--t-bg);
}
.ps-banner-empty { padding: 24px 140px; }
.device-frame.tablet .ps-banner-empty { padding: 20px 36px; }
.device-frame.mobile .ps-banner-empty { padding: 14px 22px; }
.ps-banner-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
}
.ps-banner-dot {
  width: 8px; height: 8px;
  border: none; padding: 0;
  border-radius: 999px;
  background: var(--t-border-strong);
  cursor: pointer;
  transition: all .2s ease-out;
}
.ps-banner-dot:hover { background: var(--t-text-3); }
.ps-banner-dot.active { width: 22px; background: var(--t-text); }

/* ===== GUIDE SECTION =====
   1~3 cards with circular icon, title, body. Card-count drives auto width. */
.ps-guide-cards {
  display: grid;
  gap: 16px;
}
.ps-guide-cards[data-count="1"] { grid-template-columns: 1fr; }
.ps-guide-cards[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.ps-guide-cards[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.ps-guide-card {
  background: #fff;
  border: 1px solid var(--t-border);
  border-radius: 12px;
  padding: 32px 24px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: 14px;
}
.ps-guide-card-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: #DBEAFE;
  color: #2563EB;
  flex-shrink: 0;
}
.ps-guide-card-icon svg { width: 22px; height: 22px; }
/* Per-card accent colors mirror the reference design: blue / green / red. */
.ps-guide-cards .ps-guide-card:nth-child(2) .ps-guide-card-icon { background: #D1FAE5; color: #047857; }
.ps-guide-cards .ps-guide-card:nth-child(3) .ps-guide-card-icon { background: #FEE2E2; color: #DC2626; }
.ps-guide-card-title {
  font-size: 16px; font-weight: 700;
  color: var(--t-text);
  letter-spacing: -.01em;
  margin: 0;
}
.ps-guide-card-body {
  font-size: 13px;
  color: var(--block-text, var(--t-text-2));
  line-height: var(--lh-normal);
  margin: 0;
}
.device-frame.tablet .ps-guide-cards[data-count="3"] { grid-template-columns: repeat(2, 1fr); }
.device-frame.tablet .ps-guide-cards[data-count="3"] .ps-guide-card:last-child { grid-column: span 2; max-width: 480px; justify-self: center; width: 100%; }
.device-frame.mobile .ps-guide-cards { grid-template-columns: 1fr; }
.device-frame.mobile .ps-guide-cards[data-count] { grid-template-columns: 1fr; }
.device-frame.mobile .ps-guide-cards[data-count="3"] .ps-guide-card:last-child { grid-column: auto; max-width: none; }
.device-frame.mobile .ps-guide-card { padding: 24px 18px; }

.faq-list { margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--t-border); padding: 18px 0; }
.faq-more-wrap { display: flex; justify-content: center; margin-top: 24px; }
.faq-more-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 11px 24px;
  font-size: 13px; font-weight: 600;
  color: var(--t-text);
  background: #fff;
  border: 1px solid var(--t-border);
  border-radius: 999px;
  cursor: pointer;
  transition: all .2s ease-out;
}
.faq-more-btn:hover { background: var(--t-surface-2); border-color: var(--t-border-strong); }
.faq-more-btn svg { width: 14px; height: 14px; }

/* ===== FAQ 페이지 (콘텐츠 페이지 미리보기) ===== */
.faqpage-wrap { padding-inline: max(24px, calc((100% - 1160px) / 2)); }
/* Category filter tab bar — pill style, primary-colored active. */
.faqpage-tabs {
  display: flex; align-items: center; gap: 4px;
  background: #fff;
  border: 1px solid var(--t-border);
  border-radius: 12px;
  padding: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.faqpage-tabs::-webkit-scrollbar { display: none; }
.faqpage-tab {
  display: inline-flex; align-items: center; gap: 6px;
  flex: 1; min-width: max-content;
  justify-content: center;
  padding: 11px 18px;
  border: none; background: transparent;
  border-radius: 999px;
  font-size: 14px; font-weight: 600;
  color: var(--t-text-2);
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s ease-out;
}
.faqpage-tab svg { width: 15px; height: 15px; }
.faqpage-tab:hover { background: var(--t-surface-2); }
.faqpage-tab.active { background: var(--t-primary, #2563EB); color: #fff; }
/* Accordion list */
.faqpage-list {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--t-border);
  border-radius: 12px;
  overflow: hidden;
}
.faqpage-item { border-bottom: 1px solid var(--t-border-soft); }
.faqpage-item:last-child { border-bottom: none; }
.faqpage-q {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 20px 22px;
  background: none; border: none;
  text-align: left;
  cursor: pointer;
  font-size: 15px; font-weight: 700;
  color: var(--t-text);
}
.faqpage-q-badge {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--t-primary, #2563EB);
  color: #fff;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800;
}
.faqpage-q-text { flex: 1; min-width: 0; }
.faqpage-q-chev {
  flex-shrink: 0; color: var(--t-text-3);
  display: inline-flex;
  transition: all .2s ease-out;
}
.faqpage-q-chev svg { width: 18px; height: 18px; }
.faqpage-item.open .faqpage-q-chev { transform: rotate(180deg); }
.faqpage-a {
  max-height: 0;
  overflow: hidden;
  padding: 0 22px 0 60px;
  font-size: 14px; line-height: var(--lh-relaxed);
  color: var(--t-text-2);
  transition: all .2s ease-out;
}
.faqpage-item.open .faqpage-a { max-height: 600px; padding: 0 22px 20px 60px; }
.faqpage-empty { padding: 48px; text-align: center; color: var(--t-text-3); font-size: 13px; }


/* ===== COMING SOON PLACEHOLDER ===== */
.coming-soon {
  padding: 80px 48px;
  text-align: center;
  background: var(--t-bg);
}
.coming-soon-mark {
  width: 56px; height: 56px;
  background: var(--t-surface-2);
  border: 1px solid var(--t-border);
  border-radius: 14px;
  display: grid; place-items: center;
  margin: 0 auto 20px;
  color: var(--t-text-3);
}
.coming-soon-mark svg { width: 24px; height: 24px; }
.coming-soon h2 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 8px; color: var(--t-text); font-family: var(--font-sans); }
.coming-soon p { font-size: 14px; color: var(--t-text-2); max-width: 420px; margin: 0 auto 24px; line-height: var(--lh-relaxed); font-family: var(--font-sans); }
.coming-soon-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--brand); color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 12px; font-weight: 600;
  font-family: var(--font-sans);
}


/* ===== STANDALONE PREVIEW MODE =====
   Applied (body.preview-mode) when the document is opened in a new window via
   [미리보기]. Strips all builder chrome and renders the tenant site full-bleed.
   The device tier follows the live window width, so resizing the window
   genuinely exercises the tablet/mobile layouts. */
body.preview-mode { min-width: 0; }
body.preview-mode .topbar,
body.preview-mode .panel-l,
body.preview-mode .panel-r { display: none !important; }
body.preview-mode .builder { grid-template-columns: 1fr; }
body.preview-mode .preview-area { padding: 0; background: #fff; }
body.preview-mode .device-frame {
  max-width: none !important;
  width: 100%;
  min-height: 100%;
  border-radius: 0;
  box-shadow: none;
  transition: none;
}



/* ===== BRAND STORY SECTION (js/types/brandstory.js) =====
   Content 섹션 타입. 모달이 아니므로 modals.css에서 이관. */
.brand-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding-block: 64px;
  padding-inline: max(24px, calc((100% - 1160px) / 2));
  background: var(--t-bg);
}
/* Image-on-left mode: swap order of text and image columns. */
.brand-story.reverse > .brand-story-text { order: 2; }
/* No-image mode: single column, text spans full width */
.brand-story.no-image { grid-template-columns: 1fr; }
.device-frame.tablet .brand-story { padding-block: 48px; gap: 32px; }
.device-frame.mobile .brand-story { grid-template-columns: 1fr; gap: 24px; padding: 32px 16px; }
.device-frame.mobile .brand-story.reverse > .brand-story-text { order: 0; }

/* Text & CTA alignment */
.brand-story.align-center .brand-story-text { text-align: center; }
.brand-story.align-right  .brand-story-text { text-align: right; }
.brand-story.align-center .brand-story-cta,
.brand-story.align-right  .brand-story-cta { display: inline-flex; }
.brand-story.align-center .brand-story-text { display: flex; flex-direction: column; align-items: center; }
.brand-story.align-right  .brand-story-text { display: flex; flex-direction: column; align-items: flex-end; }
.brand-story h3 {
  font-size: 28px; font-weight: 800;
  letter-spacing: -.025em; line-height: var(--lh-tight);
  margin-bottom: 16px;
  color: var(--intro-title, var(--t-text));
  white-space: pre-wrap;
}
.device-frame.mobile .brand-story h3 { font-size: 20px; }
.brand-story p {
  font-size: 14px;
  color: var(--intro-body, var(--t-text-2));
  line-height: var(--lh-relaxed);
  margin-bottom: 12px;
  white-space: pre-wrap;
}
.brand-story-img {
  aspect-ratio: 4/3;
  background-color: var(--t-surface-2);
  background-image:
    linear-gradient(135deg, rgba(197,40,61,.05), rgba(197,40,61,.18)),
    repeating-linear-gradient(45deg, transparent, transparent 12px, rgba(197,40,61,.04) 12px, rgba(197,40,61,.04) 13px);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--t-border);
  border-radius: 12px;
}
/* CTA button below body text. */
.brand-story-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  border-radius: 6px;
  background: var(--intro-cta-bg, var(--t-text));
  color: var(--intro-cta-text, #FFFFFF);
  text-decoration: none;
  cursor: pointer;
  transition: all .2s ease-out;
}
.brand-story-cta:hover { opacity: .9; transform: translateY(-1px); }
.brand-story-cta:active { transform: translateY(0); }
.brand-story-cta-arrow {
  display: inline-block;
  margin-left: 6px;
  transition: all .2s ease-out;
}
.brand-story-cta:hover .brand-story-cta-arrow { transform: translateX(3px); }
.device-frame.mobile .brand-story-cta { font-size: 13px; padding: 11px 20px; margin-top: 18px; }

/* ── 제휴상품(하늘엔) 섹션 — TMS-A-290 진입점 ─────────────────── */
.ps-hn-section .ps-block-inner { max-width: 1080px; margin: 0 auto; padding: 48px 24px; }
.ps-hn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
.ps-preview[data-device="tablet"] .ps-hn-grid { grid-template-columns: repeat(2, 1fr); }
.ps-preview[data-device="mobile"] .ps-hn-grid { grid-template-columns: 1fr; }
@media (max-width: 900px) { .ps-hn-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ps-hn-grid { grid-template-columns: 1fr; } }
.ps-hn-card {
  display: flex; flex-direction: column; text-decoration: none;
  border: 1px solid var(--t-border-soft, #e5e7eb); border-radius: var(--t-radius, 12px);
  overflow: hidden; background: var(--t-bg, #fff);
  transition: box-shadow .15s ease, transform .15s ease;
}
.ps-hn-card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, .08); transform: translateY(-2px); }
.ps-hn-thumb { aspect-ratio: 4/3; background: var(--t-bg-soft, #f3f4f6); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ps-hn-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-hn-noimg { color: var(--t-text-3); font-size: 13px; }
.ps-hn-body { padding: 14px 16px 16px; }
.ps-hn-body h3 { font-size: 16px; font-weight: 700; color: var(--t-text); margin: 0 0 6px; }
.ps-hn-body p {
  font-size: 13px; color: var(--t-text-3); margin: 0; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ps-hn-empty { padding: 40px 0; text-align: center; color: var(--t-text-3); font-size: 14px; }
.ps-hn-more { margin-top: 24px; text-align: center; }
.ps-hn-more-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 22px;
  border: 1px solid var(--t-border, #d1d5db); border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--t-text); text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.ps-hn-more-btn:hover { border-color: var(--t-primary); color: var(--t-primary); }
/* 스켈레톤 — 캐시 미로드 1회차 렌더 */
.ps-hn-skeleton .ps-hn-thumb { background: linear-gradient(90deg, #f3f4f6 25%, #e9ebee 37%, #f3f4f6 63%); background-size: 400% 100%; animation: psHnShimmer 1.2s ease infinite; }
.ps-hn-skeleton .ps-hn-body i { display: block; height: 14px; border-radius: 4px; background: #f0f1f3; margin-bottom: 8px; }
.ps-hn-skeleton .ps-hn-body i:last-child { width: 70%; }
@keyframes psHnShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
/* 제휴상품 카드 위치·대표가 (TMS-A-296) */
.ps-hn-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.ps-hn-loc { font-size: 12px; color: var(--t-text-3); }
.ps-hn-price { font-size: 15px; font-weight: 800; color: var(--t-primary); }

/* 구 @media (max-width:1023px) 블록 제거 — 헤더(GNB/액션/햄버거)와 검색바 그리드는
   모두 :is(.device-frame.X, body.vp-X) 스코프가 전담한다. .device-frame.tablet/.mobile 이
   ≤1023 과 같은 범위(tablet+mobile)라 커버리지 손실이 없다.
   이제 이 파일에 남은 크기 기반 미디어쿼리는 .ps-hn-grid(900/560px) 뿐이다. */