/* ============================================================
   Disky Fun — Desktop Icons & Grid
   Win98-style icon grid with mobile support.
   ============================================================ */


/* ─── Desktop & icons layer ──────────────────────── */

/* .desktop 자체는 shell.css에서 정의 (position: absolute, 작업표시줄 자리 자동) */

.desktop-icons {
  --cell-size: 80px;
  --cell-padding: 12px;
  
  position: absolute;
  inset: 0;
  padding: var(--cell-padding);
  pointer-events: auto;
}


/* ─── Single icon ────────────────────────────────── */

.desktop-icon {
  --icon-col: 0;
  --icon-row: 0;
  
  position: absolute;
  left: calc(var(--cell-padding) + var(--icon-col) * var(--cell-size));
  top: calc(var(--cell-padding) + var(--icon-row) * var(--cell-size));
  width: var(--cell-size);
  height: var(--cell-size);
  
  padding: 4px 2px;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  
  user-select: none;
  cursor: default;
  
  transition: transform 0.1s ease-out;
}

/* Free-positioned (while dragging) */
.desktop-icon.is-free-positioned {
  left: var(--icon-drag-x, 0px);
  top: var(--icon-drag-y, 0px);
  transition: none;
  z-index: 10;
}

.desktop-icon.is-dragging {
  opacity: 0.7;
  z-index: 10;
}


/* Icon image (the SVG) */
.desktop-icon__image {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 40px;
  line-height: 1;
  overflow: hidden;
}

.desktop-icon__image svg {
  width: 48px;
  height: 48px;
}


/* Icon label */
.desktop-icon__label {
  font-family: var(--font-system);
  font-size: 11px;
  color: var(--c-white);
  text-align: center;
  line-height: 1.2;
  word-wrap: break-word;
  width: 100%;
  
  text-shadow: 
    1px 1px 0 #000,
    -1px 1px 0 #000,
    1px -1px 0 #000,
    -1px -1px 0 #000;
  
  padding: 1px 2px;
}


/* Selected state */
.desktop-icon.is-selected .desktop-icon__image {
  filter: hue-rotate(180deg) brightness(0.85);
}

.desktop-icon.is-selected .desktop-icon__label {
  background: var(--c-accent);
  color: var(--c-accent-text);
  outline: 1px dotted var(--c-white);
  outline-offset: -1px;
  text-shadow: none;
}


/* Focus state (keyboard) */
.desktop-icon:focus {
  outline: none;
}

.desktop-icon:focus .desktop-icon__label {
  outline: 1px dotted var(--c-white);
}


/* ─── Drag-box selection ───────────────────────── */

.desktop-drag-box {
  position: fixed;
  border: 1px dotted var(--c-white);
  background: rgba(255, 255, 255, 0.1);
  pointer-events: none;
  z-index: 1;
}


/* ─── Widget layer & widget shells ───────────────── */

.desktop-widgets-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;  /* empty area stays clickable for selection */
}

.desktop-widget {
  position: absolute;
  pointer-events: auto;
  background: var(--c-bg);
  border-top: 2px solid var(--c-white);
  border-left: 2px solid var(--c-white);
  border-right: 2px solid var(--c-black);
  border-bottom: 2px solid var(--c-black);
  overflow: hidden;
  font-family: var(--font-system);
  color: var(--c-content-text);
  user-select: none;
  cursor: default;
}

.desktop-widget__error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 8px;
  font-size: var(--fs-sm);
  color: var(--c-content-text);
  opacity: 0.6;
  text-align: center;
}


/* ─── Mobile: smaller cells, smaller icons ──────── */

@media (max-width: 640px) {
  .desktop-icons {
    --cell-size: 72px;
    --cell-padding: 8px;
  }
  
  .desktop-icon__image,
  .desktop-icon__image svg {
    width: 40px;
    height: 40px;
  }

  .desktop-icon__image {
    font-size: 32px;
  }

  .desktop-icon__label {
    font-size: 10px;
  }
}