* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* 全ての要素にボックスサイジングを適用 */
}

/* --- 基本設定 --- */
body {
    /* XPで標準的だったフォントを指定 */
    font-family: 'Tahoma', 'Verdana', sans-serif;
    font-size: 11px;
    /* XPのデフォルトの壁紙の色をイメージ */
    background-color: #3A6EA5;
    /* ポップアップを画面中央に配置 */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    color: #000000;

    overflow: hidden;
}

/* --- ポップアップウィンドウ全体 --- */
.xp-window {
    position: absolute;
    width: 420px;
    border: 1px solid #003399;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
    background-color: #ECE9D8;
    /* XPのウィンドウの基本色 */
    padding: 2px;
    border-radius: 3px;
    /* わずかに角を丸める */
}

/* --- タイトルバー --- */
.xp-title-bar {
    /* XP特有の青いグラデーション */
    background: linear-gradient(to bottom, #0058e5, #0045b6);
    padding: 4px 5px;
    color: white;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: default;
    /* ドラッグできないことを示すカーソル */
    user-select: none;
    /* テキスト選択を無効化 */
}

.xp-title-text {
    display: flex;
    align-items: center;
}

/* ウィンドウのアイコン */
.xp-icon {
    width: 16px;
    height: 16px;
    margin-right: 5px;
    /* XPのデフォルトアイコンをBase64で埋め込み */
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACDSURBVDhPY2AYRYAxgLpAFiYKwPz//z8D6688+M8AUgAlvwEEYiCsAsQ+gBgoB8Q+gBgoBwQ2gAQGyiGgLgT1gAA/QLsBBDaA1AQIEAyoAYQhAIGBMBQECBAEIAYGg2ECAAGEAACGQEiAEQwGwwQIEBAAAAMADs5EeHlSSa4AAAAASUVORK5CYII=');
    background-size: contain;
}

/* --- タイトルバーのボタン群 --- */
.xp-title-buttons {
    display: flex;
}

.xp-title-button {
    width: 21px;
    height: 21px;
    border: 1px solid #FFFFFF;
    border-right-color: #000000;
    border-bottom-color: #000000;
    margin-left: 2px;
    color: white;
    font-family: 'Courier New', monospace;
    /* ボタンの記号に適したフォント */
    font-weight: bold;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    padding-bottom: 2px;
    /* 記号の位置を微調整 */
}

/* ボタンにマウスを乗せたときの効果 */
.xp-title-button:hover {
    filter: brightness(1.2);
}

/* ボタンをクリックしたときの効果 */
.xp-title-button:active {
    border-top-color: #000000;
    border-left-color: #000000;
    border-right-color: #FFFFFF;
    border-bottom-color: #FFFFFF;
    filter: brightness(0.9);
}

/* 各ボタンの背景色 */
.xp-title-button.minimize,
.xp-title-button.maximize {
    background-color: #0058e5;
}

/* 閉じるボタンは赤色に */
.xp-title-button.close {
    background-color: #e81123;
}

.xp-title-button.close:hover {
    background-color: #f15560;
}

.xp-title-button.close:active {
    background-color: #c10b1a;
}

/* --- コンテンツエリア --- */
.xp-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.xp-message-area {
    display: flex;
    align-items: center;
    text-align: left;
    width: 100%;
}

/* 情報アイコン */
.xp-info-icon {
    width: 32px;
    height: 32px;
    margin-right: 20px;
    /* XPの情報アイコンをBase64で埋め込み */
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAB3RJTUUH4goEDgwn7LLgowAAAAF0Uk5TAEDm2GYAAAGGSURBVFjD7ZfPS8NAGIe/CAsyKCIoCB4EBxFEBEEvHjx58CfoJ/AD+Cn+A/oT9F/QewkeBEEQBEEQBEHw4EFBQYQUffDuS1VhqxPzYJc/bJL7fe/d3d2dhzVNM0Kijf/gRAiFQsF1XX+IkI/h6Sr2r3ZIpVIysj7P4XA4V1X9z8wh5Xg8ftbpdN7a7/e7EJ+fn0eKxWJzc3NzE4jFYn8uFouN9Xq9J9VqtV3g+Ph4Bcnj8VwjI+Pz87Pq9XoL0O/39zzPWyRra2uLz+fzS2YymQR4c3NzA6Srq6uLzWbzTjKZTCcAb29vX+VyuRjdbrcfzGazB7q7u3taVdWr3W73GNRqta93u91PdbvdfVWr1ve73W4/lMvlz1VVe85ms/u7u7u7tVqtP2VlZZ2LRqP6+vr6BwB+fHx8ptPpXG1tbc8yGo0+qaur6/e4uLg4kclk/gAyFAoFnU6nuxoNf3x8vMnkP0AgEKhWq6WjRoNvb2//B4+Pj1er1W5YLFZ2cXExA9Dp6alUKtUPsFgsdgB4eXn5USqVagZyuVwSiUT6USqV2gA8PDw8lUqlWq1WqwEeHh5GfX19KxaL/R9MJsPhcHBxcXFnZ2dnANjZ2YmCg4N5aWlpBOx2u7u7u7uGQqEII5FInMlkunA4HLa2tvbR0dHRjI6ORg4ODvYQEZ2dnVVVVWUQERNRUlJSXl5eXkZERETMzMxUV1dXR0REREQ4ODgQEREREZqampqbm5sjpKenp7e3t/8DkpKS0tfX1zciIiIiDAwMDBQUFAwNDQ0PDw8MDAwMNDQ0JCQkJCcnp/QA/wH5eXnoFvsb5gAAAABJRU5ErkJggg==');
    background-size: contain;
    flex-shrink: 0;
}

/* --- ボタンエリア --- */
.xp-button-pane {
    margin-top: 25px;
}

/* OKボタンなどのスタイル */
.xp-action-button {
    width: 85px;
    height: 25px;
    border: 1px solid #000000;
    border-top-color: #FFFFFF;
    border-left-color: #FFFFFF;
    background-color: #ECE9D8;
    padding-bottom: 2px;
    cursor: pointer;
    font-family: 'Tahoma', 'Verdana', sans-serif;
    /* ボタン内のフォントも統一 */
    font-size: 11px;
}

/* フォーカスが当たった時の点線の枠 */
.xp-action-button:focus {
    outline: 1px dotted #000000;
    outline-offset: -4px;
    /* 枠を内側に表示 */
}

/* クリックした時の凹む効果 */
.xp-action-button:active {
    background-color: #E0DCD1;
    border-top-color: #000000;
    border-left-color: #000000;
    border-right-color: #FFFFFF;
    border-bottom-color: #FFFFFF;
    outline: none;
    /* active時は点線を消す */
}