/* ── 목업: 고정 크기로 그리고 칸에 맞춰 줄인다(.fit) ───────────── */
.fit { position: relative; width: 100%; height: 100%; min-height: 0; overflow: hidden; }
.fit > .fit-in { position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; }
.mock { font-family: var(--font-system); letter-spacing: -0.01em; }

/* ── macOS 26 창(모서리 26 · 신호등 14px · 간격 23px · 그림자 0 16 48 .35) ── */
.mwin { position: absolute; display: flex; flex-direction: column; border-radius: var(--r-window); background: #fff; box-shadow: var(--shadow-window); overflow: hidden; color: var(--label-1); }
.mwin.sm { border-radius: var(--r-window-sm); }
.mwin.dark { background: var(--window-dark); color: var(--label-1-d); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(255, 255, 255, 0.14); }
.mwin-bar { flex: none; height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 18px; position: relative; }
.mwin.sm .mwin-bar { height: 36px; padding: 0 12px; }
.mwin-bar .title { position: absolute; left: 0; right: 0; text-align: center; font-size: 14.5px; font-weight: 600; color: #5a5a5f; pointer-events: none; }
.mwin.dark .mwin-bar .title { color: var(--label-2-d); }
.lights { display: flex; gap: 9px; position: relative; z-index: 1; }
.lights i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12); }
.lights i:nth-child(1) { background: #ff5f57; }
.lights i:nth-child(2) { background: #febc2e; }
.lights i:nth-child(3) { background: #28c840; }
.mwin.is-inactive .lights i { background: #dcdcdc; }
.mwin-body { flex: 1; min-height: 0; position: relative; }
.toolbar-glass { margin-left: auto; position: relative; z-index: 1; display: flex; gap: 6px; }
.toolbar-glass span { height: 28px; min-width: 28px; padding: 0 10px; border-radius: var(--r-capsule); display: grid; place-items: center; font-size: 12px; background: rgba(0, 0, 0, 0.05); color: var(--label-2); }

/* 윈도우 창(윈도우 사용자용: 각진 제목줄 · 오른쪽 버튼) */
.wwin { position: absolute; display: flex; flex-direction: column; border-radius: 8px; background: #0c0c0c; color: #e6e6e6; overflow: hidden; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.wwin-bar { flex: none; height: 34px; display: flex; align-items: center; padding-left: 12px; font-family: "Segoe UI", var(--font-system); font-size: 12px; color: #cfcfcf; background: #1f1f1f; }
.wwin-bar .tab { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 12px; margin-top: 8px; border-radius: 6px 6px 0 0; background: #0c0c0c; }
.wwin-bar .tab b { width: 12px; height: 12px; border-radius: 2px; background: #2a6fdb; }
.wwin-bar .ctl { margin-left: auto; display: flex; height: 100%; }
.wwin-bar .ctl span { width: 44px; display: grid; place-items: center; color: #bdbdbd; font-size: 12px; }

/* 윈도우로 보고 있을 때: 맥 창(.oschrome)을 윈도우 창 모양으로(왼쪽 제목 · 오른쪽 — ▢ ✕) */
body[data-os-now="win"] .mwin.oschrome { border-radius: 10px; }
body[data-os-now="win"] .mwin.dark.oschrome { background: #0c0c0c; color: #e6e6e6; }
body[data-os-now="win"] .oschrome > .mwin-bar { height: 40px; padding: 0 0 0 16px; gap: 0; background: #f3f3f3; }
body[data-os-now="win"] .mwin.dark.oschrome > .mwin-bar { background: #1f1f1f; }
body[data-os-now="win"] .oschrome .lights { display: none; }
body[data-os-now="win"] .oschrome > .mwin-bar .title { position: static; text-align: left; font-family: "Segoe UI", var(--font-system); font-size: 14px; font-weight: 500; color: #3a3a3c; }
body[data-os-now="win"] .mwin.dark.oschrome > .mwin-bar .title { color: #cfcfcf; }
body[data-os-now="win"] .oschrome > .mwin-bar::after { content: "—\2003\2003▢\2003\2003✕"; margin-left: auto; padding: 0 18px; white-space: pre; font-family: "Segoe UI", var(--font-system); font-size: 13px; color: #6e6e73; }
body[data-os-now="win"] .mwin.dark.oschrome > .mwin-bar::after { color: #bdbdbd; }
body[data-os-now="win"] .oschrome .term { padding-top: 14px; font-family: "Cascadia Mono", Consolas, var(--font-mono); }

/* ── 터미널 ───────────────────────────────────── */
.term { position: absolute; inset: 0; padding: 6px 22px 22px; font-family: var(--font-mono); font-size: 17px; line-height: 1.62; color: #e9e9ec; white-space: pre-wrap; word-break: break-all; overflow: hidden; }
.wwin .term { padding-top: 14px; font-family: "Cascadia Mono", Consolas, var(--font-mono); }
.term .ln { display: block; min-height: 1.62em; }
.term .pr { color: #8e8e93; }
.term .pr b { color: #30d158; font-weight: 500; }
.term .ok { color: #30d158; }
.term .dim { color: #8e8e93; }
.term .acc { color: #64d2ff; }
.term .warn { color: #ffd60a; }
.term .claude { color: #ff9f6b; }
.caret { display: inline-block; width: 0.58em; height: 1.15em; margin-left: 1px; vertical-align: -0.2em; background: #e9e9ec; animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.cc-box { display: block; margin: 6px 0; padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(255, 159, 107, 0.55); color: #e9e9ec; }
.cc-box .claude { font-weight: 700; }
.cc-ask { display: block; margin: 6px 0; padding: 12px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); }
.cc-ask .opt { display: table; }
.cc-ask .opt.on { color: #64d2ff; }
.todo { display: block; }
.todo .bx { display: inline-block; width: 1.2em; color: #8e8e93; }
.todo.done .bx { color: #30d158; }
.todo.done .tx { color: #8e8e93; }

/* ── Finder(아이콘 격자 창) ─────────────────── */
.finder { display: flex; height: 100%; }
.finder-side { width: 170px; flex: none; padding: 8px 10px; background: rgba(246, 246, 246, 0.9); border-right: 0.5px solid rgba(0, 0, 0, 0.08); font-size: 13px; color: var(--label-2); }
.finder-side b { display: block; padding: 10px 8px 4px; font-size: 11px; font-weight: 600; color: var(--label-3); }
.finder-side span { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; border-radius: 8px; color: var(--label-1); }
.finder-side span.on { background: rgba(0, 0, 0, 0.1); }
.finder-side span i { width: 15px; height: 12px; border-radius: 2px; background: #5ac8fa; }
.finder-main { flex: 1; position: relative; padding: 18px; display: grid; grid-template-columns: repeat(auto-fill, 96px); grid-auto-rows: 104px; gap: 6px 10px; align-content: start; }
.fold { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12.5px; color: var(--label-1); text-align: center; }
.fold i { width: 62px; height: 48px; position: relative; border-radius: 6px; background: linear-gradient(#7cc8f9, #4aa8ef); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.06); }
.fold i::before { content: ""; position: absolute; left: 0; top: -6px; width: 26px; height: 10px; border-radius: 4px 4px 0 0; background: #5fb6f3; }
.fold span { padding: 1px 6px; border-radius: 4px; }
.fold.sel span { background: var(--accent); color: #fff; }
.fold.edit span { background: #fff; color: var(--label-1); box-shadow: 0 0 0 3px rgba(0, 136, 255, 0.35); }
.ctx { position: absolute; width: 210px; padding: 5px; border-radius: 12px; background: rgba(246, 246, 246, 0.86); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), 0 0 0 0.5px rgba(0, 0, 0, 0.12); font-size: 13px; transform-origin: 0 0; }
.ctx span { display: block; height: 24px; line-height: 24px; padding: 0 10px; border-radius: 6px; }
.ctx span.on { background: var(--accent); color: #fff; }
.ctx hr { border: 0; height: 0.5px; background: rgba(0, 0, 0, 0.12); margin: 4px 8px; }

/* ── 브라우저 창 ──────────────────────────────── */
.addr { position: relative; z-index: 1; flex: 1; max-width: 460px; margin: 0 auto; height: 32px; border-radius: var(--r-capsule); background: rgba(0, 0, 0, 0.05); display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; color: var(--label-2); }
.addr svg.i { width: 13px; height: 13px; }
.web { position: absolute; inset: 0; display: grid; place-items: center; background: #faf9f5; }
.login-card { width: 380px; padding: 30px 30px 26px; border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; gap: 14px; text-align: center; font-family: var(--font); }
.login-card .logo { width: 44px; height: 44px; margin: 0 auto; border-radius: 12px; display: grid; place-items: center; background: #d97757; color: #fff; }
.login-card .logo svg.i { width: 24px; height: 24px; stroke-width: 2; }
.login-card h5 { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -0.02em; }
.login-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--label-2); }
.login-card .who { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg-subtle); text-align: left; font-size: 13.5px; }
.login-card .who i { width: 30px; height: 30px; border-radius: 50%; background: #8e8e93; display: grid; place-items: center; color: #fff; font-style: normal; font-size: 13px; font-weight: 600; }
.login-card .who small { display: block; color: var(--label-2); font-size: 12px; }
.login-card .go { height: 42px; border-radius: 12px; background: #1f1e1d; color: #fff; display: grid; place-items: center; font-size: 15px; font-weight: 600; }
.login-card .done { display: none; color: #1f8a3c; font-weight: 650; font-size: 15px; }

/* Spotlight 검색 막대 */
.spot { position: absolute; width: 640px; height: 62px; border-radius: 22px; display: flex; align-items: center; gap: 14px; padding: 0 22px; background: rgba(246, 246, 246, 0.82); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25), 0 0 0 0.5px rgba(0, 0, 0, 0.12); font-size: 24px; color: var(--label-1); }
.spot svg.i { width: 24px; height: 24px; color: var(--label-2); }
.spot .q { flex: 1; }
.spot-res { position: absolute; width: 640px; border-radius: 18px; padding: 8px; background: rgba(246, 246, 246, 0.82); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2), 0 0 0 0.5px rgba(0, 0, 0, 0.12); }
.spot-res div { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 12px; border-radius: 12px; font-size: 16px; }
.spot-res div.on { background: var(--accent); color: #fff; }
.spot-res .app { width: 32px; height: 32px; border-radius: 8px; background: #1e1e1e; display: grid; place-items: center; color: #fff; font-family: var(--font-mono); font-size: 13px; }
.kb { position: absolute; display: flex; gap: 10px; font-family: var(--font-system); }
.kb span { min-width: 64px; height: 58px; padding: 0 14px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; font-weight: 500; background: #fff; color: var(--label-1); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.08); }
.kb span.wide { min-width: 220px; }
.kb .plus { min-width: 0; padding: 0; background: none; box-shadow: none; color: var(--label-2); }
.winmenu { position: absolute; width: 300px; padding: 6px; border-radius: 8px; background: #2b2b2b; color: #f0f0f0; font-family: "Segoe UI", var(--font-system); font-size: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.winmenu span { display: block; height: 34px; line-height: 34px; padding: 0 14px; border-radius: 4px; }
.winmenu span.on { background: #3d3d3d; }
.winmenu hr { border: 0; height: 1px; background: rgba(255, 255, 255, 0.1); margin: 4px 0; }

/* ── iPhone(iOS 16 키트: 라지 타이틀 34 · 본문 17 · 묶음 목록 · 재질) ── */
.phone { position: absolute; width: 390px; height: 800px; border-radius: 58px; padding: 12px; background: #1a1a1c; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.28), inset 0 0 0 2px #3a3a3c; }
.phone-scr { position: relative; width: 100%; height: 100%; border-radius: 47px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.island { position: absolute; z-index: 5; top: 11px; left: 50%; width: 122px; height: 35px; margin-left: -61px; border-radius: 20px; background: #000; }
.status { flex: none; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 6px 30px 0 34px; font-size: 16px; font-weight: 600; }
.status .ind { display: flex; gap: 6px; align-items: center; }
.status .ind i { display: block; width: 18px; height: 11px; border-radius: 3px; border: 1.5px solid currentColor; }
.ios-nav { flex: none; padding: 4px 16px 8px; }
.ios-nav .back { height: 44px; display: flex; align-items: center; gap: 4px; color: #0062d1; font-size: 17px; }
.ios-nav h6 { margin: 0; font-size: 34px; line-height: 41px; font-weight: 700; letter-spacing: 0.37px; font-family: var(--font-system); }
.chat { flex: 1; padding: 8px 14px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; font-size: 17px; line-height: 22px; letter-spacing: -0.41px; }
.bub { max-width: 82%; padding: 9px 14px; border-radius: 20px; }
.bub.me { align-self: flex-end; background: #0a6de0; color: #fff; border-bottom-right-radius: 6px; }
.bub.ai { align-self: flex-start; background: #e9e9eb; color: #000; border-bottom-left-radius: 6px; }
.bub.ai b { font-weight: 600; }
.typing { align-self: flex-start; display: flex; gap: 5px; padding: 14px 16px; border-radius: 20px; background: #e9e9eb; }
.typing i { width: 8px; height: 8px; border-radius: 50%; background: #8e8e93; }
.compose { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 14px 30px; }
.compose span { flex: 1; height: 38px; border-radius: 19px; border: 1px solid #c6c6c8; display: flex; align-items: center; padding: 0 14px; color: #8e8e93; font-size: 16px; }
.compose b { width: 32px; height: 32px; border-radius: 50%; background: #007aff; }

/* iOS 알림(System Materials Regular: #F9F9F9 78% + 흐림) */
.notif { position: absolute; display: flex; gap: 12px; padding: 14px 16px; width: 360px; border-radius: 24px; background: var(--mat-ios-regular); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); font-size: 15px; line-height: 20px; letter-spacing: -0.24px; }
.notif .app { width: 38px; height: 38px; flex: none; border-radius: 9px; display: grid; place-items: center; color: #fff; background: #d97757; }
.notif .app svg.i { width: 22px; height: 22px; stroke-width: 2; }
.notif b { font-weight: 600; }
.notif small { margin-left: auto; color: rgba(60, 60, 67, 0.6); font-size: 13px; }

/* ── 작업 맡기기(코워크) 창 안 ─────────────────── */
.task { position: absolute; inset: 0; padding: 4px 28px 24px; display: flex; flex-direction: column; gap: 14px; font-family: var(--font); }
.task .ask { align-self: flex-end; max-width: 78%; padding: 12px 16px; border-radius: 18px; background: #f0eee6; font-size: 16px; line-height: 1.55; }
.task .runs { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.task .run { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--label-1); }
.task .run i { width: 20px; height: 20px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.2); display: grid; place-items: center; }
.task .run.done i { background: var(--green); box-shadow: none; }
.task .run.done i::after { content: ""; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.task .run.doing i { box-shadow: inset 0 0 0 2px var(--accent); }
.task .file { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); font-size: 15px; }
.task .file .doc { width: 40px; height: 50px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); position: relative; }
.task .file .doc::after { content: ""; position: absolute; left: 8px; right: 8px; top: 12px; height: 18px; background: repeating-linear-gradient(#c7c7cc 0 2px, transparent 2px 6px); }
.task .file small { display: block; color: var(--label-2); font-size: 13px; margin-top: 2px; }
.task .pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: var(--r-capsule); background: rgba(52, 199, 89, 0.14); color: #1f8a3c; font-size: 13.5px; font-weight: 600; }

/* ── 시연용 커서(그랜터 시연 도우미와 같은 방식: 등장 → 이동 → 누름 고리 → 퇴장) ── */
.cur { position: absolute; left: 0; top: 0; z-index: 20; width: 30px; height: 30px; pointer-events: none; opacity: 0; transform-origin: 6.25px 3.75px; }
.cur svg { width: 30px; height: 30px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3)); }
/* 고리는 화살표 끝(팁: 30px 커서에서 6.25, 3.75)을 중심으로 */
.cur .ring { position: absolute; left: calc(6.25px - 18px); top: calc(3.75px - 18px); width: 36px; height: 36px; border-radius: 50%; background: rgba(0, 136, 255, 0.38); opacity: 0; }

/* 표지 아래 잘린 창 */
/* 위 글(칩·제목 두 줄·부제·버튼) 바로 아래에서 시작해 아래로 잘리게: 낮은 화면에서도 버튼을 가리지 않음 */
.cover-win { position: absolute; left: 50%; bottom: -60px; width: min(980px, 88vw); top: calc(clamp(20px, 4.4vh, 44px) + clamp(16px, 6vh, 72px) + 2.36 * clamp(32px, 3.35vw, 48px) + 214px); transform: translateX(-50%); }
@media (max-width: 767px), (max-height: 620px) { .cover-win { display: none; } }

/* ── 큰 화면용 목업 ─────────────────────────── */
.term.big { font-size: 20px; line-height: 1.6; padding: 4px 26px 22px; }
.wwin .term.big { padding-top: 14px; }
.key { position: absolute; left: 0; top: 0; z-index: 15; min-width: 92px; height: 52px; padding: 0 18px; border-radius: 12px; display: grid; place-items: center; font-family: var(--font-system); font-size: 21px; font-weight: 600; background: #f5f5f7; color: #1d1d1f; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35), 0 10px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.1); opacity: 0; }
.key.wide { min-width: 130px; }
.toast { position: absolute; right: 24px; top: 66px; z-index: 15; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px; border-radius: var(--r-capsule); background: rgba(52, 199, 89, 0.16); color: #7ee29a; font-family: var(--font); font-size: 18px; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(52, 199, 89, 0.4); opacity: 0; }
.toast svg.i { width: 20px; height: 20px; }
.desk { position: absolute; inset: 0; border-radius: var(--r-window); overflow: hidden; background: #1b1c22; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.menubar { height: 30px; display: flex; align-items: center; gap: 18px; padding: 0 18px; background: rgba(255, 255, 255, 0.07); font-family: var(--font-system); font-size: 14px; color: rgba(255, 255, 255, 0.85); }
.menubar span:first-of-type { font-weight: 700; }
.menubar em { margin-left: auto; font-style: normal; }
.desk.win { background: #10243f; }
.taskbar { position: absolute; left: 0; right: 0; bottom: 0; height: 48px; display: flex; align-items: center; gap: 12px; padding: 0 14px; background: rgba(32, 32, 32, 0.92); font-family: "Segoe UI", var(--font-system); font-size: 15px; color: #f0f0f0; }
.taskbar .start { width: 38px; height: 38px; border-radius: 6px; display: grid; place-items: center; font-size: 20px; color: #4ea1ff; }
.taskbar .tsearch { width: 220px; height: 34px; border-radius: 17px; display: flex; align-items: center; padding: 0 14px; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.6); }
.taskbar em { margin-left: auto; font-style: normal; color: rgba(255, 255, 255, 0.8); }
.desk.win .winmenu { top: auto !important; bottom: 56px; font-size: 16px; width: 330px; }
.desk.win .winmenu span { height: 38px; line-height: 38px; }
.spot { width: 660px; height: 64px; font-size: 26px; }
.spot-res { width: 660px; }
.spot-res div { font-size: 18px; height: 52px; }
.spot-res small { margin-left: auto; font-size: 14px; opacity: 0.8; }
.desk-strip { position: absolute; left: 0; top: 0; bottom: 0; width: 210px; border-radius: var(--r-window); background: #e9eef5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-family: var(--font); }
.desk-strip small { font-size: 15px; color: #4f4f55; }
.fold.big { position: relative; width: 120px; font-size: 17px; font-weight: 550; }
.fold.big i { width: 86px; height: 66px; }
.fold.big i::before { width: 36px; height: 13px; top: -8px; }
.fold.ghost { position: absolute; left: 0; top: 0; z-index: 19; opacity: 0; pointer-events: none; }
.phone.crop { height: 760px; }
.phone.crop .chat { font-size: 18px; line-height: 24px; }
.task .ask { font-size: 17.5px; }
.task .run { font-size: 17px; }
.task .file { font-size: 17px; }
.login-card h5 { font-size: 22px; }
.login-card p, .login-card .who { font-size: 15px; }
.login-card .go { height: 46px; font-size: 17px; }
.login-card .done { font-size: 16px; }

/* ── 메일 자동화 목업 ─────────────────────────── */
/* 파일 · 폴더 목록 창 */
.flist { position: absolute; inset: 0; padding: 4px 10px; display: flex; flex-direction: column; gap: 1px; font-family: var(--font); color: #1d1d1f; }
.flist .row { flex: none; display: flex; align-items: center; gap: 10px; height: 27px; padding: 0 10px; border-radius: 7px; font-size: 15px; white-space: nowrap; overflow: hidden; }
.flist .row .fi { width: 14px; height: 17px; flex: none; border-radius: 2px; background: #fff; box-shadow: inset 0 0 0 1.5px #b9b9be; }
.flist .row b { font-weight: 550; flex: none; }
.flist .row small { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 14px; color: #6e6e73; }
.flist .row.on { background: rgba(0, 136, 255, 0.12); }
.flist .row.frow { height: 64px; gap: 14px; font-size: 19px; }
.flist .row.frow i { width: 38px; height: 30px; flex: none; position: relative; border-radius: 5px; background: linear-gradient(#7cc8f9, #4aa8ef); }
.flist .row.frow i::before { content: ""; position: absolute; left: 0; top: -5px; width: 16px; height: 8px; border-radius: 3px 3px 0 0; background: #5fb6f3; }
.flist .row.frow .cnt { margin-left: auto; min-width: 54px; text-align: right; font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
.flist .row.frow small { font-size: 14.5px; }
/* 글자 문서 창 */
.doc { position: absolute; inset: 0; padding: 14px 24px 20px; font-family: var(--font); font-size: 17px; line-height: 1.7; color: #1d1d1f; white-space: pre-wrap; word-break: keep-all; overflow: hidden; }
.doc .flag { display: block; margin-bottom: 8px; padding: 10px 14px; border-radius: 10px; background: rgba(255, 141, 40, 0.14); color: #8a4300; font-weight: 600; white-space: pre-wrap; }
/* 표(csv) 창 */
.csvt { width: 100%; border-collapse: collapse; font-family: var(--font); font-size: 16px; color: #1d1d1f; }
.csvt th { text-align: left; font-size: 14px; font-weight: 650; color: #55555a; background: #f5f5f7; padding: 10px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.csvt td { padding: 14px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); font-variant-numeric: tabular-nums; white-space: nowrap; }
.csvt .st { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 14px; font-weight: 650; }
.csvt .st.wait { background: rgba(0, 136, 255, 0.1); color: #0058c7; }
.csvt .st.check { background: rgba(255, 141, 40, 0.16); color: #8a4300; }
.csv-memo { margin: 0; padding: 14px 16px; font-family: var(--font); font-size: 15px; line-height: 1.6; color: #55555a; }
/* 메일 읽기 창 */
.mailview { position: absolute; inset: 0; padding: 10px 30px 20px; font-family: var(--font); color: #1d1d1f; }
.mv-h { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.mv-h i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 16px; font-weight: 650; color: #fff; background: #8e8e93; }
.mv-h b { display: block; font-size: 18px; }
.mv-h small { display: block; font-size: 14px; color: #6e6e73; }
.mailview p { margin: 0; font-size: 19px; line-height: 1.8; }
.mailview mark { background: transparent; color: inherit; border-radius: 4px; padding: 0 2px; transition: background-color 0.3s ease; }
.mailview mark.hl { background: rgba(255, 214, 10, 0.5); }
/* 숨은 일 칩 */
.jobs { position: absolute; display: flex; flex-direction: column; gap: 9px; width: 420px; font-family: var(--font); }
.jobs span { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 16px; border-radius: 12px; font-size: 18px; font-weight: 550; color: #f2f2f7; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.jobs em { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 14px; font-weight: 700; background: rgba(0, 145, 255, 0.24); color: #9fd2ff; }
.jobs span.me { background: rgba(255, 159, 10, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 159, 10, 0.45); }
.jobs span.me em { background: rgba(255, 159, 10, 0.3); color: #ffd28a; }
/* 메일함(예시 그림) */
.inbox { position: absolute; inset: 0; display: flex; font-family: var(--font); color: #1d1d1f; }
.inbox aside { width: 170px; flex: none; padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; background: #f6f6f6; border-right: 1px solid rgba(0, 0, 0, 0.06); font-size: 15px; }
.inbox aside span { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border-radius: 8px; }
.inbox aside span.on { background: rgba(0, 0, 0, 0.08); font-weight: 650; }
.inbox aside i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.inbox aside b { margin-left: auto; font-size: 14px; font-weight: 600; color: #55555a; font-variant-numeric: tabular-nums; }
.ib-list { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ib-list div { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 10px; height: 56px; padding: 0 14px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); font-size: 15px; }
.ib-list b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #3a3a3c; }
.ib-list em { font-style: normal; font-size: 14px; font-weight: 650; color: #fff; padding: 3px 9px; border-radius: 999px; }
/* 터미널 안 표 */
.term .tt { border-collapse: collapse; margin: 4px 0 6px 1.2em; }
.term .tt td { padding: 0 16px; border: 1px solid rgba(255, 255, 255, 0.2); line-height: 1.5; }
.term .tt td:last-child { text-align: right; }
.term .tt tr:first-child td { color: #8e8e93; }

/* ── 시트 자동화 목업: 스프레드시트(.gs) + AI 창(.aip) ── */
.gs { position: absolute; left: 0; top: 0; bottom: 0; right: 400px; display: flex; flex-direction: column; background: #fff; color: #1d1d1f; font-family: var(--font); }
.cover-win .gs { right: 0; }
.gs-fx { flex: none; height: 36px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-bottom: 1px solid #e3e3e8; font-size: 15px; color: #6e6e73; }
.gs-fx i { font-style: italic; font-weight: 600; color: #8e8e93; }
.gs-fx b { font-family: var(--font-mono); font-size: 14.5px; font-weight: 500; color: #1d1d1f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-grid { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.gs-grid table { border-collapse: collapse; font-size: 16px; table-layout: fixed; }
.gs-grid th { height: 26px; padding: 0 8px; font-size: 14px; font-weight: 500; color: #6e6e73; background: #f5f5f7; border: 1px solid #e3e3e8; }
.gs-grid td { height: 34px; padding: 0 10px; border: 1px solid #e6e6ea; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.gs-grid td.rn { width: 36px; padding: 0; text-align: center; font-size: 14px; color: #8e8e93; background: #f5f5f7; }
.gs-grid td.h { font-weight: 650; background: #e8f1ff; }
.gs-grid td.t { font-weight: 700; font-size: 16px; border-color: transparent; background: #fff; }
.gs-grid td.calc { background: #efeff2; color: #3a3a3c; }
.gs-grid td.num { text-align: right; }
.gs-grid td.bad { background: #ffd7d2 !important; color: #b3261e; font-weight: 650; }
.gs-grid td.warn { box-shadow: inset 0 0 0 2px #ff8d28; background: #fff4e8; }
.gs-grid td.sel { box-shadow: inset 0 0 0 2px #0a84ff; }
.gs-grid td.err { color: #c4271c; font-weight: 700; }
.gs-grid .ddv { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; background: #e8f1ff; color: #0058c7; font-size: 15px; font-weight: 550; }
.gs-grid .ddv::after { content: "▾"; font-size: 12px; opacity: 0.8; }
.gs-grid .ddv.empty { background: #f2f2f5; color: #8e8e93; }
.gs-tabs { flex: none; height: 38px; display: flex; align-items: stretch; gap: 2px; padding: 0 10px; background: #f5f5f7; border-top: 1px solid #e3e3e8; }
.gs-tabs span { display: flex; align-items: center; padding: 0 16px; font-size: 14px; font-weight: 550; color: #55555a; }
.gs-tabs span.on { background: #fff; color: #0b57d0; box-shadow: inset 0 3px 0 #0b57d0; font-weight: 650; }
/* 드롭다운 목록 · 오류 말풍선 */
.gs-pop { position: absolute; z-index: 6; min-width: 150px; padding: 6px; border-radius: 10px; background: #fff; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.08); font-size: 15px; opacity: 0; }
.gs-pop span { display: block; height: 32px; line-height: 32px; padding: 0 10px; border-radius: 6px; }
.gs-pop span.on { background: #e8f1ff; color: #0058c7; font-weight: 600; }
.gs-tip { position: absolute; z-index: 6; max-width: 300px; padding: 10px 12px; border-radius: 10px; background: #fff; color: #1d1d1f; font-size: 15px; line-height: 1.5; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18), inset 0 3px 0 #c4271c; opacity: 0; }
.gs-tip b { display: block; color: #c4271c; }
/* 요약 숫자 · 차트 */
.gs-kpis { display: flex; gap: 10px; padding: 12px 12px 6px; }
.gs-kpi { flex: 1; min-width: 0; padding: 8px 12px; border-radius: 10px; border: 1px solid #e3e3e8; background: #fbfbfd; }
.gs-kpi small { display: block; font-size: 14px; color: #6e6e73; }
.gs-kpi b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.gs-kpi.hot b { color: #c25e00; }
.gs-kpi.money { background: #f2fbf5; border-color: #c9ecd4; }
.gs-sum { display: flex; gap: 12px; padding: 6px 12px 0; }
.gs-sum .gs-grid-in table { font-size: 15px; }
.gs-chart { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 6px 4px 0; }
.gs-chart small { font-size: 14px; color: #6e6e73; margin-bottom: 6px; }
.gs-bars { flex: none; display: flex; align-items: flex-end; gap: 5px; height: 126px; border-bottom: 1px solid #d1d1d6; }
.gs-bars i { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; height: 100%; }
.gs-bars i b { display: block; border-radius: 3px 3px 0 0; background: #0a84ff; transform-origin: bottom; }
.gs-bars i b + b { background: #8e5cf6; }
.gs-bars i.bad b { background: #ff3b30; }
.gs-legend { display: flex; gap: 14px; margin-top: 6px; font-size: 14px; color: #55555a; }
.gs-legend em { font-style: normal; display: inline-flex; align-items: center; gap: 6px; }
.gs-legend em::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.gs-paste { position: absolute; inset: 0; pointer-events: none; background: rgba(10, 132, 255, 0.1); box-shadow: inset 0 0 0 2px #0a84ff; opacity: 0; }
.gs-doc { padding: 14px 18px; font-size: 16px; line-height: 1.65; }
/* AI 창(도구와 상관없는 모양) */
.aip { position: absolute; top: 0; right: 0; bottom: 0; width: 400px; display: flex; flex-direction: column; background: #f7f7f9; border-left: 1px solid #e3e3e8; font-family: var(--font); color: #1d1d1f; }
.aip-h { flex: none; height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 14px; font-size: 15px; font-weight: 650; border-bottom: 1px solid #e6e6ea; }
.aip-h svg.i { width: 17px; height: 17px; color: #0a84ff; }
.aip-b { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 12px; overflow: hidden; }
.aip .me { align-self: flex-end; max-width: 94%; padding: 10px 12px; border-radius: 14px 14px 4px 14px; background: #0a6de0; color: #fff; font-size: 15px; line-height: 1.55; white-space: pre-wrap; word-break: keep-all; }
.aip .ai { align-self: flex-start; max-width: 100%; font-size: 15px; line-height: 1.55; word-break: keep-all; }
.aip .ai .ok { color: #1f8a3c; font-weight: 700; margin-right: 4px; }
.aip .ai .dots { display: inline-flex; gap: 4px; }
.aip .ai .dots i { width: 6px; height: 6px; border-radius: 50%; background: #8e8e93; }
.aip-in { flex: none; height: 44px; margin: 0 12px 12px; display: flex; align-items: center; padding: 0 12px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #d9d9de; font-size: 15px; color: #8e8e93; }

.cover-win .gs-bars { height: 64px; flex: none; }
.cover-win .gs-sum { padding-top: 2px; }