/* ─────────────────────────────────────────────────────────────────────────────
   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; }
  .pn-body.cm > .pn-col {
    position: absolute; z-index: 60; grid-column: auto; grid-row: auto;
    right: var(--cm-r, 24px); bottom: var(--cm-b, 24px); width: var(--cm-w, 420px); height: var(--cm-h, 560px);
    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);
  }
  /* 아래 칸(타임라인 등)은 카드에 넣지 않는다. 접힘 상태는 그대로 두고 보이기만 끈다. */
  .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; }

  .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; }
  .cm-fold-b .pn-i { transform: rotate(90deg); }                       /* 펴져 있을 때: 아래를 가리킨다(접기) */
  .pn-body.cm-fold .cm-fold-b .pn-i { transform: rotate(-90deg); }     /* 접혀 있을 때: 위를 가리킨다(펴기) */

  /* ── 접었을 때: 머리줄만 남는다 ── */
  .pn-body.cm.cm-fold > .pn-col { height: auto; max-height: var(--cm-h, 560px); }
  .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 실측). 카드 상태에서는 배율 단추를 왼쪽 아래에 둔다. */
  .pn-body.cm > .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; }