/* MUE:DESK 페이지: 틀(kit.css)의 색과 위젯 무대. 위젯 자체 모양은 mue-widgets.css(승인 시안 원본). */
.kit--mue {
  --k-bg: #04050a;
  --k-bg-2: #0a0f2e;
  --k-glow-1: #2140c4;
  --k-glow-2: #6a2fc0;
  --k-brand: #3d63f0;
  --k-brand-hover: #2f55e0;
  --k-frame: rgba(120, 150, 255, 0.11);
  --k-frame-line: rgba(190, 210, 255, 0.12);
  --k-panel-a: #0d1330;
  --k-panel-b: #3b2c8f;
  --k-band: #18236a;
  --k-foot-a: #070a1c;
  --k-foot-b: #22339c;
  --k-word: #d5e3ff;
}
.mue-sky-art { position: absolute; inset: -30% -20%; width: 140%; height: 160%; object-fit: cover; object-position: 60% 40%; opacity: 0.3; filter: blur(26px) saturate(0.8); mix-blend-mode: screen; -webkit-mask-image: radial-gradient(ellipse at 60% 45%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 60% 45%, #000 20%, transparent 75%); animation: sky-drift 40s ease-in-out infinite alternate; }
@keyframes sky-drift { from { transform: translate(-4%, -3%) rotate(-6deg) scale(1.05); } to { transform: translate(5%, 4%) rotate(8deg) scale(1.15); } }

/* 위젯 공통 바탕 (V2 web.css 의 :root·button 기본값) */
.mw { --muted: #98a2ab; --accent: #69d5f4; color: #f2f5f7; font-family: 'Segoe UI', 'Malgun Gothic', 'Pretendard Variable', sans-serif; font-size: 16px; line-height: 1.5; }
.mw button { cursor: pointer; color: inherit; font: inherit; }
.mw textarea, .mw input { font: inherit; }
.mw h3, .mw p { margin-top: 0; }
.mw a { color: inherit; }
.mw :focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ── 첫 화면: 바탕화면 무대 ── */
.desk-fit { position: relative; width: 100%; aspect-ratio: 1000 / 625; }
.desk-stage { position: absolute; top: 0; left: 0; width: 1000px; height: 625px; transform: scale(var(--s, 0.6)); transform-origin: 0 0; border-radius: 30px; overflow: hidden; border: 1px solid rgba(200, 220, 255, 0.22); box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 0.9), 0 0 0 10px rgba(255, 255, 255, 0.04); background: #02030a; }
.desk-screen { position: absolute; inset: 0; }
.desk-wall { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; opacity: 0.9; }
.desk-screen::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 40%, transparent 30%, rgba(0, 0, 0, 0.45)), linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.35)); }
.hero-w { position: absolute; z-index: 1; animation: hero-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero-w--clock { left: 34px; top: 34px; width: 351px; }
.hero-w--music { right: 96px; top: 34px; width: 330px; animation-delay: 0.08s; }
.hero-w--note { left: 44px; bottom: 116px; width: 190px; animation-delay: 0.16s; }
.hero-w--note .note { aspect-ratio: 152 / 160; padding: 46px 18px 16px; border-radius: 24px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); }
.hero-w--note p { margin: 0; font-size: 17px; line-height: 1.8; }
.hero-w--rail { right: 0; top: 50%; transform: translateY(-50%); animation-name: hero-rail; animation-delay: 0.24s; }
.hero-w--rail .sidebar-rail { gap: 16px; padding: 16px 8px; }
.hero-w--rail .glyph .ico, .hero-w--rail > div > .ico { width: 18px; height: 18px; }
.hero-w--rail img { width: 26px; height: 26px; object-fit: contain; }
.hero-w--dock { left: 50%; bottom: 22px; transform: translateX(-50%); animation-name: hero-dock; animation-delay: 0.32s; }
.hero-w--dock .dock { gap: 18px; padding: 12px 20px; border-radius: 22px; }
.hero-w--dock .dock-apps.is-static { display: flex; gap: 16px; width: auto; }
.hero-w--dock img { width: 30px; height: 30px; object-fit: contain; }
.hero-w--dock .ico { width: 20px; height: 20px; }
@keyframes hero-in { from { opacity: 0; transform: translateY(18px) scale(0.97); } }
@keyframes hero-rail { from { opacity: 0; transform: translate(30px, -50%); } }
@keyframes hero-dock { from { opacity: 0; transform: translate(-50%, 24px); } }
.mw .glyph .ico { width: 16px; height: 16px; }

/* ── 카드 패널별 배치 ── */
.theme-demo { width: min(100%, 440px); display: grid; gap: 18px; justify-items: center; }
.theme-demo .clock-widget { width: 100%; }
.theme-demo .mini-player { width: 100%; }
.timer-panel { width: min(100%, 500px); }
.timer-panel #timer-view { min-height: 260px; }
.k-seg { display: inline-flex; gap: 6px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); }
.k-seg .k-toggle { min-height: 40px; border: 0; background: transparent; }
.k-seg .k-toggle[aria-pressed='true'] { background: #fff; }
.audio-status:not(:empty) { display: block; margin-top: 6px; color: #fff; }

.note-colors { display: inline-flex; gap: 6px; align-items: center; padding: 4px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); }
.note-colors button { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; }
.note-colors i { width: 22px; height: 22px; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); transition: transform 0.2s; }
.note-colors button[aria-pressed='true'] i { outline: 2px solid #fff; outline-offset: 3px; }
.note-colors button:hover i { transform: scale(1.1); }
.pin-panel { width: min(100%, 460px); }
.pin-panel .pin-scene { height: 360px; }
.pin-panel .floating-note { width: 200px; }
.pin-panel .editable-note textarea { height: 100%; font-size: 17px; }
.float-note { width: 92px; height: 96px; border-radius: 22px; background: #ffcf78; box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.06); }
.float-note::after { content: ''; position: absolute; right: 14px; top: 12px; width: 11px; height: 11px; border-radius: 50%; background: rgba(62, 81, 76, 0.35); }

.mw .sidebar-stage { display: flex; gap: 14px; justify-content: center; align-items: center; min-height: 440px; }
@media (max-width: 520px) { .mw .sidebar-stage .sidebar-rail { display: none; } .mw .sidebar-stage .sidebar-panel { width: 100%; max-width: 280px; } }
.mw .side-link .glyph { color: #a5e1f0; }
.mw .photo-calendar { margin: 0 auto; }

/* 클리어텐은 넓게: 글이 위, 판이 아래 */
.k-card--wide { grid-template-columns: 1fr !important; }
.k-card--wide .k-card__panel { order: 2; min-height: 0; padding: clamp(12px, 3vw, 40px); }
.k-card--wide .k-card__copy { order: 1; }
@media (min-width: 900px) {
  .k-card--wide .k-card__copy { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; align-items: end; padding-bottom: 32px; }
  .k-card--wide .k-h2 { grid-row: span 2; margin: 0; }
}
.clear-wrap { width: min(100%, 900px); }
.clear-wrap .clear-game { color: #eef6f8; }

.dock-panel { position: relative; width: 100%; height: 100%; min-height: 360px; display: grid; place-items: center; }
.dock-wall { position: absolute; inset: -48px; width: calc(100% + 96px); height: calc(100% + 96px); object-fit: cover; object-position: 50% 60%; opacity: 0.55; }
.dock-panel #dock-stage { position: relative; }

/* 마지막: 실제 앱 캡처 줄 세우기 */
.lineup { align-items: flex-end; }
.lineup__item { height: auto; border-radius: 18px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.lineup__item:hover { transform: translateY(-10px); }
.lineup__item--0, .lineup__item--2, .lineup__item--4 { width: clamp(90px, 14vw, 200px); }
.lineup__item--1, .lineup__item--3 { width: clamp(76px, 11vw, 168px); }
.lineup__item--1 { transform: translateY(12px); }
.lineup__item--3 { transform: translateY(24px); }
@media (max-width: 640px) { .lineup__item--3, .lineup__item--4 { display: none; } }

/* 클리어텐: 시작 전 화면 뒤로 숫자판이 비치게 */
.mw .clear-game .ct-overlay { background: rgba(8, 12, 16, 0.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
/* 카드 바깥 틀을 디스코드처럼 한 겹 밝게 */
.kit--mue .k-card { background: linear-gradient(145deg, rgba(150, 175, 255, 0.2), rgba(90, 110, 220, 0.08) 60%, rgba(150, 120, 255, 0.14)); border-color: rgba(190, 210, 255, 0.2); }

/* 좁은 화면에서는 첫 화면 무대가 1/3 이하로 줄어 시계 숫자(SVG 글자)가 브라우저 최소 글자 크기에 걸려 제자리를 벗어난다. 이때는 눈금만 남긴다. */
@media (max-width: 700px) { .hero-w--clock .analog text { display: none; } }

/* 실제 작업 표시줄의 여섯 테마 (텀블벅 스토리의 화면 조각) */
.theme-docks { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; max-width: 30em; }
.theme-docks li { display: grid; grid-template-columns: 6.5em 1fr; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; color: var(--k-ink-2); }
.theme-docks img { width: 100%; height: auto; border-radius: 999px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); transition: transform 0.35s var(--k-ease); }
.theme-docks li:hover img { transform: translateX(4px) scale(1.02); }