/* 준환 OS 2004 — 내 프로젝트: explorer window and project detail windows (js/apps/projects.js). */

/* ---------- shared bits ---------- */
.pj-ico {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pj-ico--play, .pj-ico--star { fill: currentColor; stroke: none; }

.pj-cat, .pj-state, .pj-inspired, .pj-phone {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.6;
  white-space: nowrap;
}
.pj-cat--xr { background: #f0e9ff; color: #6b3fc4; }
.pj-cat--ai { background: #dcf5f1; color: #0b6e66; }
.pj-cat--web { background: #e2effc; color: #1a5ea8; }
.pj-cat--backend { background: #e8edf3; color: #34475e; }
.pj-cat--game { background: #ffe6ef; color: #b02a5c; }
.pj-cat--3d { background: #fff0e0; color: #a04508; }
.pj-cat--tool { background: #e7f6dc; color: #2f6b1f; }

.pj-state { border: 1px solid currentColor; background: #fff; }
.pj-state--shipped { color: #1d6e3e; background: #e2f5e8; border-color: #a9dcb9; }
.pj-state--mvp, .pj-state--prototype { color: #7a5200; background: #fff4cf; border-color: #ecd27a; }
.pj-state--in-progress { color: #1a5ea8; background: #e2effc; border-color: #a8cbef; }
.pj-state--in-progress::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: pj-pulse 1.6s ease-in-out 3; /* stops within 5 s */
}
@keyframes pj-pulse { 50% { opacity: 0.3; } }
.pj-live { box-shadow: 0 1px 0 rgba(120, 10, 10, 0.25); }

/* gold "featured" ribbon */
.pj-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px 2px 7px;
  border: 1px solid #c98a00;
  border-radius: var(--r-pill);
  background: var(--gloss), linear-gradient(180deg, #ffe27a, #ffbf1f);
  color: #5c3a00;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
  box-shadow: 0 2px 6px rgba(120, 70, 0, 0.3);
  white-space: nowrap;
}
.pj-ribbon-ico { width: 14px; height: 14px; fill: #d9530f; }

/* address bar (explorer and detail) */
.pj-addr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--c-line);
  background: linear-gradient(180deg, #f8fbfe, #e6eef6);
  font-size: 13px;
}
.pj-addr-label { flex: none; color: var(--c-ink-3); font-weight: 700; }
.pj-addr-field {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--c-line-2);
  border-radius: 6px;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(12, 34, 64, 0.12);
  white-space: nowrap;
  overflow: hidden;
}
.pj-addr-field img { flex: none; width: 18px; height: 18px; }
.pj-addr-path { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--c-ink); }
.pj-crumb {
  padding: 0 2px;
  border-radius: 3px;
  color: var(--c-blue-d);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pj-crumb:hover { background: var(--c-sel); }
.pj-crumb-here { font-weight: 700; }

/* ======================================================================
   Explorer
   ====================================================================== */
.pj-explorer {
  position: absolute;
  inset: 0;
  container: pjx / inline-size;
  background: var(--c-paper);
}
.pj-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
}
.pj-main {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  min-height: 0;
}

/* ---------- task pane ---------- */
.pj-pane {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 12px 10px 16px;
  overflow: auto;
  border-right: 1px solid #8fb6d8;
  background: linear-gradient(180deg, #c6e6fa 0%, #a8d6f3 100%);
}
.pj-box {
  flex: none;
  border-radius: var(--r-m);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--sh-1);
  overflow: hidden;
}
.pj-box-head {
  padding: 7px 12px;
  border-bottom: 1px solid #cfe2f2;
  background: linear-gradient(90deg, #ffffff, #d6ebfb);
  color: var(--c-navy);
  font-size: 13px;
  font-weight: 800;
}
.pj-box-body { padding: 8px; font-size: 13px; }

.pj-tasks { list-style: none; display: grid; gap: 2px; }
.pj-task {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 6px;
  border-radius: var(--r-s);
  color: var(--c-blue-d);
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
}
.pj-task img { flex: none; width: 20px; height: 20px; }
.pj-task:hover { background: #e7f3fd; text-decoration: underline; text-underline-offset: 2px; }

.pj-opts { display: grid; gap: 2px; }
.pj-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: var(--r-s);
  color: var(--c-ink-2);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
}
.pj-opt input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.pj-opt-dot {
  flex: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--c-line-2);
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(12, 34, 64, 0.12);
}
.pj-opt-label { flex: 1; min-width: 0; }
.pj-opt-n {
  flex: none;
  min-width: 24px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--c-panel-2);
  color: var(--c-ink-3);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}
.pj-opt:hover { background: #eef7fe; }
.pj-opt:has(input:checked) {
  background: linear-gradient(180deg, #e4f2fd, #cfe7fa);
  color: var(--c-navy);
  font-weight: 800;
  box-shadow: inset 0 0 0 1px #9cc7ea;
}
.pj-opt:has(input:checked) .pj-opt-dot {
  border-color: var(--c-blue-d);
  background: radial-gradient(circle, var(--c-blue) 0 36%, #fff 42%);
}
.pj-opt:has(input:checked) .pj-opt-n { background: #fff; color: var(--c-blue-d); }
.pj-opt:has(input:focus-visible) {
  outline: 3px solid var(--c-focus);
  outline-offset: 1px;
  box-shadow: 0 0 0 2px var(--c-focus-halo);
}

.pj-sum { display: grid; gap: 6px; padding: 10px 12px 12px; color: var(--c-ink-2); line-height: 1.5; }
.pj-sum-strong { color: var(--c-ink); font-weight: 800; }
.pj-sum-dim { color: var(--c-ink-3); font-size: 12px; }
.pj-sum-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.pj-sum-hint { padding-top: 6px; border-top: 1px dashed var(--c-line); }

/* ---------- folder view ---------- */
.pj-view {
  min-height: 0;
  padding: 16px 20px 24px;
  overflow: auto;
  overscroll-behavior: contain;
  background: #fff;
}
.pj-view:focus-visible { outline-offset: -3px; }
.pj-group + .pj-group { margin-top: 24px; }
.pj-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.pj-group-head h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--c-blue-d);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}
.pj-group-head::after {
  content: "";
  order: 1;
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #8cc0ea, rgba(140, 192, 234, 0));
}
.pj-group-link { order: 2; }
.pj-group-n {
  padding: 0 7px;
  border-radius: var(--r-pill);
  background: var(--c-panel-2);
  color: var(--c-ink-3);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.6;
}
.pj-group-star { width: 18px; height: 18px; fill: #f2a100; filter: drop-shadow(0 1px 0 #b36b00); }
.pj-group--star .pj-group-head h3 { color: #8a4b00; font-size: 15px; }
.pj-group--star .pj-group-head::after { background: linear-gradient(90deg, #ffc93d, rgba(255, 201, 61, 0)); height: 3px; }
.pj-group--star .pj-group-n { background: #fff1c2; color: #7a4a00; }
.pj-group-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--r-s);
  color: var(--c-blue-d);
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
}
.pj-group-link:hover { background: #e7f3fd; }
.pj-group-link .pj-ico { width: 15px; height: 15px; }

/* featured cards: the stars of the site */
.pj-stars {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr));
  gap: 16px;
}
.pj-star-item { display: flex; }
.pj-star {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 2px solid transparent;
  border-radius: 14px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(140deg, #ffe07a 0%, #ff9d42 38%, #ffd35c 64%, #f2a100 100%) border-box;
  text-align: left;
  box-shadow: 0 2px 0 rgba(168, 64, 11, 0.18), var(--sh-2);
  overflow: hidden;
  transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid);
}
.pj-star:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 0 4px rgba(255, 201, 61, 0.35), 0 2px 0 rgba(168, 64, 11, 0.18), var(--sh-3);
}
.pj-star:active { transform: translateY(-1px); }
.pj-star-shot {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: radial-gradient(circle at 30% 30%, #3b6fa8, #12335a);
  overflow: hidden;
}
.pj-star-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transition: transform 500ms var(--ease-out);
}
.pj-star-shot .pj-star-fallback {
  position: absolute;
  inset: 0;
  width: 72px;
  height: 72px;
  margin: auto;
  object-fit: contain;
}
.pj-star:hover .pj-star-shot img { transform: scale(1.045); }
.pj-star-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 30%),
    linear-gradient(0deg, rgba(8, 20, 40, 0.28) 0%, rgba(8, 20, 40, 0) 35%);
  pointer-events: none;
}
.pj-star-shot::before {
  /* light sweep on hover */
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: -70%;
  width: 45%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
  transform: skewX(-18deg);
  transition: left 700ms var(--ease-out);
  pointer-events: none;
}
.pj-star:hover .pj-star-shot::before { left: 130%; }
.pj-star .pj-ribbon { position: absolute; z-index: 2; left: 10px; top: 10px; }
.pj-star-live { position: absolute; z-index: 2; right: 10px; top: 11px; }
.pj-star-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px 14px;
  background: linear-gradient(180deg, #fffaf0 0%, #ffffff 60%);
}
.pj-star-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--c-ink);
}
.pj-star-line {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--c-ink-2);
  font-size: 13px;
  line-height: 1.55;
}
.pj-star-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 4px;
}
.pj-star-date { color: var(--c-ink-3); font-size: 12px; font-weight: 700; }

/* regular folders: tiles view */
.pj-tiles {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 236px), 1fr));
  gap: 4px 10px;
}
.pj-tile {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 66px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  text-align: left;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.pj-tile:hover {
  border-color: #b9d8f2;
  background: linear-gradient(180deg, #f4faff, #e4f1fd);
}
.pj-tile:active { background: var(--c-sel); }
.pj-tile-icon img { width: 44px; height: 44px; filter: var(--sh-icon); transition: transform var(--t-fast); }
.pj-tile:hover .pj-tile-icon img { transform: translateY(-2px); }
.pj-tile-text { display: grid; gap: 4px; min-width: 0; }
.pj-tile-name {
  color: var(--c-ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
}
.pj-tile-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.pj-tile-date { color: var(--c-ink-3); font-size: 12px; font-weight: 700; }
.pj-tile .pj-tile-sub .badge-live { font-size: 10.5px; }

.pj-empty {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 56px 16px;
  color: var(--c-ink-2);
  text-align: center;
}
.pj-empty img { width: 64px; height: 64px; opacity: 0.85; filter: grayscale(0.3) var(--sh-icon); }

/* ---------- status bar ---------- */
.pj-statusbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 12px;
  border-top: 1px solid var(--c-line);
  background: linear-gradient(180deg, #f3f7fb, #e3ebf3);
  color: var(--c-ink-2);
  font-size: 12px;
  font-weight: 700;
}
.pj-statusbar-right { color: var(--c-ink-3); text-align: right; }

/* ---------- narrow explorer (phones, small windows) ---------- */
@container pjx (max-width: 640px) {
  .pj-shell { display: block; height: 100%; overflow: auto; overscroll-behavior: contain; }
  .pj-addr { padding: 6px 8px; }
  .pj-main { display: block; }
  .pj-pane {
    gap: 8px;
    padding: 10px 0 10px;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid #8fb6d8;
  }
  .pj-box {
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
  }
  .pj-box-head {
    flex: none;
    width: 52px;
    padding: 0 0 0 12px;
    border: 0;
    background: none;
    font-size: 12px;
  }
  .pj-box--details { display: none; }
  .pj-box-body { flex: 1; min-width: 0; padding: 0; }
  .pj-tasks { display: flex; gap: 6px; padding-right: 12px; }
  .pj-tasks li { flex: 1; min-width: 0; }
  .pj-task {
    justify-content: center;
    min-height: 36px;
    border: 1px solid #8fb6d8;
    border-radius: var(--r-pill);
    background: var(--gloss), linear-gradient(180deg, #ffffff, #e2f0fb);
    font-size: 12.5px;
  }
  .pj-opts {
    display: flex;
    gap: 6px;
    padding: 2px 12px 2px 2px;
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    /* soft edges hint that the row scrolls sideways */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8px, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 8px, #000 calc(100% - 18px), transparent 100%);
  }
  .pj-opts::-webkit-scrollbar { display: none; }
  .pj-opt {
    flex: none;
    min-height: 36px;
    padding: 4px 10px;
    border: 1px solid #a9cbe8;
    border-radius: var(--r-pill);
    background: #fff;
    white-space: nowrap;
  }
  .pj-opt-dot { display: none; }
  .pj-opt:has(input:checked) {
    border-color: var(--c-blue-d);
    background: var(--gloss-soft), linear-gradient(180deg, #2275c4, #154f8f);
    color: #fff;
    box-shadow: none;
  }
  .pj-opt:has(input:checked) .pj-opt-n { background: rgba(255, 255, 255, 0.92); }
  .pj-view { padding: 14px 12px 20px; overflow: visible; }
  .pj-stars { gap: 12px; }
  .pj-star-name { font-size: 20px; }
  .pj-tiles { grid-template-columns: 1fr; gap: 2px; }
  .pj-tile { min-height: 60px; padding: 6px 8px; }
  .pj-statusbar { position: sticky; bottom: 0; z-index: 1; }
  .pj-statusbar-right { display: none; }
}

/* ======================================================================
   Detail window
   ====================================================================== */
.pj-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--c-paper);
  container: pjd / inline-size; /* covers the page and the screenshot viewer */
}
.pj-detail {
  height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
}
.pj-addr--detail { position: sticky; top: 0; z-index: 3; }
.pj-detail-in { padding-bottom: 28px; }

/* ---------- hero ---------- */
.pj-hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 26px 20px;
  border-bottom: 1px solid #e1ecf5;
  background: linear-gradient(180deg, #e3f2fe 0%, #f4faff 65%, #ffffff 100%);
  overflow: hidden;
}
.pj-detail.is-game .pj-hero { background: linear-gradient(180deg, #efe8ff 0%, #f8f5ff 65%, #ffffff 100%); }
.pj-detail.is-star .pj-hero {
  border-bottom-color: #f6dc8c;
  background:
    radial-gradient(120% 150% at 0% 0%, #fff0b8 0%, #fff8df 42%, #ffffff 82%);
}
.pj-detail.is-star .pj-hero::after {
  /* a big soft star in the corner */
  content: "";
  position: absolute;
  right: -34px;
  top: -40px;
  width: 210px;
  height: 210px;
  background: linear-gradient(160deg, #ffd34d, #ff9d42);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  opacity: 0.2;
  transform: rotate(12deg);
  pointer-events: none;
}
.pj-hero-icon { flex: none; padding-top: 4px; }
.pj-hero-icon img { width: 64px; height: 64px; filter: var(--sh-icon); }
.pj-hero-text { position: relative; z-index: 1; min-width: 0; }
.pj-ribbon--hero { margin-bottom: 8px; }
.pj-title {
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1;
}
.pj-one {
  max-width: 62ch;
  margin-top: 8px;
  color: var(--c-ink-2);
  font-size: 15px;
  line-height: 1.6;
}
.pj-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.pj-inspired { border: 1px dashed #d77aa0; border-radius: 10px; background: #fff0f6; color: #9c2557; white-space: normal; }
.pj-phone { background: #e0f4ff; color: #0d5a80; }
.pj-phone .pj-ico { width: 14px; height: 14px; }
.pj-phone-hint { margin-top: 8px; color: var(--c-ink-3); font-size: 13px; }

/* ---------- actions ---------- */
.pj-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 26px 0; }
.pj-act { min-height: 38px; padding: 6px 18px; font-size: 14px; }
.pj-act .pj-ico { width: 17px; height: 17px; }

/* ---------- meta ---------- */
.pj-meta {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 1.5fr);
  margin: 16px 26px 0;
  border: 1px solid var(--c-line);
  border-radius: var(--r-m);
  background: var(--c-panel);
  overflow: hidden;
}
.pj-meta-row { padding: 10px 14px; }
.pj-meta-row + .pj-meta-row { border-left: 1px solid var(--c-line); }
.pj-meta dt { color: var(--c-ink-3); font-size: 11.5px; font-weight: 800; letter-spacing: 0.02em; }
.pj-meta dd { margin: 2px 0 0; color: var(--c-ink); font-size: 13.5px; font-weight: 700; line-height: 1.45; }

/* ---------- sections ---------- */
.pj-sec { margin-top: 22px; padding: 0 26px; }
.pj-sec-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--c-blue-d);
  font-size: 13.5px;
  font-weight: 800;
}
.pj-sec-head::after {
  content: "";
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #8cc0ea, rgba(140, 192, 234, 0));
}
.pj-detail.is-star .pj-sec-head { color: #8a4b00; }
.pj-detail.is-star .pj-sec-head::after { background: linear-gradient(90deg, #ffc93d, rgba(255, 201, 61, 0)); }

.pj-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 22px;
  padding: 0 26px;
}
.pj-cols .pj-sec { padding: 0; }
.pj-cols > :only-child { grid-column: 1 / -1; }

.pj-built { list-style: none; display: grid; gap: 9px; }
.pj-built li {
  position: relative;
  padding-left: 20px;
  color: var(--c-ink);
  font-size: 14px;
  line-height: 1.6;
}
.pj-built li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: linear-gradient(135deg, var(--c-teal), var(--c-blue));
  transform: rotate(45deg);
}
.pj-detail.is-star .pj-built li::before { background: linear-gradient(135deg, #ffc93d, #f07b1a); }

.pj-nums { list-style: none; display: grid; gap: 8px; }
.pj-nums li {
  padding: 8px 12px;
  border: 1px solid #cfe3f4;
  border-left: 4px solid var(--c-blue);
  border-radius: 8px;
  background: linear-gradient(180deg, #f5faff, #e9f3fc);
  color: var(--c-ink-2);
  font-size: 13.5px;
  line-height: 1.5;
}
.pj-nums strong { color: var(--c-blue-d); font-size: 1.08em; font-weight: 800; }
.pj-detail.is-star .pj-nums li { border-color: #f3dd9c; border-left-color: #f2a100; background: linear-gradient(180deg, #fffbef, #fff3d6); }
.pj-detail.is-star .pj-nums strong { color: #9a4a00; }

/* honest caveat, styled like the desktop sticky note */
.pj-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 22px 26px 0;
  padding: 11px 14px;
  border: 1px solid #ead47a;
  border-radius: 4px 4px 14px 4px;
  background: linear-gradient(180deg, #fff9cf, #fff3b0);
  color: #4a3a00;
  font-size: 13.5px;
  line-height: 1.6;
  box-shadow: 0 2px 0 rgba(160, 130, 0, 0.12);
}
.pj-note-ico { flex: none; width: 20px; height: 20px; margin-top: 1px; stroke: #8a6a00; }
.pj-note-label { color: #6b4e00; font-weight: 800; }

.pj-stack { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.pj-stack li {
  padding: 3px 9px;
  border: 1px solid var(--c-line);
  border-radius: 6px;
  background: var(--gloss), linear-gradient(180deg, #ffffff, #edf3f9);
  color: var(--c-ink-2);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
}

.pj-links { list-style: none; display: grid; gap: 6px; }
.pj-link {
  display: flex;
  align-items: center;
  gap: 4px 12px;
  flex-wrap: wrap;
  padding: 9px 12px;
  border: 1px solid var(--c-line);
  border-radius: 9px;
  background: #fff;
  color: var(--c-ink);
  text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.pj-link:hover { border-color: #9cc7ea; background: #f2f8fe; }
.pj-link-label { font-size: 14px; font-weight: 800; color: var(--c-blue-d); }
.pj-link-url {
  flex: 1;
  min-width: 0;
  color: var(--c-ink-3);
  font-family: var(--font-mono);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.pj-link .pj-ico { color: var(--c-ink-3); }

/* ---------- gallery ---------- */
/* a compact film strip: three across, one or two shots get more room */
.pj-gallery {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}
.pj-gallery li { display: flex; grid-column: span 2; min-width: 0; }
.pj-gallery--1 li, .pj-gallery--2 li { grid-column: span 3; }
.pj-shot {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-m);
  background: #0f1b2e;
  overflow: hidden;
  box-shadow: var(--sh-1);
}
.pj-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transition: transform 400ms var(--ease-out);
}
.pj-shot:hover img { transform: scale(1.03); }
.pj-shot-zoom {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--c-navy);
  box-shadow: var(--sh-1);
  opacity: 0;
  transition: opacity var(--t-fast);
}
.pj-shot-zoom .pj-ico { width: 18px; height: 18px; }
.pj-shot:hover .pj-shot-zoom, .pj-shot:focus-visible .pj-shot-zoom { opacity: 1; }

/* ---------- screenshot viewer (inside the window) ---------- */
.pj-lightbox {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 52px 68px 20px;
  background: rgba(8, 17, 31, 0.92);
  animation: pj-fade 160ms ease-out;
}
@keyframes pj-fade { from { opacity: 0; } }
.pj-lb-fig {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.pj-lb-img {
  flex: 0 1 auto;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  object-fit: contain;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.pj-lb-cap {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.pj-lb-count {
  padding: 1px 9px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.16);
  font-family: var(--font-mono);
  font-size: 12px;
}
.pj-lb-btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid #7f9fbf;
  border-radius: 50%;
  background: var(--gloss), linear-gradient(180deg, #ffffff, #d5e5f3);
  color: var(--c-navy);
  box-shadow: var(--sh-2);
}
.pj-lb-btn .pj-ico { width: 22px; height: 22px; stroke-width: 2.4; }
.pj-lb-btn:hover { filter: brightness(1.05) saturate(1.2); }
.pj-lb-prev { left: 12px; top: calc(50% - 22px); }
.pj-lb-next { right: 12px; top: calc(50% - 22px); }
.pj-lb-close {
  right: 12px;
  top: 8px;
  width: 38px;
  height: 38px;
  border-color: #8e1a25;
  background: var(--gloss-soft), linear-gradient(180deg, #c42a38, #a11d29);
  color: #fff;
}

/* ---------- narrow detail (phones, small windows) ---------- */
@container pjd (max-width: 600px) {
  .pj-hero { gap: 12px; padding: 16px 16px 16px; }
  .pj-hero-icon img { width: 44px; height: 44px; }
  .pj-detail.is-star .pj-hero::after { width: 150px; height: 150px; right: -40px; top: -40px; }
  .pj-title { font-size: 25px; }
  .pj-one { font-size: 14.5px; }
  .pj-actions { padding: 14px 16px 0; }
  .pj-act { flex: 1 1 auto; }
  .pj-meta { grid-template-columns: 1fr; margin: 14px 16px 0; }
  .pj-meta-row + .pj-meta-row { border-left: 0; border-top: 1px solid var(--c-line); }
  .pj-meta-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; padding: 8px 12px; }
  .pj-meta dd { margin: 0; }
  .pj-sec { padding: 0 16px; margin-top: 20px; }
  .pj-cols { grid-template-columns: 1fr; gap: 0; padding: 0 16px; }
  .pj-cols .pj-sec + .pj-sec { margin-top: 20px; }
  .pj-note { margin: 20px 16px 0; }
  .pj-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pj-gallery li, .pj-gallery--2 li { grid-column: span 1; }
  .pj-gallery--1 li, .pj-gallery--3 li:first-child { grid-column: 1 / -1; }
  .pj-shot-zoom { opacity: 1; width: 28px; height: 28px; }
  .pj-lightbox { padding: 56px 8px 76px; }
  .pj-lb-prev, .pj-lb-next { top: auto; bottom: 14px; }
  .pj-lb-prev { left: calc(50% - 56px); }
  .pj-lb-next { right: calc(50% - 56px); }
  .pj-lb-cap { position: absolute; left: 16px; top: 18px; right: 64px; }
}
@container pjd (max-width: 440px) {
  .pj-hero-icon { display: none; }
}