/* ==========================================================================
   PC 바탕화면 — co-work-sim 라이브(`public/css/app.css` · `theme.css`)에서
   **바탕화면 · 독 · 아이콘 · 창** 부분을 그대로 옮겨 왔다.

   지킨 것
     · 클래스·아이디 이름을 하나도 바꾸지 않았다 — `js/desk/desktop.js`(원본
       1,456줄) · `windows.js` · `appicon.js` 가 그 이름으로 DOM 을 만든다.
     · 치수·색·그림자·간격은 원본 숫자 그대로다. 기하의 정본은 아래 `#pc` 블록의
       `--dock-*` · `--dt-*` 한 곳이고, 나머지는 전부 그 파생이다.
   바꾼 것 (딱 두 가지)
     ① 원본은 `:root` 와 `body` 에 붙어 있었다. 우리 play.html 에는 자기 색·글꼴이
        이미 있어 그대로 두면 서로 덮는다 → **전부 `#pc` 안으로 범위를 좁혔다.**
        `.ctx-menu` 만 예외다 — windows.js 가 `document.body` 에 붙인다.
     ② 원본의 상단 메뉴바(`#topBar`, 28px)가 있던 자리를 우리 게임 상단 바(52px)가
        쓴다 → `#deskEnv` 를 `inset:52px 0 0 0` 로 내렸다. 그 안쪽 좌표
        (`#winLayer{inset:0 0 64px 0}` 등)는 원본 그대로다.
   빼 온 것 — 3분할 판(#panes)·강사 관제(#hostConsole)·발표/대시보드 전용 규칙.
   ========================================================================== */

/* ── 0. PC 화면 컨테이너 + 기하의 정본 ─────────────────────────────────── */
#pc{
  position:fixed; inset:0; z-index:12; display:none;
  /* app.css `:root` 의 디자인 토큰 */
  /* 38차 — 제품 팔레트(화이트·회색·남색)로 맞췄다. 창 신호등과 벽지는 맥 원본 그대로 둔다 */
  --navy:#1b2430; --blue:#1f4e8c; --blue-l:#e8eefa;
  --ink:#1b2430; --sub:#5b6675; --line:#dde3ec; --paper:#f5f6f8;
  --ok:#30d158; --warn:#ff9f0a; --bad:#ff453a;
  --mono:'SF Mono','Consolas',monospace;
  --accent:#1f4e8c; --radius:12px; --radius-sm:8px;
  --glass-light:rgba(255,255,255,.72);
  --shadow-win:0 12px 40px rgba(0,0,0,.18); --ease:cubic-bezier(.2,.8,.2,1);
  --hairline:rgba(0,0,0,.08);
  /* theme.css 의 3단 글자 토큰 — 원본 값 그대로(16 / 14.5 / 13.5) */
  --t-body:16px; --t-sm:14.5px; --t-xs:13.5px;
  --t-ink:#1b2430; --t-ink-2:#5b6675; --t-paper:#fff; --t-paper-2:#f5f6f8; --t-paper-3:#fafbfc;
  --t-accent:#1f4e8c; --t-bad:#b3261e; --t-line:rgba(0,0,0,.10);
  --t-r:10px; --t-r-x:20px;
  --t-sh-win:0 0 0 .5px rgba(0,0,0,.10), 0 20px 48px -16px rgba(0,0,0,.34);
  --t-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  /* ── 독·바탕화면 아이콘 기하의 정본 (app.css :root 원본) ────────────────
     알약 높이(--dock-h) = 4×2 + 40 + 테두리 2 = 50px
     화면 아래가 독에 내주는 높이 = 50 + 10 = 60px
     창이 비워 둘 높이 = 60 + 4 = 64px → `#winLayer{inset}` 의 64
     하나라도 바꾸면 #winLayer 의 64px 도 같이 고쳐야 한다(desktop.js 의
     checkDockGap() 이 어긋나면 콘솔에 경고한다). */
  --dock-icon:40px; --dock-pad:4px; --dock-padx:10px; --dock-bottom:10px; --dock-gap:4px;
  --dock-h:calc(var(--dock-pad)*2 + var(--dock-icon) + 2px);
  /* ── 바탕화면 아이콘 격자의 정본 ─────────────────────────────────────
     JS 는 숫자를 만들지 않는다 — 이 값들이 만든 실제 상자를 실측해서 쓴다. */
  --dt-w:92px;
  --dt-gap-x:12px; --dt-gap-y:2px;
  --dt-pad-t:5px; --dt-pad-b:2px;
  --dt-ic-gap:4px;
  --dt-nm-pad:2px;
  --dt-line:calc(var(--t-xs,13.5px)*1.45);
  --dt-nm-h:calc(var(--dt-line)*2 + var(--dt-nm-pad)*2);
  --dt-icon:calc(var(--dock-icon) * 1.2);
  --dt-h:calc(var(--dt-pad-t) + var(--dock-icon) * 1.2 + var(--dt-ic-gap)
              + var(--dt-nm-h) + var(--dt-pad-b));
  --dt-cell-w:calc(var(--dt-w) + var(--dt-gap-x));
  --dt-cell-h:calc(var(--dt-h) + var(--dt-gap-y));
  --dt-field-t:32px; --dt-field-x:20px;
  --dt-field-b:calc(var(--dock-h) + var(--dock-bottom) + var(--dock-gap));
  color:var(--ink);
  font:var(--t-sm)/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
}
#pc.on{display:block}
#pc *{box-sizing:border-box}

/* 바탕화면이 사는 상자. 원본은 메뉴바(28px) 아래 flex 칸이었고, 우리는 게임
   상단 바(52px) 아래다 — 안쪽 좌표는 전부 원본 그대로다.
   🔴 바닥색이 원본의 `#c9d6ee`(옅은 하늘색)가 아니라 **벽지의 평균색**이다.
      아이콘 이름은 흰 글자인데(맥 방식), 이 상자가 아이콘의 조상이라 대비 검사가
      「흰 글자 위 옅은 하늘」로 재서 1.46:1 로 떨어졌다 — 화면에 실제로 깔린 것은
      사진(호수)이고 그 평균은 짙은 파랑이다. 벽지가 아직 안 내려온 첫 프레임의
      색이기도 하므로 평균색이 두 경우 모두 맞는 답이다. 값은 `wallpaper.js` 의
      `WALLS.lake.avg` 와 같고, deskapp.js 가 벽지를 깐 뒤 실제 값으로 덮어쓴다. */
#pc #deskEnv{position:absolute;inset:52px 0 0 0;overflow:hidden;background:#035eab;
  display:flex;flex-direction:column}

/* ── 1. 벽지 ───────────────────────────────────────────────────────────
   사진은 `js/desk/wallpaper.js`(OC.wall)가 **인라인 style 로** 넣는다.
   아래 그라디언트는 그림을 못 받았을 때의 폴백이다 — 여기에 `.wp-*` 프리셋을
   두지 않는다(인라인이 클래스를 덮으므로 정본이 두 곳이 된다). */
#pc #wallpaper{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(58% 26% at 50% 60%, rgba(255,226,168,.90), rgba(255,193,120,.40) 42%, rgba(255,193,120,0) 74%),
    radial-gradient(80% 40% at 26% 22%, rgba(158,126,158,.30), rgba(158,126,158,0) 60%),
    radial-gradient(90% 34% at 80% 14%, rgba(126,98,134,.24), rgba(126,98,134,0) 55%),
    linear-gradient(180deg,
      #2f2c4a 0%, #3a3552 12%, #4a4260 24%,
      #6b5a72 34%, #7a5f6e 43%,
      #d9865c 48%, #e8a06a 52%, #f0b878 56%, #c96f4a 60%,
      #2e2a3e 61%, #26223a 66%,
      #8a8398 66.5%, #9a8a8e 72%, #5a5f7a 84%, #454a63 100%);
  background-size:cover;background-position:center;background-repeat:no-repeat}

/* ── 2. 바탕화면 아이콘 ─────────────────────────────────────────────────
   격자를 켜기 전(아이콘이 없을 때)의 모습. 학생 화면에서는 아래 `.dt-grid` 가
   덮어써서 칸 배치로 바뀐다. */
#pc #dtIcons{position:relative;z-index:3;display:flex;flex-wrap:wrap;align-content:flex-start;
  gap:var(--dt-gap-y) var(--dt-gap-x);padding:var(--dt-field-t) var(--dt-field-x) 8px}
/* theme.css §3-(3) — 이름 글자에 그림자. 명암비 계산에는 안 잡히지만 이게 없으면
   밝은 물 위에서 글자가 사라진다. */
#pc #dtIcons{color:#fff}
#pc #dtIcons, #pc #dtIcons *{
  text-shadow:0 1px 3px rgba(0,0,0,.9), 0 0 3px rgba(0,0,0,.75), 0 0 8px rgba(0,0,0,.45)}
#pc #dtIcons .is-active, #pc #dtIcons .on{background:rgba(0,102,204,.55);border-radius:var(--t-r)}

#pc .dt-icon{position:relative;width:var(--dt-w);padding:var(--dt-pad-t) 4px var(--dt-pad-b);
  border-radius:10px;text-align:center;cursor:pointer;
  color:#fff;font-size:var(--t-xs,13.5px);line-height:1.45;user-select:none;
  transition:background .15s var(--ease)}
/* 이름이 흰 글자라 hover 막이 진하면 글자가 사라진다 — 옅은 흰 막으로. */
#pc .dt-icon:hover{background:rgba(255,255,255,.18)}
#pc .dt-icon:focus-visible{outline:2px solid #fff;outline-offset:1px;background:rgba(255,255,255,.18)}
/* 그림 문자 폴백은 바탕이 없어 그림자가 두 겹 필요하다. */
#pc .dt-icon .ic{font-size:30px;display:block;margin-bottom:var(--dt-ic-gap);
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.45)) drop-shadow(0 2px 6px rgba(0,0,0,.26))}
/* 앱 타일(appicon.js 의 인라인 SVG). 크기는 --dock-icon 파생이다 —
   독 아이콘과 같은 치수라야 두 자리가 한 언어로 읽힌다. 숫자를 박지 마라.
   그림자는 위·아래 방향 겹만 남긴다(`0 0` 두 겹은 사방으로 퍼지는 테라
   타일에 윤곽선을 두른 것처럼 보인다 — 원본 8차·23차의 결론). */
#pc .dt-icon .ic.tile{
  filter:drop-shadow(0 -1px 1px rgba(60,60,67,.55))
         drop-shadow(0 -2px 4px rgba(60,60,67,.24))
         drop-shadow(0 1px 2px rgba(0,0,0,.20))
         drop-shadow(0 3px 6px rgba(0,0,0,.28))}
#pc .dt-icon .ic.tile svg,#pc .dt-icon .ic.tile img{display:block;margin:0 auto;
  width:calc(var(--dock-icon,40px) * 1.2);height:calc(var(--dock-icon,40px) * 1.2)}
/* 이름 — 맥 방식(흰 글자 + 겹 그림자). 검은 판은 화면에서 가장 어두운 덩어리라
   아이콘보다 먼저 눈에 걸려 걷어냈다(원본 2026-09-03). 대비는 그림자와
   선택·포커스·hover 때의 판이 만든다. */
#pc #dtIcons .dt-icon .nm{display:inline-block;padding:var(--dt-nm-pad) 6px;border-radius:6px;
  background:transparent;color:#fff;font-weight:600;letter-spacing:-.01em;
  text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 8px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.35);
  word-break:keep-all;overflow-wrap:anywhere}
#pc #dtIcons .dt-icon:hover .nm,#pc #dtIcons .dt-icon:focus-visible .nm,#pc #dtIcons .dt-icon.sel .nm{
  background:rgba(0,0,0,.54);text-shadow:0 1px 2px rgba(0,0,0,.55)}
#pc .dt-icon.file .ic{font-size:27px}

/* ── 2-1. 격자 모드 (desktop.js 의 setFiles 가 .dt-grid 를 켠다) ──────────
   밭이 바탕화면 전체를 덮으므로 밭 자체는 pointer-events:none 이다. 안 그러면
   뒤에 있는 것의 클릭을 통째로 삼킨다 — 누를 수 있는 것은 아이콘뿐이다.
   아래는 독이 쓰는 높이(--dt-field-b)만큼 비운다: 아이콘이 독 뒤로 숨지 않게
   막는 것이 그 한 줄이다. */
#pc #dtIcons.dt-grid{position:absolute;inset:0;padding:var(--dt-field-t) var(--dt-field-x) var(--dt-field-b);
  pointer-events:none;overflow:hidden}
#pc #dtIcons.dt-grid .dt-icon{position:absolute;left:0;top:0;margin:0;
  width:var(--dt-w);height:var(--dt-h);
  display:flex;flex-direction:column;align-items:center;overflow:hidden;
  pointer-events:auto;touch-action:none;
  transition:left .16s var(--ease),top .16s var(--ease),background .15s var(--ease)}
#pc #dtIcons.dt-grid .dt-icon .ic{flex:none;height:calc(var(--dock-icon) * 1.2);line-height:calc(var(--dock-icon) * 1.2)}
#pc #dtIcons.dt-grid .dt-icon .nm{flex:none;max-height:var(--dt-nm-h);overflow:hidden}
/* 코드가 자리를 정할 때(첫 배치·다시 그리기·창 크기 변화)는 미끄러지지 않는다. */
#pc #dtIcons.dt-noanim .dt-icon{transition:none}
#pc #dtIcons.dt-grid .dt-icon.dragging{transition:none;z-index:2;cursor:grabbing;
  background:rgba(255,255,255,.22);transform:scale(1.06);
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))}

/* ── 2-2. 휴지통 · 놓기 표시 (desktop.js 의 role:'trash') ────────────────
   테두리는 outline 이다 — border 로 주면 칸이 1px 씩 커져 격자가 어긋난다. */
#pc #dtIcons.dt-grid .dt-icon.dt-trash{cursor:pointer}
#pc .dt-icon .dt-badge{position:absolute;top:0;right:8px;min-width:18px;height:18px;
  padding:0 5px;box-sizing:border-box;border-radius:9px;
  background:#1b2430;color:#fff;font:700 11px/18px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  text-align:center;pointer-events:none;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.92),0 0 0 2.5px rgba(0,0,0,.5)}
#pc .dt-icon.dt-trash.full .ic{filter:drop-shadow(0 2px 5px rgba(0,0,0,.26)) brightness(1.06)}
#pc .dt-icon.drop-on{background:rgba(255,255,255,.28);
  outline:2px solid var(--ok,#28c840);outline-offset:1px;transform:scale(1.08)}
#pc .dt-icon.drop-no{background:rgba(255,255,255,.14);
  outline:2px solid var(--bad,#ff453a);outline-offset:1px;cursor:not-allowed}

/* ── 2-3. 제자리 이름 바꾸기 (desktop.js 의 startRename) ────────────────── */
#pc #dtIcons .dt-icon .nm.is-editable{cursor:text}
#pc #dtIcons .dt-icon .nm.is-editable:hover{text-decoration:underline;text-underline-offset:2px}
#pc #dtIcons .dt-icon .nm input.dt-rename{
  width:100%;box-sizing:border-box;
  font:inherit;font-size:inherit;line-height:inherit;
  color:#1b2430;background:#fff;
  border:1px solid rgba(0,0,0,.28);border-radius:5px;
  padding:1px 4px;margin:-2px 0;
  text-align:center;text-shadow:none}
#pc #dtIcons .dt-icon .nm input.dt-rename:focus{outline:2px solid #1f4e8c;outline-offset:0}
/* ── 아직 안 열린 앱 ────────────────────────────────────────────────────
   상단 바 자물쇠와 업무 노트 탭은 막고 있었는데 바탕화면 아이콘만 그냥 열렸다.
   그림만 흐리게 하고 **이름은 또렷하게 둔다** — 무엇이 잠겼는지는 읽혀야 한다. */
#pc .dt-icon.locked{cursor:default}
#pc .dt-icon.locked .ic{opacity:.38;filter:grayscale(1)}
/* 자물쇠는 `.ic` 가 아니라 아이콘 상자에 붙인다 — `.ic` 의 filter·opacity 는
   그 아래 가짜 요소까지 덮어서, 안에 두면 자물쇠도 같이 흐려진다. */
#pc .dt-icon.locked::after{content:'🔒';position:absolute;pointer-events:none;
  left:50%;margin-left:8px;top:calc(var(--dt-pad-t,5px) + 30px);
  font-size:17px;line-height:1;text-shadow:0 1px 3px rgba(0,0,0,.55)}

/* ── 3. 창 레이어 ──────────────────────────────────────────────────────
   아래 64px 은 독이 쓰는 높이(60) + 틈(4)이다. --dock-* 를 바꾸면 이 숫자도
   같이 고쳐야 한다(desktop.js 의 checkDockGap 이 어긋나면 경고한다). */
#pc #winLayer{position:absolute;inset:0 0 64px 0;z-index:20;pointer-events:none}
#pc #winLayer .win{pointer-events:auto}

/* ── 4. 창 (windows.js 가 만드는 구조) ─────────────────────────────────
   app.css 의 `.win` 위에 theme.css 가 모서리·그림자·타이틀바 색을 덧입힌다.
   두 파일의 최종 결과를 여기 한 벌로 합쳤다. */
#pc .win{position:absolute;background:var(--t-paper);border-radius:var(--t-r-x);box-shadow:var(--t-sh-win);
  display:flex;flex-direction:column;min-width:340px;min-height:180px;border:1px solid var(--hairline);
  overflow:hidden;animation:winAppear .18s var(--ease);transition:box-shadow .15s var(--ease)}
@keyframes winAppear{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}
/* 뒤에 있는 창은 물러나 보여야 한다 */
#pc .win:not(.is-active){box-shadow:0 0 0 .5px rgba(0,0,0,.08), 0 10px 28px -14px rgba(0,0,0,.20)}
#pc .win:not(.is-active) .win-tt{background:var(--t-paper-3)}
#pc .win:not(.is-active) .win-title{color:var(--t-ink-2)}
#pc .win:not(.is-active) .win-ctrls > *{background:#d9d9de !important}
/* 네 꼭지점 + 네 변으로 늘렸다 줄인다. 손잡이는 보이지 않는다 — 커서가 안내다.
   `resize:both` 를 되살리지 마라, 두 리사이즈가 겹쳐 서로 싸운다. */
#pc .win-rz{position:absolute;width:16px;height:16px;z-index:3}
#pc .win-rz.nw{left:-3px;top:-3px;cursor:nwse-resize}
#pc .win-rz.ne{right:-3px;top:-3px;cursor:nesw-resize}
#pc .win-rz.sw{left:-3px;bottom:-3px;cursor:nesw-resize}
#pc .win-rz.se{right:-3px;bottom:-3px;cursor:nwse-resize}
#pc .win-rz.n{left:12px;right:12px;top:-3px;width:auto;height:7px;cursor:ns-resize}
#pc .win-rz.s{left:12px;right:12px;bottom:-3px;width:auto;height:7px;cursor:ns-resize}
#pc .win-rz.w{top:12px;bottom:12px;left:-3px;height:auto;width:7px;cursor:ew-resize}
#pc .win-rz.e{top:12px;bottom:12px;right:-3px;height:auto;width:7px;cursor:ew-resize}
#pc .win.maxed .win-rz{display:none}
#pc .win-tt{position:relative;background:var(--t-paper-2);backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);color:var(--sub);padding:9px 12px;
  font-size:var(--t-sm,14.5px);font-weight:600;min-height:38px;
  display:flex;justify-content:flex-start;align-items:center;cursor:move;user-select:none;flex-shrink:0;
  border-bottom:.5px solid var(--t-line)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #pc .win-tt{background:rgba(246,246,248,.98)}
}
#pc .win-tt .win-title{position:absolute;left:0;right:0;text-align:center;pointer-events:none;
  color:var(--t-ink);font-size:var(--t-sm,14.5px);font-weight:650;letter-spacing:-.01em;padding:0 84px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pc .win-tt .win-ctrls{display:flex;gap:8px;align-items:center;z-index:1}
#pc .win-tt .win-x,#pc .win-tt .win-min,#pc .win-tt .win-max{border:0;color:transparent;border-radius:50%;
  width:12px;height:12px;font-size:9px;cursor:pointer;line-height:1;padding:0;
  display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12);
  transition:filter .12s var(--ease)}
#pc .win-tt .win-x{background:#ff5f57}
#pc .win-tt .win-min{background:#febc2e}
#pc .win-tt .win-max{background:#28c840}
#pc .win-ctrls:hover .win-x{background:#ff453a}
#pc .win-ctrls:hover .win-min{background:#ffb01f}
#pc .win-ctrls:hover .win-max{background:#1db954}
/* 기호(✕ − ⤢)는 아예 보이지 않는다 — 맥의 확대 기호는 글자로 흉내가 안 난다.
   글자 자체는 지우지 않는다(화면낭독기가 읽을 이름이 사라진다). */
#pc .win-tt .win-x,#pc .win-tt .win-min,#pc .win-tt .win-max,
#pc .win-tt:hover .win-x,#pc .win-tt:hover .win-min,#pc .win-tt:hover .win-max,
#pc .win-ctrls:hover .win-x,#pc .win-ctrls:hover .win-min,#pc .win-ctrls:hover .win-max{color:transparent}
#pc .win-tt .win-x:hover,#pc .win-tt .win-min:hover,#pc .win-tt .win-max:hover{filter:brightness(.92)}
#pc .win.maxed{border-radius:0;resize:none}
#pc .win.maxed .win-tt{border-radius:0}
#pc .win.maxed::after{display:none}
#pc .win-bd{flex:1;overflow:auto;min-height:0;display:flex;flex-direction:column;
  background:var(--t-paper);color:var(--t-ink)}
#pc .win-bd > *{flex:1;min-height:0}
#pc #snapPreview{position:absolute;z-index:99998;background:rgba(31,78,140,.18);border:2px solid var(--accent);
  border-radius:var(--radius);pointer-events:none;display:none}

/* ── 5. 우클릭 메뉴 ────────────────────────────────────────────────────
   🔴 여기만 `#pc` 밖이다 — windows.js 의 showCtxMenu 가 document.body 에 붙인다.
      강조색은 --t-accent(#1f4e8c) 다: #0a84ff 위의 흰 글자는 3.67:1 로 AA 미달이고
      제품 남색 #1f4e8c 위에서는 8.31:1 이다. */
.ctx-menu{position:fixed;z-index:99999;background:rgba(255,255,255,.92);backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(0,0,0,.08);border-radius:10px;
  box-shadow:0 12px 40px rgba(0,0,0,.18);padding:5px;min-width:160px;
  font:14.5px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',"Apple SD Gothic Neo","Noto Sans KR",sans-serif}
.ctx-menu button{display:block;width:100%;text-align:left;background:none;border:none;padding:8px 12px;
  border-radius:6px;cursor:pointer;font-family:inherit;font-size:14.5px;color:#1b2430}
.ctx-menu button:hover{background:#1f4e8c;color:#fff}
.ctx-menu button.danger:hover{background:#b3261e;color:#fff}
.ctx-menu .sep{height:1px;background:#dde3ec;margin:4px 6px}

/* ── 6. 독 (macOS Dock — 떠 있는 알약, 유리, 확대) ──────────────────────
   알약 알파 .58 인 이유: 독 위의 잉크(시계·점·구분선)가 어두운 벽지에서도
   묻지 않아야 한다. .58 이면 벽지가 순흑이어도 합성색이 rgb(148,148,148) 이라
   잉크(#1b2430)와 5.6:1 — 벽지가 무엇이든 AA 위다. */
#pc #taskbar{position:absolute;left:50%;transform:translateX(-50%);width:auto;max-width:calc(100% - 24px);
  bottom:var(--dock-bottom);height:auto;z-index:40;display:flex;align-items:flex-end;gap:6px;
  background:rgba(255,255,255,.58);backdrop-filter:blur(30px) saturate(200%);
  -webkit-backdrop-filter:blur(30px) saturate(200%);border:1px solid rgba(255,255,255,.5);
  border-radius:calc(var(--dock-h)*.36);
  box-shadow:0 14px 38px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.55);
  padding:var(--dock-pad) var(--dock-padx)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #pc #taskbar{background:rgba(245,245,247,.96)}
}
/* 아이콘 사이 간격도 --dock-icon 파생(10%)이다. */
#pc #dockApps{display:flex;align-items:flex-end;gap:calc(var(--dock-icon,40px)*.1)}
#pc .dock-app{position:relative;border:none;line-height:1;
  width:var(--dock-icon,40px);height:var(--dock-icon,40px);padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:calc(var(--dock-icon,40px)*.8);cursor:pointer;transform-origin:bottom center;
  background:none;
  transition:transform .16s var(--ease);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.22)) drop-shadow(0 1px 1px rgba(0,0,0,.08))}
/* 확대 폭: 올라가는 양 = 40×.07 + 2 = 4.8px ≤ 알약 위 여유 5px.
   배율을 키우려면 translateY 를 같이 줄여라 — 안 그러면 유리판을 뚫는다. */
#pc .dock-app:hover{transform:translateY(-2px) scale(1.07)}
#pc .dock-app:active{transform:translateY(-1px) scale(1.03)}
#pc .dock-app.on::after,#pc .dock-app.running::after{content:'';position:absolute;left:50%;bottom:-3px;
  width:4px;height:4px;margin-left:-2px;border-radius:50%;background:rgba(0,0,0,.62)}
#pc .dock-sep{width:1px;height:calc(var(--dock-icon,40px)*.55);background:rgba(0,0,0,.09);
  margin:0 4px;align-self:center;flex-shrink:0}
/* 열린 창 — 아이콘만 두고 이름은 창 제목이 갖는다. */
#pc #tbWins{display:flex;align-items:flex-end;gap:calc(var(--dock-icon,40px)*.1);overflow:visible}
#pc #tbWins button{position:relative;border:none;line-height:1;
  width:var(--dock-icon,40px);height:var(--dock-icon,40px);padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:calc(var(--dock-icon,40px)*.8);cursor:pointer;transform-origin:bottom center;
  background:none;
  transition:transform .16s var(--ease);
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.20))}
#pc #tbWins button:hover{transform:translateY(-2px) scale(1.07)}
#pc #tbWins button:active{transform:translateY(-1px) scale(1.03)}
#pc #tbWins button::before{content:'';position:absolute;left:50%;bottom:-3px;
  width:4px;height:4px;margin-left:-2px;border-radius:50%;background:rgba(0,0,0,.62)}
#pc #tbWins button.on::before{background:var(--accent);width:4px;height:4px;margin-left:-2px}
#pc #tbWins button.min{opacity:.45}
/* 독·열린 창의 흰 타일은 밝은 유리 위에서 사라진다 — 얕은 접촉선을 준다.
   border-radius 를 주지 마라: 스퀘어클은 그림 자체의 path 다. */
#pc .dock-app .dock-img,#pc #tbWins button .dock-img{
  filter:drop-shadow(0 0 1px rgba(60,60,67,.55))
         drop-shadow(0 0 2px rgba(60,60,67,.26))}
#pc .dock-app svg,#pc #tbWins button svg{display:block}
#pc .tb-right{display:flex;align-items:center;gap:8px;align-self:center;margin-left:2px}
/* 시계 색의 정본은 theme.css 였다 — `--t-ink` 는 OS 다크모드에서도 뒤집히지 않는다.
   독 바닥이 늘 밝은 유리라 어두운 잉크가 답이다(실측 5.48~16.8:1). */
/* ESC 로 빠져나갈 수 있다는 것을 독 오른쪽에 작게 적어 둔다 */
/* 독은 벽지 위 반투명 유리다 — 보조색(#5b6675)은 여기서 2.9:1 로 떨어진다.
   시계와 같은 잉크를 쓰고 크기로만 낮춘다(#2f3a49 는 벽지 위 5.7:1). */
#pc .tb-esc{color:#2f3a49;font-size:11.5px;letter-spacing:.01em;white-space:nowrap}
@media (max-width:760px){ #pc .tb-esc{display:none} }
#pc #tbClock{color:var(--t-ink,#1b2430);font-family:var(--t-mono);font-size:var(--t-xs,13.5px);
  font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
#pc #pcOff,#pc #pcHome{background:rgba(0,0,0,.06);border:1px solid var(--hairline);color:var(--ink);
  border-radius:12px;padding:6px 12px;font-size:var(--t-xs,13.5px);cursor:pointer;
  font-family:inherit;transition:background .12s var(--ease)}
#pc #pcOff:hover{background:var(--t-bad);color:#fff}
/* 「홈으로」는 소개 페이지로 나가는 문이다 — 사무실로 돌아가는 것과 뜻이 달라
   색도 다르게 한다(강조 남색). 진행은 나가기 전에 저장한다. */
#pc #pcHome:hover{background:var(--t-accent);color:#fff;border-color:var(--t-accent)}
/* 독 배지(안 읽은 메일 수)는 desktop.js 가 인라인 style 로 그린다(.dock-badge) —
   `.dock-app::after` 가 실행 중 점에 이미 쓰이고 있어 CSS 로는 얹을 자리가 없다. */

/* ── 7. 보관함 ────────────────────────────────────────────────────────
   창 밖으로 나온 앱 화면이 사는 곳. 원본은 `display:none` 이지만 우리 엔진은
   패널의 상자를 재므로(스크롤·높이) 화면 밖으로 밀어만 둔다. */
#stash{position:fixed;left:-99999px;top:0;width:1000px;height:700px;overflow:hidden;
  opacity:0;pointer-events:none}

/* ── 8. 창 안으로 들어온 play.html 패널들 ──────────────────────────────
   엔진(js/play/*.js)이 아이디로 찾으므로 패널을 그대로 옮겨 담는다. 원본 게임의
   `#mailApp` 자리에 우리 메일함(#inbox + #card)이 앉는다. */
#pc .win-bd .panel{position:static;inset:auto;width:auto;height:100%;max-width:none;max-height:none;
  border:0;border-radius:0;box-shadow:none;background:#fff;backdrop-filter:none;
  display:flex;flex-direction:column;margin:0;transform:none!important}
#pc #mailApp{display:flex;flex-direction:row;height:100%;min-height:0;background:#fff}
#pc #mailApp #inbox{flex:0 0 268px;border-right:1px solid var(--line);min-width:0;height:auto}
#pc #mailApp #card{flex:1 1 auto;min-width:0;display:flex;top:auto;bottom:auto;left:auto;right:auto}
#pc #mailApp #card.min{height:auto}
#pc #card:not(.open){display:flex}
#pc #card:not(.open) .hd,#pc #card:not(.open) #cScroll{display:none}
#pc #card:not(.open)::before{content:'왼쪽에서 메일을 고르세요';display:block;margin:auto;
  color:var(--sub);font-size:var(--t-xs,13.5px)}
#pc #side{height:100%;display:flex}

/* ── 9. 모니터를 누르라는 안내 (우리 것) ───────────────────────────────── */
#pcHint{position:fixed;right:14px;top:60px;z-index:11;display:none;align-items:center;gap:8px;
  background:rgba(27,36,48,.92);color:#f2f5f9;border-radius:12px;padding:8px 12px;font-size:13px;
  box-shadow:0 6px 20px rgba(0,0,0,.25)}
#pcHint.on{display:flex}

/* ── 10. 좁은 화면 ────────────────────────────────────────────────────
   창 하나가 화면을 꽉 채우므로 메일함은 위아래로 접는다. 독은 그대로다 —
   아이콘 40px 은 누르기 하한 36px 위라 휴대폰에서도 눌린다. */
@media (max-width:760px){
  #pc #deskEnv{inset:52px 0 0 0}
  #pc .win{min-width:0}
  #pc #mailApp{flex-direction:column}
  #pc #mailApp #inbox{flex:0 0 40%;border-right:0;border-bottom:1px solid var(--line)}
  #pc #dtIcons.dt-grid{padding-left:12px;padding-right:12px}
}