:root {
    --bg-blue-top: #5ac8fa;
    --bg-blue-mid: #007aff;
    --bg-blue-bottom: #004a99;
    --window-bg: rgba(255, 255, 255, 0.72);
    --bar-bg: rgba(255, 255, 255, 0.25);
    --blur-val: blur(25px);
}

body, html {
    margin: 0; padding: 0; height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow: hidden;
    background: linear-gradient(135deg, var(--bg-blue-top) 0%, var(--bg-blue-mid) 50%, var(--bg-blue-bottom) 100%);
    user-select: none;
}

/* --- Menu Bar --- */
.menu-bar {
    height: 28px;
    background: var(--bar-bg);
    backdrop-filter: var(--blur-val);
    display: flex;
    align-items: center;
    padding: 0 15px;
    position: fixed;
    top: 0; width: 100%; z-index: 2000;
    box-shadow: 0 1px 10px rgba(0,0,0,0.1);
}
.apple-logo { font-weight: bold; margin-right: 20px; color: white; }
.menu-list { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; }
.menu-list li {
    color: white; font-size: 13px; font-weight: 500;
    cursor: pointer; padding: 2px 8px; border-radius: 4px;
}
.menu-list li:hover { background: rgba(255, 255, 255, 0.2); }

/* --- Desktop --- */
.desktop {
    height: 100%; padding: 60px 30px;
    display: flex; flex-direction: column; align-items: flex-end;
}
.desktop-icon {
    width: 80px; display: flex; flex-direction: column; align-items: center;
    cursor: pointer; color: white; text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.desktop-icon-shape {
    width: 68px; height: 68px;
    background: linear-gradient(135deg, #e6e6e6 0%, #b3b3b3 100%);
    border-radius: 15px; display: flex; align-items: center; justify-content: center;
    font-size: 38px; margin-bottom: 6px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    border: 0.5px solid rgba(255,255,255,0.2);
}
.desktop-icon span { font-size: 12px; font-weight: 500; }

/* --- Window --- */
.window {
    position: absolute;
    top: 150px; left: 50%;
    transform: translateX(-50%);
    width: 960px; height: 540px;
    min-width: 300px;  /* 最小サイズを指定 */
    min-height: 200px;

    /* リサイズ設定 */
    resize: both;
    overflow: auto;
    
    background: var(--window-bg);
    backdrop-filter: var(--blur-val);
    border-radius: 12px;
    box-shadow: 0 30px 70px rgba(0,0,0,0.3);
    display: none;
    flex-direction: column;
    z-index: 1000;
    /* transition: transform 0.3s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.3s; */
    border: 0.5px solid rgba(255,255,255,0.3);
}
.window.active { display: flex; transform: translateX(-50%) scale(1); opacity: 1; }

.window-header {
    height: 38px; display: flex; align-items: center;
    padding: 0 15px; cursor: grab; background: rgba(0,0,0,0.02);
}
.window-header:active { cursor: grabbing; }


/* ウィンドウ内コンテンツがリサイズに追従するように調整 */
.window-content {
    padding: 25px;
    flex-grow: 1;
    overflow-y: auto;
    /* リサイズハンドルと重ならないようにpadding-rightを追加 */
    padding-right: 35px;
}

.window::-webkit-resizer {
    background: transparent;
    cursor: nwse-resize;
}

.traffic-lights { display: flex; gap: 8px; width: 60px; }
.light { width: 12px; height: 12px; border-radius: 50%; }
.red { background: #ff5f56; cursor: pointer; border: 0.5px solid #e0443e; }
.yellow { background: #ffbd2e; border: 0.5px solid #dea123; }
.green { background: #27c93f; border: 0.5px solid #1aab29; }

.window-title { flex-grow: 1; text-align: center; font-size: 13px; font-weight: 600; color: #444; margin-right: 60px; }
.window-content { padding: 25px; overflow-y: auto; color: #222; flex-grow: 1; line-height: 1.5; }

/* --- Dock --- */
.dock-wrapper { position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 2000; }
.dock {
    background: var(--bar-bg); backdrop-filter: var(--blur-val);
    padding: 8px; border-radius: 22px; display: flex; gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.dock-item {
    width: 52px; height: 52px; background: white; border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.1, 0.9, 0.2, 1);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.dock-item:hover { transform: scale(1.3) translateY(-12px); margin: 0 8px; }