/*  [내 작품] 작업대의 자리 — 갤러리 작업대(`gallery.css · .lab`)와 «같은 꼴»이다
 *  (2026-09-10 지시 「내 작품 << 에서도, 갤러리 탭과 비슷한 형태로 화면 레이아웃 배치를 하고, 메뉴들을 한 번에 보여줘 ·
 *   지금은 게임 클릭 후 다른 페이지로 넘어가야 하는데 번거로워」).
 *  판의 «얼굴»(테 · 머리줄 · 잡은 칸의 파란 테)은 `src/styles/pane.css` 한 벌이고 여기는 자리뿐이다.
 *  ⚠ 층(@layer) 밖이다 — globals.css 의 밑값을 이겨야 한다.
 *  자리 다섯 — [업로드] 가 없고 [알림] 이 «왼쪽 칸»이다
 *  (2026-09-10 지시 「내 작품에서는 업로드 패널이 안 뜨게」 ＋ 「상태가 넓게 좌측 차지하도록」 ＋ 「알림을 좌측에 붙여줘」):
 *    좌 [상태](행 2) ＋ [알림](행 4) · 중앙 [뷰포트](행 2) ＋ [내 작품](행 4) · 우 [상세 정보](행 2~4 · «세로 통째»).
 *  ⚠ 아래 한 줄은 «격자의 한 행»(행 4)이라 [알림] 과 [내 작품] 의 키가 하나다 — 미는 자는 가로 선 `sp-b`
 *    «하나»이고 그것이 왼쪽·가운데 칸을 함께 진다(행 3 · 열 1~4). 오른쪽 칸에는 가로 선이 없다([상세 정보] 가 통째다).
 *  ⚠ 왼쪽 세로 선(`sp-l`)과 오른쪽 세로 선(`sp-r`)은 «행 2~4»다 — 행 2 에만 두면 아래 절반에서 선을 못 잡는다.
 *    아래 한 줄의 세로 선(`sp-f` · `--fw`)과 오른쪽 칸의 가로 선(`sp-c`)은 걷혔다. */
main.con-body:has(.mylab) {
  padding: 0;
  overflow: hidden;
  display: flex;
}
.mylab {
  --wl: 300px;
  --wr: 360px;
  --hb: 296px;
  --hhead: 42px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: calc(100vh - 56px);
  display: grid;
  grid-template-columns: var(--wl) 5px minmax(0, 1fr) 5px var(--wr);
  grid-template-rows: auto minmax(0, 1fr) 5px var(--hb);
  gap: 0;
  padding: 8px;
  background: var(--bg);
  font-size: 14px;
  line-height: 1.5;
}
.mylab > .pane {
  margin: 1px;
}
.my-top {
  grid-area: 1 / 1 / 2 / 6;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 3px 8px;
}
.my-stat {
  grid-area: 2 / 1 / 3 / 2;
}
.mylab .sp-l {
  grid-area: 2 / 2 / 5 / 3;
}
.my-view {
  grid-area: 2 / 3 / 3 / 4;
}
.mylab .sp-r {
  grid-area: 2 / 4 / 5 / 5;
}
.my-detail {
  grid-area: 2 / 5 / 5 / 6;
}
.mylab .sp-b {
  grid-area: 3 / 1 / 4 / 4;
}
.my-notice {
  grid-area: 4 / 1 / 5 / 2;
}
.my-grid {
  grid-area: 4 / 3 / 5 / 4;
}

/* 잡아 끄는 선 — 갤러리의 그것 그대로 */
.mylab .split {
  margin: 0;
  background: transparent;
}
.mylab .split.v {
  cursor: col-resize;
}
.mylab .split.h {
  cursor: row-resize;
}
.mylab .split:hover,
.mylab .split.drag {
  background: var(--accent);
  opacity: 0.5;
}
.mylab.drag {
  cursor: grabbing;
  user-select: none;
}
.mylab.drag iframe {
  pointer-events: none;
}

/* ── 위: 검색 줄 ── */
.mylab .my-q {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 420px;
}
.mylab .my-stat-n {
  color: var(--dim2);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

/* ── 중앙: 뷰포트 — 갤러리의 `.lab-stage` 와 같은 자다(검은 무대 ＋ 가운데 프레임) ── */
.my-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: #060607;
  display: flex;
  align-items: center;
  justify-content: center;
}
.my-stage iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.my-stage .my-empty {
  color: var(--dim2);
  font-size: 13px;
}
.my-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: 12.5px;
}

/*  ── 우: 상세 정보 ＋ 관리 — 값 표는 갤러리의 그것과 같은 눈금이다.
 *  ★★★★★ **이 판은 «구르지 않고» 들어간다**(2026-09-10 지시 「내 작품의 상세 정보는 딱 들어가게 하자
 *    스크롤 안 내려도 되게」). 그 값을 지키는 자리 넷 = 실측 표가 «두 짝씩»(다섯 줄 → 세 줄) ·
 *    구획의 여백(`.my-sec`) · 관리 폼의 칸 사이(`.dlg-f`) · 설명 칸의 줄 수(창이 `rows={2}` 를 준다).
 *    실측 2026-09-10 — 든 키 807 → **697** ⇒ 1440×900(737)에서도 안 구른다.
 *  ⚠ 그래도 `overflow: auto` 를 «걷지 않는다» — 창을 더 줄이거나 잡아 끄는 선으로 좁히면 넘칠 수 있고,
 *    그때 `hidden` 이면 [저장] 단추가 손이 닿지 않는 자리로 사라진다.
 *  ⚠ 칸을 더 늘리는 날은 이 넷 가운데 하나를 함께 줄인다(안 그러면 다시 구른다).  */
.my-detail .pane-body {
  padding: 10px 12px 12px;
}
.my-d-h {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
  word-break: break-all;
}
.my-d-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 5px 0 8px;
}
.my-sec {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--dim2);
}
/*  ★ 두 짝이 한 줄에 선다 — 「갱신」의 날짜만 길어서 그 한 짝이 줄을 통째로 인다(`.w`).
    ⚠ 날짜를 좁은 칸에 넣으면 두 줄로 접혀 오히려 키가 는다(그래서 나눠 두었다).  */
.my-kv {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 52px minmax(0, 1fr);
  gap: 3px 8px;
  margin-top: 7px;
  font-size: 12.5px;
}
.my-kv > b.w {
  grid-column: 1;
}
.my-kv > span.w {
  grid-column: 2 / -1;
}
.my-kv > b {
  color: var(--dim2);
  font-weight: 600;
}
.my-kv > span {
  color: var(--ink);
  min-width: 0;
  overflow-wrap: anywhere;
}
.my-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
/*  관리 폼 — 판이 좁으므로 이름표가 칸 위로 간다([업로드] 판의 그 결). */
.my-form .dlg-f {
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  margin-top: 6px;
}
.my-form .dlg-f > label {
  flex: none;
  padding-top: 0;
  font-size: 12.5px;
}
.my-form .dlg-f > label:empty {
  display: none;
}
.my-form .dlg-f > .f {
  width: 100%;
}
.my-form textarea.input {
  resize: vertical;
}

/* ── 좌하: 알림 — 판 안이라 카드도 머리줄도 없다(`Notices bare`) ── */
.my-notice .pane-body {
  padding: 6px;
}
.notice-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px 8px;
}
.my-notice .notice {
  font-size: 12.5px;
  flex-wrap: wrap;
  gap: 2px 8px;
}
.my-notice .notice .when {
  font-size: 11px;
}
.my-none {
  padding: 14px 10px;
  color: var(--dim2);
  font-size: 12.5px;
}

/* ── 좌상: 상태 줄(갤러리 [레퍼런스] 의 그 나무) — 왼쪽 칸의 위 절반이다 ── */
.my-stat .pane-body {
  padding: 6px;
}
/*  ── [내 작품] 머리줄의 갈래 거르개 — 게임(보라) ↔ 씬(청록)(2026-09-10 지시 「내 작품 << 에서 게임인지
      갤러리씬인지 구분을 하는 UX」). 값도 꼴도 게임란 무대의 [인기]·[최신](`globals.css · .hall .seg`) 그것이고
      더한 것은 갈래의 «점»(카드의 왼쪽 띠와 같은 색)과 그 옆의 «셈»뿐이다.  */
.my-seg {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 9px;
}
.my-seg .t {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: none;
  color: var(--dim);
  font-size: 12.5px;
  line-height: 19px;
  cursor: pointer;
  white-space: nowrap;
}
.my-seg .t:hover {
  color: var(--ink);
}
.my-seg .t.on {
  background: #1a1a1e;
  border-color: var(--kc, var(--line2));
  color: var(--ink);
}
.my-seg .t i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  flex: none;
  background: var(--kc, var(--dim2));
}
.my-seg .t b {
  color: var(--dim2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.my-tw {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--dim);
  text-align: left;
  cursor: pointer;
  font-size: 13px;
}
.my-tw:hover {
  background: #1b1b20;
  color: var(--ink);
}
.my-tw.on {
  background: #1a1a1e;
  border-color: var(--line2);
  color: var(--ink);
}
.my-tw .dot {
  width: 8px;
  height: 8px;
  border-radius: 3px;
  flex: none;
  background: var(--dim2);
}
.my-tw .nm {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.my-tw .n {
  color: var(--dim2);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

/* ── 하: 내 작품 카드 — 갤러리 `.lab-card` 와 같은 눈금 ── */
.my-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px;
  padding: 10px;
}
/*  ★ 갈래를 «한눈에» — 왼쪽 색 띠 하나가 게임(보라)과 씬(청록)을 가른다(2026-09-10 지시).
    색은 창이 `--kc` 로 실어 준다(값의 정본은 `src/components/Badge.tsx · KIND_COLOR` 하나다 —
    이름표(`.tag accent|teal`)와 이 띠가 같은 색이어야 두 자리가 같은 말을 한다).
    갤러리 `.lab-card` 의 그 왼쪽 띠와 같은 자리이고, 거기서 붙박이 보라이던 것이 여기서는 갈래를 진다.  */
.my-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line2);
  border-left: 2px solid var(--kc, var(--line2));
  border-radius: 10px;
  overflow: hidden;
  background: #131316;
  cursor: pointer;
  text-align: left;
  padding: 0;
}
.my-card:hover {
  border-color: var(--dim2);
}
/*  ⚠ 고른 카드도 «왼쪽 띠는 갈래의 색»으로 남는다 — `border-color` 하나로 덮으면 그 한 장만 갈래를 잃는다.
    고른 것을 말하는 자는 안쪽의 파란 고리다.  */
.my-card.on {
  border-color: var(--blue);
  border-left-color: var(--kc, var(--blue));
  box-shadow: inset 0 0 0 1px var(--blue);
}
.my-card .shot {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #0d0d0f center/cover no-repeat;
  border-bottom: 1px solid var(--line);
}
.my-card .shot .st {
  position: absolute;
  left: 6px;
  top: 6px;
}
/*  갈래 칩 — 상태의 맞은편. 표지 위에 서므로 바탕을 깔고 색은 갈래의 것을 쓴다.  */
.my-card .shot .kd {
  position: absolute;
  right: 6px;
  top: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--kc) 45%, transparent);
  background: color-mix(in srgb, var(--kc) 16%, #0d0d0fcc);
  color: var(--kc);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 16px;
  white-space: nowrap;
}
.my-card .body {
  padding: 7px 9px 9px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.my-card .t2 {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.my-card .m {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--dim2);
}

@media (max-width: 980px) {
  main.con-body:has(.mylab) {
    overflow: auto;
  }
  .mylab {
    display: flex;
    flex-direction: column;
    height: auto;
    gap: 8px;
    padding: 10px;
  }
  .mylab .split {
    display: none;
  }
  .my-top {
    order: 0;
    flex-wrap: wrap;
  }
  .my-view {
    order: 1;
  }
  .my-view .my-stage {
    aspect-ratio: 16 / 9;
    flex: none;
  }
  .my-detail {
    order: 2;
  }
  .my-grid {
    order: 3;
  }
  .my-stat {
    order: 4;
  }
  .my-notice {
    order: 5;
    max-height: 320px;
  }
  /*  좁은 창에서는 격자를 접으므로 [알림] 도 한 줄로 눕는다 — 자리(왼쪽 칸)는 넓은 창의 것이다.  */
}