/*! SPDX-License-Identifier: LicenseRef-Bubbly-Proprietary | Proprietary. Copyright (c) 2026 ROLLER COASTER (롤러코스터). All rights reserved. Unauthorized copying, reverse engineering, or license circumvention is prohibited. See NOTICE. */
/* 사용법 시뮬레이션: 맥 느낌의 가상 화면(1440×900, 세로 화면은 900×1600)을 화면 높이에 맞춰 줄여 그린다. 값은 가상 화면 화소 기준. */
.sim{position:relative;height:calc(100svh - 88px);min-height:500px;overflow:hidden;background:#e9eef5}
@media(max-width:700px){.sim{height:calc(100svh - 76px);min-height:480px}}
#stage{position:absolute;left:0;top:0;width:1440px;height:900px;transform-origin:0 0;overflow:hidden;
  background:#3aa7ad url(assets/usage-sim/sea-a.jpg) center/cover;
  font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',sans-serif;color:#1d1d1f;-webkit-font-smoothing:antialiased;user-select:none}

#stage *{box-sizing:border-box}
#stage svg{display:block}

/* 메뉴 막대(애플 로고 없이 모양만) */
.menubar{position:absolute;left:0;right:0;top:0;height:30px;background:rgba(255,255,255,.55);backdrop-filter:blur(20px);display:flex;align-items:center;gap:22px;padding:0 18px;font-size:14px}
.menubar .logo{width:14px;height:14px;border-radius:50%;background:#1d1d1f}
.menubar .clock{margin-left:auto}

/* 창 공통 */
.win{position:absolute;border-radius:12px;background:#fff;box-shadow:0 20px 50px rgba(30,40,60,.18),0 0 0 1px rgba(0,0,0,.06);overflow:hidden}
.win .bar{height:40px;display:flex;align-items:center;gap:8px;padding:0 14px;font-size:14px;font-weight:600;color:#4a4d52}
.win .bar i{width:12px;height:12px;border-radius:50%}
.win .bar i:nth-child(1){background:#ff5f57}.win .bar i:nth-child(2){background:#febc2e}.win .bar i:nth-child(3){background:#28c840}
.win .bar span{flex:1;text-align:center;margin-right:52px}

/* 텍스트 에디터 */
.editor{left:calc(50% - 680px);top:62px;width:660px;height:660px}
.editor .bar{border-bottom:1px solid #eceef1}
.doc{padding:34px 44px;font-size:18px;line-height:1.7;overflow:auto}
.doc h3{margin:0 0 10px;font-size:26px;font-weight:700}
.doc p{margin:0;min-height:31px;font-size:inherit;line-height:inherit;letter-spacing:0;color:#1d1d1f}

/* 사내 채팅(Slack 느낌의 배치·색만, 로고·이름 없음) */
.chat{left:calc(50% + 20px);top:62px;width:660px;height:660px;display:grid;grid-template-columns:180px 1fr;grid-template-rows:40px 1fr}
.chat .bar{grid-column:1/-1;background:#2a1f33;color:#d9cfe0}
.chat aside{background:#3b2a47;color:#cdbfd8;padding:16px 0;font-size:15px}
.chat aside b{display:block;padding:0 18px 14px;color:#fff;font-size:17px}
.chat aside div{padding:6px 18px}
.chat aside .sel{background:#1164a3;color:#fff}
.chat aside .dmh{margin-top:14px}
.room{display:flex;flex-direction:column;min-height:0}
.room .hd{height:52px;display:flex;align-items:center;padding:0 20px;font-weight:700;font-size:17px;border-bottom:1px solid #eceef1}
.msgs{flex:1;padding:18px 20px;display:flex;flex-direction:column;gap:16px;overflow:auto;min-height:0}
.msg{display:flex;gap:12px}
.ava{width:38px;height:38px;border-radius:8px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:16px;flex:none;background:#e0803a;font-style:normal}
.msg .who{font-size:15px;font-weight:700}.msg .who small{font-weight:400;color:#8a8d92;font-size:12px;margin-left:6px}
.msg p{margin:3px 0 0;font-size:16px;line-height:1.5;color:#1d1d1f;letter-spacing:0;white-space:pre-wrap;word-break:keep-all}
.inp{margin:0 18px 18px;border:1px solid #cfd2d6;border-radius:10px;padding:12px 14px;font-size:16px;line-height:1.5;color:#1d1d1f;min-height:76px;max-height:160px;overflow:auto}
#chatInput:empty::before{content:attr(data-ph);color:#8a8d92}

/* 세로 화면(휴대폰): 창을 위아래로 쌓는다 */
.portrait .editor{left:calc(50% - 420px);top:56px;width:840px;height:560px}
.portrait .chat{left:calc(50% - 420px);top:650px;width:840px;height:640px;grid-template-columns:200px 1fr}
.portrait .doc{font-size:24px}.portrait .doc h3{font-size:32px}
.portrait .msg p,.portrait .inp{font-size:22px}

/* 편하다 말풍선: 대표가 준 실제 앱 캡처(2026-10-31, 레티나 2배 920×268px = 460×134pt)를 2배 화소 그대로 재서 그린다. #bwrap 배율 0.5 = 실제 크기 */
#bwrap{position:absolute;left:0;top:0;transform-origin:0 0}
.bub{position:relative;width:920px;border-radius:36px;background:rgba(246,246,249,calc(.94 * var(--glass,1)));cursor:grab;border:1px solid rgba(0,0,0,.07);box-shadow:0 22px 50px rgba(23,25,29,.16),0 2px 6px rgba(23,25,29,.05);backdrop-filter:blur(20px);color:#1d1d1f}
.bub{display:flex;flex-direction:column}.bub .top{position:relative;flex:1 0 auto;display:flex}
.bub .live{position:relative;flex:1;min-height:151px;padding:16px 110px 16px 34px;display:flex;align-items:center;font-size:28px;font-weight:500;line-height:1.45;letter-spacing:-.3px}
.bub .live p{margin:0;font-size:inherit;line-height:inherit;color:inherit;word-break:keep-all}
.bub .side{position:absolute;right:20px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px}
.bub .side button{width:56px;height:36px;border-radius:18px;background:#e4e4e9;display:flex;align-items:center;justify-content:center;cursor:pointer}
.bub .side svg{width:22px;height:22px;stroke:#1d1d1f;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.bub .tools{height:117px;display:flex;align-items:center;border-top:2px solid #cfcfd4;margin:0 20px}
.bub .tools button,.bub .tools .op{flex:1;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:20px;font-weight:500;white-space:nowrap;cursor:pointer}
.bub .tools button.on{color:#0a6bf0;font-weight:700}
.bub .tools svg{width:26px;height:26px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.bub .tools .sep{width:2px;height:60px;background:#d1d1d6;flex:none}
.bub .op{flex:1.4!important}.bub .op i{display:block;width:100%;height:2px;background:#9a9aa0;position:relative;margin:12px 0 11px}
/* 접힌 알약(앱 값의 2배: 높이 68, 모서리 24, 단추 56×36 간격 8) */
.pill{position:relative;width:356px;height:68px;border-radius:24px;background:rgba(246,246,249,calc(.94 * var(--glass,1)));cursor:grab;border:1px solid rgba(0,0,0,.07);box-shadow:0 22px 50px rgba(23,25,29,.16),0 2px 6px rgba(23,25,29,.05);display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:0 22px}
.pill button{width:56px;height:36px;border-radius:18px;background:rgba(255,255,255,.75);display:grid;place-items:center;cursor:pointer}
.pill svg{width:20px;height:20px;stroke:#1d1d1f;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.pill .tog i{display:block;width:3px;height:16px;border-radius:2px;background:rgba(29,29,31,.85)}
#bwrap.folded .bub,#bwrap:not(.folded) .pill{display:none}
.pill button.on{color:#0a6bf0}.pill button.on svg{stroke:#0a6bf0}
#chatInput{cursor:text}
/* 메모 창: 제목 막대 아래 남은 높이만 본문으로(끝 줄이 창 밖으로 잘리지 않게) */
.editor{display:flex;flex-direction:column}#editor .doc{cursor:text;flex:1;min-height:0}

/* 입력칸: 브라우저 입력 기능 그대로(가상 화면은 글 선택을 막아 두었으므로 여기만 푼다) */
#doc,#chatInput{-webkit-user-select:text;user-select:text;outline:none;caret-color:#1d1d1f}
/* 단추 상태·번역 언어 칸(앱 값의 2배: 칸 높이 24→48, 간격 4→8, 글자 11→22, 모서리 6→12, 4열) */
:where(#bwrap) button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;-webkit-appearance:none;appearance:none}
.bub i.ic,.pill i.ic{display:block;font-style:normal}
/* 키보드 포커스 표시(말풍선은 0.5배로 줄어 보이므로 굵게) */
#bwrap button:focus-visible,#bwrap .op:focus-visible{outline:4px solid #0a6bf0;outline-offset:3px}
#chatInput:focus{border-color:#1164a3;box-shadow:0 0 0 1px #1164a3}
#doc:focus-visible{box-shadow:inset 0 0 0 2px rgba(10,107,240,.35)}
.langs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:8px 28px 6px}
.langs[hidden]{display:none}
.langs button{height:48px;border-radius:12px;background:rgba(29,29,31,.08);display:grid;place-items:center;font-size:22px;font-weight:400;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 8px}
.langs button.sel{background:rgba(10,107,240,.28);color:#0a6bf0;font-weight:600}
.bub .op{cursor:pointer}
.bub .op u{position:absolute;top:-7px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:#1d1d1f}
#bwrap{opacity:1;transition:left .35s cubic-bezier(.2,.8,.2,1),top .35s cubic-bezier(.2,.8,.2,1),opacity .25s}
#bwrap.drag{transition:opacity .25s;cursor:grabbing}
#bwrap.closing{opacity:0;pointer-events:none;transition-delay:1.1s}
#bwrap button{cursor:pointer}

/* 페이지 위 설명문: '편하다'는 파란 글자에 빛이 가끔 훑고 지나간다 */
.sim-page{height:calc(100svh - 74px);min-height:540px;display:flex;flex-direction:column}
@media(max-width:700px){.sim-page{height:calc(100svh - 76px)}}
.sim-page .sim{flex:1;height:auto;min-height:0}
.intro{margin:0;padding:16px 20px;text-align:center;font-size:17px;line-height:1.5;letter-spacing:-.2px;color:#3a3f47;word-break:keep-all;animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
.intro .brand{font-weight:700;color:#0a6bf0;background:linear-gradient(100deg,#0a6bf0 0 42%,#bfe0ff 50%,#0a6bf0 58% 100%) 100% 0/300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shine 5s ease-in-out 1s infinite}
@keyframes shine{0%{background-position:100% 0}35%,100%{background-position:0 0}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
@media(max-width:700px){.intro{font-size:14px;padding:10px 16px}}
@media(prefers-reduced-motion:reduce){.intro,.intro .brand{animation:none}#bwrap{transition:none}}
#bwrap{touch-action:none}

/* 안내 글 강조: 낱말이 차례로 또렷해지고, 이후 4.5초마다 파란 빛이 낱말을 차례로 훑고 지나간다(반복) */
#btext.fresh span{display:inline-block;animation:word .45s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 45ms) both,wave 4.5s ease-in-out calc(var(--i) * 70ms + 1.2s) infinite}
@keyframes word{from{opacity:0;filter:blur(5px);transform:translateY(8px)}}
@keyframes wave{0%,22%,100%{color:#1d1d1f;text-shadow:none}9%{color:#0a6bf0;text-shadow:0 0 14px rgba(10,107,240,.35)}}
@media(prefers-reduced-motion:reduce){#btext.fresh,#btext.fresh span{animation:none}}