/* Tour-only styles. Shared site/admin styles are intentionally untouched. */
#sjt-tour { --sjt-deep:#071e3b; --sjt-cyan:#77e5e0; --sjt-border:#e1e8f0; padding:64px 0 72px; background:linear-gradient(180deg,#f4f8fc,#fff); }
#sjt-tour [hidden] { display:none !important; }
#sjt-tour button { cursor:pointer; }
#sjt-tour button:focus-visible, #sjt-tour a:focus-visible, #sjt-tour [tabindex]:focus-visible { outline:3px solid #17a4ac; outline-offset:4px; }
#sjt-tour .sjt-tour-intro { display:flex; justify-content:space-between; align-items:center; gap:32px; margin-bottom:30px; }
#sjt-tour .sjt-tour-eyebrow { display:flex; align-items:center; gap:9px; color:#0b6375; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.15em; }
#sjt-tour .sjt-tour-eyebrow i { width:7px; height:7px; border-radius:50%; background:#119b9c; box-shadow:0 0 0 5px #119b9c12; }
#sjt-tour .sjt-tour-intro h2 { margin:14px 0 12px; font-size:clamp(26px,3.3vw,40px); line-height:1.1; letter-spacing:-.04em; color:#082f6b; }
#sjt-tour .sjt-tour-intro p { max-width:650px; margin:0; line-height:1.7; font-size:15px; color:#627084; }
#sjt-tour .sjt-tour-total { display:flex; align-items:center; gap:12px; padding:18px 22px; border:1px solid #d9e8ed; border-radius:16px; background:#fff; font-size:35px; font-weight:700; color:#082f6b; }
#sjt-tour .sjt-tour-total span { font-size:11px; font-weight:500; line-height:1.6; color:#627084; white-space:nowrap; }
#sjt-tour .sjt-tour-workspace { display:grid; grid-template-columns:minmax(0,1fr) 300px; border:1px solid var(--sjt-border); border-radius:22px; overflow:hidden; background:#fff; box-shadow:0 22px 65px #082f6b12; }
#sjt-tour .sjt-tour-main { min-width:0; background:var(--sjt-deep); }
#sjt-tour .sjt-tour-topline { height:48px; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:0 24px; color:#9db7cb; font-size:10px; letter-spacing:.06em; }
#sjt-tour .sjt-tour-topline span:first-child { display:flex; align-items:center; gap:8px; color:#d1ecef; }
#sjt-tour .sjt-tour-topline i { width:6px; height:6px; border-radius:50%; background:var(--sjt-cyan); }
#sjt-tour .sjt-tour-stage { position:relative; height:490px; display:flex; align-items:center; justify-content:center; overflow:hidden; background:radial-gradient(ellipse at center,#16354c,var(--sjt-deep)); touch-action:pan-y; }
#sjt-tour .sjt-tour-stage > img { width:100%; height:100%; object-fit:contain; transition:opacity .2s ease; }
#sjt-tour .sjt-tour-stage.is-loading > img { opacity:.25; }
#sjt-tour .sjt-tour-stage.is-error > img { visibility:hidden; }
#sjt-tour .sjt-tour-loading, #sjt-tour .sjt-tour-error { position:absolute; z-index:1; padding:14px 22px; border-radius:10px; background:#071e3be8; color:#fff; text-align:center; font-size:13px; }
#sjt-tour .sjt-tour-error { max-width:300px; line-height:1.7; }
#sjt-tour .sjt-tour-expand { position:absolute; top:18px; right:18px; display:flex; align-items:center; gap:8px; padding:11px 14px; min-height:44px; border:1px solid #ffffff50; border-radius:10px; background:#071e3bd9; color:#fff; font-size:11px; backdrop-filter:blur(10px); }
#sjt-tour .sjt-tour-expand svg { width:16px; height:16px; }
#sjt-tour .sjt-tour-arrow { position:absolute; top:50%; width:44px; height:52px; border:1px solid #ffffff50; border-radius:12px; background:#071e3bd9; color:#fff; font-size:32px; transform:translateY(-50%); }
#sjt-tour .sjt-tour-previous { left:18px; }
#sjt-tour .sjt-tour-next { right:18px; }
#sjt-tour .sjt-tour-arrow:hover, #sjt-tour .sjt-tour-expand:hover { background:#0a4568; }
#sjt-tour .sjt-tour-caption { min-height:91px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 24px; color:#fff; }
#sjt-tour .sjt-tour-caption > div > span { display:block; color:#9db7cb; font-size:9px; letter-spacing:.14em; text-transform:uppercase; }
#sjt-tour .sjt-tour-caption h3 { margin:7px 0 0; font-size:21px; font-weight:600; letter-spacing:-.025em; }
#sjt-tour .sjt-tour-counter { display:flex; align-items:baseline; gap:6px; white-space:nowrap; }
#sjt-tour .sjt-tour-counter b { color:var(--sjt-cyan); font-size:25px; font-weight:500; }
#sjt-tour .sjt-tour-counter > span { font-size:12px; color:#9db7cb; }
#sjt-tour .sjt-tour-progress { height:3px; background:#17314d; }
#sjt-tour .sjt-tour-progress > span { display:block; height:100%; background:var(--sjt-cyan); transition:width .25s ease; }
#sjt-tour .sjt-tour-selector { min-width:0; display:flex; flex-direction:column; max-height:632px; background:#fff; }
#sjt-tour .sjt-tour-selector-title { min-height:70px; padding:23px 20px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--sjt-border); }
#sjt-tour .sjt-tour-selector-title h3 { margin:0; font-size:13px; font-weight:700; color:#13233a; }
#sjt-tour .sjt-tour-selector-title > span { padding:4px 7px; border-radius:6px; background:#edf4f8; color:#53768c; font-size:10px; }
#sjt-tour .sjt-tour-list { overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#c5d8e5 transparent; padding:10px; }
#sjt-tour .sjt-tour-item { display:flex; align-items:center; gap:12px; min-height:76px; padding:9px; margin-bottom:4px; border:1px solid transparent; border-radius:11px; transition:background .15s; }
#sjt-tour .sjt-tour-item:hover { background:#f4f8fc; }
#sjt-tour .sjt-tour-item.is-current { background:#edf7f8; border-color:#b9dedf; }
#sjt-tour .sjt-tour-item > img { flex-shrink:0; width:66px; height:50px; object-fit:cover; border-radius:6px; background:#e8eef3; }
#sjt-tour .sjt-tour-item > span { flex:1; min-width:0; }
#sjt-tour .sjt-tour-item small { display:block; color:#708699; font-size:8px; letter-spacing:.09em; text-transform:uppercase; margin-bottom:5px; }
#sjt-tour .sjt-tour-item strong { display:block; font-size:11px; color:#213953; line-height:1.4; font-weight:700; }
#sjt-tour .sjt-tour-item > b { color:#278291; opacity:0; font-size:15px; font-weight:500; }
#sjt-tour .sjt-tour-item.is-current > b { opacity:1; }
#sjt-tour .sjt-tour-help { display:flex; align-items:center; gap:16px; margin-top:22px; color:#718093; font-size:11px; line-height:1.6; }
#sjt-tour .sjt-tour-help > span:first-child { color:#213953; font-weight:700; white-space:nowrap; }
#sjt-tour .sjt-tour-help p { margin:0; }
#sjt-tour .sjt-tour-keyhint { margin-left:auto; white-space:nowrap; font-size:10px; }
#sjt-tour .sjt-tour-album-copy { max-width:760px; margin-top:35px; font-size:14px; color:#627084; }
#sjt-tour .sjt-tour-album-copy h3 { color:#213953; font-size:17px; }
#sjt-tour .sjt-tour-empty { padding:36px; border:1px solid var(--sjt-border); border-radius:18px; background:#fff; }
#sjt-tour .sjt-tour-nojs { font-size:13px; line-height:1.7; }
#sjt-tour .sjt-tour-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; clip:rect(0,0,0,0); overflow:hidden; white-space:nowrap; }
#sjt-tour .sjt-tour-dialog { position:fixed; inset:0; width:100%; max-width:none; height:100%; height:100dvh; max-height:none; margin:0; padding:0; border:0; color:#fff; background:#041324; overflow:hidden; }
#sjt-tour .sjt-tour-dialog[open] { display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
#sjt-tour .sjt-tour-dialog::backdrop { background:#041324f5; }
#sjt-tour .sjt-tour-dialog-top { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:20px max(24px,env(safe-area-inset-right)) 20px max(24px,env(safe-area-inset-left)); border-bottom:1px solid #ffffff12; }
#sjt-tour .sjt-tour-dialog-top > div > span { font-size:9px; color:#77e5e0; letter-spacing:.15em; text-transform:uppercase; }
#sjt-tour .sjt-tour-dialog-top h2 { margin:6px 0 0; font-size:19px; font-weight:500; }
#sjt-tour .sjt-tour-dialog-actions { display:flex; align-items:center; gap:7px; flex-shrink:0; }
#sjt-tour .sjt-tour-dialog-actions button { min-width:44px; min-height:44px; border:1px solid #ffffff25; border-radius:9px; background:#ffffff0a; color:#fff; font-size:24px; }
#sjt-tour .sjt-tour-dialog-actions [data-tour-zoom-reset] { min-width:62px; font-size:11px; }
#sjt-tour .sjt-tour-dialog-actions .sjt-tour-close { margin-left:10px; }
#sjt-tour .sjt-tour-dialog-actions button:hover { background:#ffffff20; }
#sjt-tour .sjt-tour-dialog-actions button:disabled { opacity:.35; cursor:default; }
#sjt-tour .sjt-tour-dialog-stage { position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; touch-action:none; cursor:zoom-in; }
#sjt-tour .sjt-tour-dialog-stage.is-zoomed { cursor:grab; }
#sjt-tour .sjt-tour-dialog-stage.is-dragging { cursor:grabbing; }
#sjt-tour .sjt-tour-dialog-stage > img { width:100%; height:100%; max-width:none; object-fit:contain; user-select:none; transform-origin:center; will-change:transform; }
#sjt-tour .sjt-tour-dialog-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:17px max(24px,env(safe-area-inset-right)) max(17px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left)); border-top:1px solid #ffffff12; }
#sjt-tour .sjt-tour-dialog-bottom button { min-height:44px; padding:0 14px; border:1px solid #ffffff25; border-radius:9px; background:#ffffff0a; color:#fff; font-size:22px; display:flex; align-items:center; gap:10px; }
#sjt-tour .sjt-tour-dialog-bottom button span { font-size:11px; }
#sjt-tour .sjt-tour-dialog-bottom > span { font-size:12px; color:#77e5e0; white-space:nowrap; }
#sjt-tour .sjt-tour-dialog-bottom p { color:#a8baca; font-size:11px; text-align:center; }
@media (max-width:1050px) {
    #sjt-tour .sjt-tour-workspace { grid-template-columns:minmax(0,1fr) 270px; }
    #sjt-tour .sjt-tour-stage { height:440px; }
    #sjt-tour .sjt-tour-selector { max-height:582px; }
    #sjt-tour .sjt-tour-keyhint { display:none; }
}
@media (max-width:850px) {
    #sjt-tour .sjt-tour-workspace { grid-template-columns:minmax(0,1fr); }
    #sjt-tour .sjt-tour-stage { height:clamp(280px,60vw,470px); }
    #sjt-tour .sjt-tour-selector { max-height:none; }
    #sjt-tour .sjt-tour-selector-title { min-height:52px; padding:17px 20px; }
    #sjt-tour .sjt-tour-list { display:flex; gap:8px; padding:12px; scroll-snap-type:x proximity; }
    #sjt-tour .sjt-tour-item { flex:0 0 225px; min-height:78px; margin:0; scroll-snap-align:center; }
    #sjt-tour .sjt-tour-help { flex-wrap:wrap; gap:5px 15px; }
}
@media (max-width:560px) {
    #sjt-tour { padding:38px 0 46px; }
    #sjt-tour .sjt-tour-intro { gap:16px; }
    #sjt-tour .sjt-tour-intro h2 { font-size:28px; }
    #sjt-tour .sjt-tour-intro p { font-size:13px; }
    #sjt-tour .sjt-tour-total { display:none; }
    #sjt-tour .sjt-tour-workspace { border-radius:15px; }
    #sjt-tour .sjt-tour-topline { padding:0 16px; height:42px; font-size:9px; }
    #sjt-tour .sjt-tour-topline > span:last-child { display:none; }
    #sjt-tour .sjt-tour-stage { height:300px; }
    #sjt-tour .sjt-tour-expand { top:12px; right:12px; padding:10px; font-size:10px; }
    #sjt-tour .sjt-tour-arrow { width:36px; height:48px; font-size:29px; }
    #sjt-tour .sjt-tour-previous { left:10px; }
    #sjt-tour .sjt-tour-next { right:10px; }
    #sjt-tour .sjt-tour-caption { padding:19px 16px; min-height:88px; }
    #sjt-tour .sjt-tour-caption h3 { font-size:18px; }
    #sjt-tour .sjt-tour-dialog-top { padding:14px 12px; align-items:flex-start; gap:8px; }
    #sjt-tour .sjt-tour-dialog-top h2 { font-size:14px; max-width:150px; line-height:1.5; }
    #sjt-tour .sjt-tour-dialog-top > div > span { font-size:8px; }
    #sjt-tour .sjt-tour-dialog-actions { gap:4px; }
    #sjt-tour .sjt-tour-dialog-actions button { min-width:36px; min-height:44px; }
    #sjt-tour .sjt-tour-dialog-actions [data-tour-zoom-reset] { min-width:45px; font-size:10px; }
    #sjt-tour .sjt-tour-dialog-actions .sjt-tour-close { margin-left:0; }
    #sjt-tour .sjt-tour-dialog-bottom { gap:8px; padding:12px 12px max(12px,env(safe-area-inset-bottom)); }
    #sjt-tour .sjt-tour-dialog-bottom p { display:none; }
    #sjt-tour .sjt-tour-dialog-bottom button { padding:0 12px; }
}
@media (prefers-reduced-motion:reduce) {
    #sjt-tour *, #sjt-tour *::before, #sjt-tour *::after { transition:none !important; scroll-behavior:auto !important; }
}