/* v058 솔루션 휴대폰: 좌우로 펼치는 접이식(듀오) 휴대폰 (Slack 석기 1793605486.435809·1793605822.292209)
   - 접힌 상태: 겉화면 한 장에 하드웨어 정보(온도·메모리·상태).
   - 화면에 들어오면 왼쪽 판이 가운데 경첩을 축으로 책처럼 펼쳐지고, 안쪽 넓은 화면 왼쪽은 하드웨어 정보, 오른쪽은 알림(sol-alerts.js).
   - 화면 밖으로 나가면 다시 접혀 다음에 볼 때 또 펼쳐짐. 모션 일시정지면 펼친 모습으로 멈춤.
   - 기존 v038·v041 세운 휴대폰 규칙은 지우지 않고 .duo 일 때만 덮어씀. */
.sol-screen .sol-phone.duo{--hw:min(235px,20vw);--dh:min(var(--p38h,560px),540px);--r:34px;
 width:calc(var(--hw) * 2);height:var(--dh);padding:0;border-radius:0;background:none;box-shadow:none;overflow:visible;animation:none;transform:none;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.16,.8,.25,1)}
.sol-screen .sol-phone.duo:after{content:none}
.sol-screen .sol-phone.duo:hover{transform:translateY(-6px)}
.sol-screen .sol-phone.duo:focus-visible{outline-offset:18px}
.duo-body{position:absolute;inset:0;transform-style:preserve-3d;transform:translateX(calc(var(--hw) / -2)) rotateY(-14deg) rotateX(5deg);transition:transform 1.25s cubic-bezier(.62,0,.24,1)}
.duo.open .duo-body{transform:translateX(0) rotateY(-7deg) rotateX(4deg)}
.duo-r,.duo-face{position:absolute;top:0;bottom:0;width:var(--hw);box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(165deg,#1a2c46 0%,#0b1626 55%,#081120 100%);color:#fff}
/* 오른쪽 판(고정): 안쪽 화면 오른쪽 = 알림 */
.duo-r{left:var(--hw);padding:40px 12px 46px 10px;border-radius:0 var(--r) var(--r) 0;box-shadow:inset 0 0 0 1px #ffffff2e,0 0 0 7px #0b1524,0 0 0 8px #ffffff3d,8px 2px 0 8px #1d2d42,-26px 44px 80px -10px #000e,0 40px 110px -30px #4cc3ff59}
.duo-r .sol-app{margin:0 4px 9px;font-size:10px}
.duo-r .s38-list,.duo-r .sol-alerts{flex:1;min-height:0;height:auto}
.duo-r .sol-hint{bottom:16px}
.duo-cam{position:absolute;top:14px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#02060c;box-shadow:0 0 0 2px #0b1524,inset 0 0 0 2px #1a2c46}
/* 왼쪽 판(움직임): 가운데 경첩을 축으로 회전. 접힘 = -180도(오른쪽 판 위에 덮임) */
.duo-l{position:absolute;top:0;bottom:0;left:0;width:var(--hw);transform-origin:100% 50%;transform-style:preserve-3d;transform:rotateY(180deg);transition:transform 1.25s cubic-bezier(.55,0,.18,1.06);z-index:2}
.duo.open .duo-l{transform:rotateY(0deg)}
.duo-face{left:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* 안쪽 화면 왼쪽 = 하드웨어 정보 */
.duo-in{padding:40px 10px 40px 14px;border-radius:var(--r) 0 0 var(--r);box-shadow:inset 0 0 0 1px #ffffff2e,0 0 0 7px #0b1524,0 0 0 8px #ffffff3d}
.duo-in:after{content:"";position:absolute;top:0;bottom:0;right:0;width:10px;background:linear-gradient(90deg,#0000,#00000059);pointer-events:none}
/* 겉화면(접힌 상태): 경첩 쪽(왼쪽) 모서리는 작게 */
.duo-cover{transform:rotateY(180deg);padding:46px 14px 40px;border-radius:10px var(--r) var(--r) 10px;background:linear-gradient(165deg,#20354f 0%,#0d1a2c 60%,#091322 100%);box-shadow:inset 0 0 0 1px #ffffff33,0 0 0 7px #0b1524,0 0 0 8px #ffffff47,-26px 44px 80px -10px #000e,0 40px 110px -30px #4cc3ff59}
.duo-cover:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,#ffffff1f 0%,#ffffff08 28%,#0000 42%);pointer-events:none}
/* 하드웨어 정보 */
.hw-head{display:flex;justify-content:space-between;align-items:baseline;gap:6px;margin:0 2px 12px;font-size:10px;font-weight:700;letter-spacing:.08em;color:#8fa3ba}
.hw-head b{font-size:13px;letter-spacing:0;color:#fff}
.hw-head>*{white-space:nowrap}
.hw-row{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 6px;padding:8px 10px;margin-bottom:6px;border-radius:12px;background:#ffffff10;border:1px solid #ffffff17;font-size:11px;line-height:1.35;color:#b9c6d6}
.hw-row b{color:#fff;font-weight:700;white-space:nowrap}
.hw-row.ok b{color:#7be0a6}
.hw-row>i{flex:0 0 100%;height:4px;margin-top:5px;border-radius:2px;background:linear-gradient(90deg,var(--sol,#4cc3ff) calc(var(--v) * 100%),#ffffff1c 0)}
.hw-slots{flex:0 0 100%;display:flex;gap:4px;margin-top:6px}
.hw-slots i{flex:1;height:8px;border-radius:2px;border:1px solid #ffffff33}
.hw-slots i.on{background:var(--sol,#4cc3ff);border-color:transparent}
.hw-note{margin-top:auto;padding-top:6px;font-size:10px;color:#8fa3ba;text-align:center}
.duo-cover .hw-row{padding:10px 12px;margin-bottom:8px;font-size:12px}
.duo-cover .hw-head{margin-bottom:14px}
.hw-open{margin-top:auto;display:flex;justify-content:center;align-items:center;gap:8px;font-size:11px;font-weight:700;color:var(--sol,#4cc3ff)}
.hw-open:after{content:"";width:6px;height:6px;border:solid currentColor;border-width:2px 2px 0 0;transform:rotate(45deg)}
/* 바닥 그림자를 펼친 폭에 맞춤 */
.sol-screen:has(.duo):before{left:50%;width:230px;margin-left:-115px;transition:width 1.25s ease,margin-left 1.25s ease}
.sol-screen:has(.duo.open):before{width:440px;margin-left:-220px}
/* 펼치거나 접는 움직임 없이 바로 바꿀 때 */
.duo.snap .duo-body,.duo.snap .duo-l,html.motion-paused .duo-body,html.motion-paused .duo-l{transition:none}
@media (max-width:760px){
.sol-screen .sol-phone.duo{--hw:min(170px,calc((100vw - 60px) / 2));--dh:var(--p38h,400px);--r:24px}
.duo-body{transform:translateX(calc(var(--hw) / -2)) rotateY(-12deg) rotateX(4deg)}
.duo.open .duo-body{transform:translateX(0) rotateY(-5deg) rotateX(3deg)}
.duo-r{padding:28px 7px 30px 6px;box-shadow:inset 0 0 0 1px #ffffff2e,0 0 0 5px #0b1524,0 0 0 6px #ffffff3d,5px 2px 0 6px #1d2d42,-18px 30px 56px -10px #000e}
.duo-in{padding:28px 6px 22px 9px;box-shadow:inset 0 0 0 1px #ffffff2e,0 0 0 5px #0b1524,0 0 0 6px #ffffff3d}
.duo-cover{padding:32px 10px 22px;box-shadow:inset 0 0 0 1px #ffffff33,0 0 0 5px #0b1524,0 0 0 6px #ffffff47,-18px 30px 56px -10px #000e}
.duo-cam{top:10px;width:8px;height:8px;margin-left:-4px}
.duo-r .sol-app{font-size:9px;margin-bottom:6px}
.duo-r .sol-hint{bottom:9px;font-size:10px}
.duo-r .s38-list .a38{padding:6px 7px;gap:6px;font-size:10px;border-radius:11px}
.duo-r .a38-ico{width:18px;height:18px;border-radius:6px;font-size:10px;line-height:18px}
.duo-r .a38-head{font-size:8.5px}
.hw-head{margin-bottom:7px;font-size:8.5px}.hw-head b{font-size:11px}
.hw-row{padding:5px 7px;margin-bottom:4px;border-radius:9px;font-size:9.5px}
.hw-row>i{height:3px;margin-top:3px}
.hw-slots{margin-top:4px}.hw-slots i{height:6px}
.hw-note{font-size:8.5px}
.duo-cover .hw-row{padding:7px 9px;margin-bottom:6px;font-size:10.5px}
.duo-cover .hw-head{margin-bottom:9px}
.hw-open{font-size:10px}
.sol-screen:has(.duo):before{width:170px;margin-left:-85px}
.sol-screen:has(.duo.open):before{width:300px;margin-left:-150px}
}
@media (max-width:760px) and (max-height:700px){
.duo-in .hw-mem,.duo-in .hw-note,.duo-r .a38-ico{display:none}
.duo-in{padding-top:22px}.duo-r{padding-top:22px}.duo-cover{padding-top:24px}
.duo-cover .hw-row{padding:5px 8px;margin-bottom:4px}
.duo-r .s38-list .a38{padding:5px 6px}
}
@media (max-width:360px){.duo-r .a38-ico{display:none}.hw-row{font-size:9px}}
/* v060 (Slack 석기 1793611271.459429): 앞쪽으로 펼침 + 펼칠 때 오른쪽 판이 멀어지듯 흐려졌다가 딱 열림,
   하드웨어 정보는 좌석 여러 자리를 한 번에(수치는 sol-duo.js가 계속 바꿈), 알림은 4건만·밀린 알림은 점점 흐려짐.
   왼쪽 판은 rotateY(180deg)→0 으로 회전해 보는 사람 쪽(앞)으로 넘어오며 펼쳐짐(v058은 -180도로 뒤쪽). */
@property --v{syntax:'<number>';inherits:true;initial-value:0}
html:not(.motion-paused) .duo.open:not(.snap) .duo-r{animation:duo-far 1.25s cubic-bezier(.4,0,.2,1) both}
@keyframes duo-far{0%{filter:blur(0);transform:none}38%{filter:blur(5px) brightness(.78);transform:translateZ(-70px) scale(.96)}82%{filter:blur(.6px) brightness(.97);transform:translateZ(-8px)}100%{filter:none;transform:none}}
.hw-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:7px}
.hw-seat{display:flex;flex-direction:column;min-width:0;padding:6px 7px 6px;border-radius:10px;background:#ffffff10;border:1px solid #ffffff17;font-size:9.5px;line-height:1.32;color:#b9c6d6;transition:border-color .5s,background .5s}
.hw-seat b{color:#fff;font-size:10.5px;margin-bottom:1px}
.hw-t{white-space:nowrap}
.hw-seat em{font-style:normal;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;transition:color .5s}
.hw-seat i{height:3px;margin-top:4px;border-radius:2px;background:linear-gradient(90deg,var(--sol,#4cc3ff) calc(var(--v) * 100%),#ffffff1c 0);transition:--v 1s ease}
.hw-seat.hot{border-color:#ffb35c66;background:#ffb35c14}
.hw-seat.hot em.g{color:#ffb35c}
.hw-seat.hot i{--sol:#ffb35c}
.duo-in .hw-grid{flex:1;min-height:0;grid-auto-rows:minmax(0,1fr)}
.duo-in .hw-seat{justify-content:center}
.duo-in .hw-row{margin:0;padding:6px 9px;font-size:10px}
.duo-cover .hw-grid{margin-bottom:10px}
/* 알림 4건만, 밀린 알림은 점점 흐려짐 */
.duo-r .s38-list .a38:nth-child(2){opacity:.72}.duo-r .s38-list .a38:nth-child(3){opacity:.46}.duo-r .s38-list .a38:nth-child(4){opacity:.24}.duo-r .s38-list .a38:nth-child(n+5){opacity:0}
.duo-r .s38-list{-webkit-mask-image:none;mask-image:none}
@media (max-width:760px){
.hw-grid{gap:3px;margin-bottom:4px}
.hw-seat{padding:3px 5px;border-radius:7px;font-size:8px;line-height:1.25}
.hw-seat b{font-size:8.5px}
.hw-seat i{height:2px;margin-top:2px}
.duo-in .hw-row{padding:4px 6px;font-size:8.5px}
.duo-cover .hw-grid{margin-bottom:6px}
}
@media (max-width:760px) and (max-height:700px){
.hw-grid .hw-seat:nth-child(n+5){display:none}
.duo-in .hw-row{display:none}
}

/* v061 듀오 화면 종 아이콘 크기 */
.duo-r .a38-ico.a38-bell{width:22px;height:22px;border-radius:7px}
@media (max-width:760px){.duo-r .a38-ico.a38-bell{width:18px;height:18px;border-radius:6px}}
/* v063 솔루션도 검정·빨강 톤으로 통일 (Slack 석기 1793613779.679239).
   남색 배경·하늘색 강조를 검정 배경·사이트 공통 빨강(--red)으로. 구조·크기·움직임은 그대로, 색만 덮어씀.
   좌석 온도 경고 주황·정상 초록 같은 상태 색은 의미가 있어 유지. */
.sol-stage{--sol:var(--red,#ed2343);background:#0a0a0c}
.sol-backdrop img{filter:grayscale(1) contrast(1.05);opacity:.55}
.sol-backdrop:after{background:linear-gradient(90deg,#0a0a0c 0%,#0a0a0cf2 26%,#0a0a0ca8 48%,#0a0a0c40 72%,#0a0a0c66 100%),linear-gradient(0deg,#0a0a0c 0%,#0a0a0cd9 14%,transparent 44%),linear-gradient(180deg,#0a0a0cb3 0%,transparent 24%)}
.sol-keyword{-webkit-text-stroke:1px #ed23431f}
.sol-copy p,.sol-also a{color:#c2c2c7}
.sol-app,.hw-head,.hw-note,.a38-head{color:#9b9ba3}
.sol-screen figcaption,.sol-label{color:#8b8b93}
.sol-alerts li,.s38-list .a38{color:#e4e4e7}
.hw-row,.hw-seat{color:#c4c4ca}
.sol-notch,.duo-cam{background:#050506}
.duo-cam{box-shadow:0 0 0 2px #121215,inset 0 0 0 2px #26262b}
/* 휴대폰 몸체: 남색 → 짙은 회색·검정 */
.sol-phone{background:linear-gradient(160deg,#232328,#0f0f12 60%);box-shadow:0 0 0 1px #ffffff26,0 0 0 9px #131316,0 0 0 10px #ffffff1a,0 50px 120px -30px #ed234340,0 30px 80px #000c}
.sol-screen .sol-phone{background:linear-gradient(165deg,#26262b 0%,#141417 55%,#0c0c0e 100%)}
.duo-r,.duo-face{background:linear-gradient(165deg,#26262b 0%,#141417 55%,#0c0c0e 100%)}
.duo-cover{background:linear-gradient(165deg,#2e2e34 0%,#18181c 60%,#0f0f12 100%)}
.duo-r{box-shadow:inset 0 0 0 1px #ffffff2e,0 0 0 7px #121215,0 0 0 8px #ffffff3d,8px 2px 0 8px #2a2a30,-26px 44px 80px -10px #000e,0 40px 110px -30px #ed234340}
.duo-in{box-shadow:inset 0 0 0 1px #ffffff2e,0 0 0 7px #121215,0 0 0 8px #ffffff3d}
.duo-cover{box-shadow:inset 0 0 0 1px #ffffff33,0 0 0 7px #121215,0 0 0 8px #ffffff47,-26px 44px 80px -10px #000e,0 40px 110px -30px #ed234340}
@media (max-width:760px){
.duo-r{box-shadow:inset 0 0 0 1px #ffffff2e,0 0 0 5px #121215,0 0 0 6px #ffffff3d,5px 2px 0 6px #2a2a30,-18px 30px 56px -10px #000e}
.duo-in{box-shadow:inset 0 0 0 1px #ffffff2e,0 0 0 5px #121215,0 0 0 6px #ffffff3d}
.duo-cover{box-shadow:inset 0 0 0 1px #ffffff33,0 0 0 5px #121215,0 0 0 6px #ffffff47,-18px 30px 56px -10px #000e}
}
/* 알림: 강조 테두리·종 아이콘을 빨강으로 */
.s38-list .a38.a38-lift{border-color:#ed23438c;box-shadow:0 14px 30px -8px #000c,0 0 0 1px #ed234340,0 0 26px -6px #ed234399}
.a38-ico.a38-bell{background:linear-gradient(150deg,#ff5a6e,#c8102e)}
/* v067 (Slack 석기 1793615144.497549 "하드웨어 모니터링 시안은 카드가 아니라 가로로 한 줄씩") 좌석 정보를 2열 카드 → 좌석마다 가로 한 줄 목록으로.
   한 줄 = 좌석 번호 · CPU 온도 · GPU 온도 · 온도 막대. 수치가 계속 바뀌는 것·경고 주황은 그대로 */
.hw-grid{grid-template-columns:1fr;gap:4px}
.hw-seat{display:grid;grid-template-columns:2.7em auto auto minmax(16px,1fr);align-items:center;column-gap:.9em;padding:5px 9px;border-radius:8px}
.hw-seat b{margin:0}
.hw-seat i{height:4px;margin:0}
.duo-in .hw-grid{grid-auto-rows:minmax(0,1fr)}
@media (max-width:760px){
.hw-grid{gap:2px}
.hw-seat{column-gap:.6em;padding:2px 6px;border-radius:6px}
.hw-seat i{height:3px}
}@media (max-width:360px){
.hw-seat{grid-template-columns:auto auto auto;justify-content:space-between;column-gap:.3em;padding:2px 4px;font-size:7.5px}
.hw-seat b{font-size:8px}
.hw-seat i{display:none}
.duo-in .hw-head>span{display:none}
.duo-in .hw-head{justify-content:flex-start}
}
/* v068 (Slack 석기 1793615328.208309 "솔루션 쪽 해상도 개선, 글자가 흐려 보여")
   펼친 뒤에도 휴대폰이 비스듬히(3D 회전) 남아 있어 브라우저가 글자를 그림처럼 늘려 그려 흐려짐 → 다 펼치면 정면으로 서게(회전 0).
   접힌 상태·펼치는 동안의 입체감은 그대로. 작은 글자도 조금 키움 */
.duo.open .duo-body{transform:translateX(0)}
.duo-body,.duo-r,.duo-face{-webkit-font-smoothing:antialiased}
.duo-r .s38-list .a38{font-size:12.5px}
.duo-r .a38-head{font-size:10px}
.hw-seat{font-size:10.5px}
.hw-seat b{font-size:11.5px}
.duo-in .hw-row{font-size:10.5px}
@media (max-width:760px){
.duo.open .duo-body{transform:translateX(0)}
.duo-r .s38-list .a38{font-size:10.5px}
.duo-r .a38-head{font-size:9px}
.hw-seat{font-size:9px}
.hw-seat b{font-size:9.5px}
}
@media (max-width:360px){.hw-seat{font-size:8px}.hw-seat b{font-size:8.5px}}
@media (max-width:360px){.duo-r .s38-list .a38{font-size:10px}.duo-r .a38-head{font-size:8.5px}}
/* v073 (Slack 이진원 1793623079.461699 "핸드폰 모양 가로로 더 늘리고 가운데 경계선 안 보이게, 갤럭시 폴드 펼쳤을 때 느낌")
   - 펼친 폭을 넓혀 거의 정사각에 가까운 폴드 안쪽 화면 비율로: PC 470×540 → 600×540, 휴대폰 화면 판 폭 조금 넓힘.
   - 다 펼친 뒤(1.1초~)에는 두 판 각각의 테두리 고리·경첩 그림자를 끄고, 몸체 전체를 감싸는 테두리 하나(.duo-body:after)로 바꿔 가운데 선이 안 보이게.
   - 두 판 배경 그러데이션도 한 장처럼 이어지게(배경 폭 2배, 왼쪽 판은 왼쪽 절반·오른쪽 판은 오른쪽 절반).
   - 접힌 상태·펼치는 움직임은 그대로. */
.sol-screen .sol-phone.duo{--hw:min(300px,21vw)}
.duo.open .duo-in,.duo.open .duo-r{background-size:200% 100%}
.duo.open .duo-in{background-position:0 0}
.duo.open .duo-r{background-position:100% 0}
.duo-in,.duo-r{transition:box-shadow .3s ease}
.duo-in:after{transition:opacity .3s ease}
.duo.open .duo-in,.duo.open .duo-r{box-shadow:none;transition:box-shadow .3s ease 1.1s}
.duo.open .duo-in:after{opacity:0;transition:opacity .3s ease 1.1s}
.duo-body:after{content:"";position:absolute;inset:0;z-index:3;transform:translateZ(1px);border-radius:var(--r);pointer-events:none;opacity:0;transition:opacity .3s ease;
 box-shadow:inset 0 0 0 1px #ffffff2e,0 0 0 7px #121215,0 0 0 8px #ffffff3d,8px 2px 0 8px #2a2a30,-26px 44px 80px -10px #000e,0 40px 110px -30px #ed234340}
.duo.open .duo-body:after{opacity:1;transition:opacity .3s ease 1.1s}
.duo.snap .duo-in,.duo.snap .duo-r,.duo.snap .duo-in:after,.duo.snap .duo-body:after,
html.motion-paused .duo-in,html.motion-paused .duo-r,html.motion-paused .duo-in:after,html.motion-paused .duo-body:after{transition:none}
.sol-screen:has(.duo.open):before{width:560px;margin-left:-280px}
@media (max-width:760px){
.sol-screen .sol-phone.duo{--hw:min(180px,calc((100vw - 34px) / 2))}
.duo-body:after{box-shadow:inset 0 0 0 1px #ffffff2e,0 0 0 5px #121215,0 0 0 6px #ffffff3d,5px 2px 0 6px #2a2a30,-18px 30px 56px -10px #000e}
.duo.open .duo-in,.duo.open .duo-r{box-shadow:none}
.sol-screen:has(.duo.open):before{width:330px;margin-left:-165px}
}
/* v074 (Slack 이진원 1793624860.639999 "Enter 알림 첫번째 박스 빨간선 좌우 잘림")
   - 원인: 새 알림 상자가 1.045배(등장 중 1.07배)로 커지는데 알림 목록이 넘치는 부분을 잘라 빨간 테두리 좌우·위가 잘림.
   - 듀오 휴대폰 알림 목록에 좌우·위 여유를 두고 같은 만큼 바깥 여백을 당겨 상자 폭·위치는 그대로(PC 9px, 휴대폰 6px).
   - 듀오 안에서만 커지는 정도를 1.035배(등장 최대 1.05배), 테두리 퍼짐도 작게 해 여유 안에 들어오게. */
.duo-r .s38-list{margin:-4px -9px 0;padding:4px 9px 0}
.duo-r .s38-list .a38.a38-lift{transform:scale(1.035)}
html:not(.motion-paused) .duo-r .s38-list .a38.a38-in{animation-name:a38-in-duo}
html:not(.motion-paused) .duo-r .s38-list .a38.a38-in:after{animation-name:a38-ping-duo}
@keyframes a38-in-duo{0%{margin-top:calc(-1 * var(--h,58px) - 6px);opacity:0;transform:translateY(22px) scale(.9)}55%{opacity:1;transform:translateY(0) scale(1.05)}100%{margin-top:0;opacity:1;transform:scale(1.035)}}
@keyframes a38-ping-duo{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.03,1.12)}}
@media (max-width:760px){.duo-r .s38-list{margin:-4px -6px 0;padding:4px 6px 0}}