/* ─────────────────────────────────────────────────────────────────────────────
   45-v2-side-swap.css — 곁칸이 절반을 넘으면 **메인으로 보는 칸이 가운데로 온다** (#1819 원준 2026-08-21)
   짝: web/v2/side-swap.ts.
   ⚠ 자리를 바꿀 때 **요소를 옮겨 붙이지 않는다** — 세션 화면은 iframe 이라 부모가 바뀌면 통째로 다시 로드된다.
      여기서 하는 일은 격자 칸 지정(grid-column)뿐이고, 미끄러짐은 transform 으로만 준다.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── 자리바꿈 — 곁칸이 왼쪽, 세션이 오른쪽 ── */
.pn-body.sw-left { grid-template-columns: var(--pn-side-fit) 6px minmax(0, 1fr); }
.pn-body.sw-left > .pn-col { grid-column: 3; grid-row: 1; }
.pn-body.sw-left > .v2-split-x { grid-column: 2; grid-row: 1; }
.pn-body.sw-left > .pn-pane[data-zone="side"] { grid-column: 1; grid-row: 1; border-left: 0; border-right: 1px solid var(--line); }
/* 접힌 곁칸을 펴는 손잡이도 그쪽 가장자리로 — 화살표가 가리키는 곳이 곧 열리는 곳이어야 한다. */
.pn-body.sw-left > .pn-side-reopen { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--line); }
.pn-body.sw-left > .pn-side-reopen svg { transform: none; }
/* 사이드바를 접으면 자리바꿈 상태여도 세션이 격자 전체를 쓴다(#3870).
   종전엔 sw-left 의 격자가 no-side 를 이겨, 세션이 오른쪽 열에 머물고 왼쪽에 사이드바 폭만큼 빈 자리가 남았다
   (2026-09-27 매니지드 실측: 세션 414px · 빈 자리 622px). */
.pn-body.sw-left.no-side { grid-template-columns: minmax(0, 1fr) 0 0; }
.pn-body.sw-left.no-side > .pn-col { grid-column: 1; }

/* ── 끄는 중 예고 — "지금 놓으면 이렇게 됩니다" ── */
.sw-hint {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 70;
  padding: 6px 12px; border-radius: 999px; background: var(--ink); color: var(--bg);
  font-size: 12px; font-weight: 700; white-space: nowrap; pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}
.sw-hint[hidden] { display: none; }

/* ── 문패 버튼 ── */
/* 문패의 옆 단추([＋ 세션]·[프로젝트 상세])와 **같은 높이 · 같은 테두리**로 선다(#4135, 원준 2026-09-27: «지혼자 사이즈가 옆이랑 달라서 어색하다»).
   종전엔 위아래 여백이 0 이라 글리프 높이만큼만 섰다(≈17px — 옆은 27px).
   · 높이: 그 줄에 맞춰 늘인다(align-self: stretch) — 옆 단추의 글자 크기·여백이 바뀌어도 따라간다.
   · 폭: 높이와 같게(정사각). 높이 = 한 줄(1lh) + 위아래 여백 10 + 테두리 2 이므로 폭도 같은 식으로 적는다.
     ⚠ aspect-ratio 로는 안 된다 — flex 줄에서 늘어난 높이는 폭을 정한 **뒤에** 나와서, 폭이 글리프 폭(15px)으로 남는다(실측). */
.sw-btn { align-self: stretch; box-sizing: border-box; width: 27px; width: calc(1lh + 12px); min-width: 0; padding: 0; justify-content: center; }
.pn-door-r .sw-btn { border-color: var(--line-net); }
.pn-door-r .sw-btn:hover { border-color: var(--blue); background: var(--bg-tint); }
.pn-door-r .sw-btn:hover .sw-btn-i { color: var(--blue); }
.sw-btn[hidden] { display: none; }
.sw-btn-i { font-size: 15px; line-height: 1; color: var(--muted-2); }
.sw-btn.on .sw-btn-i { color: var(--blue); }

/* ── 켜고 끄는 팝오버 ──
   ⚠ anchoredPopover 는 **위치만** 잡는다(.dash-pop = position:fixed·z-index). 배경·테두리·그림자는 패널이
   직접 가져야 한다 — 안 주면 글자가 본문 위에 투명하게 겹쳐 읽을 수 없다(원준 신고 2026-08-20, 42-v2-panes.css 와 같은 규약). */
.sw-pop { width: 300px; padding: 12px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(var(--shadow-ink), .16); }
.sw-pop-h b { font-size: 13.5px; color: var(--ink); }
.sw-pop-sub { margin: 4px 0 10px; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.sw-pop-opts { display: flex; flex-direction: column; gap: 4px; }
.sw-opt { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; background: none; font: inherit; cursor: pointer; }
.sw-opt:hover { background: var(--bg-punch); }
.sw-opt.on { border-color: var(--blue); background: var(--bg-punch); }
.sw-opt b { font-size: 12.5px; color: var(--ink); }
.sw-opt span { font-size: 11px; line-height: 1.45; color: var(--muted); }
.sw-pop-help { margin-top: 10px; font-size: 11.5px; }

/* ── 처음 자리가 바뀔 때의 안내 ──
   짧은 안내는 화면 한가운데에, 글 폭에 맞게. (기본 껍데기 .ov-back/.ov-box 는 긴 모달용이라 위쪽 정렬 + 760px 고정
   이다 — 그대로 쓰면 오른쪽이 텅 비고 위로 치우친다. 전역 규칙을 바꾸지 않고 이 안내에만 클래스를 얹는다.) */
.sw-intro-back { align-items: center; }
.sw-intro-box { max-width: 520px; }
.sw-intro { padding: 4px 2px 2px; }
.sw-intro-p { margin: 0 0 10px; font-size: 13px; line-height: 1.65; color: var(--ink); }
.sw-intro-p.muted { color: var(--muted); font-size: 12.5px; }
.sw-intro-p b { font-weight: 700; }
.sw-intro-again { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 14px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.sw-intro-cb { width: 14px; height: 14px; accent-color: var(--blue); cursor: pointer; }
.sw-intro-acts { display: flex; justify-content: flex-end; gap: 8px; }

/* 도해 — 말보다 그림이 빠르다(왼쪽=바뀌기 전, 오른쪽=바뀐 뒤). */
.sw-intro-fig { margin: 0 0 16px; }
.sw-fig { display: flex; align-items: center; justify-content: center; gap: 12px; }
.sw-fig-box { display: flex; gap: 3px; width: 168px; height: 76px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--gray-bg-2); }
.sw-fig-pane { display: flex; align-items: center; justify-content: center; border-radius: 5px; font-size: 11px; font-weight: 700; }
.sw-fig-pane.sess { flex: 1; background: var(--bg); border: 1px solid var(--line); color: var(--muted-2); }
.sw-fig-pane.side { flex: 1; background: var(--bg); border: 1px solid var(--line); color: var(--muted-2); }
.sw-fig-pane.big { flex: 2.2; border-color: var(--blue); color: var(--blue); background: var(--bg-punch); }
.sw-fig-arrow { font-size: 16px; color: var(--muted-3); }

/* 좁은 화면에선 곁칸 자체가 숨는다(42-v2-panes 의 규칙) — 자리바꿈도 함께 접는다. */
@media (max-width: 900px) {
  .pn-body.sw-left { grid-template-columns: minmax(0, 1fr) 0 0; }
  .sw-btn { display: none; }
  .sw-fig-box { width: 132px; height: 64px; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   세션 카드 (#3870 원준 2026-09-27). 짝: web/v2/side-card.ts · web/lib/side-card-geom.ts
   사이드바를 세션 쪽 끝까지 키우면 사이드바가 격자 전체를 차지하고, 세션 열(.pn-col)은 그 위에 놓인 카드가 된다.
   ⚠ 세션 화면은 iframe 이다. 요소를 옮겨 붙이지 않고 같은 요소의 자리와 크기만 바꾼다(위 자리바꿈과 같은 제약).
   ⚠ 좁은 폭(≤900px)에서는 사이드바가 서랍이라 카드가 없다. 규칙 전체를 넓은 폭 안에 둔다.
   ═════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
  /* ── 끄는 중: 세션 열은 최소 폭에 멈추고 사이드바가 그 위를 덮는다 ──
     --cm-over = 상한을 넘겨 끈 거리(px) · --cm-p = 그 거리의 비율(0~1). side-card.ts 가 프레임마다 적는다. */
  .pn-body.cm-over > .pn-pane[data-zone="side"] { position: relative; z-index: 5; margin-left: calc(-1 * var(--cm-over, 0px)); }
  .pn-body.cm-over.sw-left > .pn-pane[data-zone="side"] { margin-left: 0; margin-right: calc(-1 * var(--cm-over, 0px)); }
  .pn-body.cm-over > .v2-split-x { z-index: 6; transform: translateX(calc(-1 * var(--cm-over, 0px))); }
  .pn-body.cm-over.sw-left > .v2-split-x { transform: translateX(var(--cm-over, 0px)); }
  .pn-body.cm-over > .pn-col { opacity: calc(1 - .7 * var(--cm-p, 0)); filter: blur(calc(var(--cm-p, 0) * 4px)); transform: scale(calc(1 - .02 * var(--cm-p, 0))); pointer-events: none; }

  /* ── 카드 상태: 사이드바가 격자 전체, 세션 열은 그 위 ──
     ⚠ grid-column · grid-row 를 auto 로 되돌린다. 격자 안의 absolute 요소는 지정된 칸을 기준으로 놓이는데,
       자리바꿈(sw-left)이 세션 열에 3번 칸을 지정해 둔다. 그대로 두면 폭 0 인 칸이 기준이 된다. */
  .pn-body.cm { grid-template-columns: minmax(0, 1fr) 0 0; }
  .pn-body.cm > .pn-pane[data-zone="side"] { grid-column: 1 / -1; grid-row: 1; border-left: 0; border-right: 0; }
  .pn-body.cm > .v2-split-x { display: none; }
  /* 카드는 창 전체에서 움직인다(원준 2026-10-07 «곁칸 안쪽으로 너무 제한적») — position: fixed, 자리(--cm-r · --cm-b)는 창 가장자리에서
     센다. 조상(.v2-main overflow:hidden · .v2-tabpane overflow:auto)에 transform · filter · contain 이 없어 fixed 가 창을 기준으로 선다
     (매니지드 실측). ⚠ 조상에 그런 속성을 새로 걸면 카드가 다시 그 안에 갇힌다.
     z-index 55 = 레일 · 왼쪽 사이드바 위, 레일 메뉴(.v2-ws-menu 60 · .v2-wspop 70) · 팝오버(.dash-pop 80) · 모달 아래. */
  .pn-body.cm > .pn-col {
    position: fixed; z-index: 55; grid-column: auto; grid-row: auto;
    right: var(--cm-r, 24px); bottom: var(--cm-b, 24px); width: var(--cm-w, 320px); height: var(--cm-h, 240px);
    overflow: hidden; background: var(--bg);
    border: 1px solid var(--line-net); border-radius: 14px;
    box-shadow: 0 24px 64px rgba(var(--shadow-ink), .26), 0 2px 8px rgba(var(--shadow-ink), .10);
  }
  /* ── 비침(원준 2026-09-30) ──
     카드인 동안 안쪽(칸 · 세션 화면 · 터미널 액자 · 카드 단추)은 늘 투명하고 바탕은 카드 한 곳만 칠한다 — 그래야
     또렷 ↔ 비침이 카드 바탕색 하나로 바뀐다. 터미널 액자 안의 바탕은 terminal.ts 가 «glass» 를 받아 비운다(side-card.ts).
     또렷 = 마우스가 카드 위에 있다(:hover — 액자 위에서도 조상의 :hover 가 선다) · 사람이 카드를 골랐다(cm-live).
     ★ 바탕 16% · 흐림 7px(원준 2026-10-01 «투명화가 제대로 안 된다»). 첫 판(30% · 22px)은 뒤가 하얗게 뭉개져 사실상 흰
       카드로 보였다. 7px 은 뒤의 모양·색은 남기고 잔 글씨만 뭉갠다 — 겹쳐서 지저분해지는 것은 뒤의 잔 글씨이므로 그것만 지운다.
       글자 둘레에는 바탕색 테두리(halo)를 둘러 어두운 곳 위에서도 읽히게 한다(터미널 액자에 drop-shadow — 비울 때만).
     또렷해질 때는 바탕이 **바로** 찬다(전환 없음) — 흐림은 그 순간 풀리므로, 바탕이 천천히 차면 그 사이 날 글씨가 비친다(리뷰 지적).
     비칠 때는 천천히(0.35초) — 흐림이 먼저 걸리고 바탕이 빠진다. */
  .pn-body.cm > .pn-col { transition: box-shadow .2s ease, border-color .2s ease; }
  .pn-body.cm > .pn-col > .pn-pane,
  .pn-body.cm > .pn-col .sc-wrap,
  .pn-body.cm > .pn-col .sc-term-frame,
  .pn-body.cm > .pn-col .cm-ctl { background: transparent; }
  .pn-body.cm:not(.cm-live) > .pn-col:not(:hover) {
    background: color-mix(in srgb, var(--bg) 16%, transparent);
    -webkit-backdrop-filter: blur(7px) saturate(1.2);
    backdrop-filter: blur(7px) saturate(1.2);
    border-color: color-mix(in srgb, var(--line-net) 70%, transparent);
    box-shadow: 0 12px 32px rgba(var(--shadow-ink), .16), 0 1px 3px rgba(var(--shadow-ink), .06);
    transition: background-color .35s ease, box-shadow .35s ease, border-color .35s ease;
  }
  /* 머리줄(이름 · 연결 상태 · 단추)은 조금 더 칠한다 — 뒤에 밝은 타일이 오면 어두운 테마의 흐린 단추가 묻혔다(2026-10-01 실측). 본문(터미널)만 비친다. */
  .pn-body.cm:not(.cm-live) > .pn-col:not(:hover) .sc-head { border-bottom-color: color-mix(in srgb, var(--line) 55%, transparent); background: color-mix(in srgb, var(--bg) 55%, transparent); }
  .pn-body.cm:not(.cm-live) > .pn-col:not(:hover) .sc-term-frame {
    filter: drop-shadow(0 0 1px color-mix(in srgb, var(--bg) 95%, transparent)) drop-shadow(0 0 2px color-mix(in srgb, var(--bg) 80%, transparent));
  }
  .pn-body.cm:not(.cm-live) > .pn-col:not(:hover) .cm-ctl { border-left-color: color-mix(in srgb, var(--line) 55%, transparent); }

  /* 아래 칸(타임라인 등)은 카드에 넣지 않는다. 접힘 상태는 그대로 두고 보이기만 끈다. */
  .pn-body.cm > .pn-col > .pn-pane[data-zone="bottom"],
  .pn-body.cm > .pn-col > .v2-split-y { display: none; }

  /* ── 카드 머리줄 = 세션 머리줄. 끌어서 옮긴다 ──
     좁은 머리줄에는 상태 점 · 세션 이름 · 연결 상태 · 더 보기만 남긴다. 숨긴 것(참여자 · 모델 · 추론강도 · 자료 ·
     화면 복구)은 더 보기 창에 있다. 오른쪽 72px 은 카드 단추 둘(제자리로 · 접기)의 자리다. */
  .pn-body.cm > .pn-col .sc-head { cursor: grab; padding-right: 76px; }
  .pn-body.cm > .pn-col .sc-head .sc-faces,
  .pn-body.cm > .pn-col .sc-head .sc-run-top,
  .pn-body.cm > .pn-col .sc-head .sc-act-files,
  .pn-body.cm > .pn-col .sc-head .sc-pair-sep,
  .pn-body.cm > .pn-col .sc-head .sc-pair > .sc-act { display: none; }
  /*  작은 카드 · 알약은 세션 이름이 먼저다(2026-10-11 프리뷰 실측: 알약 260 에서 이름 칸이 0px, 카드 320 에서 «그 우리 ...»).
      카드에서는 태스크 번호 · 이름 바꾸기 연필(카드에서 이름은 ⋯ 메뉴로 바꾼다) · 정상일 때의 «연결됨» 을 뺀다 — 끊기면 그대로 보인다.
      알약은 ⋯ 도 뺀다(펴면 다시 있다). */
  .pn-body.cm > .pn-col .sc-head .sc-title-no,
  .pn-body.cm > .pn-col .sc-head .sc-title-btn > svg,
  .pn-body.cm > .pn-col .sc-head .sc-title-penbtn,
  .pn-body.cm.cm-fold > .pn-col .sc-head .sc-head-r > .sc-act { display: none; }
  /*  :has 는 따로 — 모르는 브라우저는 선택자 목록 전체를 버리므로 위 규칙과 섞지 않는다. */
  .pn-body.cm > .pn-col .sc-head .sc-pair:has(> .sc-termstat.ok) { display: none; }

  .cm-ctl { position: absolute; top: 9px; right: 8px; z-index: 3; display: inline-flex; align-items: center; gap: 2px; padding-left: 6px; border-left: 1px solid var(--line); background: var(--bg); }
  .cm-ctl[hidden] { display: none; }
  .cm-ic { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
  .cm-ic:hover { background: var(--bg-tint-2); color: var(--ink); }
  .cm-ic:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
  .cm-ic .pn-i.sm { width: 15px; height: 15px; }

  /* ── 접었을 때: 머리줄만 남는다 ── */
  .pn-body.cm.cm-fold > .pn-col { height: auto; max-height: var(--cm-h, 240px); }
  .pn-body.cm.cm-fold > .pn-col .sc-wrap > :not(.sc-head) { display: none; }
  .pn-body.cm.cm-fold > .pn-col .sc-head { border-bottom: 0; }

  /* ── 크기 조절 손잡이: 가장자리 넷 + 모서리 넷 ── */
  .cm-grip { position: absolute; z-index: 4; touch-action: none; }
  .cm-grip[hidden] { display: none; }
  .cm-grip-n { top: 0; left: 14px; right: 14px; height: 6px; cursor: ns-resize; }
  .cm-grip-s { bottom: 0; left: 14px; right: 14px; height: 6px; cursor: ns-resize; }
  .cm-grip-w { left: 0; top: 14px; bottom: 14px; width: 6px; cursor: ew-resize; }
  .cm-grip-e { right: 0; top: 14px; bottom: 14px; width: 6px; cursor: ew-resize; }
  .cm-grip-nw { top: 0; left: 0; width: 14px; height: 14px; cursor: nwse-resize; }
  .cm-grip-se { bottom: 0; right: 0; width: 14px; height: 14px; cursor: nwse-resize; }
  .cm-grip-ne { top: 0; right: 0; width: 14px; height: 14px; cursor: nesw-resize; }
  .cm-grip-sw { bottom: 0; left: 0; width: 14px; height: 14px; cursor: nesw-resize; }
  .cm-grip:hover { background: color-mix(in srgb, var(--blue) 22%, transparent); }
  .cm-grip:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: 14px 0 0 0; background: color-mix(in srgb, var(--blue) 22%, transparent); }

  /* 카드가 뷰어 아래 모서리의 배율 단추를 가린다(2026-09-27 실측). 배율 단추는 카드 **반대쪽** 아래에 둔다 —
     카드가 오른쪽에 있으면 왼쪽, 왼쪽에 있으면(세션 쪽 기본 자리, 2026-10-09) 제자리(오른쪽). side-card.ts 가 cm-card-left 를 건다. */
  .pn-body.cm:not(.cm-card-left) > .pn-pane[data-zone="side"] .pn-zoom { right: auto; left: 12px; }
}
/* 카드를 옮기거나 크기를 바꾸는 동안: 포인터가 액자(iframe)에 빠지지 않게, 글자가 선택되지 않게. */
body.cm-dragging, body.cm-dragging * { user-select: none; }
body.cm-dragging iframe { pointer-events: none; }
body.cm-dragging .sc-head { cursor: grabbing; }