/* =========================
   색상
========================= */

:root {
  --white: #ffffff;
  --paper: #f8fbfd;
  --pale-blue: #e9f4fb;
  --light-blue: #d4e8f5;
  --medium-blue: #a9c8df;
  --title-blue: #7fa9c8;
  --deep-blue: #587e9d;

  --silver-light: #f7f8f8;
  --silver: #d8dde0;
  --silver-dark: #9ba7ae;

  --text: #53636d;
  --muted-text: #7d8a91;

  --border-light: #ffffff;
  --border-dark: #8c9ba5;
}


/* =========================
   기본
========================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  padding: 26px 0 60px;

  color: var(--text);

  font-family:
    Tahoma,
    "MS Gothic",
    "Malgun Gothic",
    sans-serif;

  font-size: 12px;

  background-color: #e9f4fa;

  background-image:
    radial-gradient(
      circle at 18% 16%,
      rgba(255, 255, 255, 0.95),
      transparent 25%
    ),
    radial-gradient(
      circle at 80% 28%,
      rgba(214, 237, 250, 0.8),
      transparent 29%
    ),
    linear-gradient(
      135deg,
      #ffffff 0%,
      #eaf5fb 38%,
      #d9edf8 70%,
      #f8fcff 100%
    );

  background-attachment: fixed;
}


/* 아주 약한 오래된 화면 질감 */

body::before {
  content: "";

  position: fixed;
  z-index: 9998;

  inset: 0;

  pointer-events: none;

  opacity: 0.15;

  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 2px,
      rgba(75, 108, 130, 0.08) 3px
    );
}


/* 화면 가장자리 빛 */

body::after {
  content: "";

  position: fixed;
  z-index: 9997;

  inset: 0;

  pointer-events: none;

  box-shadow:
    inset 0 0 130px rgba(255, 255, 255, 0.82);
}


/* =========================
   오래된 브라우저 외곽
========================= */

.browser {
  position: relative;
  z-index: 2;

  width: 980px;
  margin: 0 auto;

  background: var(--silver);

  border-top: 2px solid var(--border-light);
  border-left: 2px solid var(--border-light);
  border-right: 2px solid var(--border-dark);
  border-bottom: 2px solid var(--border-dark);

  box-shadow:
    0 0 0 1px #748690,
    8px 12px 28px rgba(67, 102, 126, 0.2);
}


/* =========================
   브라우저 제목 표시줄
========================= */

.browser-titlebar {
  display: flex;
  justify-content: space-between;
  align-items: center;

  min-height: 27px;
  padding: 3px 4px 3px 7px;

  color: #ffffff;

  background:
    linear-gradient(
      to right,
      #648eb0,
      #9fc4dd,
      #d3e6f1
    );

  font-weight: bold;
  text-shadow: 1px 1px #5c7b91;
}

.browser-title {
  display: flex;
  align-items: center;
  gap: 6px;
}

.browser-icon {
  color: #ffffff;
  font-size: 15px;
}


/* 창 버튼 */

.browser-buttons,
.window-controls {
  display: flex;
  gap: 2px;
}

.browser-buttons button,
.window-controls button {
  width: 20px;
  height: 19px;
  padding: 0;

  color: #4e5c64;

  background:
    linear-gradient(
      to bottom,
      #ffffff,
      #d7dee2
    );

  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #76868f;
  border-bottom: 1px solid #76868f;

  font-family: Arial, sans-serif;
  font-size: 11px;
  line-height: 16px;
}


/* =========================
   브라우저 메뉴와 도구창
========================= */

.browser-menu {
  padding: 5px 9px;

  color: #47545c;
  background: #eef1f2;

  border-bottom: 1px solid #a8b2b8;
}

.browser-menu span {
  margin-right: 19px;
}

.toolbar {
  min-height: 36px;

  display: flex;
  align-items: center;
  gap: 5px;

  padding: 4px 7px;

  background:
    linear-gradient(
      to bottom,
      #f8fafb,
      #dce3e6
    );

  border-bottom: 1px solid #a7b1b7;
}

.toolbar button,
.go-button {
  min-width: 28px;
  height: 27px;

  color: #596973;

  background:
    linear-gradient(
      to bottom,
      #ffffff,
      #dce5e9
    );

  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #8c999f;
  border-bottom: 1px solid #8c999f;
}

.toolbar-divider {
  width: 1px;
  height: 25px;

  margin: 0 4px;

  background: #aab4b9;
  border-right: 1px solid #ffffff;
}

.toolbar-label {
  margin: 0 7px;

  color: #5d6c74;
}


/* 주소창 */

.address-row {
  display: flex;
  align-items: center;
  gap: 6px;

  padding: 4px 7px;

  background: #e9edef;

  border-bottom: 1px solid #8e9ca4;
}

.address-label {
  color: #56636b;
}

.address-box {
  flex: 1;

  min-height: 24px;

  display: flex;
  align-items: center;
  gap: 6px;

  padding: 3px 7px;

  color: #4f606a;
  background: #ffffff;

  border-top: 1px solid #7c8990;
  border-left: 1px solid #7c8990;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}

.address-icon {
  color: #88b6d2;
}


/* =========================
   바탕화면
========================= */

.desktop {
  position: relative;

  min-height: 900px;
  overflow: hidden;

  background-color: #edf8fd;

  background-image:
    radial-gradient(
      ellipse at 50% 5%,
      rgba(255, 255, 255, 0.97),
      transparent 39%
    ),
    radial-gradient(
      ellipse at 80% 38%,
      rgba(201, 230, 246, 0.68),
      transparent 35%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #eff8fd 25%,
      #dceef8 70%,
      #f8fcfe 100%
    );
}


/* 배경의 희미한 격자 */

.desktop::before {
  content: "";

  position: absolute;

  inset: 0;

  opacity: 0.16;

  background-image:
    linear-gradient(
      rgba(112, 156, 185, 0.18) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(112, 156, 185, 0.18) 1px,
      transparent 1px
    );

  background-size: 22px 22px;
}


/* 빛바랜 푸른색 막 */

.desktop::after {
  content: "";

  position: absolute;
  z-index: 1;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.1),
      rgba(153, 196, 222, 0.07)
    );
}


/* 데스크톱 타이틀 */

.desktop-title {
  position: absolute;
  z-index: 2;

  top: 38px;
  left: 170px;
}

.desktop-title h1 {
  margin: 0;

  color: rgba(94, 133, 159, 0.58);

  font-family:
    "Times New Roman",
    serif;

  font-size: 43px;
  font-weight: normal;
  letter-spacing: 9px;

  text-shadow:
    1px 1px #ffffff,
    0 0 13px rgba(125, 175, 206, 0.24);
}

.desktop-title p {
  margin: 4px 0 0;

  color: rgba(105, 136, 155, 0.55);

  font-family: Georgia, serif;
  font-size: 9px;
  letter-spacing: 4px;
}


/* 배경 장식 */

.desktop-decoration {
  position: absolute;
  z-index: 1;

  color: rgba(134, 174, 200, 0.2);

  font-family: Georgia, serif;

  pointer-events: none;
}

.decoration-wing {
  top: 18px;
  right: 40px;

  font-size: 135px;
}

.decoration-cross {
  bottom: 20px;
  left: 240px;

  font-size: 95px;
}


/* =========================
   데스크톱 아이콘
========================= */

.desktop-icons {
  position: absolute;
  z-index: 5;

  top: 40px;
  left: 22px;

  width: 92px;

  display: flex;
  flex-direction: column;
  gap: 23px;
}

.desktop-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;

  color: #4f6b7e;

  text-decoration: none;
  text-align: center;

  text-shadow:
    1px 1px #ffffff;
}

.icon-image {
  width: 48px;
  height: 43px;

  display: flex;
  justify-content: center;
  align-items: center;

  color: #668fa9;

  border-radius: 4px;

  box-shadow:
    1px 2px 3px rgba(78, 112, 134, 0.18);
}

.folder-icon {
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #cbe5f4
    );

  border: 1px solid #9dbdd1;
}

.picture-icon {
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #d7ebf7,
      #f4edf2
    );

  border: 1px solid #9ebdce;
}

.cd-icon {
  border: 1px solid #a7bcc8;
  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      #ffffff 0,
      #ffffff 7%,
      #98bad0 8%,
      #eaf5fa 24%,
      #bdd9e9 62%,
      #ffffff 100%
    );
}

.link-icon {
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #d5e9f4
    );

  border: 1px solid #9db9ca;
}

.desktop-icon:hover {
  color: #315d79;
}

.desktop-icon:hover .icon-image {
  filter: brightness(1.05);
}


/* =========================
   공통 윈도우
========================= */

.window {
  position: absolute;
  z-index: 4;

  background: #f8fbfc;

  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #84949d;
  border-bottom: 2px solid #84949d;

  box-shadow:
    4px 6px 12px rgba(72, 110, 136, 0.17);
}

.window-titlebar {
  min-height: 25px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 2px 3px 2px 7px;

  color: #ffffff;

  background:
    linear-gradient(
      to right,
      #78a7c6,
      #b7d5e8,
      #e7f2f8
    );

  font-weight: bold;
  text-shadow: 1px 1px #66869b;
}

.small-window-icon {
  margin-right: 4px;
}

.window-controls button {
  width: 18px;
  height: 17px;

  font-size: 9px;
}

.window-menu {
  padding: 4px 8px;

  color: #566771;
  background: #eff3f4;

  border-bottom: 1px solid #a8b2b8;
}

.window-content {
  padding: 16px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.98),
      rgba(239, 248, 252, 0.95)
    );
}

.window-content h2 {
  margin: 0 0 12px;

  color: #6488a0;

  font-family:
    "Times New Roman",
    serif;

  font-size: 18px;
  font-weight: normal;
  letter-spacing: 3px;
}

.window-status {
  padding: 3px 6px;

  color: #61717a;
  background: #e5ebee;

  border-top: 1px solid #aab5bb;

  font-size: 10px;
}


/* 창마다 다른 위치 */

.profile-window {
  top: 130px;
  left: 145px;

  width: 430px;
}

.update-window {
  top: 105px;
  right: 30px;

  width: 315px;
}

.music-window {
  top: 410px;
  left: 110px;

  width: 405px;
}

.gallery-window {
  top: 470px;
  right: 35px;

  width: 410px;
}

.links-window {
  top: 700px;
  left: 145px;

  width: 260px;
}


/* =========================
   프로필 창
========================= */

.profile-content {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 17px;
}

.profile-photo {
  height: 170px;

  padding: 4px;

  background: #dbeaf2;

  border-top: 1px solid #899aa4;
  border-left: 1px solid #899aa4;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}

.photo-placeholder {
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  color: #829baa;

  background:
    radial-gradient(
      circle,
      #ffffff,
      #e0eff7 64%,
      #cfdfE8
    );

  border: 1px dashed #9eb4c2;

  font-family: Georgia, serif;
  font-size: 9px;
  letter-spacing: 2px;
}

.profile-information dl {
  margin: 0 0 14px;
}

.profile-information dl div {
  display: grid;
  grid-template-columns: 72px 1fr;

  padding: 5px 0;

  border-bottom: 1px dotted #afc2cd;
}

.profile-information dt {
  color: #6c91aa;

  font-family: Georgia, serif;
  font-size: 9px;
  letter-spacing: 1px;
}

.profile-information dd {
  margin: 0;
}

.profile-information p {
  margin: 0;

  line-height: 1.7;
}


/* =========================
   업데이트
========================= */

.update-list {
  border-top: 1px dotted #a8bdca;
}

.update-list p {
  display: flex;

  margin: 0;
  padding: 7px 3px;

  border-bottom: 1px dotted #a8bdca;
}

.update-list time {
  width: 85px;

  color: #7896aa;

  font-family:
    "Courier New",
    monospace;

  font-size: 10px;
}


/* =========================
   음악
========================= */

.player {
  display: flex;
  gap: 16px;
  align-items: center;
}

.album-cover {
  width: 105px;
  height: 105px;
  flex-shrink: 0;

  display: flex;
  justify-content: center;
  align-items: center;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #d7ebf5
    );

  border: 1px solid #9db5c3;
}

.disc {
  width: 74px;
  height: 74px;

  display: flex;
  justify-content: center;
  align-items: center;

  color: #7798ac;

  border: 1px solid #9fb8c8;
  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      #ffffff 0,
      #ffffff 7%,
      #8eafc4 8%,
      #e9f4fa 26%,
      #bfd8e6 62%,
      #ffffff 100%
    );

  font-family: Georgia, serif;
  font-size: 8px;
}

.player-information {
  flex: 1;
  min-width: 0;
}

.player-information small {
  color: #7b9aae;

  letter-spacing: 2px;
}

.player-information h2 {
  margin: 5px 0 2px;

  letter-spacing: 1px;
}

.player-information p {
  margin: 0;

  color: #82919a;
}

audio {
  width: 100%;
  height: 31px;

  margin-top: 10px;

  opacity: 0.72;

  filter:
    grayscale(0.35)
    sepia(0.05)
    hue-rotate(155deg)
    saturate(0.75);
}

.track-list {
  margin-top: 14px;

  border-top: 1px dotted #aac0cd;
}

.track-list div {
  display: flex;
  align-items: center;

  padding: 5px 2px;

  border-bottom: 1px dotted #aac0cd;
}

.track-list span {
  width: 28px;

  color: #7f9bad;
}

.track-list p {
  margin: 0;
}

.track-list time {
  margin-left: auto;

  color: #8a9ca7;
  font-size: 10px;
}


/* =========================
   갤러리
========================= */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 11px;
}

.gallery-item {
  display: block;

  color: #5b7382;

  text-decoration: none;
  text-align: center;
}

.gallery-placeholder {
  height: 88px;

  display: flex;
  justify-content: center;
  align-items: center;

  color: #86a0af;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #dceef7,
      #eff7fb
    );

  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #9dafba;
  border-bottom: 1px solid #9dafba;

  font-family: Georgia, serif;
  font-size: 8px;
  letter-spacing: 1px;
}

.gallery-item span {
  display: block;

  margin-top: 4px;

  font-size: 9px;
}

.gallery-item:hover .gallery-placeholder {
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #cbe7f6
    );
}


/* =========================
   링크
========================= */

.link-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.link-list a {
  padding: 5px;

  color: #58778b;

  background:
    linear-gradient(
      to bottom,
      #ffffff,
      #dceaf1
    );

  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #91a4af;
  border-bottom: 1px solid #91a4af;

  text-decoration: none;
  text-align: center;
}

.link-list a:hover {
  color: #345f79;

  background:
    linear-gradient(
      to bottom,
      #ffffff,
      #cfe6f2
    );
}


/* =========================
   브라우저 아래 상태창
========================= */

.browser-status {
  display: flex;
  justify-content: space-between;

  padding: 4px 7px;

  color: #53636c;
  background: #e5eaec;

  border-top: 1px solid #8f9da5;
}


/* =========================
   작업 표시줄
========================= */

.taskbar {
  position: fixed;
  z-index: 9999;

  left: 0;
  right: 0;
  bottom: 0;

  height: 36px;

  display: flex;
  align-items: center;
  gap: 5px;

  padding: 4px;

  background:
    linear-gradient(
      to bottom,
      #f5f8f9,
      #cbd9df
    );

  border-top: 1px solid #ffffff;

  box-shadow:
    0 -1px 0 #80929c;
}

.start-button {
  height: 28px;

  padding: 0 14px;

  color: #425c6d;

  background:
    linear-gradient(
      to bottom,
      #ffffff,
      #d3e5ee
    );

  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #7f939e;
  border-bottom: 1px solid #7f939e;

  font-weight: bold;
}

.start-button span {
  color: #73a4c3;
}

.task-button {
  min-width: 190px;
  height: 27px;

  display: flex;
  align-items: center;

  padding: 0 9px;

  color: #4e6574;

  background: #dbe8ee;

  border-top: 1px solid #8497a1;
  border-left: 1px solid #8497a1;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}

.taskbar-space {
  flex: 1;
}

.taskbar-clock {
  min-width: 72px;
  height: 27px;

  display: flex;
  justify-content: center;
  align-items: center;

  color: #4d626e;
  background: #d7e4e9;

  border-top: 1px solid #8799a2;
  border-left: 1px solid #8799a2;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}


/* =========================
   실제 이미지
========================= */

.profile-photo img,
.gallery-item img,
.album-cover img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  filter:
    brightness(1.08)
    contrast(0.88)
    saturate(0.62)
    sepia(0.06);
}


/* =========================
   좁은 화면
========================= */

@media screen and (max-width: 1020px) {

  body {
    padding-left: 12px;
    padding-right: 12px;
  }

  .browser {
    width: 100%;
  }

  .desktop {
    min-height: auto;

    padding: 125px 18px 30px;
  }

  .desktop-title {
    top: 35px;
    left: 130px;
  }

  .desktop-icons {
    left: 18px;
  }

  .window {
    position: relative;

    top: auto;
    right: auto;
    bottom: auto;
    left: auto;

    width: auto;

    margin: 0 0 18px 100px;
  }
}

@media screen and (max-width: 650px) {

  body {
    padding-top: 10px;
  }

  .browser-menu,
  .toolbar-label,
  .toolbar-divider {
    display: none;
  }

  .desktop {
    padding: 100px 12px 22px;
  }

  .desktop-icons {
    position: relative;

    top: auto;
    left: auto;

    width: auto;

    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;

    margin-bottom: 18px;
  }

  .desktop-title {
    top: 24px;
    left: 22px;
  }

  .desktop-title h1 {
    font-size: 28px;
    letter-spacing: 5px;
  }

  .window {
    margin-left: 0;
  }

  .profile-content {
    grid-template-columns: 1fr;
  }

  .profile-photo {
    width: 150px;
  }

  .gallery-grid {
    grid-template-columns: 1fr 1fr;
  }

  .task-button {
    display: none;
  }
}

/* 음악 창 */
.music-window {
  width: 405px;
}

/* 상단 플레이어 영역 */
.player {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: center;
  gap: 16px;

  min-height: 200px;
}

/* 유튜브 영상 영역 */
.youtube-frame {
  width: 200px;
  height: 200px;

  padding: 3px;
  box-sizing: border-box;
  overflow: hidden;

  background: #e8f4f9;

  border-top: 1px solid #8297a3;
  border-left: 1px solid #8297a3;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}

.youtube-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 현재 재생 정보 */
.player-information {
  min-width: 0;
}

.player-information small {
  display: block;

  margin-bottom: 7px;

  color: #7892a2;
  font-size: 9px;
  letter-spacing: 2px;
}

.player-information h2 {
  margin: 0 0 4px;

  color: #52758a;
  font-size: 15px;
  font-weight: normal;
}

.player-information > p {
  margin: 0;

  color: #7d919d;
  font-size: 10px;
}

/* 재생 버튼 */
.playlist-controls {
  display: flex;
  gap: 3px;

  margin-top: 10px;
}

.playlist-controls button {
  width: 30px;
  min-width: 30px;
  height: 23px;

  padding: 0;

  color: #496a7d;

  background:
    linear-gradient(
      to bottom,
      #ffffff 0%,
      #edf6fa 45%,
      #cfe2ec 100%
    );

  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #879da9;
  border-bottom: 1px solid #879da9;

  font-family: Tahoma, "MS Gothic", sans-serif;
  font-size: 10px;
  line-height: 20px;

  cursor: pointer;
}

.playlist-controls button:active {
  background: #d5e5ed;

  border-top: 1px solid #879da9;
  border-left: 1px solid #879da9;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}

/* 곡 목록 */
.track-list {
  margin-top: 10px;

  border-top: 1px dotted #9eb5c2;
}

/* 기존 버튼 스타일 완전히 제거 */
.track-list .track {
  appearance: none;

  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;

  width: 100%;
  height: 29px;

  margin: 0;
  padding: 0 6px;

  color: #5e7887;
  background: transparent;

  border: 0;
  border-bottom: 1px dotted #b4c7d1;
  border-radius: 0;

  box-shadow: none;

  font-family: Tahoma, "MS Gothic", sans-serif;
  text-align: left;

  cursor: pointer;
}

.track-list .track span {
  color: #8ba1ad;
  font-size: 9px;
  text-align: center;
}

.track-list .track p {
  margin: 0;

  color: inherit;
  font-size: 10px;
}

.track-list .track time {
  color: #94a6af;
  font-size: 9px;
}

.track-list .track:hover {
  background: rgba(208, 232, 244, 0.45);
}

.track-list .track.active {
  color: #426d86;

  background:
    linear-gradient(
      to right,
      rgba(199, 228, 243, 0.8),
      rgba(245, 251, 254, 0.2)
    );
}

/* 작은 화면 */
@media (max-width: 600px) {
  .music-window {
    width: calc(100% - 20px);
  }

  .player {
    grid-template-columns: 1fr;
  }

  .youtube-frame {
    margin: 0 auto;
  }
}
/* 음악 재생 버튼을 기존 윈도우 UI와 통일 */
.playlist-controls button {
  appearance: none;

  width: 29px;
  min-width: 29px;
  height: 22px;

  margin: 0;
  padding: 0;

  color: #4f7185;

  background:
    linear-gradient(
      to bottom,
      #ffffff 0%,
      #edf6fa 45%,
      #c9dfe9 100%
    );

  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #849aa7;
  border-bottom: 1px solid #849aa7;

  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.7);

  font-family: "MS Gothic", Tahoma, sans-serif;
  font-size: 9px;
  font-weight: normal;
  line-height: 20px;

  text-align: center;
  cursor: pointer;
}

.playlist-controls button:hover {
  background:
    linear-gradient(
      to bottom,
      #ffffff,
      #dcecf4
    );
}

.playlist-controls button:active {
  padding-top: 1px;
  padding-left: 1px;

  background: #c9dce6;

  border-top: 1px solid #849aa7;
  border-left: 1px solid #849aa7;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;

  box-shadow: none;
}


/* 곡 목록 기본 버튼 느낌 제거 */
.track-list {
  display: block;

  margin-top: 12px;

  border-top: 1px dotted #a9bec9;
}

.track-list .track {
  appearance: none;

  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;

  width: 100%;
  height: 28px;

  margin: 0;
  padding: 0 7px;

  color: #597687;
  background: transparent;

  border: 0;
  border-bottom: 1px dotted #b4c7d1;
  border-radius: 0;

  box-shadow: none;

  font-family: Tahoma, "MS Gothic", sans-serif;
  font-weight: normal;
  text-align: left;

  cursor: pointer;
}

.track-list .track span {
  color: #88a0ad;

  font-size: 9px;
  text-align: center;
}

.track-list .track p {
  margin: 0;

  color: inherit;

  font-size: 10px;
  font-weight: normal;
}

.track-list .track time {
  color: #91a4ae;

  font-size: 9px;
  font-weight: normal;
}

.track-list .track:hover {
  background: rgba(209, 232, 243, 0.5);
}

.track-list .track.active {
  color: #416d85;

  background:
    linear-gradient(
      to right,
      rgba(194, 225, 240, 0.78),
      rgba(247, 252, 254, 0.15)
    );
}
/* 간단한 입장 화면 */
#site-gate {
  position: fixed;
  inset: 0;
  z-index: 99999;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    linear-gradient(
      rgba(224, 242, 251, 0.96),
      rgba(248, 252, 255, 0.98)
    );
}

#site-gate.hidden {
  display: none !important;
}

#enter-site {
  width: 145px;
  height: 42px;

  margin: 0;
  padding: 0;

  color: #52758a;

  background:
    linear-gradient(
      to bottom,
      #ffffff,
      #d4e8f1
    );

  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #8299a6;
  border-bottom: 1px solid #8299a6;

  box-shadow:
    1px 1px 0 rgba(255, 255, 255, 0.6);

  font-family:
    Tahoma,
    "MS Gothic",
    sans-serif;

  font-size: 11px;
  letter-spacing: 2px;

  cursor: pointer;
}

#enter-site:hover:not(:disabled) {
  background:
    linear-gradient(
      to bottom,
      #ffffff,
      #c4dfeb
    );
}

#enter-site:active:not(:disabled) {
  padding-top: 1px;
  padding-left: 1px;

  background: #cadde6;

  border-top: 1px solid #8299a6;
  border-left: 1px solid #8299a6;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}

#enter-site:disabled {
  opacity: 0.55;
  cursor: default;
}
/* 작고 가로로 정리한 음악 플레이어 */
/* 음악창 최종 수정본 */
.music-window {
  position: absolute !important;
  width: 390px !important;
  height: auto !important;
}

.music-window .window-content {
  padding: 11px 13px !important;
}

/* 제목은 왼쪽, 영상은 오른쪽 */
.music-window .compact-music-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 180px !important;
  align-items: center !important;

  gap: 13px !important;
  min-height: 0 !important;
}

/* 제목 영역 */
.music-window .music-player-info {
  min-width: 0 !important;
}

.music-window .music-player-info small {
  display: block !important;

  margin: 0 0 6px !important;

  color: #7c98a7 !important;

  font-size: 8px !important;
  letter-spacing: 2px !important;
}

.music-window .music-player-info h2 {
  display: -webkit-box !important;
  overflow: hidden !important;

  margin: 0 0 5px !important;

  color: #52758a !important;

  font-size: 13px !important;
  font-weight: normal !important;
  line-height: 1.45 !important;

  overflow-wrap: anywhere !important;

  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
}

.music-window .music-player-info p {
  margin: 0 !important;

  color: #879ba6 !important;
  font-size: 8px !important;
}

/* 영상과 버튼 영역 */
.music-window .compact-player-right {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  width: 180px !important;

  gap: 6px !important;
}

/* 유튜브 화면을 가로형으로 축소 */
.music-window .youtube-playlist-frame {
  width: 180px !important;
  height: 102px !important;

  margin: 0 !important;
  padding: 2px !important;

  box-sizing: border-box !important;
  overflow: hidden !important;

  background: #dcebf3 !important;

  border-top: 1px solid #8297a3 !important;
  border-left: 1px solid #8297a3 !important;
  border-right: 1px solid #ffffff !important;
  border-bottom: 1px solid #ffffff !important;
}

.music-window #youtube-player,
.music-window #youtube-player iframe,
.music-window .youtube-playlist-frame iframe {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  border: 0 !important;
}

/* 영상 아래 재생 버튼 */
.music-window .music-controls {
  display: flex !important;
  justify-content: center !important;

  gap: 4px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
}

.music-window .music-controls button {
  width: 27px !important;
  min-width: 27px !important;
  height: 20px !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #527287 !important;

  background:
    linear-gradient(
      to bottom,
      #ffffff,
      #d3e7f0
    ) !important;

  border-top: 1px solid #ffffff !important;
  border-left: 1px solid #ffffff !important;
  border-right: 1px solid #849aa7 !important;
  border-bottom: 1px solid #849aa7 !important;

  font-family: "MS Gothic", Tahoma, sans-serif !important;
  font-size: 8px !important;
  line-height: 18px !important;

  cursor: pointer !important;
}
/* 왼쪽 바탕화면 아이콘은 아래쪽 */
.desktop-icons {
  z-index: 10 !important;
}

/* 상세창은 아이콘보다 위쪽 */
.detail-window {
  position: absolute !important;
  display: none;
  z-index: 9999 !important;
}

.detail-window.is-open {
  display: block !important;
  z-index: 9999 !important;
}
/* 프로필 상세창 크게 */
#profile-detail {
  top: 90px;
  left: 210px;

  width: 680px !important;
  min-width: 680px !important;
  max-width: none !important;

  min-height: 430px !important;
}

/* 상세창 안쪽 여백과 높이 */
#profile-detail .window-content {
  min-height: 330px;

  padding: 26px 30px;

  box-sizing: border-box;
}

/* 상세 제목 */
#profile-detail .window-content h2 {
  margin: 0 0 24px;

  color: #52758a;

  font-size: 23px;
  font-weight: normal;
  letter-spacing: 4px;
}

/* 상세 내용 */
#profile-detail .window-content p {
  margin: 0 0 15px;

  color: #536c79;

  font-size: 12px;
  line-height: 1.8;
}
/* 프로필 상세창 내용 스크롤 */
#profile-detail .window-content {
  height: 330px !important;
  min-height: 0 !important;

  overflow-y: auto;
  overflow-x: hidden;

  box-sizing: border-box;
}
#profile-detail .window-content::-webkit-scrollbar {
  width: 14px;
}

#profile-detail .window-content::-webkit-scrollbar-track {
  background: #e8f2f7;
  border-left: 1px solid #9eb2bd;
}

#profile-detail .window-content::-webkit-scrollbar-thumb {
  background: linear-gradient(
    to right,
    #d6e8f1,
    #afcad8
  );

  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #8299a6;
  border-bottom: 1px solid #8299a6;
}
/* 상세 프로필 아래 여러 이미지 */
#profile-detail .profile-detail-extra-images {
  display: flex;
  flex-direction: column;
  gap: 18px;

  margin-top: 24px;
}

#profile-detail .profile-detail-extra-images img {
  display: block;

  width: 420px;
  max-width: 100%;
  height: auto;

  margin: 0 auto;
  padding: 4px;
  box-sizing: border-box;

  background: #ffffff;
  border: 1px solid #a8bdc8;
}
/* 상세 프로필창 크기 고정 */
#profile-detail {
  height: 500px !important;
  overflow: hidden !important;
}

/* 상세 프로필 내용 부분만 스크롤 */
#profile-detail .window-content {
  display: block !important;

  height: 380px !important;
  min-height: 0 !important;
  max-height: 380px !important;

  overflow-y: scroll !important;
  overflow-x: hidden !important;

  box-sizing: border-box;
}
/* 프로필 상세창 기본 상태는 숨김 */
#profile-detail {
  top: 90px !important;
  left: 210px !important;

  width: 680px !important;
  height: 520px !important;

  display: none !important;
  flex-direction: column !important;

  overflow: hidden !important;
}

/* Profile 아이콘을 눌렀을 때만 표시 */
#profile-detail.is-open {
  display: flex !important;
}

/* 제목줄과 메뉴줄은 고정 */
#profile-detail .window-titlebar,
#profile-detail .window-menu {
  flex: 0 0 auto;
}

/* 가운데 내용이 남는 창 공간을 전부 사용 */
#profile-detail .window-content {
  flex: 1 1 auto !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  padding: 26px 30px;
  box-sizing: border-box;
}
/* 상세창 제목줄을 잡을 수 있게 표시 */
.detail-window .window-titlebar {
  cursor: move;
  user-select: none;
}

/* 닫기 버튼 위에서는 일반 커서 */
.detail-window .window-titlebar button {
  cursor: default;
}

/* 창 이동 중 글자가 선택되는 것 방지 */
body.dragging-window {
  user-select: none;
}
.detail-window .window-titlebar {
  cursor: move;
  user-select: none;
  touch-action: none;
}

.detail-window .window-titlebar button {
  cursor: pointer;
}

body.dragging-window {
  user-select: none;
}
/* 상세창을 가짜 브라우저 영역에서 해방 */
.detail-window {
  position: fixed !important;
}
#profile-detail .profile-image-text {
  margin: 8px 0 24px;
  color: #536c79;
  font-size: 12px;
  line-height: 1.8;
  text-align: center;
}
/* 음악 볼륨 조절 */
/* 왼쪽 음악 정보 영역의 볼륨 조절 */
.music-volume-control {
  display: grid;
  grid-template-columns: 22px 88px 20px;
  align-items: center;
  gap: 5px;

  width: max-content;
  margin-top: 10px;

  color: #6d8b9c;
  font-family: "Courier New", monospace;
  font-size: 8px;
  letter-spacing: 1px;
}

.music-volume-icon {
  font-size: 8px;
  letter-spacing: 1px;
}

/* 기본 슬라이더 모양 제거 */
#music-volume {
  width: 88px;
  height: 13px;

  margin: 0;
  padding: 0;

  appearance: none;
  -webkit-appearance: none;

  background: transparent;
  cursor: pointer;
}

/* 슬라이더 레일 */
#music-volume::-webkit-slider-runnable-track {
  height: 5px;

  background: #e9f2f6;

  border-top: 1px solid #819aa7;
  border-left: 1px solid #819aa7;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;

  box-sizing: border-box;
}

/* 슬라이더 손잡이 */
#music-volume::-webkit-slider-thumb {
  width: 9px;
  height: 13px;

  margin-top: -5px;

  appearance: none;
  -webkit-appearance: none;

  background: #d8e8ef;

  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #78919e;
  border-bottom: 1px solid #78919e;

  border-radius: 0;
}

/* 파이어폭스용 레일 */
#music-volume::-moz-range-track {
  height: 5px;

  background: #e9f2f6;
  border: 1px solid #819aa7;
}

/* 파이어폭스용 손잡이 */
#music-volume::-moz-range-thumb {
  width: 9px;
  height: 13px;

  background: #d8e8ef;

  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #78919e;
  border-bottom: 1px solid #78919e;

  border-radius: 0;
}

#music-volume-value {
  width: 20px;

  color: #7894a3;
  font-size: 8px;
  text-align: right;
}
/* =================================
   왼쪽 Memo 아이콘
================================= */

.memo-desktop-icon {
  width: 70px;
  padding: 0;
  margin: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;

  background: transparent;
  border: 0;

  color: #486878;
  font-family: inherit;
  font-size: 11px;

  cursor: pointer;
}

.memo-desktop-icon-image {
  width: 46px;
  height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;

  background: linear-gradient(
    to bottom,
    #f7fcfe,
    #dcecf3
  );

  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #8ca7b4;
  border-bottom: 1px solid #8ca7b4;

  border-radius: 3px;

  color: #648a9e;
  font-family: Georgia, serif;
  font-size: 18px;

  box-shadow:
    inset 1px 1px 0 #edf7fa,
    1px 1px 2px rgba(70, 100, 115, 0.13);
}

.memo-desktop-icon:hover
.memo-desktop-icon-image {
  background: #cfe4ee;
  outline: 1px dotted #7896a5;
}

.memo-desktop-icon-label {
  white-space: nowrap;
}


/* =================================
   화면 고정 작은 메모창
================================= */

#memo-summary-window {
  position: absolute;

  top: 325px;
  right: 82px;
  z-index: 24;

  width: 315px;
  height: 175px;

  display: flex;
  flex-direction: column;

  box-sizing: border-box;

  background: #edf5f8;

  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #718894;
  border-bottom: 2px solid #718894;

  box-shadow:
    3px 3px 7px rgba(45, 70, 85, 0.2);
}

/* 기존 드래그 코드에 잡히지 않는 별도 제목줄 */
.memo-summary-titlebar {
  height: 25px;
  padding-left: 7px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  flex: 0 0 auto;
  box-sizing: border-box;

  background: linear-gradient(
    to right,
    #84acc0,
    #c4dbe5
  );

  color: #ffffff;
  font-size: 11px;
  font-weight: bold;

  user-select: none;
  cursor: default;
}

.memo-summary-controls {
  display: flex;
  align-items: center;

  margin-right: 2px;
}

.memo-summary-controls span {
  width: 18px;
  height: 17px;
  margin-left: 2px;

  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;

  background: #edf4f7;

  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #6f8793;
  border-bottom: 1px solid #6f8793;

  color: #58717d;
  font-size: 9px;
}

.memo-summary-menubar {
  height: 23px;
  padding: 4px 7px;

  flex: 0 0 auto;
  box-sizing: border-box;

  background: #edf5f8;
  border-bottom: 1px solid #a8bbc4;

  color: #4f6b78;
  font-size: 10px;
}

.memo-summary-content {
  flex: 1 1 auto;
  min-height: 0;

  padding: 8px 14px;
  box-sizing: border-box;

  background: #ffffff;
  overflow: hidden;

  color: #496572;
  font-size: 10px;
  line-height: 1.45;
}

.memo-summary-content h2 {
  margin: 0 0 4px;

  color: #688b9e;
  font-family: Georgia, serif;
  font-size: 17px;
  font-weight: normal;
  letter-spacing: 3px;
}

.memo-summary-content p {
  margin: 0 0 5px;
}

.memo-summary-list {
  margin-bottom: 6px;

  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.memo-summary-list span {
  padding: 1px 5px;

  background: #edf5f8;
  border: 1px solid #c0d0d7;

  color: #77919e;
  font-family: "Courier New", monospace;
  font-size: 7px;
}

.memo-summary-open {
  height: 20px;
  padding: 0 10px;

  background: linear-gradient(
    to bottom,
    #ffffff,
    #dceaf0
  );

  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #718894;
  border-bottom: 1px solid #718894;

  color: #587583;
  font-family: "Courier New", monospace;
  font-size: 8px;

  cursor: pointer;
}

.memo-summary-open:active {
  border-top: 1px solid #718894;
  border-left: 1px solid #718894;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}

.memo-summary-statusbar {
  height: 19px;
  padding: 3px 6px;

  flex: 0 0 auto;
  box-sizing: border-box;

  background: #e6eff3;
  border-top: 1px solid #a8bbc4;

  color: #708894;
  font-size: 8px;
}


/* =================================
   상세 메모창
================================= */

#memo-detail-window {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 50000;

  width: 720px;
  height: 520px;

  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);

  display: none;
  flex-direction: column;

  transform: translate(-50%, -50%);

  box-sizing: border-box;

  background: #edf5f8;

  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #667f8b;
  border-bottom: 2px solid #667f8b;

  box-shadow:
    7px 7px 20px rgba(35, 55, 70, 0.36);

  overflow: hidden;
}

#memo-detail-window.is-open {
  display: flex;
}

.memo-detail-titlebar {
  height: 28px;
  padding-left: 8px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  flex: 0 0 auto;
  box-sizing: border-box;

  background: linear-gradient(
    to right,
    #769db0,
    #bfd7e1
  );

  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
}

#close-memo-detail {
  width: 23px;
  height: 21px;
  margin-right: 3px;
  padding: 0;

  background: #edf4f7;

  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #637c88;
  border-bottom: 1px solid #637c88;

  color: #526c78;
  font-size: 14px;
  line-height: 17px;

  cursor: pointer;
}

#close-memo-detail:active {
  border-top: 1px solid #637c88;
  border-left: 1px solid #637c88;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}

.memo-detail-menubar {
  height: 24px;
  padding: 5px 8px;

  flex: 0 0 auto;
  box-sizing: border-box;

  background: #edf5f8;
  border-bottom: 1px solid #a6bac3;

  color: #4f6976;
  font-size: 10px;
}

.memo-detail-tabs {
  padding: 8px 10px 0;

  display: flex;
  gap: 4px;

  flex: 0 0 auto;

  background: #e9f2f6;
  border-bottom: 1px solid #9fb4be;
}

.memo-tab {
  min-width: 92px;
  height: 27px;
  padding: 0 12px;

  position: relative;
  bottom: -1px;

  background: #dceaf0;

  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #829aa6;
  border-bottom: 1px solid #9fb4be;

  color: #68828f;
  font-family: "Courier New", monospace;
  font-size: 9px;

  cursor: pointer;
}

.memo-tab.is-active {
  background: #ffffff;
  border-bottom-color: #ffffff;

  color: #496875;
  font-weight: bold;
}

.memo-detail-body {
  flex: 1 1 auto;
  min-height: 0;

  overflow: hidden;

  background: #ffffff;
}

.memo-panel {
  height: 100%;
  padding: 25px 30px;

  display: none;

  box-sizing: border-box;
  overflow-y: auto;

  color: #435d69;
}

.memo-panel.is-active {
  display: block;
}

.memo-panel-heading {
  margin-bottom: 18px;
  padding-bottom: 10px;

  border-bottom: 1px dotted #9fb4be;
}

.memo-panel-heading h2 {
  margin: 0 0 4px;

  color: #688c9f;
  font-family: Georgia, serif;
  font-size: 21px;
  font-weight: normal;
  letter-spacing: 4px;
}

.memo-panel-heading span {
  color: #8aa0aa;
  font-size: 9px;
}

.memo-entry {
  margin-bottom: 14px;
  padding: 13px 15px;

  background: #f5fafc;

  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #c2d1d8;
  border-bottom: 1px solid #c2d1d8;
}

.memo-entry-header {
  margin-bottom: 7px;

  display: flex;
  justify-content: space-between;
  gap: 15px;

  color: #5f8293;
}

.memo-entry-header strong {
  font-size: 11px;
  letter-spacing: 1px;
}

.memo-entry-header time {
  color: #91a6af;
  font-family: "Courier New", monospace;
  font-size: 8px;
}

.memo-entry p {
  margin: 0;

  color: #4b6571;
  font-size: 11px;
  line-height: 1.75;
}

.memo-detail-statusbar {
  height: 21px;
  padding: 4px 7px;

  flex: 0 0 auto;
  box-sizing: border-box;

  background: #e4eef2;
  border-top: 1px solid #a7bbc4;

  color: #778f9a;
  font-family: "Courier New", monospace;
  font-size: 8px;
  text-align: right;
}


/* =========================
   Memo icon + detail hotfix
========================= */

#memo-desktop-icon {
  cursor: pointer;
}

.memo-icon {
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #d8ebf4
    );

  border: 1px solid #9db9ca;
}

#memo-detail-window {
  position: fixed !important;
  display: none !important;
}

#memo-detail-window.is-open {
  display: flex !important;
}

/* =========================
   Recycle Bin
========================= */

#recycle-bin-icon {
  cursor: pointer;
}

/* 왼쪽 아이콘 줄과 분리된 바탕화면 오른쪽 아래 휴지통 */
#recycle-bin-icon.recycle-desktop-corner {
  position: absolute;
  right: 28px;
  bottom: 26px;
  z-index: 12;

  width: 92px;
  margin: 0;
}

#recycle-bin-icon.recycle-desktop-corner:focus-visible {
  outline: 1px dotted #54788e;
  outline-offset: 3px;
}

.recycle-icon {
  position: relative;
  overflow: visible;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #d8ebf4
    );

  border: 1px solid #9db9ca;
}

.recycle-icon::before {
  content: "";

  position: absolute;
  left: 11px;
  bottom: 7px;

  width: 24px;
  height: 27px;

  background:
    linear-gradient(
      to right,
      rgba(255, 255, 255, 0.9),
      rgba(173, 204, 220, 0.9)
    );

  border: 1px solid #7898a9;
  border-radius: 2px 2px 5px 5px;

  transform: perspective(30px) rotateX(-3deg);
}

.recycle-icon::after {
  content: "";

  position: absolute;
  top: 7px;
  left: 9px;

  width: 28px;
  height: 5px;

  background: #d9ebf3;

  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #7898a9;
  border-bottom: 1px solid #7898a9;
}

.recycle-icon span {
  position: relative;
  z-index: 2;

  margin-top: 8px;

  color: #63869a;
  font-size: 16px;
}

#recycle-bin-window {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 51000;

  width: 560px;
  height: 370px;

  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);

  display: none;
  flex-direction: column;

  transform: translate(-50%, -50%);

  box-sizing: border-box;
  overflow: hidden;

  background: #edf5f8;

  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #667f8b;
  border-bottom: 2px solid #667f8b;

  box-shadow:
    7px 7px 20px rgba(35, 55, 70, 0.36);
}

#recycle-bin-window.is-open {
  display: flex;
}

.recycle-bin-titlebar {
  height: 28px;
  padding-left: 8px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  flex: 0 0 auto;
  box-sizing: border-box;

  color: #ffffff;
  background:
    linear-gradient(
      to right,
      #769db0,
      #bfd7e1
    );

  font-size: 11px;
  font-weight: bold;
}

#close-recycle-bin {
  width: 23px;
  height: 21px;

  margin-right: 3px;
  padding: 0;

  color: #526c78;
  background: #edf4f7;

  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #637c88;
  border-bottom: 1px solid #637c88;

  font-size: 14px;
  line-height: 17px;
  cursor: pointer;
}

.recycle-bin-menubar {
  height: 24px;
  padding: 5px 8px;

  flex: 0 0 auto;
  box-sizing: border-box;

  color: #4f6976;
  background: #edf5f8;

  border-bottom: 1px solid #a6bac3;

  font-size: 10px;
}

.recycle-bin-body {
  flex: 1 1 auto;
  min-height: 0;

  padding: 20px 24px;
  overflow-y: auto;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #f1f8fb
    );
}

.recycle-bin-intro {
  margin-bottom: 15px;
  padding-bottom: 11px;

  display: flex;
  flex-direction: column;
  gap: 4px;

  border-bottom: 1px dotted #9fb4be;
}

.recycle-bin-intro strong {
  color: #64889b;

  font-family: Georgia, serif;
  font-size: 18px;
  font-weight: normal;
  letter-spacing: 2px;
}

.recycle-bin-intro span {
  color: #8ba0aa;
  font-size: 9px;
}

.recycle-bin-files {
  display: grid;
  gap: 9px;
}

.recycle-file {
  min-height: 61px;
  padding: 10px 12px;

  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 10px;

  background: #f6fafc;

  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #c0d0d7;
  border-bottom: 1px solid #c0d0d7;
}

.recycle-file-icon {
  width: 30px;
  height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #698a9c;
  background: #e1eef4;

  border: 1px solid #a4bcc8;

  font-family: Georgia, serif;
  font-size: 15px;
}

.recycle-file strong {
  color: #567889;
  font-size: 10px;
  letter-spacing: 0.5px;
}

.recycle-file p {
  margin: 4px 0 0;

  color: #7f949e;
  font-size: 9px;
  line-height: 1.5;
}

.recycle-bin-statusbar {
  height: 21px;
  padding: 4px 7px;

  flex: 0 0 auto;
  box-sizing: border-box;

  color: #778f9a;
  background: #e4eef2;

  border-top: 1px solid #a7bbc4;

  font-family: "Courier New", monospace;
  font-size: 8px;
  text-align: right;
}

@media screen and (max-width: 650px) {
  #recycle-bin-icon.recycle-desktop-corner {
    right: 14px;
    bottom: 18px;
  }

  #recycle-bin-window {
    width: calc(100vw - 24px);
    height: min(430px, calc(100vh - 60px));
  }
}



/* =========================
   화면 아래를 돌아다니는 펭귄
========================= */

.roaming-penguin {
  position: absolute;
  z-index: 60000;

  left: 0;
  bottom: 6px;

  width: 72px;
  height: auto;
  margin: 0;
  padding: 0;

  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;

  will-change: transform;
}

.roaming-penguin:focus-visible {
  outline: 1px dotted #000080;
  outline-offset: 3px;
}

.roaming-penguin img {
  display: block;

  width: 100%;
  height: auto;

  user-select: none;
  -webkit-user-drag: none;
  image-rendering: pixelated;
}

.roaming-penguin.is-facing-left img {
  transform: scaleX(-1);
}

.penguin-speech {
  position: absolute;
  z-index: 2;
  left: 10px;
  bottom: calc(100% + 7px);

  display: block;
  min-width: 88px;
  max-width: 180px;
  padding: 5px 8px;

  border: 1px solid #000;
  background: #ffffe1;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.28);

  color: #111;
  font-size: 11px;
  line-height: 1.35;
  text-align: left;
  white-space: nowrap;

  opacity: 0;
  visibility: hidden;
  transform: translateY(3px);
  transition: opacity 0.12s linear, transform 0.12s linear, visibility 0.12s;

  pointer-events: none;
}

.penguin-speech::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 100%;

  width: 8px;
  height: 8px;

  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  background: #ffffe1;
  transform: translateY(-4px) rotate(45deg);
}

.roaming-penguin.is-facing-left .penguin-speech {
  right: 10px;
  left: auto;
}

.roaming-penguin.is-facing-left .penguin-speech::after {
  right: 12px;
  left: auto;
}

.penguin-speech.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media screen and (max-width: 650px) {
  .roaming-penguin {
    width: 58px;
    bottom: 6px;
  }
}

/* =========================================================
   MOBILE LAYOUT FINAL OVERRIDE
   PC 화면은 그대로 두고, 700px 이하에서만 세로형으로 정리
========================================================= */
@media screen and (max-width: 700px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    padding: 0 0 44px !important;
  }

  .browser {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-shadow: none !important;
  }

  .browser-titlebar {
    min-height: 24px;
    font-size: 10px;
  }

  .browser-title {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .browser-menu,
  .toolbar {
    display: none !important;
  }

  .address-row {
    padding: 3px 5px;
  }

  .address-label,
  .go-button {
    display: none !important;
  }

  .address-box {
    min-width: 0;
    font-size: 9px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .desktop {
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    padding: 82px 10px 125px !important;
  }

  .desktop-title {
    top: 18px !important;
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
  }

  .desktop-title h1 {
    max-width: 100%;
    font-size: 18px !important;
    line-height: 1.3;
    letter-spacing: 2px !important;
    overflow-wrap: anywhere;
  }

  .desktop-title p {
    font-size: 8px;
    letter-spacing: 2px;
  }

  .desktop-decoration {
    display: none !important;
  }

  .desktop-icons {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    margin: 0 0 14px !important;
    padding: 0 4px;

    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px 4px !important;
  }

  .desktop-icon {
    min-width: 0;
    gap: 3px;
    font-size: 9px;
  }

  .icon-image {
    width: 38px;
    height: 35px;
    margin: 0 auto;
  }

  /* 메인 화면의 일반 창은 모바일에서 세로로 쌓기 */
  .profile-window,
  .update-window,
  .music-window,
  .gallery-window,
  .links-window,
  #memo-summary-window {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;

    margin: 0 0 14px !important;
    transform: none !important;
  }

  #memo-summary-window {
    min-height: 175px;
  }

  .window-content,
  .memo-summary-content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .profile-content {
    grid-template-columns: 92px minmax(0, 1fr) !important;
    gap: 12px;
  }

  .profile-photo {
    width: 92px !important;
    height: 125px;
  }

  .profile-information dl div {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .update-list p {
    gap: 8px;
  }

  .update-list time {
    width: 72px;
    flex: 0 0 72px;
  }

  /* 음악창은 모바일에서 위아래 구조 */
  .music-window .compact-music-layout {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .music-window .compact-player-right {
    width: 100% !important;
  }

  .music-window .youtube-playlist-frame {
    width: 100% !important;
    max-width: 260px !important;
    height: 146px !important;
    margin: 0 auto !important;
  }

  .music-volume-control {
    max-width: 220px;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }

  .gallery-placeholder {
    height: 76px;
  }

  .link-list {
    grid-template-columns: 1fr 1fr;
  }

  /* 상세창은 휴대폰 화면 안에 꽉 차는 팝업으로 */
  #profile-detail,
  #memo-detail-window,
  #recycle-bin-window {
    position: fixed !important;
    top: 8px !important;
    right: 8px !important;
    bottom: 44px !important;
    left: 8px !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    transform: none !important;
  }

  #profile-detail .window-content {
    padding: 16px !important;
  }

  #profile-detail .window-content h2 {
    font-size: 18px;
    letter-spacing: 2px;
  }

  .memo-detail-tabs {
    overflow-x: auto;
    justify-content: flex-start;
  }

  .memo-tab {
    flex: 0 0 auto;
    min-width: 86px;
  }

  .memo-detail-body,
  .recycle-bin-body {
    padding: 14px !important;
  }

  .memo-entry-header {
    align-items: flex-start;
    gap: 6px;
  }

  /* 오른쪽 아래 장식 */
  #recycle-bin-icon.recycle-desktop-corner {
    right: 10px !important;
    bottom: 18px !important;
    width: 72px !important;
  }

  .roaming-penguin {
    width: 52px !important;
    bottom: 6px !important;
    z-index: 60000 !important;
  }

  .browser-status {
    display: none !important;
  }

  .taskbar {
    height: 38px;
  }

  .start-button {
    padding: 0 10px;
  }

  .taskbar-clock {
    min-width: 58px;
    font-size: 10px;
  }
}

@media screen and (max-width: 420px) {
  .desktop-icons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .profile-content {
    grid-template-columns: 1fr !important;
  }

  .profile-photo {
    width: 120px !important;
    height: 150px;
  }

  .gallery-grid,
  .link-list {
    grid-template-columns: 1fr 1fr !important;
  }
}


/* 모바일에서도 PC 화면 전체를 축소해 표시 */
html,
body {
  min-width: 1100px;
}


/* =========================
   랜덤 링크 이미지 아이콘
========================= */

.random-link-image {
  overflow: hidden;
  padding: 2px;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #d7ebf7
    );

  border: 1px solid #9db9ca;
}

.random-link-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;

  user-select: none;
  -webkit-user-drag: none;
}


/* =========================
   바탕화면에 따로 놓인 랜덤 링크 아이콘
========================= */

#random-link-icon.random-link-floating {
  position: absolute;
  z-index: 13;

  left: 430px;
  bottom: 217px;

  width: 92px;
  margin: 0;
}

#random-link-icon.random-link-floating:focus-visible {
  outline: 1px dotted #54788e;
  outline-offset: 3px;
}


/* =====================================================
   CLIP 아이콘
===================================================== */

.clip-icon {
  position: relative;
  overflow: hidden;

  color: #ffffff;
  background:
    linear-gradient(
      135deg,
      #4d7da1,
      #a9cce2 55%,
      #eef8fd
    );

  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #687d8b;
  border-bottom: 2px solid #687d8b;
}

.clip-icon::before,
.clip-icon::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  height: 4px;

  background:
    repeating-linear-gradient(
      to right,
      rgba(255, 255, 255, 0.9) 0 3px,
      transparent 3px 7px
    );
}

.clip-icon::before {
  top: 4px;
}

.clip-icon::after {
  bottom: 4px;
}

.clip-icon span {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  font-size: 18px;
  text-shadow: 1px 1px #355a73;
}


/* =====================================================
   CLIP 탐색기 공통 창
===================================================== */

.clip-library-window,
.clip-player-window {
  position: fixed;
  display: none;

  color: #42535e;
  background: #dce4e8;

  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #6e7d85;
  border-bottom: 2px solid #6e7d85;

  box-shadow:
    0 0 0 1px #526772,
    8px 10px 22px rgba(45, 72, 88, 0.28);
}

.clip-library-window.is-open,
.clip-player-window.is-open {
  display: block;
}

.clip-library-window {
  z-index: 61000;

  top: 88px;
  left: calc(50% - 410px);

  width: 650px;
  height: 480px;
}

.clip-player-window {
  z-index: 62000;

  top: 116px;
  left: calc(50% - 300px);

  width: 690px;
}

.clip-window-titlebar {
  min-height: 28px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 3px 4px 3px 8px;

  color: #ffffff;
  background:
    linear-gradient(
      to right,
      #527fa4,
      #8eb7d3,
      #d8ebf5
    );

  font-weight: bold;
  text-shadow: 1px 1px #4b6f88;
  cursor: move;
  touch-action: none;
}

.clip-window-controls {
  display: flex;
  gap: 2px;
}

.clip-window-controls span,
.clip-window-controls button {
  width: 20px;
  height: 19px;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #485760;
  background: linear-gradient(to bottom, #ffffff, #d6dee2);

  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #71818a;
  border-bottom: 1px solid #71818a;

  font: 11px Arial, sans-serif;
}

.clip-window-controls button {
  cursor: pointer;
}


/* 탐색기 */

.clip-explorer-toolbar {
  min-height: 38px;

  display: flex;
  align-items: center;
  gap: 5px;

  padding: 5px 7px;

  background: linear-gradient(to bottom, #f9fbfc, #dce4e8);
  border-bottom: 1px solid #95a3aa;
}

.clip-explorer-toolbar button {
  width: 27px;
  height: 25px;
  padding: 0;

  color: #52636c;
  background: linear-gradient(to bottom, #ffffff, #dce5e9);

  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #89979e;
  border-bottom: 1px solid #89979e;
}

.clip-address-label {
  margin-left: 4px;
  color: #5c6870;
}

.clip-address-box {
  flex: 1;
  min-width: 0;
  height: 25px;

  display: flex;
  align-items: center;

  padding: 3px 7px;

  color: #455660;
  background: #ffffff;

  border-top: 1px solid #77858d;
  border-left: 1px solid #77858d;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}

.clip-explorer-body {
  height: 382px;

  display: grid;
  grid-template-columns: 155px 1fr;

  background: #ffffff;
}

.clip-folder-pane {
  padding: 16px 13px;

  display: flex;
  flex-direction: column;
  gap: 12px;

  color: #526779;
  background:
    linear-gradient(
      to bottom,
      #d9ebf7,
      #eef7fc 70%,
      #ffffff
    );

  border-right: 1px solid #9eb0bb;
}

.clip-folder-pane strong {
  padding-bottom: 7px;
  color: #3e6581;
  border-bottom: 1px solid #b9d0df;
}

.clip-folder-pane span {
  padding-left: 5px;
}

.clip-file-list {
  overflow-y: auto;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-content: start;
  gap: 14px 10px;

  padding: 18px 16px 28px;

  background: #ffffff;
}

.clip-file-item {
  min-width: 0;
  padding: 5px 3px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;

  color: #374952;
  background: transparent;
  border: 1px solid transparent;

  font: inherit;
  text-align: center;
  cursor: pointer;
}

.clip-file-item:hover,
.clip-file-item:focus-visible {
  background: #edf6fc;
  border-color: #9dbcd0;
}

.clip-file-item.is-selected {
  color: #ffffff;
  background: #6b95b6;
  border-color: #527b9b;
}

.clip-file-thumbnail {
  width: 92px;
  height: 68px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: #eaf2f6;
  border: 1px solid #8d9da6;
  box-shadow: inset 0 0 0 3px #ffffff;
}

.clip-file-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.clip-file-thumbnail.is-placeholder {
  position: relative;

  color: #ffffff;
  background:
    linear-gradient(
      135deg,
      #263d4e,
      #6992ad 60%,
      #c6deeb
    );

  font-size: 27px;
  text-shadow: 1px 1px #203746;
}

.clip-file-thumbnail.is-placeholder::before,
.clip-file-thumbnail.is-placeholder::after {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  height: 6px;

  background:
    repeating-linear-gradient(
      to right,
      #e9f6fd 0 5px,
      transparent 5px 10px
    );
}

.clip-file-thumbnail.is-placeholder::before {
  top: 5px;
}

.clip-file-thumbnail.is-placeholder::after {
  bottom: 5px;
}

.clip-file-name {
  width: 100%;

  overflow-wrap: anywhere;
  line-height: 1.25;
}

.clip-file-type {
  color: #849098;
  font-size: 10px;
}

.clip-file-item.is-selected .clip-file-type {
  color: #edf8fe;
}

.clip-window-statusbar {
  height: 28px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 4px 7px;

  background: #e7ecef;
  border-top: 1px solid #ffffff;
}


/* 재생 창 */

.clip-player-menubar {
  padding: 5px 8px;

  color: #46545c;
  background: #edf0f2;
  border-bottom: 1px solid #9da9af;
}

.clip-player-screen {
  position: relative;

  width: 100%;
  aspect-ratio: 16 / 9;

  overflow: hidden;
  background: #071018;

  border-top: 2px solid #56656e;
  border-bottom: 2px solid #ffffff;
}

.clip-player-screen iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #071018;
}

.clip-player-placeholder {
  position: absolute;
  z-index: 1;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #b7d4e5;
  background:
    radial-gradient(
      circle at center,
      #1b3446,
      #071018 68%
    );

  letter-spacing: 0.08em;
}

.clip-player-placeholder[hidden] {
  display: none;
}

.clip-player-info {
  min-height: 52px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;

  padding: 8px 10px;

  background: #eef2f4;
  border-top: 1px solid #8e9da5;
}

.clip-player-info > div {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 3px;
}

.clip-player-info strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clip-player-info span {
  color: #7a898f;
}

.clip-player-info a {
  flex: 0 0 auto;

  padding: 5px 9px;

  color: #3f647d;
  background: linear-gradient(to bottom, #ffffff, #dbe5ea);
  border: 1px solid #8b9ba4;
  text-decoration: none;
}

.clip-player-info a[aria-disabled="true"] {
  color: #929da3;
  pointer-events: none;
}

.clip-player-controls {
  min-height: 38px;

  display: flex;
  align-items: center;
  gap: 9px;

  padding: 6px 10px;

  color: #52636d;
  background: linear-gradient(to bottom, #f8fafb, #d5dee3);
  border-top: 1px solid #ffffff;
}

.clip-player-progress {
  flex: 1;
  height: 7px;

  background: #fdfefe;
  border-top: 1px solid #75858e;
  border-left: 1px solid #75858e;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}
/* CLIP 창 스크롤바를 프로필 상세창과 동일하게 */

.clip-file-list::-webkit-scrollbar {
  width: 14px;
}

.clip-file-list::-webkit-scrollbar-track {
  background: #e8f2f7;
  border-left: 1px solid #9eb2bd;
}

.clip-file-list::-webkit-scrollbar-thumb {
  background: linear-gradient(
    to right,
    #d6e8f1,
    #afcad8
  );

  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #8299a6;
  border-bottom: 1px solid #8299a6;
}
/* ==================================================
   왼쪽 메뉴 아이콘 리디자인
   이미지 파일 필요 없음
================================================== */

/* 각 아이콘을 정확히 지정 */
.desktop-icon[data-window="profile-detail"] .folder-icon,
.desktop-icon[data-window="gallery-detail"] .folder-icon,
.desktop-icon[href="#links"] .link-icon,
#memo-desktop-icon .memo-icon {
  position: relative !important;
  display: block !important;

  width: 48px !important;
  height: 43px !important;
  margin: 0 auto !important;

  color: transparent !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  overflow: visible !important;
}

/* 기존 문자 전부 숨기기 */
.desktop-icon[data-window="profile-detail"] .folder-icon > span,
.desktop-icon[data-window="gallery-detail"] .folder-icon > span,
.desktop-icon[href="#links"] .link-icon > span,
#memo-desktop-icon .memo-icon > span {
  display: none !important;
}


/* ==================================================
   PROFILE
   작은 신분증 카드
================================================== */

.desktop-icon[data-window="profile-detail"] .folder-icon {
  width: 44px !important;
  height: 34px !important;
  margin-top: 5px !important;
  margin-bottom: 4px !important;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.9) 0 17%,
      transparent 18%
    ),
    linear-gradient(
      135deg,
      #eef9fd 0%,
      #b9d9e8 56%,
      #7fa9bd 100%
    ) !important;

  border-top: 2px solid #ffffff !important;
  border-left: 2px solid #ffffff !important;
  border-right: 2px solid #647f8e !important;
  border-bottom: 2px solid #647f8e !important;

  border-radius: 3px !important;

  box-shadow:
    1px 2px 3px rgba(58, 88, 104, 0.3) !important;

  transform: rotate(-2deg);
}

/* 증명사진 */
.desktop-icon[data-window="profile-detail"] .folder-icon::before {
  content: "";
  position: absolute;

  left: 5px;
  top: 8px;

  width: 17px;
  height: 20px;

  background:
    radial-gradient(
      circle at 50% 30%,
      #f3fbfe 0 4px,
      #739cb0 5px 7px,
      transparent 8px
    ),
    radial-gradient(
      ellipse at 50% 100%,
      #6f9db3 0 9px,
      transparent 10px
    ),
    linear-gradient(
      to bottom,
      #dff1f8,
      #a5cadb
    );

  border: 1px solid #607f8f;

  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.85);
}

/* 카드의 글자 줄 */
.desktop-icon[data-window="profile-detail"] .folder-icon::after {
  content: "";
  position: absolute;

  right: 5px;
  top: 10px;

  width: 13px;
  height: 15px;

  background:
    linear-gradient(
      to bottom,
      #648da1 0 2px,
      transparent 2px 5px,
      #8db0c0 5px 7px,
      transparent 7px 10px,
      #8db0c0 10px 12px,
      transparent 12px
    );
}


/* ==================================================
   GALLERY
   디지털카메라
================================================== */

.desktop-icon[data-window="gallery-detail"] .folder-icon {
  width: 45px !important;
  height: 34px !important;
  margin-top: 5px !important;
  margin-bottom: 4px !important;

  background:
    linear-gradient(
      180deg,
      #eaf7fc 0%,
      #a9cede 48%,
      #719eb4 100%
    ) !important;

  border-top: 2px solid #ffffff !important;
  border-left: 2px solid #ffffff !important;
  border-right: 2px solid #617b89 !important;
  border-bottom: 2px solid #617b89 !important;

  border-radius: 4px 4px 6px 6px !important;

  box-shadow:
    1px 2px 3px rgba(58, 88, 104, 0.32) !important;
}

/* 카메라 렌즈 */
.desktop-icon[data-window="gallery-detail"] .folder-icon::before {
  content: "";
  position: absolute;

  left: 50%;
  top: 7px;

  width: 20px;
  height: 20px;

  transform: translateX(-50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 40% 35%,
      #ffffff 0 2px,
      transparent 3px
    ),
    radial-gradient(
      circle,
      #3f6174 0 4px,
      #83b2c8 5px 8px,
      #d8edf6 9px 10px,
      #56788a 11px
    );

  border: 1px solid #4e6e7e;

  box-shadow:
    0 1px 2px rgba(40, 66, 80, 0.4);
}

/* 상단 셔터와 플래시 */
.desktop-icon[data-window="gallery-detail"] .folder-icon::after {
  content: "";
  position: absolute;

  left: 6px;
  top: -5px;

  width: 31px;
  height: 7px;

  background:
    linear-gradient(
      to right,
      #759db0 0 8px,
      transparent 8px 17px,
      #ffffff 17px 24px,
      transparent 24px
    );

  border-radius: 2px 2px 0 0;
}


/* ==================================================
   LINKS
   인터넷 지구본
================================================== */

.desktop-icon[href="#links"] .link-icon {
  width: 42px !important;
  height: 42px !important;

  border-radius: 50% !important;

  background:
    radial-gradient(
      circle at 31% 24%,
      rgba(255, 255, 255, 0.95) 0 4px,
      transparent 5px
    ),
    radial-gradient(
      circle at 50% 50%,
      #dff5fc 0%,
      #94c7dd 44%,
      #4e8eae 75%,
      #315f78 100%
    ) !important;

  border-top: 2px solid #ffffff !important;
  border-left: 2px solid #ffffff !important;
  border-right: 2px solid #527488 !important;
  border-bottom: 2px solid #527488 !important;

  box-shadow:
    1px 2px 4px rgba(48, 79, 96, 0.32) !important;
}

/* 지구본 경선 */
.desktop-icon[href="#links"] .link-icon::before {
  content: "";
  position: absolute;

  left: 8px;
  top: 4px;

  width: 22px;
  height: 31px;

  border-left: 2px solid rgba(255, 255, 255, 0.75);
  border-right: 2px solid rgba(72, 118, 141, 0.75);
  border-radius: 50%;
}

/* 지구본 위도선 */
.desktop-icon[href="#links"] .link-icon::after {
  content: "";
  position: absolute;

  left: 4px;
  top: 12px;

  width: 31px;
  height: 14px;

  border-top: 2px solid rgba(255, 255, 255, 0.8);
  border-bottom: 2px solid rgba(66, 108, 130, 0.72);
  border-radius: 50%;
}


/* ==================================================
   MEMO
   스프링 노트 + 연필
================================================== */

#memo-desktop-icon .memo-icon {
  width: 37px !important;
  height: 40px !important;

  background:
    repeating-linear-gradient(
      to bottom,
      #f9fdff 0 7px,
      #9fc2d2 7px 8px
    ) !important;

  border-top: 2px solid #ffffff !important;
  border-left: 5px solid #6f9db3 !important;
  border-right: 2px solid #657f8d !important;
  border-bottom: 2px solid #657f8d !important;

  border-radius: 2px 3px 3px 2px !important;

  box-shadow:
    inset 3px 0 0 #cbe4ef,
    1px 2px 3px rgba(58, 88, 104, 0.28) !important;

  transform: rotate(-2deg);
}

/* 스프링 고리 */
#memo-desktop-icon .memo-icon::before {
  content: "";
  position: absolute;

  left: -8px;
  top: 4px;

  width: 8px;
  height: 29px;

  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 2px,
      #4e7488 2px 4px,
      transparent 4px 7px
    );
}

/* 연필 */
#memo-desktop-icon .memo-icon::after {
  content: "";
  position: absolute;

  right: -7px;
  bottom: -2px;

  width: 6px;
  height: 31px;

  background:
    linear-gradient(
      to right,
      #fff0a0 0 38%,
      #e4b95f 39% 72%,
      #a97945 73% 100%
    );

  border: 1px solid #77614d;
  border-radius: 2px;

  transform: rotate(34deg);

  box-shadow:
    1px 1px 2px rgba(58, 88, 104, 0.2);
}


/* 마우스 올렸을 때 살짝 밝아짐 */
.desktop-icon[data-window="profile-detail"]:hover .folder-icon,
.desktop-icon[data-window="gallery-detail"]:hover .folder-icon,
.desktop-icon[href="#links"]:hover .link-icon,
#memo-desktop-icon:hover .memo-icon {
  filter: brightness(1.08);
}

/* ==================================================
   GALLERY 사진첩
   처음에는 썸네일만, 클릭하면 별도 큰 보기 창
================================================== */

#gallery-detail {
  position: absolute !important;
  z-index: 10020 !important;

  top: 95px !important;
  left: 205px !important;

  width: 680px !important;
  height: 490px !important;

  display: none !important;
  flex-direction: column !important;

  overflow: hidden !important;

  background: #f7fafc;
}

#gallery-detail.is-open {
  display: flex !important;
}

#gallery-detail .window-titlebar,
#gallery-detail .window-menu,
.gallery-album-toolbar,
.gallery-album-statusbar {
  flex: 0 0 auto;
}

.gallery-album-toolbar {
  min-height: 34px;

  display: flex;
  align-items: center;
  gap: 5px;

  padding: 4px 7px;

  color: #526670;

  background:
    linear-gradient(
      to bottom,
      #f9fbfc,
      #dce5e9
    );

  border-bottom: 1px solid #a3b0b7;
}

.gallery-album-toolbar button {
  width: 25px;
  height: 23px;

  padding: 0;

  color: #536d7b;

  background:
    linear-gradient(
      to bottom,
      #ffffff,
      #d9e7ed
    );

  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #8598a2;
  border-bottom: 1px solid #8598a2;
}

.gallery-album-toolbar > span {
  margin-left: 4px;

  font-size: 10px;
}

.gallery-album-address {
  flex: 1;

  min-height: 23px;

  display: flex;
  align-items: center;

  padding: 3px 8px;

  color: #4f6673;
  background: #ffffff;

  border-top: 1px solid #7e8e96;
  border-left: 1px solid #7e8e96;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;

  font-family:
    "MS Gothic",
    Tahoma,
    sans-serif;

  font-size: 10px;
}

/* 썸네일만 보이는 사진 목록 */

.gallery-album-grid {
  flex: 1 1 auto;
  min-height: 0;

  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  align-content: start;

  gap: 16px 10px;

  padding: 18px 16px;

  overflow-y: auto;
  overflow-x: hidden;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #eef7fb
    );
}

.gallery-album-item {
  appearance: none;

  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 6px;

  margin: 0;
  padding: 7px 5px;

  color: #536f7f;
  background: transparent;

  border: 1px solid transparent;

  font-family:
    Tahoma,
    "MS Gothic",
    sans-serif;

  font-size: 9px;
  text-align: center;

  cursor: pointer;
}

.gallery-album-item:hover {
  background: rgba(205, 230, 243, 0.48);
  border-color: #a9c6d6;
}

.gallery-album-item.is-selected {
  color: #244f6a;

  background:
    linear-gradient(
      to bottom,
      rgba(179, 215, 237, 0.78),
      rgba(225, 241, 249, 0.7)
    );

  border-color: #78a6c1;
}

.gallery-thumbnail-frame {
  position: relative;

  width: 122px;
  height: 92px;

  display: block;

  padding: 4px;

  overflow: hidden;

  background: #ffffff;

  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #849ba7;
  border-bottom: 1px solid #849ba7;

  box-shadow:
    1px 2px 4px rgba(64, 94, 110, 0.22);
}

.gallery-thumbnail-frame img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  filter:
    brightness(1.04)
    contrast(0.94)
    saturate(0.86);
}

.gallery-thumbnail-frame img.is-missing {
  display: none;
}

.gallery-thumbnail-fallback {
  position: absolute;
  inset: 4px;

  display: none;
  align-items: center;
  justify-content: center;

  color: #7c9bac;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #dbeef7
    );

  border: 1px dashed #a3bdcb;

  font-family: Georgia, serif;
  font-size: 8px;
  letter-spacing: 1px;
}

.gallery-thumbnail-fallback.is-visible {
  display: flex;
}

.gallery-thumbnail-name {
  display: -webkit-box;
  overflow: hidden;

  width: 100%;

  line-height: 1.35;

  overflow-wrap: anywhere;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}


/* ==================================================
   사진 클릭 시 뜨는 큰 보기 창
================================================== */

#gallery-photo-window {
  position: absolute !important;
  z-index: 10040 !important;

  top: 120px !important;
  left: 275px !important;

  width: 620px !important;
  height: 530px !important;

  display: none !important;
  flex-direction: column !important;

  overflow: hidden !important;

  background: #f7fafc;
}

#gallery-photo-window.is-open {
  display: flex !important;

  animation:
    gallery-photo-open
    0.14s
    ease-out;
}

@keyframes gallery-photo-open {
  from {
    opacity: 0;
    scale: 0.97;
  }

  to {
    opacity: 1;
    scale: 1;
  }
}

.gallery-viewer-content {
  flex: 1 1 auto;
  min-height: 0;

  display: flex;
  flex-direction: column;

  padding: 16px;

  overflow-y: auto;
  overflow-x: hidden;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #edf7fb
    );
}

.gallery-viewer-image-frame {
  position: relative;

  width: 100%;
  height: 350px;
  flex: 0 0 auto;

  padding: 6px;

  overflow: hidden;

  background: #dcebf3;

  border-top: 1px solid #7f929c;
  border-left: 1px solid #7f929c;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}

.gallery-viewer-image-frame img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: contain;

  background: #f9fcfe;
}

.gallery-viewer-image-frame img.is-missing {
  display: none;
}

.gallery-preview-fallback {
  position: absolute;
  inset: 6px;

  display: none;
  align-items: center;
  justify-content: center;

  padding: 15px;

  color: #7897a8;

  background:
    radial-gradient(
      circle at 50% 40%,
      #ffffff,
      #deeff7 70%
    );

  border: 1px dashed #9db9c8;

  font-family: Georgia, serif;
  font-size: 10px;
  letter-spacing: 2px;
  text-align: center;
  overflow-wrap: anywhere;
}

.gallery-preview-fallback.is-visible {
  display: flex;
}

.gallery-viewer-caption {
  padding: 14px 4px 2px;
}

.gallery-viewer-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 15px;

  margin-bottom: 9px;
}

.gallery-viewer-heading small {
  display: block;

  margin-bottom: 3px;

  color: #7895a5;

  font-size: 8px;
  letter-spacing: 2px;
}

.gallery-viewer-heading h2 {
  margin: 0;

  color: #52758a;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 19px;
  font-weight: normal;
  line-height: 1.35;
}

.gallery-viewer-heading > span {
  flex: 0 0 auto;

  color: #8198a5;

  font-size: 9px;
}

.gallery-viewer-caption p {
  margin: 0 0 11px;

  color: #536c79;

  font-size: 10px;
  line-height: 1.75;

  white-space: pre-line;
}

.gallery-viewer-file {
  display: flex;
  justify-content: space-between;
  gap: 15px;

  padding-top: 7px;

  color: #7b929f;

  border-top: 1px dotted #b0c3cd;

  font-size: 8px;
}

.gallery-album-statusbar {
  min-height: 23px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 3px 7px;

  color: #5e707a;
  background: #e4eaed;

  border-top: 1px solid #9caab2;

  font-size: 9px;
}


/* 갤러리 스크롤바를 프로필 상세창과 통일 */

.gallery-album-grid::-webkit-scrollbar,
.gallery-viewer-content::-webkit-scrollbar {
  width: 14px;
}

.gallery-album-grid::-webkit-scrollbar-track,
.gallery-viewer-content::-webkit-scrollbar-track {
  background: #e8f2f7;
  border-left: 1px solid #9eb2bd;
}

.gallery-album-grid::-webkit-scrollbar-thumb,
.gallery-viewer-content::-webkit-scrollbar-thumb {
  background:
    linear-gradient(
      to right,
      #d6e8f1,
      #afcad8
    );

  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #8299a6;
  border-bottom: 1px solid #8299a6;
}

/* ==================================================
   REVIEW 데스크톱 아이콘
   열린 기록장 + 별
================================================== */

#review-desktop-icon .review-icon {
  position: relative !important;

  width: 48px !important;
  height: 43px !important;

  overflow: visible !important;

  color: transparent !important;
  background: none !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;
}

/* 펼쳐진 기록장 */
#review-desktop-icon .review-icon::before {
  content: "";
  position: absolute;

  left: 3px;
  top: 7px;

  width: 42px;
  height: 31px;

  background:
    linear-gradient(
      90deg,
      #edf8fc 0 47%,
      #7699aa 48% 50%,
      #ffffff 51% 100%
    );

  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #607d8c;
  border-bottom: 2px solid #607d8c;

  border-radius:
    3px 3px 6px 6px;

  box-shadow:
    1px 2px 3px
    rgba(58, 88, 104, 0.3);

  transform: perspective(45px)
    rotateX(2deg);
}

/* 책갈피 */
#review-desktop-icon .review-icon::after {
  content: "";
  position: absolute;

  right: 8px;
  top: 6px;

  width: 8px;
  height: 22px;

  background:
    linear-gradient(
      to right,
      #8eb5c8,
      #5f8ca4
    );

  clip-path:
    polygon(
      0 0,
      100% 0,
      100% 100%,
      50% 75%,
      0 100%
    );

  filter:
    drop-shadow(
      1px 1px 0
      rgba(58, 88, 104, 0.25)
    );
}

/* 표지 위 별 */
#review-desktop-icon .review-icon > span {
  position: absolute;
  z-index: 2;

  left: 11px;
  top: 13px;

  display: block !important;

  color: #5f8ca4 !important;

  font-family:
    Georgia,
    serif;

  font-size: 17px;
  line-height: 1;

  text-shadow:
    1px 1px #ffffff;
}

#review-desktop-icon:hover .review-icon {
  filter: brightness(1.08);
}


/* ==================================================
   REVIEW LOG 창
================================================== */

#review-log-window {
  position: absolute !important;
  z-index: 10030 !important;

  top: 90px !important;
  left: 205px !important;

  width: 720px !important;
  height: 535px !important;

  display: none !important;
  flex-direction: column !important;

  overflow: hidden !important;

  background: #f7fafc;
}

#review-log-window.is-open {
  display: flex !important;
}

#review-log-window .window-titlebar,
#review-log-window .window-menu,
.review-filter-tabs,
.review-statusbar {
  flex: 0 0 auto;
}


/* 분류 탭 */

.review-filter-tabs {
  display: flex;
  align-items: end;
  gap: 2px;

  min-height: 37px;

  padding: 7px 8px 0;

  background:
    linear-gradient(
      to bottom,
      #f8fafb,
      #dce5e9
    );

  border-bottom: 1px solid #879ba6;
}

.review-filter {
  appearance: none;

  min-width: 70px;
  height: 28px;

  margin: 0;
  padding: 0 11px;

  color: #607887;

  background:
    linear-gradient(
      to bottom,
      #edf5f8,
      #c8dae3
    );

  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #8298a4;
  border-bottom: 0;

  border-radius: 3px 3px 0 0;

  font-family:
    Tahoma,
    "MS Gothic",
    sans-serif;

  font-size: 9px;

  cursor: pointer;
}

.review-filter:hover {
  color: #315f79;

  background:
    linear-gradient(
      to bottom,
      #ffffff,
      #d6e8f0
    );
}

.review-filter.is-active {
  position: relative;
  z-index: 1;

  height: 30px;

  color: #3f687f;
  background: #ffffff;

  font-weight: bold;

  border-bottom: 1px solid #ffffff;
}


/* 기록 목록 */

.review-entry-list {
  flex: 1 1 auto;
  min-height: 0;

  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  align-content: start;

  gap: 12px;

  padding: 15px;

  overflow-y: auto;
  overflow-x: hidden;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #edf7fb
    );
}

.review-entry-card {
  min-width: 0;
  min-height: 160px;

  display: grid;
  grid-template-columns:
    96px minmax(0, 1fr);

  gap: 13px;

  padding: 11px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(231, 243, 249, 0.92)
    );

  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #93a8b3;
  border-bottom: 1px solid #93a8b3;

  box-shadow:
    1px 2px 4px
    rgba(70, 102, 120, 0.16);
}

.review-entry-card:hover {
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #dfeff7
    );
}


/* 표지 */

.review-cover-frame {
  position: relative;

  width: 96px;
  height: 134px;

  overflow: hidden;

  padding: 4px;

  background: #dbeaf2;

  border-top: 1px solid #81949e;
  border-left: 1px solid #81949e;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}

.review-cover-frame img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  background: #f7fbfd;

  filter:
    brightness(1.04)
    contrast(0.94)
    saturate(0.82);
}

.review-cover-frame img.is-missing {
  display: none;
}

.review-cover-fallback {
  position: absolute;
  inset: 4px;

  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 6px;

  color: #7898a9;

  background:
    radial-gradient(
      circle at 50% 38%,
      #ffffff,
      #dceff7 72%
    );

  border: 1px dashed #9eb8c6;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  text-align: center;
}

.review-cover-fallback.is-visible {
  display: flex;
}

.review-cover-fallback span {
  font-size: 8px;
  letter-spacing: 2px;
}

.review-cover-fallback strong {
  color: #5c849a;

  font-size: 24px;
  font-weight: normal;
}


/* 작품 정보 */

.review-entry-information {
  min-width: 0;

  display: flex;
  flex-direction: column;
}

.review-entry-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;

  margin-bottom: 5px;

  color: #7d96a4;

  font-size: 8px;
}

.review-entry-meta > span {
  padding: 2px 5px;

  color: #53788d;
  background: #dcecf3;

  border: 1px solid #abc2ce;

  letter-spacing: 1px;
}

.review-entry-information h2 {
  overflow: hidden;

  margin: 0 0 8px;

  color: #4e7186;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 16px;
  font-weight: normal;
  line-height: 1.35;

  text-overflow: ellipsis;
  white-space: nowrap;
}


/* 0.5점 단위 별점 */

.review-rating {
  display: flex;
  align-items: center;
  gap: 7px;

  margin-bottom: 9px;
}

.review-stars {
  --rating-width: 0%;

  position: relative;

  display: inline-block;

  width: 82px;
  height: 17px;

  overflow: hidden;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 17px;
  line-height: 17px;
  letter-spacing: 0;
}

.review-stars::before,
.review-stars::after {
  content: "★★★★★";

  position: absolute;
  left: 0;
  top: 0;

  white-space: nowrap;
}

.review-stars::before {
  color: #c6d4db;
  text-shadow: 1px 1px #ffffff;
}

.review-stars::after {
  width: var(--rating-width);

  overflow: hidden;

  color: #6f9fb8;
  text-shadow: 1px 1px #ffffff;
}

.review-rating strong {
  color: #52758a;

  font-family:
    "Courier New",
    monospace;

  font-size: 11px;
  font-weight: normal;
}

.review-entry-information p {
  display: -webkit-box;
  overflow: hidden;

  margin: auto 0 0;

  color: #566d79;

  font-size: 10px;
  line-height: 1.65;

  overflow-wrap: anywhere;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}


/* 상태창 */

.review-statusbar {
  min-height: 23px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 3px 7px;

  color: #5f717b;
  background: #e4eaed;

  border-top: 1px solid #9caab2;

  font-size: 9px;
}

.review-empty-message {
  grid-column: 1 / -1;

  margin: 40px 0;

  color: #8097a4;

  text-align: center;
}


/* 프로필 상세창과 같은 스크롤바 */

.review-entry-list::-webkit-scrollbar {
  width: 14px;
}

.review-entry-list::-webkit-scrollbar-track {
  background: #e8f2f7;
  border-left: 1px solid #9eb2bd;
}

.review-entry-list::-webkit-scrollbar-thumb {
  background:
    linear-gradient(
      to right,
      #d6e8f1,
      #afcad8
    );

  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #8299a6;
  border-bottom: 1px solid #8299a6;
}

/* ==================================================
   REVIEW 아이콘 최종 위치
   왼쪽 목록이 아니라 음악창 아래의 바탕화면 폴더
================================================== */

#review-desktop-icon.review-folder-floating {
  position: absolute !important;
  z-index: 13 !important;

  left: 325px !important;
  bottom: 218px !important;

  width: 92px !important;
  margin: 0 !important;
}

#review-desktop-icon.review-folder-floating:focus-visible {
  outline: 1px dotted #54788e;
  outline-offset: 3px;
}


/* 기존 기록장 모양을 완전히 제거 */

#review-desktop-icon.review-folder-floating .review-icon {
  position: relative !important;

  width: 52px !important;
  height: 43px !important;

  overflow: visible !important;

  color: transparent !important;
  background: none !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  filter: none !important;
  transform: none !important;
}


/* 폴더 몸체 */

#review-desktop-icon.review-folder-floating .review-icon::before {
  content: "" !important;
  position: absolute !important;

  left: 2px !important;
  right: auto !important;
  top: 11px !important;
  bottom: auto !important;

  width: 46px !important;
  height: 29px !important;

  background:
    linear-gradient(
      to bottom,
      #e9f7fd 0%,
      #bddceb 42%,
      #82afc5 100%
    ) !important;

  border-top: 2px solid #ffffff !important;
  border-left: 2px solid #ffffff !important;
  border-right: 2px solid #607f8f !important;
  border-bottom: 2px solid #607f8f !important;

  border-radius: 2px 3px 5px 5px !important;

  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.48),
    1px 2px 3px rgba(55, 86, 103, 0.3) !important;

  clip-path: none !important;
  filter: none !important;
  transform: none !important;
}


/* 폴더 윗부분의 탭 */

#review-desktop-icon.review-folder-floating .review-icon::after {
  content: "" !important;
  position: absolute !important;

  left: 5px !important;
  right: auto !important;
  top: 5px !important;
  bottom: auto !important;

  width: 22px !important;
  height: 10px !important;

  background:
    linear-gradient(
      to bottom,
      #f7fcff,
      #b7d8e8
    ) !important;

  border-top: 2px solid #ffffff !important;
  border-left: 2px solid #ffffff !important;
  border-right: 2px solid #668797 !important;
  border-bottom: 0 !important;

  border-radius: 4px 5px 0 0 !important;

  clip-path: none !important;
  filter: none !important;
  transform: none !important;
  box-shadow: none !important;
}


/* 폴더 앞면의 작은 별 라벨 */

#review-desktop-icon.review-folder-floating .review-icon > span {
  position: absolute !important;
  z-index: 2 !important;

  left: 18px !important;
  top: 17px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 18px !important;
  height: 15px !important;

  color: #ffffff !important;
  background:
    linear-gradient(
      to bottom,
      #91bad0,
      #5f8fa8
    ) !important;

  border-top: 1px solid rgba(255, 255, 255, 0.9) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.9) !important;
  border-right: 1px solid #547589 !important;
  border-bottom: 1px solid #547589 !important;

  border-radius: 2px !important;

  font-family: Georgia, serif !important;
  font-size: 10px !important;
  line-height: 1 !important;

  text-shadow: 1px 1px #486a7e !important;
}


/* 마우스를 올리면 다른 데스크톱 아이콘처럼 조금 밝아짐 */

#review-desktop-icon.review-folder-floating:hover .review-icon {
  filter: brightness(1.07) !important;
}


/* 혹시 좁은 화면용 CSS가 적용되는 경우에도
   왼쪽 아이콘 묶음으로 돌아가지 않게 유지 */

@media screen and (max-width: 650px) {
  #review-desktop-icon.review-folder-floating {
    position: absolute !important;

    left: 325px !important;
    bottom: 218px !important;

    width: 92px !important;
  }
}
/* =========================
   RANDOM 나침반 아이콘
========================= */

.random-code-icon {
  position: relative;

  width: 48px;
  height: 43px;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* 나침반 본체 */
.random-code-icon::before {
  content: "";
  position: absolute;

  width: 34px;
  height: 34px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 35% 28%,
      #ffffff 0 12%,
      #e4f2f8 35%,
      #a7cadb 68%,
      #678da0 100%
    );

  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #58798a;
  border-bottom: 2px solid #58798a;

  box-shadow:
    inset 0 0 0 3px #c5dfea,
    1px 2px 3px rgba(56, 83, 98, 0.3);
}

/* 방향 눈금 */
.random-code-icon::after {
  content: "";
  position: absolute;

  width: 25px;
  height: 25px;

  border-radius: 50%;

  background:
    linear-gradient(
      to bottom,
      #7198aa 0 2px,
      transparent 2px 23px,
      #7198aa 23px 25px
    ),
    linear-gradient(
      to right,
      #7198aa 0 2px,
      transparent 2px 23px,
      #7198aa 23px 25px
    );

  opacity: 0.75;
}

/* 나침반 바늘 */
.random-compass-needle {
  position: relative;
  z-index: 2;

  width: 9px;
  height: 24px;

  background:
    linear-gradient(
      to bottom,
      #547d93 0 50%,
      #f8fdff 50% 100%
    );

  clip-path:
    polygon(
      50% 0,
      100% 50%,
      50% 100%,
      0 50%
    );

  transform: rotate(35deg);

  filter:
    drop-shadow(
      1px 1px 0 rgba(61, 88, 102, 0.35)
    );
}

/* 가운데 축 */
.random-compass-needle::after {
  content: "";
  position: absolute;

  width: 5px;
  height: 5px;

  left: 50%;
  top: 50%;

  background: #ffffff;

  border: 1px solid #527387;
  border-radius: 50%;

  transform:
    translate(-50%, -50%);
}

/* 마우스 반응 */
#random-link-icon:hover .random-code-icon {
  filter: brightness(1.08);
}

/* =====================================================
   바탕화면 가짜 게임 바로가기
===================================================== */

.fake-game-shortcuts {
  position: absolute;
  z-index: 14;

  /* 기존 위치는 memo.txt 창 뒤에 가려졌음 */
  top: 760px;
  left: 470px;

  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.fake-game-shortcut {
  appearance: none;

  width: 80px;
  min-width: 80px;

  margin: 0;
  padding: 4px 3px;

  color: #4f6b7e;
  background: transparent;

  border: 1px solid transparent;
  border-radius: 0;

  box-shadow: none;

  font: inherit;
  font-size: 9px;
  line-height: 1.3;

  cursor: default;
  user-select: none;
  touch-action: manipulation;
}

.fake-game-shortcut:hover {
  color: #315d79;

  background:
    rgba(205, 230, 243, 0.36);

  border-color:
    rgba(119, 164, 192, 0.46);
}

.fake-game-shortcut.is-selected,
.fake-game-shortcut:focus-visible {
  color: #214f6b;

  background:
    linear-gradient(
      to bottom,
      rgba(174, 212, 235, 0.78),
      rgba(222, 239, 248, 0.68)
    );

  border: 1px dotted #527f9a;

  outline: 0;
}

.fake-game-icon {
  position: relative;

  width: 50px;
  height: 50px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0 auto 3px;

  filter:
    drop-shadow(
      1px 2px 2px
      rgba(66, 94, 110, 0.28)
    );
}

.fake-game-icon img {
  display: block;

  width: 48px;
  height: 48px;

  object-fit: contain;

  user-select: none;
  -webkit-user-drag: none;
}

.fake-game-shortcut > span:last-child {
  display: -webkit-box;
  overflow: hidden;

  width: 100%;

  text-align: center;
  overflow-wrap: anywhere;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}


/* =====================================================
   가짜 게임 런처 창
===================================================== */

.fake-game-launcher {
  position: absolute;
  z-index: 70000;

  top: 185px;
  left: 240px;

  width: 520px;
  height: 350px;

  display: none;
  flex-direction: column;

  overflow: hidden;

  color: #53636d;
  background: #eef4f7;

  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #71848e;
  border-bottom: 2px solid #71848e;

  box-shadow:
    6px 9px 18px
    rgba(52, 82, 100, 0.28);
}

.fake-game-launcher.is-open {
  display: flex;
}

.fake-game-titlebar {
  flex: 0 0 27px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 2px 3px 2px 7px;

  color: #ffffff;

  background:
    linear-gradient(
      to right,
      #608cac,
      #9fc5dd,
      #dcecf4
    );

  font-size: 11px;
  font-weight: bold;
  text-shadow:
    1px 1px #54788f;

  cursor: move;
  touch-action: none;
}

.fake-game-window-controls {
  display: flex;
  gap: 2px;
}

.fake-game-window-controls span,
.fake-game-window-controls button {
  width: 19px;
  height: 18px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0;
  padding: 0;

  color: #4e5c64;
  background:
    linear-gradient(
      to bottom,
      #ffffff,
      #d5dde1
    );

  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #74858e;
  border-bottom: 1px solid #74858e;

  font-family: Arial, sans-serif;
  font-size: 10px;
  line-height: 1;

  cursor: default;
}

.fake-game-window-controls button {
  cursor: pointer;
}

.fake-game-menubar {
  flex: 0 0 auto;

  padding: 4px 8px;

  color: #566771;
  background: #eff3f4;

  border-bottom: 1px solid #a8b2b8;
}

.fake-game-launch-body {
  flex: 1 1 auto;

  display: flex;
  flex-direction: column;

  padding: 20px 22px 16px;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #eaf5fa
    );
}

.fake-game-launch-info {
  display: grid;
  grid-template-columns:
    92px minmax(0, 1fr);

  align-items: center;
  gap: 18px;

  margin-bottom: 20px;
}

.fake-game-large-icon {
  width: 86px;
  height: 86px;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #d5e9f3
    );

  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #879ba6;
  border-bottom: 1px solid #879ba6;

  box-shadow:
    inset 0 0 0 3px #edf7fb;
}

.fake-game-large-icon img {
  display: block;

  width: 66px;
  height: 66px;

  object-fit: contain;
}

.fake-game-launch-text {
  min-width: 0;
}

.fake-game-launch-text small {
  display: block;

  margin-bottom: 5px;

  color: #7793a3;

  font-size: 8px;
  letter-spacing: 2px;
}

.fake-game-launch-text h2 {
  overflow: hidden;

  margin: 0 0 5px;

  color: #4c7086;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 21px;
  font-weight: normal;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.fake-game-launch-text p {
  margin: 2px 0;

  color: #6b818e;
}

#fake-game-status {
  margin-top: 10px;

  color: #51778d;
}

.fake-game-progress-shell {
  height: 19px;

  padding: 2px;

  overflow: hidden;

  background: #ffffff;

  border-top: 1px solid #74858e;
  border-left: 1px solid #74858e;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}

.fake-game-progress {
  width: 0%;
  height: 100%;

  background:
    repeating-linear-gradient(
      to right,
      #79aeca 0 11px,
      #a9cfe2 11px 14px
    );

  transition:
    width 0.08s linear;
}

.fake-game-progress-labels {
  display: flex;
  justify-content: space-between;

  margin-top: 5px;

  color: #7b909b;
  font-size: 9px;
}

.fake-game-launch-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;

  margin-top: auto;
  padding-top: 16px;
}

.fake-game-launch-actions button {
  min-width: 82px;
  height: 27px;

  margin: 0;
  padding: 0 10px;

  color: #4c6c7e;
  background:
    linear-gradient(
      to bottom,
      #ffffff,
      #d5e7ef
    );

  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #8499a5;
  border-bottom: 1px solid #8499a5;

  font-family:
    Tahoma,
    "MS Gothic",
    sans-serif;

  font-size: 9px;

  cursor: pointer;
}

.fake-game-launch-actions button:active {
  padding-top: 1px;

  border-top-color: #8499a5;
  border-left-color: #8499a5;
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
}

.fake-game-launch-actions button:disabled {
  opacity: 0.65;
  cursor: default;
}


/* 실행 완료 후 보이는 가짜 게임 화면 */

.fake-game-running-screen {
  position: absolute;
  z-index: 5;

  top: 53px;
  left: 0;
  right: 0;
  bottom: 23px;

  overflow: hidden;

  color: #ffffff;
  background:
    radial-gradient(
      circle at 50% 38%,
      rgba(203, 235, 249, 0.6),
      transparent 20%
    ),
    linear-gradient(
      160deg,
      #284c66,
      #6f9fbb 52%,
      #d8edf6
    );

  text-align: center;
}

.fake-game-running-screen[hidden] {
  display: none !important;
}

.fake-game-screen-glow {
  position: absolute;
  inset: 0;

  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 3px,
      rgba(255, 255, 255, 0.05)
      4px
    );

  pointer-events: none;
}

.fake-game-screen-logo {
  position: absolute;

  top: 47%;
  left: 50%;

  width: 88%;

  transform:
    translate(-50%, -50%);
}

.fake-game-screen-logo > span {
  display: block;

  margin-bottom: 8px;

  color: rgba(255, 255, 255, 0.92);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 55px;

  text-shadow:
    0 0 14px
    rgba(225, 247, 255, 0.85);
}

.fake-game-screen-logo h2 {
  margin: 0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 28px;
  font-weight: normal;
  letter-spacing: 4px;

  text-shadow:
    1px 2px
    rgba(43, 77, 99, 0.65);
}

.fake-game-screen-logo p {
  margin: 8px 0 0;

  font-size: 8px;
  letter-spacing: 3px;

  opacity: 0.84;
}

#fake-game-press-start {
  position: absolute;

  left: 50%;
  bottom: 28px;

  min-width: 150px;

  padding: 6px 13px;

  color: #ffffff;
  background: transparent;

  border: 0;

  font-family:
    "Courier New",
    monospace;

  font-size: 11px;
  letter-spacing: 2px;

  text-shadow:
    1px 1px #3f6b84;

  transform:
    translateX(-50%);

  cursor: pointer;

  animation:
    fake-game-blink
    1.15s steps(2, end)
    infinite;
}

.fake-game-running-screen.is-started {
  filter:
    brightness(1.08)
    saturate(1.08);
}

@keyframes fake-game-blink {
  50% {
    opacity: 0.34;
  }
}

.fake-game-statusbar {
  flex: 0 0 23px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 3px 7px;

  color: #5e707a;
  background: #e4eaed;

  border-top: 1px solid #9caab2;

  font-size: 9px;
}


/* 작은 화면에서도 실행창은 화면 안에 표시 */

@media screen and (max-width: 700px) {
  .fake-game-shortcuts {
    position: relative !important;

    top: auto !important;
    left: auto !important;

    width: 100%;

    display: grid;
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    gap: 8px 4px;

    margin: 0 0 16px;
    padding: 0 5px;
  }

  .fake-game-shortcut {
    width: auto;
    min-width: 0;
  }

  .fake-game-launcher {
    position: fixed;

    top: 50%;
    left: 50%;

    width:
      min(520px, calc(100vw - 18px));
    height:
      min(350px, calc(100dvh - 54px));

    transform:
      translate(-50%, -50%);
  }
}



/* =====================================================
   DESKTOP APPS: ELSWORD · PAINT · GACHA · GUESTBOOK
===================================================== */

.desktop-app-shortcuts {
  position: absolute;
  z-index: 14;
  right: 25px;
  bottom: 112px;
  display: flex;
  align-items: flex-start;
  gap: 13px;
}

.desktop-app-shortcut {
  appearance: none;
  width: 82px;
  min-width: 82px;
  margin: 0;
  padding: 4px 3px;
  color: #4f6b7e;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  box-shadow: none;
  font: inherit;
  font-size: 9px;
  line-height: 1.3;
  cursor: default;
  user-select: none;
  touch-action: manipulation;
}

.desktop-app-shortcut:hover {
  color: #315d79;
  background: rgba(205, 230, 243, 0.36);
  border-color: rgba(119, 164, 192, 0.46);
}

.desktop-app-shortcut.is-selected,
.desktop-app-shortcut:focus-visible {
  color: #214f6b;
  background: linear-gradient(to bottom, rgba(174, 212, 235, 0.78), rgba(222, 239, 248, 0.68));
  border: 1px dotted #527f9a;
  outline: 0;
}

.desktop-program-icon {
  position: relative;
  width: 50px;
  height: 50px;
  display: block;
  margin: 0 auto 3px;
  filter: drop-shadow(1px 2px 2px rgba(66, 94, 110, 0.25));
}

.paint-program-icon {
  border-radius: 48% 52% 50% 47%;
  background: linear-gradient(145deg, #ffffff, #d4e9f4 70%, #9ebfd1);
  border: 1px solid #7497aa;
  transform: rotate(-7deg);
}

.paint-program-icon::after {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 4px;
  width: 15px;
  height: 7px;
  border-radius: 7px;
  background: #eaf6fb;
  border: 1px solid #7895a6;
}

.paint-palette-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid rgba(77, 103, 118, 0.42);
}

.paint-dot-one { top: 10px; left: 11px; background: #7fa9c8; }
.paint-dot-two { top: 22px; left: 8px; background: #efb7c4; }
.paint-dot-three { top: 32px; left: 18px; background: #f1d894; }

.paint-brush-mark {
  position: absolute;
  left: 28px;
  top: 5px;
  width: 6px;
  height: 39px;
  border-radius: 4px;
  background: linear-gradient(to bottom, #54788e 0 62%, #d6b58c 62%);
  transform: rotate(28deg);
  box-shadow: 1px 0 #ffffff;
}

.gacha-program-icon {
  border-radius: 10px 10px 13px 13px;
  background: linear-gradient(160deg, #ffffff, #cce5f2 58%, #7da7bd);
  border: 1px solid #668da3;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.48);
}

.gacha-program-icon::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 7px;
  height: 19px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 33%, #ffffff, #d9bce9 39%, #85a9c0 41%, #eef8fc 70%);
  border: 1px solid #6e91a4;
}

.gacha-program-icon::after {
  content: "";
  position: absolute;
  left: 15px;
  bottom: 5px;
  width: 18px;
  height: 7px;
  background: #e9f4f9;
  border: 1px solid #6f8d9d;
}

.gacha-capsule {
  position: absolute;
  z-index: 2;
  left: 19px;
  top: 14px;
  width: 12px;
  height: 18px;
  border-radius: 8px;
  background: linear-gradient(to bottom, #f0b8d8 0 50%, #f8fbfd 50%);
  border: 1px solid #758e9d;
  transform: rotate(35deg);
}

.gacha-star {
  position: absolute;
  z-index: 3;
  right: 3px;
  top: 0;
  color: #ffffff;
  font-size: 15px;
  text-shadow: 0 0 4px #6f9eb8, 1px 1px #67869a;
}

.guestbook-icon {
  position: relative;
  overflow: visible;
  color: #ffffff;
  background: linear-gradient(to right, #8fb6cb 0 47%, #e8f5fb 47% 53%, #a7cadd 53%);
  border: 1px solid #789aad;
  border-radius: 2px 5px 5px 2px;
  box-shadow: inset 4px 0 rgba(255,255,255,.35), 1px 2px 3px rgba(78,112,134,.18);
}

.guestbook-icon::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 7px;
  width: 3px;
  height: 29px;
  background: repeating-linear-gradient(to bottom, #ffffff 0 3px, transparent 3px 6px);
}

.guestbook-icon span {
  margin-left: 15px;
  font-size: 18px;
  text-shadow: 1px 1px #5f8298;
}

/* 공통 프로그램 창 */
.mini-app-window {
  position: absolute;
  z-index: 72000;
  display: none;
  overflow: hidden;
  color: #52646f;
  background: #d9e0e4;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #71848e;
  border-bottom: 2px solid #71848e;
  box-shadow: 6px 9px 18px rgba(52,82,100,.28);
}

.mini-app-window.is-open { display: flex; flex-direction: column; }

.mini-app-titlebar {
  flex: 0 0 27px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 3px 2px 7px;
  color: #ffffff;
  background: linear-gradient(to right, #608cac, #9fc5dd, #dcecf4);
  font-size: 11px;
  font-weight: bold;
  text-shadow: 1px 1px #54788f;
  cursor: move;
  touch-action: none;
}

.mini-app-window-controls { display: flex; gap: 2px; }
.mini-app-window-controls span,
.mini-app-window-controls button {
  width: 19px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  color: #4e5c64;
  background: linear-gradient(to bottom, #ffffff, #d5dde1);
  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #74858e;
  border-bottom: 1px solid #74858e;
  font-family: Arial, sans-serif;
  font-size: 10px;
  line-height: 1;
}
.mini-app-window-controls button { cursor: pointer; }

.mini-app-menubar {
  flex: 0 0 auto;
  padding: 4px 8px;
  color: #566771;
  background: #eff3f4;
  border-bottom: 1px solid #a8b2b8;
}

.mini-app-statusbar {
  flex: 0 0 23px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 7px;
  color: #5e707a;
  background: #e4eaed;
  border-top: 1px solid #9caab2;
  font-size: 9px;
}

/* Paint */
.paint-window { top: 145px; left: 175px; width: 710px; height: 535px; }
.paint-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px;
  background: #e7ecef;
  border-bottom: 1px solid #99a8b0;
}
.paint-toolbar button,
.paint-toolbar select {
  height: 25px;
  color: #536d7c;
  background: linear-gradient(to bottom, #ffffff, #d7e6ed);
  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #8499a5;
  border-bottom: 1px solid #8499a5;
  font: inherit;
  cursor: pointer;
}
.paint-toolbar button { padding: 0 9px; }
.paint-toolbar button.is-active {
  background: #c4dce8;
  border-top-color: #7f939e;
  border-left-color: #7f939e;
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
}
.paint-size-label { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.paint-workspace { min-height: 0; flex: 1 1 auto; display: flex; background: #aeb9bf; }
.paint-toolbox {
  flex: 0 0 48px;
  display: grid;
  grid-template-columns: repeat(2, 18px);
  align-content: start;
  gap: 5px;
  padding: 8px 5px;
  background: #d9e0e4;
  border-right: 1px solid #83939b;
}
.paint-color {
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  background: var(--paint-swatch);
  border: 2px solid #eef2f4;
  outline: 1px solid #7e8d95;
  cursor: pointer;
}
.paint-color.is-active { outline: 2px dotted #315d79; outline-offset: 1px; }
.paint-canvas-shell { flex: 1 1 auto; min-width: 0; overflow: auto; padding: 10px; }
#paint-canvas {
  display: block;
  width: 640px;
  max-width: none;
  height: 400px;
  background: #ffffff;
  border-top: 2px solid #718189;
  border-left: 2px solid #718189;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  cursor: crosshair;
  touch-action: none;
}

/* Gacha */
.gacha-window { top: 118px; left: 150px; width: 760px; height: 600px; }
.gacha-header {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 17px;
  color: #4f7084;
  background: radial-gradient(circle at 72% 30%, rgba(255,255,255,.95), transparent 28%), linear-gradient(125deg, #fdfefe, #d8edf7 55%, #b8d7e7);
  border-bottom: 1px solid #91aab8;
}
.gacha-header small { letter-spacing: 2px; color: #829eae; }
.gacha-header h2 { margin: 3px 0; font-family: Georgia, serif; font-size: 21px; font-weight: normal; letter-spacing: 2px; }
.gacha-header p { margin: 0; font-size: 9px; }
.gacha-currency {
  min-width: 116px;
  padding: 8px 10px;
  color: #4e7186;
  background: rgba(255,255,255,.75);
  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #7894a4;
  border-bottom: 1px solid #7894a4;
  font: inherit;
  cursor: pointer;
}
.gacha-currency b { margin-left: 7px; }
.gacha-main-panel { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 13px; background: #edf6fa; }
.gacha-results { min-height: 330px; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 9px; align-content: center; }
.gacha-results.is-single { grid-template-columns: minmax(130px, 190px); justify-content: center; }
.gacha-idle-message { grid-column: 1 / -1; align-self: center; text-align: center; color: #7894a4; }
.gacha-idle-message > span { display: block; font-size: 75px; color: #cadfea; text-shadow: 1px 1px #ffffff; }
.gacha-idle-message strong { display: block; letter-spacing: 3px; }
.gacha-idle-message p { margin: 7px 0 0; }
.gacha-result-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 5px;
  background: #ffffff;
  border: 1px solid #8fa4af;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.75), 1px 2px 4px rgba(72,101,118,.18);
  opacity: 0;
  transform: translateY(8px) scale(.97);
  animation: gacha-card-reveal .34s ease forwards;
}
.gacha-result-card.rarity-sr { border-color: #9a86b7; background: linear-gradient(150deg,#ffffff,#eee6f7); }
.gacha-result-card.rarity-ssr { border-color: #b89b59; background: linear-gradient(145deg,#fffdf4,#f7e6b9 55%,#d8ecf7); box-shadow: inset 0 0 0 2px rgba(255,255,255,.82), 0 0 8px rgba(216,181,92,.42); }
@keyframes gacha-card-reveal { to { opacity: 1; transform: none; } }
.gacha-card-rarity { position: absolute; z-index: 2; top: 7px; left: 7px; padding: 2px 4px; color: #ffffff; background: #7599ac; font-size: 8px; }
.rarity-sr .gacha-card-rarity { background: #8e79a7; }
.rarity-ssr .gacha-card-rarity { background: #ae8d44; }
.gacha-card-visual { height: 118px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(circle at 50% 35%, #ffffff, var(--card-accent) 160%); border: 1px solid rgba(100,126,141,.38); }
.gacha-card-visual img { width: 100%; height: 100%; object-fit: cover; }
.gacha-card-symbol { color: rgba(255,255,255,.96); font-size: 46px; text-shadow: 0 0 8px rgba(81,117,138,.45); }
.gacha-card-copy { min-height: 42px; padding: 6px 2px 2px; text-align: center; }
.gacha-card-copy strong, .gacha-card-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gacha-card-copy strong { color: #526e7f; font-size: 10px; }
.gacha-card-copy span { margin-top: 2px; color: #8798a1; font-size: 8px; }
.gacha-card-owned { position: absolute; right: 7px; bottom: 6px; color: #7790a0; font-size: 8px; }
.gacha-card-new { position: absolute; top: 7px; right: 7px; color: #ffffff; background: #d38da4; padding: 2px 4px; font-size: 7px; }
.gacha-controls { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; padding: 9px 11px; background: #dfe9ee; border-top: 1px solid #9aaab2; }
.gacha-controls button { min-height: 32px; padding: 0 13px; color: #526d7d; background: linear-gradient(to bottom,#ffffff,#cfdfE7); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid #7f939e; border-bottom: 1px solid #7f939e; font: inherit; cursor: pointer; }
.gacha-controls button small { display: block; font-size: 8px; }
.gacha-controls .gacha-primary-button { min-width: 115px; color: #ffffff; background: linear-gradient(to bottom,#91b9ce,#5f8aa2); text-shadow: 1px 1px #526f80; }
.gacha-pity { margin-right: auto; font-size: 9px; }
.gacha-pity strong { color: #7e6b9d; }
.gacha-collection { min-height: 330px; }
.gacha-collection-heading { display: flex; justify-content: space-between; margin-bottom: 10px; padding-bottom: 7px; border-bottom: 1px solid #b5c8d2; }
.gacha-collection-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 8px; }
.gacha-collection-card { padding: 5px; text-align: center; background: #ffffff; border: 1px solid #9eb0b9; }
.gacha-collection-card.is-locked { filter: grayscale(1); opacity: .55; }
.gacha-collection-visual { height: 76px; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; background: #dce9ef; }
.gacha-collection-visual img { width: 100%; height: 100%; object-fit: cover; }
.gacha-collection-visual span { font-size: 28px; color: #718fa1; }
.gacha-collection-card strong, .gacha-collection-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gacha-collection-card strong { font-size: 8px; }.gacha-collection-card small { color: #8797a0; font-size: 7px; }

/* Guestbook */
.guestbook-window { top: 180px; left: 235px; width: 570px; height: 505px; }
.guestbook-addressbar { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; padding: 5px 7px; background: #dfe6e9; border-bottom: 1px solid #97a6ae; }
.guestbook-addressbar > div { min-width: 0; overflow: hidden; padding: 4px 6px; color: #526b79; background: #ffffff; border-top: 1px solid #7f8d94; border-left: 1px solid #7f8d94; border-right: 1px solid #ffffff; border-bottom: 1px solid #ffffff; text-overflow: ellipsis; white-space: nowrap; }
.guestbook-addressbar button { height: 23px; font: inherit; }
.guestbook-local-mode, .guestbook-external-mode { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 12px; background: #f7fbfd; }
.guestbook-local-mode[hidden], .guestbook-external-mode[hidden] { display: none !important; }
.guestbook-local-notice { margin-bottom: 10px; padding: 7px 9px; color: #6d8390; background: #e8f3f8; border: 1px solid #b5ccd8; }
.guestbook-form { padding: 10px; background: #eef5f8; border: 1px solid #a5b8c2; }
.guestbook-form label { display: grid; grid-template-columns: 65px 1fr; align-items: start; gap: 7px; margin-bottom: 7px; font-size: 9px; letter-spacing: 1px; }
.guestbook-form input, .guestbook-form textarea { width: 100%; padding: 6px; color: #526774; background: #ffffff; border-top: 1px solid #73838b; border-left: 1px solid #73838b; border-right: 1px solid #ffffff; border-bottom: 1px solid #ffffff; font: inherit; resize: vertical; }
.guestbook-form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 9px; }
.guestbook-form-actions span { color: #82949e; font-size: 8px; }
.guestbook-form-actions button { min-width: 72px; height: 26px; color: #526d7c; background: linear-gradient(to bottom,#ffffff,#d7e6ed); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid #8499a5; border-bottom: 1px solid #8499a5; font: inherit; cursor: pointer; }
.guestbook-entry-list { display: grid; gap: 8px; margin-top: 10px; }
.guestbook-entry { padding: 9px 10px; background: #ffffff; border: 1px solid #adbec7; box-shadow: 1px 1px #e6f0f4; }
.guestbook-entry > div { display: flex; justify-content: space-between; padding-bottom: 5px; border-bottom: 1px dotted #c0cdd3; }
.guestbook-entry strong { color: #55778a; }.guestbook-entry time { color: #8c9ca4; font-size: 8px; }
.guestbook-entry p { margin: 7px 0 0; line-height: 1.6; overflow-wrap: anywhere; }
.guestbook-empty { padding: 30px 10px; color: #8a9aa3; text-align: center; }
.guestbook-external-mode { padding: 0; }
.guestbook-external-mode iframe { display: block; width: 100%; height: calc(100% - 32px); border: 0; background: #ffffff; }
.guestbook-external-mode p { margin: 0; padding: 7px; color: #72858f; background: #e9f2f6; text-align: center; }

@media screen and (max-width: 700px) {
  .desktop-app-shortcuts {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 8px 4px;
    margin: 0 0 16px;
    padding: 0 5px;
  }
  .desktop-app-shortcut { width: auto; min-width: 0; }
  .mini-app-window {
    position: fixed;
    top: 50% !important;
    left: 50% !important;
    width: min(96vw, 760px) !important;
    height: min(82dvh, 610px) !important;
    transform: translate(-50%,-50%);
  }
  .paint-window { height: min(78dvh,535px) !important; }
  .paint-toolbar { flex-wrap: wrap; }
  .paint-size-label { margin-left: 0; }
  .paint-canvas-shell { overflow: auto; }
  .gacha-results { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .gacha-collection-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .gacha-controls { flex-wrap: wrap; }
  .gacha-pity { width: 100%; }
  .guestbook-form label { grid-template-columns: 1fr; }
}


/* =====================================================
   DESKTOP APPS V2: 위치 · 그림판 Undo · 가챠 연출 · 오류 종료
===================================================== */

/* 갤러리 창 아래 빈 공간, 휴지통 왼쪽에 가로 배치 */
.desktop-app-shortcuts {
  right: 142px;
  bottom: 25px;
  gap: 5px;
}

.desktop-app-shortcut {
  width: 74px;
  min-width: 74px;
  padding-left: 1px;
  padding-right: 1px;
}

/* 그림판 Undo 비활성 상태 */
.paint-toolbar button:disabled {
  color: #98a4aa;
  background: #dfe5e8;
  cursor: default;
  text-shadow: 1px 1px #ffffff;
}

/* 엘소드 로딩 종료 오류창 */
.fake-game-running-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  color: #4f5e66;
  background: rgba(215, 225, 230, 0.96);
  text-align: left;
}

.fake-game-error-window {
  width: 385px;
  background: #eceff1;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #6e7c84;
  border-bottom: 2px solid #6e7c84;
  box-shadow: 5px 7px 15px rgba(46, 68, 81, 0.28);
}

.fake-game-error-caption {
  padding: 5px 8px;
  color: #ffffff;
  background: linear-gradient(to right, #5d88a6, #9ec1d7);
  font-size: 10px;
  font-weight: bold;
  text-shadow: 1px 1px #45677c;
}

.fake-game-error-content {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 22px 20px 17px;
  background: #f7f8f8;
}

.fake-game-error-icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #ffffff;
  background: #d24b57;
  box-shadow: inset 0 -3px rgba(111, 21, 34, 0.18), 1px 2px #ffffff;
  font-family: Arial, sans-serif;
  font-size: 31px;
  line-height: 1;
}

.fake-game-error-content strong,
.fake-game-error-content p,
.fake-game-error-content small {
  display: block;
}

.fake-game-error-content strong { margin-bottom: 6px; color: #455c69; }
.fake-game-error-content p { margin: 0 0 7px; color: #667b86; }
.fake-game-error-content small { color: #8a979e; }
.fake-game-error-footer {
  padding: 8px 12px;
  color: #72828a;
  background: #e0e6e9;
  border-top: 1px solid #a4b0b6;
  text-align: right;
  font-size: 9px;
}

/* 가챠창 전체 */
.gacha-window {
  top: 102px;
  left: 140px;
  width: 780px;
  height: 620px;
  background: #e8eaf4;
}

.gacha-header {
  position: relative;
  min-height: 106px;
  overflow: hidden;
  padding: 15px 20px;
  color: #5e5d85;
  background:
    radial-gradient(circle at 78% 20%, rgba(255,255,255,.98) 0 4%, transparent 5%),
    radial-gradient(circle at 87% 61%, rgba(255,255,255,.85) 0 2%, transparent 3%),
    linear-gradient(125deg, #fff9ff 0%, #e6dbf6 42%, #cde9f7 73%, #fff0f6 100%);
  border-bottom: 1px solid #a79dbd;
}

.gacha-header::before {
  content: "✦  ✧  ☆";
  position: absolute;
  right: 20px;
  top: 7px;
  color: rgba(126, 104, 166, .34);
  font-family: Georgia, serif;
  font-size: 34px;
  letter-spacing: 9px;
  transform: rotate(-8deg);
}

.gacha-header::after {
  content: "";
  position: absolute;
  right: 117px;
  bottom: -27px;
  width: 150px;
  height: 86px;
  border: 1px solid rgba(137,116,173,.25);
  border-radius: 50%;
  box-shadow: 0 0 0 12px rgba(255,255,255,.16), 0 0 0 24px rgba(151,198,220,.10);
  transform: rotate(-13deg);
}

.gacha-header-copy { position: relative; z-index: 2; max-width: 555px; }
.gacha-header small { color: #a1769c; font-size: 9px; letter-spacing: 3px; }
.gacha-header h2 {
  margin: 4px 0 5px;
  color: #68618d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  font-weight: normal;
  letter-spacing: 4px;
  text-shadow: 1px 1px #ffffff, 0 0 10px rgba(137,112,181,.22);
}
.gacha-header p { color: #746f91; font-size: 9px; }

.gacha-banner-badge {
  position: absolute;
  z-index: 3;
  right: 24px;
  bottom: 15px;
  width: 118px;
  padding: 7px 10px 8px;
  color: #ffffff;
  background: linear-gradient(135deg, #ca83aa, #8d82bd 58%, #6aa3c4);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 0 0 1px #8675a8, 2px 3px 7px rgba(90,75,126,.24);
  text-align: center;
  transform: rotate(-2deg);
}
.gacha-banner-badge span { display: block; margin-bottom: 1px; font-size: 15px; }
.gacha-banner-badge b { font-size: 8px; letter-spacing: 2px; }

.gacha-main-panel {
  position: relative;
  background:
    linear-gradient(rgba(255,255,255,.72), rgba(255,255,255,.72)),
    repeating-linear-gradient(45deg, #eeeaf7 0 12px, #e5f2f8 12px 24px);
}

.gacha-idle-message {
  padding: 32px 20px;
  color: #746f94;
}
.gacha-idle-stars {
  display: block;
  color: #b69ac9 !important;
  font-size: 53px !important;
  letter-spacing: 18px;
  text-shadow: 0 0 16px rgba(255,255,255,.95), 0 0 8px rgba(145,118,190,.42) !important;
}
.gacha-idle-message strong { color: #625d84; font-size: 13px; letter-spacing: 4px; }
.gacha-idle-message p { color: #8a85a4; }
.gacha-idle-message em { display: block; margin-top: 10px; color: #aa7e9e; font-size: 8px; font-style: normal; letter-spacing: 1px; }

.gacha-controls,
.gacha-result-actions {
  background: linear-gradient(to bottom, #edeaf4, #d9deeb);
  border-top: 1px solid #aaa4ba;
}

.gacha-controls[hidden],
.gacha-result-actions[hidden] { display: none !important; }

.gacha-controls button,
.gacha-result-actions button {
  border-radius: 16px;
  color: #66607f;
  background: linear-gradient(to bottom, #ffffff, #e5e2ef);
  border: 1px solid #a9a1ba;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 1px 2px rgba(82,72,111,.16);
}

.gacha-controls .gacha-primary-button,
.gacha-result-actions .gacha-primary-button {
  color: #ffffff;
  background: linear-gradient(to right, #c77fa7, #9782bd 53%, #679fc1);
  border-color: #7e72a2;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), 0 2px 5px rgba(93,72,126,.22);
  text-shadow: 1px 1px rgba(71,57,98,.7);
}

.gacha-pity strong { color: #b06f96; }

.gacha-result-actions {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 13px;
}
.gacha-result-actions button { min-height: 34px; padding: 0 18px; font: inherit; cursor: pointer; }

.gacha-results { min-height: 338px; gap: 10px; }
.gacha-result-card {
  padding: 5px;
  border-radius: 5px 5px 12px 12px;
  background: linear-gradient(150deg, #ffffff, #edf4f9);
  border: 1px solid #93a6b6;
}
.gacha-result-card::before,
.gacha-result-card::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 18px;
  height: 18px;
  border-color: rgba(255,255,255,.9);
  pointer-events: none;
}
.gacha-result-card::before { left: 3px; bottom: 3px; border-left: 1px solid; border-bottom: 1px solid; }
.gacha-result-card::after { right: 3px; top: 3px; border-right: 1px solid; border-top: 1px solid; }
.gacha-result-card.rarity-sr { background: linear-gradient(150deg,#fffaff,#eadff7 55%,#dfeaf8); }
.gacha-result-card.rarity-ssr {
  background: linear-gradient(145deg,#fffdf7,#f8e2b5 42%,#f0d5ee 72%,#d5edf8);
  border-color: #c59e4c;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.82), 0 0 12px rgba(230,182,77,.58);
  animation-name: gacha-card-reveal, gacha-ssr-card-glow;
  animation-duration: .42s, 1.8s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1, infinite;
  animation-direction: normal, alternate;
}
.gacha-card-corner { position: absolute; z-index: 3; right: 8px; bottom: 7px; color: rgba(255,255,255,.78); font-size: 12px; }
.gacha-card-rarity { border-radius: 9px; padding: 2px 7px; letter-spacing: 1px; }
.rarity-sr .gacha-card-rarity { background: linear-gradient(to right,#8b72ac,#b78cc0); }
.rarity-ssr .gacha-card-rarity { background: linear-gradient(to right,#c39131,#db8ba7,#8b84bd); }
.gacha-card-visual { height: 121px; border-radius: 3px 3px 9px 9px; }
.gacha-card-copy strong { color: #626181; }
.gacha-card-copy span { color: #968ba7; }
.gacha-card-owned { right: 9px; bottom: 8px; color: #887f96; }
.gacha-card-new { border-radius: 9px; background: linear-gradient(to right,#df7899,#bb82bc); font-weight: bold; }
.gacha-results.has-ssr { animation: gacha-results-arrive .55s ease both; }

@keyframes gacha-ssr-card-glow {
  from { box-shadow: inset 0 0 0 2px rgba(255,255,255,.82), 0 0 7px rgba(230,182,77,.42); }
  to { box-shadow: inset 0 0 0 2px rgba(255,255,255,.95), 0 0 17px rgba(235,173,87,.86), 0 0 26px rgba(205,139,204,.42); }
}
@keyframes gacha-results-arrive {
  from { opacity: 0; filter: brightness(1.6); }
  to { opacity: 1; filter: none; }
}

/* 가챠 소환 연출 */
.gacha-summon-scene {
  position: absolute;
  z-index: 30;
  top: 52px;
  left: 0;
  right: 0;
  bottom: 23px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #ffffff;
  background:
    radial-gradient(circle at 50% 45%, rgba(228,237,255,.34), transparent 21%),
    linear-gradient(145deg, #293b67, #665b95 50%, #638fa8);
}
.gacha-summon-scene[hidden] { display: none !important; }
.gacha-summon-scene::before,
.gacha-summon-scene::after {
  content: "";
  position: absolute;
  inset: -30%;
  background-image: radial-gradient(circle, rgba(255,255,255,.8) 0 1px, transparent 2px);
  background-size: 39px 39px;
  animation: gacha-starfield 9s linear infinite;
}
.gacha-summon-scene::after { background-size: 63px 63px; opacity: .42; animation-duration: 14s; animation-direction: reverse; }
.gacha-summon-scene.is-sr { background: radial-gradient(circle at 50% 45%, rgba(255,240,255,.4), transparent 24%), linear-gradient(145deg,#342d67,#8164a1 55%,#7295bd); }
.gacha-summon-scene.is-ssr { background: radial-gradient(circle at 50% 44%, rgba(255,255,225,.74), transparent 23%), linear-gradient(135deg,#4e2d68,#af6b9b 43%,#d0a85a 70%,#6e9fbd); }
.gacha-summon-flash { position: absolute; inset: 0; opacity: 0; background: #ffffff; pointer-events: none; }
.gacha-summon-scene.is-burst .gacha-summon-flash { animation: gacha-screen-flash .68s ease-out; }
.gacha-summon-sigil { position: relative; z-index: 2; width: 220px; height: 220px; display: flex; align-items: center; justify-content: center; }
.gacha-summon-ring { position: absolute; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; box-shadow: 0 0 22px rgba(221,235,255,.48), inset 0 0 18px rgba(255,255,255,.2); }
.gacha-summon-ring::before,
.gacha-summon-ring::after { content: "✦"; position: absolute; color: rgba(255,255,255,.84); font-size: 18px; }
.gacha-summon-ring::before { left: 50%; top: -12px; transform: translateX(-50%); }
.gacha-summon-ring::after { left: 50%; bottom: -12px; transform: translateX(-50%); }
.ring-one { inset: 4px; animation: gacha-spin 5.2s linear infinite; }
.ring-two { inset: 35px; border-style: dashed; animation: gacha-spin 3.4s linear infinite reverse; }
.gacha-summon-core {
  position: relative;
  z-index: 3;
  width: 94px;
  height: 94px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #ffffff;
  background: radial-gradient(circle, rgba(255,255,255,.98), rgba(190,212,255,.45) 23%, rgba(134,116,195,.2) 55%, transparent 72%);
  font-family: Georgia, serif;
  font-size: 49px;
  text-shadow: 0 0 14px #ffffff, 0 0 30px #a8cfff;
  animation: gacha-core-pulse 1.1s ease-in-out infinite alternate;
}
.gacha-summon-scene.is-ssr .gacha-summon-core { color: #fff8c8; text-shadow: 0 0 12px #ffffff, 0 0 28px #ffd477, 0 0 45px #f3a1d3; }
.gacha-summon-scene.is-burst .gacha-summon-core { animation: gacha-core-burst .7s ease-out both; }
.gacha-summon-copy { position: relative; z-index: 3; margin-top: -3px; text-align: center; text-shadow: 0 2px 5px rgba(31,30,72,.65); }
.gacha-summon-copy small { display: block; margin-bottom: 4px; font-size: 8px; letter-spacing: 4px; opacity: .82; }
.gacha-summon-copy strong { display: block; font-family: Georgia, serif; font-size: 31px; font-weight: normal; letter-spacing: 7px; }
.gacha-summon-scene.is-ssr .gacha-summon-copy strong { color: #fff4b6; font-size: 42px; text-shadow: 0 0 10px #ffffff, 0 0 24px #f1bd63, 0 2px 5px rgba(83,36,75,.7); }
.gacha-summon-copy span { display: block; margin-top: 6px; font-size: 9px; letter-spacing: 1px; }
.gacha-skip-button { position: absolute; z-index: 5; top: 13px; right: 15px; padding: 5px 11px; color: #ffffff; background: rgba(30,36,72,.38); border: 1px solid rgba(255,255,255,.65); border-radius: 15px; font: inherit; cursor: pointer; }

@keyframes gacha-spin { to { transform: rotate(360deg); } }
@keyframes gacha-starfield { to { transform: translate3d(39px,39px,0) rotate(4deg); } }
@keyframes gacha-core-pulse { from { transform: scale(.92); opacity: .82; } to { transform: scale(1.08); opacity: 1; } }
@keyframes gacha-core-burst { 0% { transform: scale(.8); } 55% { transform: scale(2.3); filter: brightness(2); } 100% { transform: scale(1.2); } }
@keyframes gacha-screen-flash { 0% { opacity: 0; } 35% { opacity: .94; } 100% { opacity: 0; } }

@media screen and (max-width: 700px) {
  .desktop-app-shortcuts {
    right: auto;
    bottom: auto;
  }
  .gacha-window { height: min(86dvh, 620px) !important; }
  .gacha-header { min-height: 122px; padding-right: 115px; }
  .gacha-banner-badge { right: 12px; width: 94px; }
  .gacha-result-actions { flex-wrap: wrap; }
  .gacha-result-actions button { flex: 1 1 150px; }
}


/* =====================================================
   V3 OVERRIDES: CUSTOM ICON SLOTS + GRAND ARCHIVE GACHA
===================================================== */

/* 아이콘 3개를 휴지통 왼쪽 아래 빈 공간에 가로 배치 */
.desktop-app-shortcuts {
  right: 185px;
  bottom: 40px;
  gap: 18px;
}

/* 사용자가 나중에 올릴 PNG 아이콘 자리 */
.custom-image-program-icon {
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
  transform: none;
}
.custom-image-program-icon::before,
.custom-image-program-icon::after { content: none; }
.desktop-program-icon-image {
  position: absolute;
  z-index: 5;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(1px 2px 2px rgba(44,63,76,.28));
}
.program-icon-fallback {
  position: absolute;
  inset: 0;
  display: block;
}
.custom-image-program-icon.has-custom-image .program-icon-fallback { display: none; }
.custom-image-program-icon.is-missing .desktop-program-icon-image { display: none; }
.custom-image-program-icon:not(.has-custom-image) .program-icon-fallback { display: block; }
.paint-icon-fallback {
  border-radius: 48% 52% 50% 47%;
  background: linear-gradient(145deg,#fff,#d4e9f4 70%,#9ebfd1);
  border: 1px solid #7497aa;
  transform: rotate(-7deg);
}
.paint-icon-fallback::after {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 4px;
  width: 15px;
  height: 7px;
  border-radius: 7px;
  background: #eaf6fb;
  border: 1px solid #7895a6;
}
.gacha-icon-fallback {
  border-radius: 8px;
  background: linear-gradient(145deg,#1c2740,#354c73 54%,#b99145);
  border: 1px solid #c6a35c;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.16), 0 0 0 1px #263651;
}
.gacha-icon-fallback::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(250,222,151,.75);
  transform: rotate(45deg);
}
.gacha-icon-fallback .gacha-capsule {
  left: 19px;
  top: 14px;
  background: linear-gradient(to bottom,#f0d68a 0 50%,#f7fbff 50%);
  border-color: #263651;
}
.gacha-icon-fallback .gacha-star { color: #ffe8a7; text-shadow: 0 0 5px #f4c25c; }

/* 페그오 계열의 무게감만 참고한 독자적인 가챠 UI */
.gacha-window {
  top: 95px;
  left: 135px;
  width: 790px;
  height: 625px;
  color: #e8e5da;
  background: #111a2d;
  border-right-color: #332f27;
  border-bottom-color: #332f27;
  box-shadow: 8px 12px 28px rgba(18,25,45,.48);
}
.gacha-titlebar {
  color: #f7f2df;
  background: linear-gradient(to right,#15233f,#344a70 62%,#9b854f);
  text-shadow: 1px 1px #111827;
}
.gacha-menubar {
  display: flex;
  align-items: center;
  gap: 18px;
  color: #d9d5c7;
  background: linear-gradient(to bottom,#283750,#18243b);
  border-bottom: 1px solid #a68b4f;
  box-shadow: inset 0 -1px rgba(255,255,255,.06);
}
.gacha-menubar span { font-size: 9px; letter-spacing: .5px; }
#gacha-sound-toggle {
  margin-left: auto;
  min-width: 68px;
  padding: 3px 8px;
  color: #f1e7c4;
  background: #17243c;
  border: 1px solid #a68b4f;
  font: inherit;
  font-size: 8px;
  cursor: pointer;
}
#gacha-sound-toggle.is-muted { color: #9da8b8; border-color: #657087; }

.gacha-header {
  position: relative;
  min-height: 150px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 18px 168px 18px 248px;
  color: #f7f2df;
  background:
    linear-gradient(90deg,rgba(9,16,31,.1),rgba(9,16,31,.72) 47%,rgba(9,16,31,.96)),
    radial-gradient(circle at 25% 46%,rgba(220,191,112,.30),transparent 23%),
    linear-gradient(130deg,#2a416a,#17243f 58%,#0d1527);
  border-bottom: 2px solid #b99a58;
  box-shadow: inset 0 -5px 18px rgba(0,0,0,.35);
}
.gacha-header::before {
  content: "";
  position: absolute;
  inset: -70px -30px;
  opacity: .24;
  background:
    repeating-radial-gradient(circle at 24% 52%,transparent 0 23px,rgba(239,216,151,.6) 24px 25px,transparent 26px 43px),
    repeating-linear-gradient(55deg,transparent 0 33px,rgba(239,216,151,.16) 34px 35px);
  transform: rotate(-7deg);
}
.gacha-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 1px;
  background: linear-gradient(90deg,transparent,#d2b96e,transparent);
}
.gacha-banner-frame {
  position: absolute;
  z-index: 2;
  left: 19px;
  top: 12px;
  width: 214px;
  height: 132px;
  overflow: hidden;
  background: linear-gradient(145deg,#293b60,#111a2d 68%,#77643a);
  border: 1px solid #d1b770;
  box-shadow: inset 0 0 0 3px rgba(9,16,31,.85), inset 0 0 0 4px rgba(209,183,112,.45), 4px 6px 14px rgba(0,0,0,.36);
  clip-path: polygon(7% 0,100% 0,100% 88%,93% 100%,0 100%,0 12%);
}
.gacha-banner-frame::before,
.gacha-banner-frame::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(232,207,135,.45);
  transform: rotate(45deg);
}
.gacha-banner-frame::before { width: 115px; height: 115px; left: 46px; top: 8px; }
.gacha-banner-frame::after { width: 74px; height: 74px; left: 67px; top: 28px; }
.gacha-banner-seal {
  position: absolute;
  z-index: 5;
  left: 12px;
  top: 10px;
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  color: #f3d88e;
  border: 1px solid #c9a854;
  border-radius: 50%;
  font-family: Georgia,serif;
  background: rgba(7,14,29,.72);
  box-shadow: 0 0 0 3px rgba(201,168,84,.13);
}
.gacha-banner-figure { position: absolute; z-index: 3; inset: 0; }
.figure-halo {
  position: absolute;
  left: 69px;
  top: 11px;
  width: 87px;
  height: 87px;
  border: 1px solid rgba(244,220,151,.62);
  border-radius: 50%;
  box-shadow: 0 0 22px rgba(242,199,96,.23), inset 0 0 19px rgba(255,255,255,.06);
}
.figure-head {
  position: absolute;
  left: 103px;
  top: 28px;
  width: 28px;
  height: 34px;
  border-radius: 52% 48% 45% 55%;
  background: linear-gradient(145deg,#d6d8dd,#8794aa 58%,#1d2a43 60%);
  box-shadow: -8px 5px 0 -4px #8d9ab0, 8px 7px 0 -5px #7b879d;
}
.figure-body {
  position: absolute;
  left: 69px;
  top: 59px;
  width: 101px;
  height: 85px;
  background: linear-gradient(105deg,transparent 0 12%,#1a2945 13% 45%,#71809b 46% 52%,#121c31 53%);
  clip-path: polygon(39% 0,61% 0,100% 100%,0 100%);
}
.figure-weapon {
  position: absolute;
  left: 153px;
  top: 17px;
  width: 5px;
  height: 124px;
  background: linear-gradient(to right,#6c788b,#f1d88f,#6d7788);
  transform: rotate(17deg);
  box-shadow: 0 0 7px rgba(242,211,126,.35);
}
.gacha-header-copy { position: relative; z-index: 4; max-width: 390px; }
.gacha-header small { color: #d8bd73; font-size: 8px; letter-spacing: 3px; }
.gacha-header h2 {
  margin: 3px 0 5px;
  color: #fffaf0;
  font-family: Georgia,"Times New Roman",serif;
  font-size: 28px;
  font-weight: normal;
  letter-spacing: 3px;
  text-shadow: 0 2px 2px #050912,0 0 12px rgba(225,195,111,.2);
}
.gacha-pickup-line {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
  padding: 4px 7px;
  color: #eee8d7;
  background: linear-gradient(90deg,rgba(174,137,65,.42),rgba(18,28,48,.1));
  border-left: 2px solid #d0ad5d;
  font-size: 9px;
}
.gacha-pickup-line span { padding: 2px 5px; color: #15213a; background: #d6b761; font-size: 8px; font-weight: bold; }
.gacha-header p { margin: 0; color: #c8cfda; font-size: 8px; }
.gacha-banner-badge {
  position: absolute;
  z-index: 6;
  right: 18px;
  bottom: 17px;
  width: 130px;
  padding: 8px 6px;
  color: #fff6d6;
  background: linear-gradient(145deg,#9f262e,#651820 62%,#24162b);
  border: 1px solid #e1c273;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.10),0 0 0 1px #4b1117,3px 4px 10px rgba(0,0,0,.35);
  text-align: center;
  transform: rotate(-1deg);
}
.gacha-banner-badge::before,
.gacha-banner-badge::after { content: "◆"; color: #ddbd6c; margin: 0 5px; }
.gacha-banner-badge small { display: block; color: #e9d7a9; font-size: 8px; letter-spacing: 2px; }
.gacha-banner-badge b { display: block; margin: -1px 0; font-family: Georgia,serif; font-size: 30px; }
.gacha-banner-badge span { display: block; font-size: 8px; letter-spacing: 1px; }

.gacha-main-panel {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 14px;
  background:
    linear-gradient(rgba(14,24,43,.94),rgba(14,24,43,.94)),
    repeating-linear-gradient(45deg,#1a2a47 0 14px,#111d34 14px 28px);
}
.gacha-main-panel::before {
  content: "";
  position: absolute;
  inset: 11px;
  border: 1px solid rgba(195,161,84,.28);
  pointer-events: none;
}
.gacha-results { position: relative; z-index: 2; min-height: 330px; gap: 10px; }
.gacha-idle-message {
  padding: 25px 20px;
  color: #c6cbd4;
  text-align: center;
}
.gacha-idle-emblem {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  margin: 0 auto 11px;
  color: #e1c574;
  border: 1px solid #b79545;
  border-radius: 50%;
  box-shadow: 0 0 0 7px rgba(183,149,69,.08),inset 0 0 21px rgba(211,177,90,.09);
  font-family: Georgia,serif;
  font-size: 30px;
  transform: rotate(45deg);
}
.gacha-idle-emblem span { transform: rotate(-45deg); }
.gacha-idle-message small { display: block; color: #c6a555; letter-spacing: 3px; }
.gacha-idle-message strong { display: block; margin-top: 4px; color: #f1ede3; font-family: Georgia,serif; font-size: 17px; letter-spacing: 3px; }
.gacha-idle-message p { margin: 8px 0 0; color: #b7beca; }
.gacha-idle-message em { display: block; margin-top: 5px; color: #838e9f; font-size: 8px; font-style: normal; }

.gacha-controls,
.gacha-result-actions {
  color: #d9d5c7;
  background: linear-gradient(to bottom,#263650,#17243a);
  border-top: 1px solid #a58a4b;
  box-shadow: inset 0 1px rgba(255,255,255,.05);
}
.gacha-controls { padding: 9px 12px; }
.gacha-controls button,
.gacha-result-actions button {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  color: #e7e3d6;
  background: linear-gradient(to bottom,#354865,#1c2b45);
  border: 1px solid #7f8794;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08),1px 2px 3px rgba(0,0,0,.25);
  clip-path: polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}
.gacha-controls button::after,
.gacha-result-actions button::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 3px;
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);
}
.gacha-controls button:hover,
.gacha-result-actions button:hover { filter: brightness(1.13); }
.gacha-controls .gacha-primary-button,
.gacha-result-actions .gacha-primary-button {
  color: #fff8dd;
  background: linear-gradient(to bottom,#b49349,#71531f 52%,#3b2b18);
  border-color: #e0c374;
  text-shadow: 1px 1px #251708;
}
.gacha-draw-button { min-width: 116px; }
.gacha-draw-button span { display: block; font-weight: bold; }
.gacha-controls button small { color: #c5c9d0; font-size: 7px; }
.gacha-controls .gacha-primary-button small { color: #f3dfab; }
.gacha-pity { margin-right: auto; color: #aeb6c3; }
.gacha-pity strong { color: #e1c16c; }
.gacha-result-actions { padding: 9px 12px; }
.gacha-statusbar { color: #b6becb; background: #111b2e; border-top-color: #59667a; }

.gacha-result-card {
  padding: 5px;
  border-radius: 0;
  color: #e8e5dc;
  background: linear-gradient(145deg,#25344f,#131e33);
  border: 1px solid #77849a;
  box-shadow: inset 0 0 0 2px #10192a,inset 0 0 0 3px rgba(255,255,255,.12),2px 3px 7px rgba(0,0,0,.35);
  clip-path: polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  transform: translateY(14px) rotateY(90deg);
  animation-name: gacha-card-flip;
  animation-duration: .52s;
  animation-timing-function: cubic-bezier(.2,.7,.2,1);
  animation-fill-mode: forwards;
}
.gacha-result-card.rarity-sr {
  background: linear-gradient(145deg,#40385a,#1d2840 65%,#665080);
  border-color: #aa92d0;
}
.gacha-result-card.rarity-ssr {
  background: linear-gradient(145deg,#514323,#17243c 48%,#6f2632 78%,#2d1b32);
  border-color: #f0d27d;
  box-shadow: inset 0 0 0 2px #171425,inset 0 0 0 3px rgba(255,243,194,.28),0 0 12px rgba(234,193,91,.63),2px 3px 8px rgba(0,0,0,.38);
  animation-name: gacha-card-flip,gacha-ssr-card-glow;
  animation-duration: .58s,1.65s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1,infinite;
  animation-direction: normal,alternate;
}
.gacha-card-ornament {
  position: absolute;
  z-index: 4;
  width: 21px;
  height: 21px;
  border-color: rgba(230,210,154,.7);
}
.gacha-card-ornament.top-left { left: 3px; top: 3px; border-left: 1px solid; border-top: 1px solid; }
.gacha-card-ornament.bottom-right { right: 3px; bottom: 3px; border-right: 1px solid; border-bottom: 1px solid; }
.gacha-card-rarity {
  min-height: 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 5px;
  color: #e9edf5;
  background: linear-gradient(90deg,#495a75,#26354e);
  border-bottom: 1px solid rgba(255,255,255,.14);
  border-radius: 0;
}
.gacha-card-rarity b { font-family: Georgia,serif; font-size: 9px; }
.gacha-card-rarity span { color: #d8c98e; font-size: 7px; letter-spacing: -1px; }
.rarity-sr .gacha-card-rarity { background: linear-gradient(90deg,#6e5d8e,#3f355f); }
.rarity-ssr .gacha-card-rarity { color: #fff5d3; background: linear-gradient(90deg,#9a7529,#762d38,#3f2e61); }
.gacha-card-visual {
  position: relative;
  height: 121px;
  overflow: hidden;
  color: #e8e5dc;
  background:
    radial-gradient(circle at 50% 38%,var(--card-accent),transparent 46%),
    linear-gradient(145deg,#2b3f61,#111a2d);
  border: 1px solid rgba(220,202,151,.35);
  border-radius: 0;
}
.gacha-card-visual::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(235,218,166,.28);
  transform: rotate(45deg) scale(.68);
}
.gacha-card-visual img { position: relative; z-index: 2; }
.gacha-card-symbol { position: relative; z-index: 2; color: #fff7df; text-shadow: 0 0 15px var(--card-accent); }
.gacha-card-class {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3px;
  color: #d6d0bf;
  background: rgba(7,13,25,.78);
  font-size: 7px;
  font-style: normal;
  letter-spacing: 2px;
  text-align: center;
}
.gacha-card-copy strong { color: #f0ede5; }
.gacha-card-copy span { color: #aeb7c4; }
.gacha-card-owned { color: #d3bf83; }
.gacha-card-new { color: #fff4c8; background: #9e2330; border-radius: 0; }
.gacha-results.has-ssr { animation: gacha-results-ssr .7s ease both; }

@keyframes gacha-card-flip {
  0% { opacity: 0; transform: translateY(14px) rotateY(90deg) scale(.92); filter: brightness(2); }
  65% { opacity: 1; transform: translateY(0) rotateY(-7deg) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) rotateY(0) scale(1); filter: none; }
}
@keyframes gacha-results-ssr {
  0% { filter: brightness(2.4) sepia(.4); }
  100% { filter: none; }
}

.gacha-collection { color: #d7dbe2; }
.gacha-collection-heading { border-bottom-color: #8c7543; }
.gacha-collection-card { color: #d5d9df; background: #17243b; border-color: #66738a; }
.gacha-collection-card.rarity-sr { border-color: #8f79b4; }
.gacha-collection-card.rarity-ssr { border-color: #d4b65e; box-shadow: 0 0 8px rgba(218,181,79,.3); }
.gacha-collection-visual { background: #0f192b; border-bottom-color: #566276; }

/* 소환 장면 */
.gacha-summon-scene {
  top: 51px;
  bottom: 23px;
  color: #f6f1df;
  background:
    radial-gradient(circle at 50% 48%,rgba(101,141,201,.22),transparent 25%),
    linear-gradient(145deg,#071020,#172945 48%,#081222);
}
.gacha-summon-scene::before {
  inset: -40%;
  opacity: .4;
  background:
    repeating-radial-gradient(circle,transparent 0 34px,rgba(225,205,145,.24) 35px 36px,transparent 37px 55px);
  animation: gacha-spin 14s linear infinite;
}
.gacha-summon-scene::after {
  inset: -10%;
  opacity: .34;
  background-image: radial-gradient(circle,rgba(255,244,200,.92) 0 1px,transparent 2px);
  background-size: 48px 48px;
  animation: gacha-starfield 8s linear infinite;
}
.gacha-summon-scene.is-sr { background: radial-gradient(circle at 50% 47%,rgba(139,104,184,.36),transparent 27%),linear-gradient(145deg,#0c1024,#33284c 55%,#132945); }
.gacha-summon-scene.is-ssr { background: radial-gradient(circle at 50% 47%,rgba(255,222,121,.52),transparent 25%),linear-gradient(135deg,#151020,#5b2633 42%,#8b6b27 68%,#152844); }
.gacha-summon-lines {
  position: absolute;
  inset: 0;
  opacity: .27;
  background: repeating-linear-gradient(90deg,transparent 0 61px,rgba(255,255,255,.14) 62px 63px);
  transform: perspective(400px) rotateX(66deg) scale(1.45);
}
.gacha-summon-sigil { width: 235px; height: 235px; }
.gacha-summon-ring { border-color: rgba(238,219,158,.72); box-shadow: 0 0 18px rgba(215,184,100,.34),inset 0 0 14px rgba(255,255,255,.08); }
.gacha-summon-ring::before,
.gacha-summon-ring::after { color: #e7cc7e; }
.ring-one { inset: 2px; animation-duration: 7s; }
.ring-two { inset: 31px; animation-duration: 4.3s; }
.ring-three { position: absolute; inset: 66px; border-style: double; animation: gacha-spin 2.7s linear infinite; }
.gacha-summon-core {
  width: 88px;
  height: 88px;
  color: #e7d28d;
  background: radial-gradient(circle,#fff8db 0 5%,rgba(213,181,96,.46) 17%,rgba(44,74,122,.24) 48%,transparent 71%);
  text-shadow: 0 0 12px #fff4c7,0 0 29px #d0a84c;
}
.gacha-summon-scene.is-phase-two .ring-one { animation-duration: 1.6s; }
.gacha-summon-scene.is-phase-two .ring-two { animation-duration: 1.15s; }
.gacha-summon-scene.is-phase-two .ring-three { animation-duration: .8s; }
.gacha-summon-scene.is-ssr .gacha-summon-core { color: #fff0a7; text-shadow: 0 0 13px #fff,0 0 31px #ffcf58,0 0 52px #d35f73; }
.gacha-summon-copy small { color: #d2be81; }
.gacha-summon-copy strong { color: #f6f0de; font-size: 27px; letter-spacing: 4px; }
.gacha-summon-scene.is-ssr .gacha-summon-copy strong { color: #fff0a1; font-size: 38px; text-shadow: 0 0 10px #fff,0 0 24px #e5ae3c,0 2px 4px #42141e; }
.gacha-summon-copy span { color: #c7cbd3; }
.gacha-skip-button { border-radius: 0; color: #eadbad; background: rgba(8,15,29,.68); border-color: #aa8d4a; }

@media screen and (max-width: 700px) {
  .desktop-app-shortcuts {
    right: auto;
    bottom: auto;
    gap: 8px;
  }
  .gacha-window { height: min(88dvh,625px) !important; }
  .gacha-header { min-height: 135px; padding: 14px 112px 14px 135px; }
  .gacha-banner-frame { left: 8px; top: 10px; width: 118px; height: 112px; }
  .gacha-banner-figure { transform: translateX(-40px) scale(.85); transform-origin: center; }
  .gacha-banner-seal { display: none; }
  .gacha-header h2 { font-size: 19px; letter-spacing: 1px; }
  .gacha-pickup-line { font-size: 7px; }
  .gacha-banner-badge { right: 7px; width: 96px; }
  .gacha-result-actions { flex-wrap: wrap; }
  .gacha-result-actions button { flex: 1 1 145px; }
}


/* =========================================================
   V4 RETRO IDOL GACHA THEME
   배경 교체:
   image/gacha/gacha-background.png 또는
   image/gacha/gacha-background.jpg 를 업로드하세요.
   PNG가 있으면 PNG를 우선 표시합니다.
   ========================================================= */
.gacha-window {
  --idol-pink: #ef9fbe;
  --idol-pink-dark: #bd638d;
  --idol-blue: #79c7d9;
  --idol-blue-dark: #3b829e;
  --idol-yellow: #f6d978;
  --idol-cream: #fffaf0;
  --idol-ink: #41556d;
  color: var(--idol-ink);
  background: #e8f5f7;
  border-color: #7d9eb1;
  box-shadow: 4px 5px 0 rgba(71,93,112,.28), 0 0 0 1px #ffffff;
}

.gacha-titlebar {
  color: #ffffff;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.13) 0 2px,transparent 2px 7px),
    linear-gradient(90deg,#65b8cf,#8acbd4 40%,#e28caf 74%,#bd668e);
  border-bottom-color: #ffffff;
  text-shadow: 1px 1px #416b83;
}

.gacha-menubar {
  color: #536c83;
  background:
    repeating-linear-gradient(135deg,rgba(121,199,217,.12) 0 5px,rgba(255,255,255,.55) 5px 10px),
    #f7fbfb;
  border-bottom: 1px solid #99bbca;
}
.gacha-menubar span { font-weight: bold; }
#gacha-sound-toggle {
  color: #ffffff;
  background: linear-gradient(#efb1c9,#cf719a);
  border-color: #a5537a;
  box-shadow: inset 1px 1px rgba(255,255,255,.55);
}
#gacha-sound-toggle.is-muted { color: #6e7f8f; background: #dce9ec; border-color: #9bb1bd; }

.gacha-header {
  min-height: 145px;
  color: #ffffff;
  background-image:
    linear-gradient(90deg,rgba(46,105,132,.76) 0%,rgba(76,134,155,.36) 43%,rgba(219,107,153,.54) 100%),
    url("image/gacha/gacha-background.png"),
    url("image/gacha/gacha-background.jpg"),
    radial-gradient(circle at 77% 34%,rgba(255,255,255,.72) 0 2px,transparent 3px),
    linear-gradient(135deg,#71c5d5 0%,#95d4d8 34%,#f3b2ca 70%,#df82aa 100%);
  background-position: center, center, center, 0 0, center;
  background-size: cover, cover, cover, 34px 34px, cover;
  border-bottom: 4px solid #ffffff;
  box-shadow: inset 0 -1px #7cafbe;
}
.gacha-header::before {
  opacity: .55;
  background:
    repeating-linear-gradient(90deg,transparent 0 14px,rgba(255,255,255,.14) 14px 15px),
    repeating-linear-gradient(0deg,transparent 0 14px,rgba(255,255,255,.10) 14px 15px);
}
.gacha-header::after {
  height: 13px;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
  background: repeating-linear-gradient(90deg,#ffffff 0 13px,#ef9fbe 13px 26px,#ffffff 26px 39px,#79c7d9 39px 52px);
}

.gacha-banner-frame {
  border: 2px solid #ffffff;
  border-radius: 50%;
  background:
    radial-gradient(circle,#fff 0 8%,#f4d4e2 9% 13%,#68b7cf 14% 21%,#fff 22% 25%,rgba(255,255,255,.32) 26% 54%,transparent 55%);
  box-shadow: 0 0 0 5px rgba(255,255,255,.27), 3px 4px 0 rgba(56,100,122,.22);
  clip-path: none;
}
.gacha-banner-frame::before,
.gacha-banner-frame::after {
  border-color: rgba(255,255,255,.78);
}
.gacha-banner-seal {
  color: #ffffff;
  background: linear-gradient(#f2afc6,#c86591);
  border-color: #ffffff;
  box-shadow: 2px 2px 0 rgba(65,85,109,.35);
  font-family: "Trebuchet MS",sans-serif;
}
.gacha-banner-figure .figure-halo {
  border-color: rgba(255,255,255,.88);
  box-shadow: 0 0 10px #ffffff;
}
.gacha-banner-figure .figure-head,
.gacha-banner-figure .figure-body,
.gacha-banner-figure .figure-weapon {
  background: rgba(255,255,255,.92);
  border-color: rgba(75,120,147,.32);
  filter: drop-shadow(2px 3px 0 rgba(50,94,118,.28));
}

.gacha-header-copy { text-shadow: 1px 2px 0 rgba(55,93,117,.48); }
.gacha-header small {
  color: #fff8b6;
  font-family: "Trebuchet MS",sans-serif;
  font-weight: bold;
  letter-spacing: 2px;
}
.gacha-header h2 {
  margin: 1px 0 5px;
  color: #ffffff;
  font-family: "Trebuchet MS",Arial,sans-serif;
  font-size: 25px;
  font-weight: bold;
  font-style: italic;
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 #4d8ba5, 4px 4px 0 rgba(188,91,133,.55);
}
.gacha-pickup-line {
  display: inline-flex;
  align-items: center;
  margin-bottom: 5px;
  padding: 3px 8px 3px 3px;
  color: #77425f;
  background: rgba(255,255,255,.9);
  border: 1px solid #ffffff;
  border-radius: 13px;
  box-shadow: 2px 2px 0 rgba(75,107,128,.26);
}
.gacha-pickup-line span {
  color: #ffffff;
  background: linear-gradient(#f0a6c2,#ca668f);
  border-radius: 10px;
}
.gacha-pickup-line b { color: #a64f79; }
.gacha-header p { color: #ffffff; text-shadow: 1px 1px #51798e; }
.gacha-banner-badge {
  color: #8b4c6e;
  background:
    repeating-linear-gradient(45deg,rgba(239,159,190,.13) 0 5px,transparent 5px 10px),
    #fffdf5;
  border: 2px solid #ffffff;
  border-radius: 4px;
  box-shadow: 3px 4px 0 rgba(60,99,122,.3), inset 0 0 0 2px #f0b2ca;
  transform: rotate(2deg);
}
.gacha-banner-badge::before,
.gacha-banner-badge::after { content: "★"; color: #ef9fbe; }
.gacha-banner-badge small { color: #548ca5; }
.gacha-banner-badge b { color: #df6e9d; font-family: "Trebuchet MS",sans-serif; }
.gacha-banner-badge span { color: #5e8da4; font-weight: bold; }

.gacha-main-panel {
  background-image:
    linear-gradient(rgba(242,250,249,.92),rgba(250,242,247,.92)),
    url("image/gacha/gacha-background.png"),
    url("image/gacha/gacha-background.jpg"),
    repeating-linear-gradient(0deg,#e7f5f6 0 17px,#dceef1 17px 18px),
    repeating-linear-gradient(90deg,transparent 0 17px,rgba(105,174,194,.14) 17px 18px);
  background-position: center,center,center,0 0,0 0;
  background-size: cover,cover,cover,auto,auto;
}
.gacha-main-panel::before {
  opacity: .35;
  background-image:
    radial-gradient(circle at 15% 22%,#ef9fbe 0 2px,transparent 3px),
    radial-gradient(circle at 75% 68%,#79c7d9 0 2px,transparent 3px);
  background-size: 42px 42px,58px 58px;
}
.gacha-idle-message {
  color: #657d91;
  text-shadow: none;
}
.gacha-idle-emblem {
  color: #ffffff;
  background: linear-gradient(135deg,#7bc6d8,#e68caf);
  border: 3px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #aad8df,3px 4px 0 rgba(76,105,126,.25);
  font-family: "Trebuchet MS",sans-serif;
  transform: none;
}
.gacha-idle-emblem span { transform: none; }
.gacha-idle-message small { color: #cf6d98; font-weight: bold; }
.gacha-idle-message strong {
  color: #4d7f98;
  font-family: "Trebuchet MS",sans-serif;
  font-style: italic;
  text-shadow: 2px 2px #ffffff;
}
.gacha-idle-message p { color: #6d8190; }
.gacha-idle-message em { color: #9b7890; }

.gacha-controls,
.gacha-result-actions {
  color: #536c83;
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.45) 0 6px,transparent 6px 12px),
    linear-gradient(#dff2f3,#f4e0e9);
  border-top: 2px solid #ffffff;
  box-shadow: inset 0 1px #9fc5d0;
}
.gacha-controls button,
.gacha-result-actions button {
  color: #4f7388;
  background: linear-gradient(#ffffff,#d8edf0);
  border: 1px solid #75a8bb;
  border-radius: 4px;
  clip-path: none;
  box-shadow: inset 1px 1px #ffffff,2px 2px 0 rgba(78,111,132,.24);
  text-shadow: none;
}
.gacha-controls button::after,
.gacha-result-actions button::after {
  left: 8px;
  right: 8px;
  background: linear-gradient(90deg,transparent,#ffffff,transparent);
}
.gacha-controls .gacha-primary-button,
.gacha-result-actions .gacha-primary-button {
  color: #ffffff;
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.12) 0 5px,transparent 5px 10px),
    linear-gradient(#eea5c0,#ca668f);
  border-color: #a84d77;
  text-shadow: 1px 1px #98476b;
}
.gacha-controls button small { color: #6f91a1; }
.gacha-controls .gacha-primary-button small { color: #fff7ca; }
.gacha-pity { color: #607c8c; }
.gacha-pity strong { color: #cf638f; }
.gacha-statusbar {
  color: #597285;
  background: #e3f0f2;
  border-top-color: #91b7c5;
}

.gacha-result-card {
  color: #536c83;
  background: linear-gradient(145deg,#ffffff,#dceef1);
  border: 1px solid #79aabd;
  border-radius: 5px;
  clip-path: none;
  box-shadow: inset 0 0 0 2px #ffffff,2px 3px 0 rgba(78,111,132,.25);
}
.gacha-result-card.rarity-sr {
  background: linear-gradient(145deg,#ffffff,#eadff3 65%,#d8eefa);
  border-color: #a688bd;
}
.gacha-result-card.rarity-ssr {
  background:
    linear-gradient(135deg,rgba(255,255,255,.86),rgba(255,255,255,.18)),
    linear-gradient(115deg,#f3a9c6,#ffe1a3,#a8e4e8,#c6adeb,#f3a9c6);
  background-size: auto,250% 250%;
  border-color: #ffffff;
  box-shadow: inset 0 0 0 2px #fff6c9,inset 0 0 0 4px rgba(235,117,163,.45),0 0 13px rgba(238,125,171,.55),2px 3px 0 rgba(78,111,132,.25);
  animation-name: gacha-card-flip,gacha-idol-rainbow;
}
.gacha-card-ornament { border-color: rgba(255,255,255,.92); }
.gacha-card-rarity {
  color: #ffffff;
  background: linear-gradient(90deg,#6fb8cb,#4b8fa8);
  border-bottom-color: #ffffff;
  border-radius: 3px 3px 0 0;
}
.gacha-card-rarity b { font-family: "Trebuchet MS",sans-serif; }
.gacha-card-rarity span { color: #fff6a8; }
.rarity-sr .gacha-card-rarity { background: linear-gradient(90deg,#aa87c2,#8170ad); }
.rarity-ssr .gacha-card-rarity { background: linear-gradient(90deg,#e575a2,#e1a15f,#72b8c8); }
.gacha-card-visual {
  background:
    radial-gradient(circle at 50% 34%,rgba(255,255,255,.95),transparent 20%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.18) 0 7px,transparent 7px 14px),
    linear-gradient(145deg,var(--card-accent),#91cbd6);
  border-color: #ffffff;
  border-radius: 2px;
}
.gacha-card-visual::after {
  inset: 9px;
  border: 1px dashed rgba(255,255,255,.7);
  border-radius: 50%;
  transform: none;
}
.gacha-card-symbol { color: #ffffff; text-shadow: 0 2px 0 rgba(88,112,133,.25),0 0 12px #ffffff; }
.gacha-card-class {
  color: #ffffff;
  background: rgba(199,90,137,.76);
  letter-spacing: 1px;
}
.gacha-card-copy strong { color: #4e7288; }
.gacha-card-copy span { color: #9a6f89; }
.gacha-card-owned { color: #5e91a7; }
.gacha-card-new { color: #ffffff; background: #e06b9b; border-radius: 2px; }
.gacha-results.has-ssr { animation: gacha-idol-results-flash .75s ease both; }

@keyframes gacha-idol-rainbow {
  from { background-position: 0 0,0% 50%; }
  to { background-position: 0 0,100% 50%; }
}
@keyframes gacha-idol-results-flash {
  0% { filter: brightness(1.9) saturate(1.5); }
  45% { filter: brightness(1.15) saturate(1.35); }
  100% { filter: none; }
}

.gacha-collection { color: #536c83; }
.gacha-collection-heading { border-bottom-color: #de8db0; }
.gacha-collection-card { color: #536c83; background: #f7fbfb; border-color: #8eb4c3; }
.gacha-collection-card.rarity-sr { border-color: #ae8fc1; }
.gacha-collection-card.rarity-ssr { border-color: #ee92b6; box-shadow: 0 0 7px rgba(238,146,182,.38); }
.gacha-collection-visual { background: #e5f2f4; border-bottom-color: #a6c7d1; }

/* 오디션/카드 공개 장면 */
.gacha-summon-scene {
  color: #ffffff;
  background:
    radial-gradient(ellipse at 20% 0%,rgba(255,255,255,.68),transparent 29%),
    radial-gradient(ellipse at 80% 0%,rgba(255,255,255,.62),transparent 29%),
    linear-gradient(145deg,#4a9fb9,#84cad4 45%,#e690b1 78%,#bd628c);
}
.gacha-summon-scene::before {
  inset: -35%;
  opacity: .46;
  background:
    repeating-conic-gradient(from 0deg,rgba(255,255,255,.24) 0 4deg,transparent 4deg 12deg);
  animation: gacha-spin 12s linear infinite;
}
.gacha-summon-scene::after {
  opacity: .65;
  background-image:
    radial-gradient(circle,#ffffff 0 1px,transparent 2px),
    radial-gradient(circle,#ffe68d 0 2px,transparent 3px);
  background-size: 36px 36px,67px 67px;
}
.gacha-summon-scene.is-sr {
  background: radial-gradient(circle at 50% 47%,rgba(255,255,255,.53),transparent 23%),linear-gradient(135deg,#8265b1,#a68bc7 43%,#71bdd2 78%,#4b8ead);
}
.gacha-summon-scene.is-ssr {
  background:
    radial-gradient(circle at 50% 46%,rgba(255,255,255,.9),transparent 20%),
    linear-gradient(120deg,#e56d9d,#f5c56e,#77c9d2,#b28bd3,#e56d9d);
  background-size: auto,260% 260%;
  animation: gacha-idol-stage-shift 1.2s linear infinite;
}
.gacha-summon-lines {
  opacity: .36;
  background:
    repeating-linear-gradient(90deg,transparent 0 59px,rgba(255,255,255,.24) 60px 61px),
    repeating-linear-gradient(0deg,transparent 0 39px,rgba(255,255,255,.16) 40px 41px);
}
.gacha-summon-sigil {
  width: 230px;
  height: 230px;
  filter: drop-shadow(0 0 11px rgba(255,255,255,.74));
}
.gacha-summon-ring {
  border-color: rgba(255,255,255,.88);
  border-style: solid;
  box-shadow: 0 0 0 5px rgba(255,255,255,.09),0 0 18px rgba(255,255,255,.65),inset 0 0 14px rgba(255,255,255,.28);
}
.gacha-summon-ring::before,
.gacha-summon-ring::after { color: #fff7a9; }
.ring-three { border-style: dotted; }
.gacha-summon-core {
  color: #ffffff;
  background: radial-gradient(circle,#fff 0 7%,#f7d57e 8% 13%,#e982aa 14% 25%,rgba(255,255,255,.18) 26% 50%,transparent 70%);
  text-shadow: 0 0 14px #ffffff,0 0 28px #ffcf71;
}
.gacha-summon-scene.is-ssr .gacha-summon-core {
  color: #fff8a7;
  text-shadow: 0 0 13px #fff,0 0 30px #fff197,0 0 51px #f35b9a;
}
.gacha-summon-copy small { color: #fff4a7; font-weight: bold; }
.gacha-summon-copy strong {
  color: #ffffff;
  font-family: "Trebuchet MS",sans-serif;
  font-style: italic;
  text-shadow: 2px 2px 0 rgba(77,106,136,.45);
}
.gacha-summon-scene.is-ssr .gacha-summon-copy strong {
  color: #ffffff;
  text-shadow: 0 0 8px #fff,2px 2px 0 #dc5c91,4px 4px 0 rgba(72,132,155,.66);
}
.gacha-summon-copy span { color: #ffffff; text-shadow: 1px 1px rgba(68,94,116,.6); }
.gacha-skip-button {
  color: #ffffff;
  background: rgba(197,87,135,.78);
  border-color: #ffffff;
  border-radius: 12px;
}
@keyframes gacha-idol-stage-shift {
  from { background-position: center,0% 50%; }
  to { background-position: center,100% 50%; }
}

@media screen and (max-width: 700px) {
  .gacha-header { padding-right: 110px; }
  .gacha-header h2 { font-size: 19px; }
  .gacha-pickup-line { max-width: 100%; }
  .gacha-pickup-line b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* =========================
   커스텀 휴지통 이미지
========================= */

#recycle-bin-icon .recycle-icon {
  width: 48px !important;
  height: 43px !important;

  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  overflow: visible !important;
}

#recycle-bin-icon .recycle-icon::before,
#recycle-bin-icon .recycle-icon::after {
  display: none !important;
}

#recycle-bin-icon .recycle-icon img {
  display: block;

  width: 48px;
  height: 43px;

  object-fit: contain;

  filter:
    drop-shadow(1px 1px 0 rgba(255, 255, 255, 0.9))
    drop-shadow(1px 2px 2px rgba(74, 105, 123, 0.22));
}
/* =========================
   Guestbook 연락처 아이콘
========================= */

#guestbook-desktop-icon .guestbook-icon {
  position: relative !important;

  width: 48px !important;
  height: 40px !important;

  margin-top: 2px !important;
  margin-bottom: 2px !important;

  overflow: visible !important;

  background:
    linear-gradient(
      to bottom,
      #f8fdff 0%,
      #d9eef7 20%,
      #a9d0e0 62%,
      #82adbf 100%
    ) !important;

  border-top: 2px solid #ffffff !important;
  border-left: 2px solid #ffffff !important;
  border-right: 2px solid #5c8192 !important;
  border-bottom: 2px solid #527487 !important;

  border-radius: 6px !important;

  box-shadow:
    inset 0 1px 3px rgba(255, 255, 255, 0.9),
    1px 2px 3px rgba(65, 95, 112, 0.28) !important;

  color: transparent !important;
}

/* 안쪽 흰색 연락처 카드 */
#guestbook-desktop-icon .guestbook-icon::before {
  content: "" !important;

  position: absolute !important;
  display: block !important;

  left: 6px !important;
  top: 7px !important;

  width: 33px !important;
  height: 25px !important;

  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.98),
      rgba(225, 242, 249, 0.96)
    ) !important;

  border-top: 1px solid #ffffff !important;
  border-left: 1px solid #ffffff !important;
  border-right: 1px solid #789dad !important;
  border-bottom: 1px solid #6e91a1 !important;

  border-radius: 2px !important;

  box-shadow:
    inset 0 0 2px rgba(104, 148, 168, 0.35) !important;
}

/* 오른쪽 주소록 탭 */
#guestbook-desktop-icon .guestbook-icon::after {
  content: "" !important;

  position: absolute !important;
  display: block !important;

  right: -4px !important;
  top: 11px !important;

  width: 8px !important;
  height: 17px !important;

  background:
    linear-gradient(
      to right,
      #dff1f8,
      #78aabd
    ) !important;

  border-top: 1px solid #ffffff !important;
  border-right: 1px solid #55798a !important;
  border-bottom: 1px solid #55798a !important;

  border-radius: 0 3px 3px 0 !important;
}

/* 사람 두 명을 담는 영역 */
#guestbook-desktop-icon .guestbook-users {
  position: absolute !important;
  z-index: 3 !important;

  display: block !important;

  left: 11px !important;
  top: 11px !important;

  width: 27px !important;
  height: 20px !important;

  margin: 0 !important;

  font-size: 0 !important;
  line-height: 0 !important;

  transform: none !important;
  text-shadow: none !important;
}

/* 사람 머리 두 개 */
#guestbook-desktop-icon .guestbook-users::before {
  content: "" !important;

  position: absolute !important;

  left: 3px !important;
  top: 1px !important;

  width: 7px !important;
  height: 7px !important;

  background: #6f9fb4 !important;

  border: 1px solid #557d90 !important;
  border-radius: 50% !important;

  box-shadow:
    12px 0 0 #99bdcc,
    12px 0 0 1px #668b9c !important;
}

/* 사람 몸 두 개 */
#guestbook-desktop-icon .guestbook-users::after {
  content: "" !important;

  position: absolute !important;

  left: 0 !important;
  bottom: 0 !important;

  width: 13px !important;
  height: 9px !important;

  background:
    linear-gradient(
      to bottom,
      #a8cad8,
      #6e9fb4
    ) !important;

  border: 1px solid #587e90 !important;
  border-radius: 7px 7px 2px 2px !important;

  box-shadow:
    12px 0 0 #bad5df,
    12px 0 0 1px #6f94a4 !important;
}