/* 3D 쇼룸. 체험 화면(shell.css)과 같은 글꼴·중립색을 쓰고, 색(파랑)은 지금 가야 할 곳, 문서 흐름, 주요 단추에만 쓴다. */
@font-face { font-family: 'Pretendard'; font-weight: 400; font-display: swap; src: local('Pretendard Regular'), local('Pretendard-Regular'), url(/fonts/Pretendard-Regular.ttf) format('truetype'); }
@font-face { font-family: 'Pretendard'; font-weight: 600; font-display: swap; src: local('Pretendard SemiBold'), local('Pretendard-SemiBold'), url(/fonts/Pretendard-SemiBold.ttf) format('truetype'); }
@font-face { font-family: 'Pretendard'; font-weight: 700; font-display: swap; src: local('Pretendard Bold'), local('Pretendard-Bold'), url(/fonts/Pretendard-Bold.ttf) format('truetype'); }

/* 휴대폰 브라우저의 자동 다크(강제 다크)로 색이 뒤집히지 않게, 이 화면은 밝은 화면만 쓴다고 알린다(head 의 color-scheme 메타와 같은 뜻). */
:root { color-scheme: light only; }
:root {
  --bg: #e9edf2; --card: #fff; --line: #d9dee5; --line-strong: #bcc3cd; --text: #1c2330; --muted: #667085;
  --accent: #2563eb; --accent-soft: #eaf1fe;
  --font: 'Pretendard', "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  --shadow: 0 6px 20px rgba(28, 35, 48, .12);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); color: var(--text); font: 400 14px/1.5 var(--font); font-synthesis: none; word-break: keep-all; -webkit-font-smoothing: antialiased; }
button { font-family: inherit; cursor: pointer; }

/* 배경: 위는 밝고 아래로 갈수록 살짝 짙은 스튜디오 바탕(캔버스는 투명) */
.sr-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; background: radial-gradient(120% 90% at 50% 20%, #f7f8fa 0%, #e9edf2 55%, #dce2e9 100%); }
#sr-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; cursor: grab; }
#sr-canvas:active { cursor: grabbing; }
#sr-canvas.is-hover { cursor: pointer; }

.sr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 14px; border: 1px solid var(--line-strong); background: #fff; border-radius: 8px; font-size: 13px; font-weight: 600; line-height: 1; color: var(--text); white-space: nowrap; text-decoration: none; }
.sr-btn:hover { border-color: #8c96a6; }
.sr-btn[hidden] { display: none; }
.sr-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.sr-primary:hover { background: #1d4ed8; border-color: #1d4ed8; }
.sr-btn kbd { font: 600 11px/1 var(--font); padding: 2px 4px; border: 1px solid var(--line-strong); border-radius: 3px; color: var(--muted); }
/* 튜토리얼에서 지금 눌러야 할 단추 */
.sr-pulse { position: relative; }
.sr-pulse::after { content: ''; position: absolute; inset: -4px; border: 2px solid var(--accent); border-radius: 10px; animation: sr-ring 1.4s ease-out infinite; pointer-events: none; }
@keyframes sr-ring { 0% { opacity: .9; transform: scale(.96); } 100% { opacity: 0; transform: scale(1.12); } }

/* 위쪽 줄: 이름, 튜토리얼 진행, 건너뛰기·세 화면 체험 */
/* 장치 화면을 연 동안에도 보이게(진행·언어·도입 상담은 어느 화면에서나 상단 줄에, 결정 D1·D2·D5) 장치 화면·바깥 막보다 위에 둔다 */
.sr-top { position: absolute; left: 12px; right: 12px; top: 10px; z-index: 8; display: flex; align-items: center; gap: 14px; height: 50px; padding: 0 8px 0 14px; background: rgba(255, 255, 255, .9); border: 1px solid rgba(255, 255, 255, .9); border-radius: 12px; box-shadow: var(--shadow); }
.sr-brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-size: 16px; font-weight: 700; white-space: nowrap; }
.sr-brand img { height: 20px; display: block; }
.sr-progress { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.sr-progress[hidden] { display: none; }
.sr-count { flex: none; padding: 3px 9px; border-radius: 999px; background: var(--text); color: #fff; font-size: 12px; font-weight: 700; }
.sr-count.is-free { background: #fff; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
/* 단계 이름 + 지금 할 일 한 줄. 자리가 모자라면 할 일 쪽부터 말줄임 */
.sr-now-line { flex: 0 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; overflow: hidden; }
.sr-progress b { flex: 0 1 auto; min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-now { flex: 0 100 auto; min-width: 0; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.sr-now:empty { display: none; }
.sr-bar { flex: 0 1 140px; min-width: 40px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.sr-bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 3px; transition: width .4s ease; }
.sr-top-actions { margin-left: auto; flex: none; display: flex; align-items: center; gap: 6px; }
/* 언어 단추(세 칸 화면 상단 줄의 .lang-switch 와 같은 짜임). 넓은 화면은 세 단추, 좁은 화면은 지금 언어 하나를 눌러 펼친다 */
.lang-switch { position: relative; flex: none; display: flex; gap: 2px; }
.lang-switch .sr-btn { padding: 0 10px; }
.lang-switch .sr-btn.is-active { border-color: var(--accent); color: var(--accent); }
.lang-cur { display: none !important; }
.lang-list { display: contents; }
.lang-cur::after { content: ""; width: 0; height: 0; margin-left: 2px; border: 4px solid transparent; border-top: 5px solid currentColor; border-bottom: 0; }
/* [⋯] 목록: 넓은 화면에서는 단추가 그대로 한 줄에 놓이고, 좁은 화면에서만 접힌다 */
.sr-more { position: relative; display: flex; }
.sr-more-btn { display: none; }
.sr-more-list { display: contents; }
.sr-support-menu { display: none; }
/* 펼친 목록(언어, ⋯) 공통 모양 */
.lang-switch.is-open .lang-list, .sr-more.is-open .sr-more-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 2; display: flex; flex-direction: column; gap: 2px; min-width: 170px; padding: 4px; background: #fff; border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: var(--shadow); }
.lang-switch.is-open .lang-list .sr-btn, .sr-more.is-open .sr-more-list .sr-btn { justify-content: flex-start; height: 44px; border-color: transparent; }
.lang-switch.is-open .lang-list .sr-btn.is-active { border-color: var(--accent); }
@media (max-width: 1100px) {
  .lang-cur { display: inline-flex !important; }
  .lang-list { display: none; }
}
@media (max-width: 760px) {
  .sr-more-btn { display: inline-flex; width: 40px; padding: 0; font-size: 18px; }
  .sr-more-list { display: none; }
  .sr-top .sr-support { display: none; }
  .sr-more-list .sr-support-menu { display: inline-flex; }
}

/* 튜토리얼 단계 카드: 넓은 화면은 왼쪽 아래(전체 보기에서 비어 있는 자리라 사무실과 출입문을 가리지 않는다) */
.sr-card { position: absolute; left: 12px; bottom: 44px; z-index: 4; width: 330px; max-width: calc(100% - 24px); padding: 14px 16px; background: #fff; border-radius: 12px; box-shadow: var(--shadow); }
.sr-card[hidden] { display: none; }
.sr-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sr-card-no { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; }
.sr-card-head b { font-size: 15px; font-weight: 700; }
.sr-card p { margin: 0; font-size: 14px; line-height: 1.6; color: #344054; }
.sr-card-acts { display: flex; gap: 6px; margin-top: 12px; }
.sr-card-acts:empty { display: none; }

/* 장치 정보 카드(오른쪽) */
.sr-info { position: absolute; right: 12px; top: 72px; z-index: 4; width: 340px; max-width: calc(100% - 24px); padding: 16px 18px; background: #fff; border-radius: 12px; box-shadow: var(--shadow); animation: sr-in .28s ease-out; }
.sr-info[hidden] { display: none; }
.sr-info small { display: block; color: var(--accent); font-size: 12px; font-weight: 600; }
.sr-info h2 { margin: 2px 0 8px; font-size: 19px; font-weight: 700; line-height: 1.3; }
.sr-info p { margin: 0; font-size: 14px; line-height: 1.6; color: #344054; }
.sr-info .sr-info-spec { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: #f3f5f8; color: var(--muted); font-size: 12px; line-height: 1.55; }
.sr-info-spec[hidden] { display: none; }
.sr-info .sr-finisher-note { margin-top: 10px; font-size: 12px; line-height: 1.5; }
.sr-finisher-note[hidden] { display: none; }
.sr-info .sr-oxpd-note { margin-top: 10px; font-size: 12px; line-height: 1.5; }
.sr-oxpd-note[hidden] { display: none; }
.sr-info-acts { display: flex; gap: 6px; margin-top: 14px; }
.sr-info-acts .sr-btn { height: 38px; }
@keyframes sr-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sr-info-acts { flex-wrap: wrap; }
/* [전체 보기]: 언제나 오른쪽 아래(처음 시점으로 돌아가기) */
.sr-overview { position: absolute; right: 12px; bottom: 10px; z-index: 4; box-shadow: var(--shadow); }
body.has-info .sr-overview { top: 72px; bottom: auto; left: 12px; right: auto; }

/* 문서 흐름 설명(화면 아래 가운데) */
.sr-caption { position: absolute; left: 50%; bottom: 46px; z-index: 4; transform: translateX(-50%); max-width: calc(100% - 24px); margin: 0; padding: 9px 16px 9px 34px; border-radius: 999px; background: rgba(28, 35, 48, .86); color: #fff; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.sr-caption::before { content: ''; position: absolute; left: 14px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #7fb0ff; box-shadow: 0 0 0 4px rgba(127, 176, 255, .3); }
.sr-caption[hidden] { display: none; }

.sr-help { position: absolute; left: 12px; bottom: 10px; z-index: 3; margin: 0; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .85); color: var(--muted); font-size: 12px; pointer-events: none; }
.sr-first-touch { position: absolute; top: 50%; left: 50%; z-index: 7; width: max-content; max-width: calc(100% - 32px); margin: 0; padding: 12px 18px; transform: translate(-50%, -50%); border: 1px solid #d4dfec; border-radius: 14px; background: rgba(255, 255, 255, .94); box-shadow: 0 12px 32px rgba(28, 46, 70, .18); color: #1c304b; font-size: 14px; font-weight: 700; line-height: 1.5; text-align: center; pointer-events: none; }
.sr-first-touch[hidden] { display: none; }
/* 알림은 장치 화면 위에도 보이게 맨 위에 둔다 */
.sr-toast { position: absolute; left: 50%; top: 70px; z-index: 9; transform: translateX(-50%); max-width: calc(100% - 24px); padding: 9px 16px; border-radius: 8px; background: var(--text); color: #fff; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-toast[hidden] { display: none; }

/* 장치 이름표, 구역 이름, 다음 목표 표지(3D 좌표를 화면 좌표로 옮겨 그린다) */
.sr-labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.sr-label { position: absolute; left: 0; top: 0; margin: 0; padding: 5px 11px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--text); font: 600 13px/1.5 var(--font); white-space: nowrap; box-shadow: 0 2px 8px rgba(28, 35, 48, .14); transform: translate(-50%, -100%); will-change: transform; pointer-events: auto; cursor: pointer; }
.sr-label:hover { background: #fff; box-shadow: 0 2px 10px rgba(28, 35, 48, .24); }
.sr-label::after { content: ''; position: absolute; left: 50%; bottom: -5px; margin-left: -5px; border: 5px solid transparent; border-top-color: rgba(255, 255, 255, .94); border-bottom: 0; }
.sr-label.is-hot { background: var(--accent); color: #fff; }
.sr-label.is-hot::after { border-top-color: var(--accent); }
.sr-zone { position: absolute; left: 0; top: 0; padding: 3px 9px; border-radius: 4px; background: rgba(28, 35, 48, .62); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; transform: translate(-50%, -100%); }
.sr-label[hidden], .sr-zone[hidden], .sr-marker[hidden] { display: none; }
.sr-marker { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.sr-marker i { position: absolute; left: -24px; top: 6px; width: 48px; height: 48px; border: 3px solid var(--accent); border-radius: 50%; animation: sr-pulse 1.4s ease-out infinite; }
.sr-marker b { position: absolute; left: -11px; top: -58px; width: 0; height: 0; border: 11px solid transparent; border-top: 16px solid var(--accent); border-bottom: 0; animation: sr-bob 1.4s ease-in-out infinite; }
.sr-marker.is-edge i { top: -24px; animation: none; opacity: .9; background: rgba(47, 111, 237, .18); }
.sr-marker.is-edge b { top: -9px; left: -8px; border-width: 8px; border-top-width: 12px; animation: none; transform: rotate(var(--rot, 0deg)) translateY(30px); transform-origin: 8px 9px; }
@keyframes sr-pulse { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes sr-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .sr-marker i, .sr-marker b, .sr-pulse::after, .sr-info, .sr-exit-box { animation: none; } }

/* 장치 화면(체험 화면 칸을 끼워 넣은 것). 숨길 때도 크기는 그대로 둬서 안쪽 화면이 다시 계산되지 않게 한다. */
.sr-view { position: absolute; left: 24px; right: 24px; top: 70px; bottom: 16px; z-index: 7; display: flex; flex-direction: column; background: #fff; border: 1px solid #c3cad4; border-radius: 12px; box-shadow: 0 16px 40px rgba(20, 26, 36, .28); overflow: hidden; visibility: hidden; transform-origin: 0 0; }
.sr-view.is-open { visibility: visible; }
.sr-view.is-anim { transition: transform .42s cubic-bezier(.2, .7, .2, 1); }
.sr-view-head { flex: none; display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 6px 8px 6px 16px; border-bottom: 1px solid var(--line); }
.sr-view-head > b { flex: none; font-size: 15px; font-weight: 700; white-space: nowrap; }
.sr-view-hint { flex: 1; min-width: 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.sr-view-hint.is-done { color: var(--text); font-weight: 600; }
.sr-view-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.sr-view-tab.is-on { border-color: var(--text); background: var(--text); color: #fff; }
.sr-acct { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.sr-acct code { padding: 1px 6px; border-radius: 3px; background: var(--bg); color: var(--text); font: 600 12px/1.4 var(--font); }
.sr-frames { position: relative; flex: 1; min-height: 0; background: var(--bg); }
.sr-frames-wait { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.sr-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--bg); visibility: hidden; }
.sr-frame.is-on { visibility: inherit; }
.sr-view-progress { position: absolute; z-index: 2; top: 10px; right: 12px; max-width: min(420px, calc(100% - 24px)); margin: 0; padding: 10px 14px; border-radius: 8px; background: #fff; box-shadow: 0 6px 18px rgba(20, 26, 36, .18); color: var(--text); font-size: 13px; line-height: 1.4; pointer-events: none; }
.sr-view-progress[hidden] { display: none; }
.sr-view-progress::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }
.sr-view-progress.is-new::before { animation: sr-event-pop .35s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes sr-event-pop { from { transform: scale(.5); opacity: .4; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sr-view-progress.is-new::before { animation: none; } }
/* 장치에 다가가 정보 카드가 뜬 동안 튜토리얼 카드는 제목 줄만 */
body.has-info .sr-card p, body.has-info .sr-card-acts { display: none; }
body.has-info .sr-card-head { margin-bottom: 0; }
/* 장치 화면 바깥: 누르면 나가기 */
.sr-view-back { position: absolute; inset: 0; z-index: 6; display: none; padding: 0; border: 0; background: rgba(28, 35, 48, .3); cursor: pointer; }
body.is-viewing .sr-view-back { display: block; }
body.is-viewing .sr-labels, body.is-viewing .sr-card, body.is-viewing .sr-help, body.is-viewing .sr-info, body.is-viewing .sr-overview, body.is-viewing .sr-caption { display: none; }
body.is-viewing .sr-toast { top: 132px; }

/* 복합기 살펴보기: 왼쪽 부품 목록, 오른쪽 부품 카드, 아래 가운데 동작 단추 줄. 쇼룸의 이름표·튜토리얼 카드·정보 카드는 잠시 숨긴다(튜토리얼 진행은 그대로) */
.sr-mx[hidden] { display: none; }
body.is-inspect .sr-labels, body.is-inspect .sr-card, body.is-inspect .sr-help, body.is-inspect .sr-info, body.is-inspect .sr-overview { display: none; }
body.is-inspect .sr-caption { bottom: 64px; }
.sr-mx-list { position: absolute; left: 12px; top: 72px; bottom: auto; z-index: 4; width: 220px; max-height: calc(100% - 136px); display: flex; flex-direction: column; padding: 10px 8px 8px; background: rgba(255, 255, 255, .94); border-radius: 12px; box-shadow: var(--shadow); }
.sr-mx-list[hidden] { display: none; }
.sr-mx-list-head { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 6px; font-size: 13px; color: var(--muted); }
.sr-mx-items { flex: 1; min-height: 0; overflow: auto; display: grid; align-content: start; gap: 2px; }
.sr-mx-item { display: block; width: 100%; padding: 6px 8px; border: 0; border-radius: 7px; background: none; color: var(--text); font-size: 13px; line-height: 1.35; text-align: left; }
.sr-mx-item:hover { background: var(--bg); }
.sr-mx-item.is-on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.sr-mx-card { position: absolute; right: 12px; top: 72px; z-index: 4; width: 320px; max-width: calc(100% - 24px); padding: 14px 16px; background: #fff; border-radius: 12px; box-shadow: var(--shadow); animation: sr-in .2s ease-out; }
.sr-mx-card[hidden] { display: none; }
.sr-mx-card small { display: block; margin-right: 28px; color: var(--muted); font-size: 12px; font-weight: 600; }
.sr-mx-card h2 { margin: 2px 28px 6px 0; font-size: 18px; font-weight: 700; line-height: 1.3; }
.sr-mx-card p { margin: 0; font-size: 14px; line-height: 1.6; color: #344054; }
.sr-mx-card .sr-mx-psl { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: #f3f5f8; color: #475467; font-size: 13px; }
.sr-mx-x { position: absolute; right: 8px; top: 8px; width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 20px; line-height: 1; }
.sr-mx-list-head .sr-mx-x { position: static; }
.sr-mx-x:hover { background: var(--bg); color: var(--text); }
.sr-mx-bar { position: absolute; left: 50%; bottom: 12px; z-index: 4; transform: translateX(-50%); max-width: calc(100% - 24px); display: flex; gap: 6px; padding: 6px; background: rgba(255, 255, 255, .94); border-radius: 12px; box-shadow: var(--shadow); overflow-x: auto; scrollbar-width: none; }
.sr-mx-bar .sr-btn { flex: none; height: 36px; }
.sr-mx-bar .sr-btn.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.sr-mx-bar .sr-mx-exit { margin-left: 6px; }

/* 출구 카드 */
.sr-exit-card { position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(28, 35, 48, .32); }
.sr-exit-card[hidden] { display: none; }
.sr-exit-box { position: relative; width: 440px; max-width: 100%; max-height: 100%; overflow: auto; padding: 22px 22px 14px; background: #fff; border: 1px solid #aab2bf; border-radius: 8px; box-shadow: 0 12px 32px rgba(20, 26, 36, .28); animation: sr-in .2s ease-out; }
.sr-exit-box h2 { margin: 0 32px 4px 0; font-size: 19px; font-weight: 700; line-height: 1.35; }
.sr-exit-box > p { margin: 0 0 14px; color: var(--muted); }
.sr-exit-x { position: absolute; right: 10px; top: 10px; width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 22px; line-height: 1; }
.sr-exit-x:hover { background: var(--bg); color: var(--text); }
.sr-exit-list { display: grid; gap: 8px; }
.sr-btn.sr-exit-item { height: auto; flex-direction: column; align-items: flex-start; gap: 3px; padding: 11px 14px; text-align: left; white-space: normal; line-height: 1.35; }
.sr-exit-item b { font-size: 15px; font-weight: 700; }
.sr-exit-item small { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.sr-exit-item.sr-primary small { color: rgba(255, 255, 255, .85); }
.sr-exit-keep { margin: 12px 0 0; padding: 8px 10px; border-radius: 8px; background: #f3f5f8; color: #475467; font-size: 12.5px; line-height: 1.55; }
.sr-exit-keep[hidden] { display: none; }
.sr-exit-stay { display: block; margin: 10px auto 0; padding: 6px 10px; border: 0; background: none; color: var(--muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.sr-exit-stay:hover { color: var(--text); }

/* 첫 소개 모달: 모양은 guide.css 의 .guide-welcome · .gw-card · .gi-*(기존 세 칸 화면의 소개)를 그대로 쓰고, 쇼룸에만 있는 것만 여기 둔다 */
.sr-guide[hidden] { display: none; }
body.has-intro .sr-top { z-index: 61; } /* 소개 막(.guide-welcome, z 60) 위: 소개 중에도 언어를 바꿀 수 있게 */
body.has-intro #sr-restart { display: none; } /* 소개를 닫으면 튜토리얼이 이어지므로 소개 중에는 필요 없다 */
.sr-guide .gw-card { font-size: 14px; line-height: 1.5; }
.sr-intro-support { margin-bottom: 16px; }
.sr-gi-alt { padding: 7px 18px; border: 1px solid var(--accent); border-radius: 4px; background: #fff; color: var(--accent); }
.sr-gi-never { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px; color: var(--muted); font-size: 13px; cursor: pointer; }
.sr-gi-never input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.sr-guide .sr-intro-lite { margin: 0 0 14px; }
/* 마지막 장의 진행 순서(튜토리얼 7단계) */
.sr-intro-steps { margin: 0 0 20px; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 6px; }
.sr-intro-steps li { counter-increment: s; display: flex; align-items: center; gap: 10px; font-weight: 500; }
.sr-intro-steps li::before { content: counter(s); display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; }

/* 마지막 장의 직군 고르기(작은 칩 3개, 고르지 않아도 시작할 수 있다). 고르면 일이 일어났을 때 알림에 직군별 한 줄이 붙는다 */
.sr-personas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; }
.sr-personas > span { margin-right: 2px; color: var(--muted); font-size: 13px; }
.sr-persona { height: 34px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; color: var(--text); font-size: 13px; font-weight: 600; }
.sr-persona:hover { border-color: #8c96a6; }
.sr-persona.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
@media (pointer: coarse) { .sr-persona { height: 40px; } }
/* 알림의 직군별 한 줄 */
.sr-toast small { display: block; margin-top: 2px; color: rgba(255, 255, 255, .8); font-size: 12px; white-space: normal; }

.sr-fail { position: absolute; inset: 0; z-index: 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; background: var(--bg); text-align: center; }
.sr-fail[hidden] { display: none; }
.sr-fail p { margin: 0; max-width: 420px; line-height: 1.6; }
.sr-fail .sr-btn { min-height: 44px; }

/* 맨 아래 고지 줄(watermark.js)은 쇼룸 아래에 한 줄로 */
body > .psl-wm-notice { flex: none; }
/* 좁은 화면: 한 줄에 다 들어가지 않으므로 세 칸 화면(shell.css)처럼 두 줄로 접는다. 첫 줄 = 고지 문구(줄을 바꿔 다 보이게) + 이용 기간,
   둘째 줄 = 링크를 같은 폭으로 나눠 놓는다(누르는 높이 40px). [도입 상담]은 상단 줄에 있으므로 세 칸 화면(shell.css)처럼 여기서는 뺀다. */
@media (max-width: 1000px) {
  body > .psl-wm-notice .pt-trial-consult { display: none; }
  body > .psl-wm-notice { height: auto; flex-wrap: wrap; align-items: center; gap: 0 10px; padding: 4px 10px 0; white-space: normal; line-height: 1.35; }
  body > .psl-wm-notice::before { content: ""; order: 1; flex: 1 1 100%; height: 0; }
  body > .psl-wm-notice .psl-wm-notice-text { flex: 1 1 0; min-width: 0; white-space: normal; }
  body > .psl-wm-notice .psl-wm-links { display: contents; }
  body > .psl-wm-notice .pt-trial-until { flex: none; white-space: nowrap; }
  body > .psl-wm-notice .pt-trial-link { order: 2; flex: 1 1 0; min-width: 0; min-height: 40px; padding: 2px 4px; text-align: center; white-space: normal; overflow-wrap: anywhere; }
}
/* 폭이 넉넉한 좁은 화면(태블릿 세로, 가로로 눕힌 휴대폰): 한 줄로 두고, 링크는 글자 폭만큼만 쓰며 다 안 들어가면 다음 줄로 넘어간다 */
@media (min-width: 600px) and (max-width: 1000px) {
  body > .psl-wm-notice::before { display: none; }
  body > .psl-wm-notice .psl-wm-notice-text { min-width: 100px; }
  body > .psl-wm-notice .pt-trial-link { flex: none; white-space: nowrap; }
}
/* 키보드가 없는 기기(손가락)에서는 단추의 키 표시(Esc)를 숨긴다 */
@media (pointer: coarse) { .sr-btn kbd { display: none; } }

/* 휴대폰: 위쪽 줄과 카드를 줄이고, 정보 카드는 아래에서 올라오는 판, 장치 화면은 화면 전체로 */
@media (max-width: 760px) {
  .sr-top { left: 8px; right: 8px; top: 8px; gap: 8px; height: 50px; padding: 0 6px 0 10px; }
  .sr-brand span { display: none; }
  .sr-brand { min-height: 44px; } /* 로고 링크도 손가락으로 누를 수 있는 높이로 */
  .sr-now-line, .sr-bar { display: none; } /* 지금 할 일은 튜토리얼 카드와 장치 화면 머리에 있다 */
  .sr-top-actions .sr-btn { height: 44px; padding: 0 10px; font-size: 12px; }
  #sr-classic-top, #sr-restart { min-height: 44px; }
  .sr-card { top: 66px; bottom: auto; left: 8px; right: 8px; width: auto; max-width: none; max-height: calc(100dvh - 76px); overflow-y: auto; padding: 12px 14px; }
  .sr-info { top: auto; bottom: 8px; left: 8px; right: 8px; width: auto; max-width: none; max-height: 48dvh; overflow-y: auto; }
  body.has-info .sr-card, body.has-info .sr-help, body.has-info .sr-caption { display: none; }
  .sr-overview { right: 8px; bottom: 40px; height: 44px; }
  body.has-info .sr-overview { top: 66px; left: 8px; }
  .sr-caption { bottom: 84px; }
  .sr-help { left: 8px; right: 8px; bottom: 8px; text-align: center; }
  /* 장치 화면은 상단 줄 아래 전체(상단 줄의 진행·언어·도입 상담은 그대로 보인다) */
  .sr-view { left: 0; right: 0; top: 64px; bottom: 0; border: 0; border-radius: 0; border-top: 1px solid var(--line); }
  .sr-top-actions { gap: 4px; }
  .sr-top-actions .sr-primary { padding: 0 12px; }
  #sr-more-btn { min-width: 44px; }
  .sr-view-head { flex-wrap: wrap; gap: 6px 8px; padding: 6px 8px; }
  .sr-view-head > b { order: 1; }
  .sr-view-head #sr-exit { order: 1; margin-left: auto; }
  .sr-view-acts { order: 2; flex-basis: 100%; margin-left: 0; }
  .sr-view-hint { order: 3; flex-basis: 100%; }
  .sr-view-head .sr-btn, .sr-info-acts .sr-btn { min-height: 44px; }
  .sr-toast { left: 8px; right: 8px; transform: none; max-width: none; white-space: normal; }
  body.is-viewing .sr-toast { top: 198px; }
  .sr-guide .sr-intro-support { min-height: 44px; }
  .sr-guide .sr-gi-never { min-height: 44px; }
  .sr-guide .sr-gi-never input { width: 24px; height: 24px; }
  .sr-label { display: flex; align-items: center; min-height: 44px; }
  body > .psl-wm-notice .pt-trial-link { min-height: 44px; }
  .sr-exit-x { width: 44px; height: 44px; }
  .sr-exit-stay { min-height: 44px; }
  /* 살펴보기: 단추 줄은 맨 아래(옆으로 밀기), 부품 카드와 부품 목록은 그 위에서 올라오는 판 */
  .sr-mx-x { width: 44px; height: 44px; }
  .sr-mx-card small, .sr-mx-card h2 { margin-right: 48px; }
  .sr-mx-bar { left: 8px; right: 8px; bottom: 8px; transform: none; max-width: none; }
  .sr-mx-bar .sr-btn { height: 44px; padding: 0 12px; }
  .sr-mx-card { top: auto; bottom: 70px; left: 8px; right: 8px; width: auto; max-width: none; padding: 12px 14px; }
  .sr-mx-card p { font-size: 13.5px; line-height: 1.55; }
  .sr-mx-list { top: auto; bottom: 70px; left: 8px; right: 8px; width: auto; max-height: 52%; }
  .sr-mx-items { grid-template-columns: 1fr 1fr; }
  .sr-mx-item { padding: 9px 8px; }
  body.is-inspect .sr-caption { top: 66px; bottom: auto; }
}
/* PSL Lite 안내(허용한 고객사만 보임, trial.js). 상단 줄의 [PSL Lite]는 좁은 화면에서 [⋯] 목록 안에 있다 */
.sr-intro-lite { margin: 12px 0 0; font-size: 13px; }
.sr-intro-lite a { color: var(--accent); }