/* ==========================================
   【10番：基本リセットと共通設定】
   ========================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
body, html { height: 100vh; font-family: sans-serif; background: #e6effd; overflow: hidden; }
.udo { color: #1e293b; font-weight: bold; }
.neko { color: #2563eb; font-weight: bold; }

/* ==========================================
   【20番：ログイン画面（login.php）全体枠】
   ========================================== */
#login-page { display: flex; align-items: center; justify-content: center; height: 100vh; padding: 20px; }
.login-box { background: #fff; border-radius: 15px; box-shadow: 0 4px 25px rgba(0,0,0,0.05); text-align: center; }

/* ==========================================
   【30番：ログイン画面（login.php）中身のパーツ】
   ========================================== */
#login-page .logo-area { font-size: 32px; margin-bottom: 25px; }
#login-page label { display: block; text-align: left; margin-bottom: 5px; font-weight: bold; color: #334155; font-size: 14px; }
#login-page input { width: 100%; padding: 12px; margin-bottom: 20px; border: 1px solid #cbd5e1; border-radius: 8px; }
#login-page button { width: 100%; padding: 12px; background: #2563eb; color: #fff; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; }
#login-page .footer-text { margin-top: 20px; font-size: 11px; color: #94a3b8; }

/* ==========================================
   【40番：メイン画面（index.php）レイアウト骨格】
   ========================================== */
#main-page { display: flex; height: 100vh; width: 100vw; overflow-x: auto; }
#main-page .sidebar { width: 260px; min-width: 260px; background: rgba(255,255,255,0.4); border-right: 1px solid #d1d9e6; display: flex; flex-direction: column; overflow-y: auto; }
#main-page .list-panel { width: 380px; min-width: 380px; background: #fff; border-right: 1px solid #d1d9e6; overflow-y: auto; }
#main-page .view-panel { flex: 1; min-width: 400px; padding: 30px; overflow-y: auto; }

/* ==========================================
   【50番：メイン画面（index.php）サイドバー内】
   ========================================== */
.new-mail-btn { width: 90%; margin: 10px auto; padding: 12px; background: #2563eb; color: #fff; border-radius: 30px; border: none; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
.nav-item { padding: 15px 20px; color: #475569; display: flex; align-items: center; gap: 10px; }
.nav-item.active { background: #fff; color: #2563eb; font-weight: bold; }

/* ==========================================
   【60番：新規作成モーダル】
   ========================================== */
.composer-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center; }
.composer-box { width: 90%; max-width: 600px; background: #fff; border-radius: 15px; overflow: hidden; }/* ==========================================
   【10番：基本リセットと共通設定】
   ========================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
body, html { height: 100vh; font-family: sans-serif; background: #e6effd; overflow: hidden; }
.udo { color: #1e293b; font-weight: bold; }
.neko { color: #2563eb; font-weight: bold; }

/* ==========================================
   【20番：ログイン画面（login.php）全体枠】
   ========================================== */
#login-page { display: flex; align-items: center; justify-content: center; height: 100vh; padding: 20px; }
.login-box { background: #fff; border-radius: 15px; box-shadow: 0 4px 25px rgba(0,0,0,0.05); text-align: center; }

/* ==========================================
   【40番：メイン画面（index.php）レイアウト骨格】
   ========================================== */
#main-page { display: flex; height: 100vh; width: 100vw; overflow: hidden; background: #f1f5f9; }
#main-page .sidebar { 
    width: 280px; min-width: 280px; 
    background: #1e293b; /* 濃い紺色でプロっぽく */
    color: #fff;
    display: flex; flex-direction: column; 
    padding-bottom: 30px; /* 下側に余裕を持たせる */
}
#main-page .list-panel { width: 350px; min-width: 350px; background: #fff; border-right: 1px solid #e2e8f0; overflow-y: auto; }
#main-page .view-panel { flex: 1; padding: 40px; overflow-y: auto; background: #fff; }

/* ==========================================
   【50番：メイン画面（index.php）サイドバー内】
   ========================================== */
#main-page .sidebar .logo-area { 
    padding: 40px 25px 30px; 
    font-size: 32px; /* ロゴを大きく */
    letter-spacing: 2px;
}
#main-page .sidebar .logo-area .udo { color: #fff; } /* 濃い背景なので白に */
#main-page .sidebar .logo-area .neko { color: #3b82f6; }

.new-mail-btn { 
    width: 85%; margin: 0 auto 30px; padding: 15px; 
    background: #2563eb; color: #fff; border-radius: 12px; border: none; 
    font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px;
    font-size: 16px;
}

.nav-item { padding: 15px 25px; color: #cbd5e1; display: flex; align-items: center; gap: 12px; font-size: 15px; }
.nav-item:hover { background: rgba(255,255,255,0.1); color: #fff; }
.nav-item.active { background: #2563eb; color: #fff; font-weight: bold; }

.logout-link { 
    margin-top: auto; padding: 15px 25px; 
    color: #f87171; font-weight: bold; font-size: 14px; 
    border-top: 1px solid rgba(255,255,255,0.1); /* ログアウトの上に境界線 */
    display: flex; align-items: center; gap: 10px;
}

/* ==========================================
   【50番：メイン画面（index.php）サイドバー内】
   ========================================== */
.new-mail-btn { width: 90%; margin: 10px auto; padding: 12px; background: #2563eb; color: #fff; border-radius: 30px; border: none; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
.nav-item { padding: 15px 20px; color: #475569; display: flex; align-items: center; gap: 10px; }
.nav-item.active { background: #fff; color: #2563eb; font-weight: bold; }

/* ==========================================
   【60番：新規作成モーダル】
   ========================================== */
.composer-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center; }
.composer-box { width: 90%; max-width: 600px; background: #fff; border-radius: 15px; overflow: hidden; }

/* ==========================================
   【70番：サイドバー内のメモ欄】
   ========================================== */
.sidebar-memo {
    margin: 20px; padding: 15px;
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
}
.sidebar-memo h3 { font-size: 12px; color: #94a3b8; margin-bottom: 10px; text-transform: uppercase; }
.sidebar-memo textarea {
    width: 100%; height: 100px; background: transparent; border: none;
    color: #fff; font-size: 13px; resize: none; outline: none;
    line-height: 1.5;
}
/* ==========================================
   【100番：レスポンシブ（スマホ対応 480px以下）】
   ========================================== */
@media (max-width: 480px) {
    /* ログイン画面をスマホ幅にフィット */
    .login-box { width: 95%; padding: 30px 20px; }
    #login-page .logo-area { font-size: 28px; }

    /* メイン画面のサイドバーをアイコンのみにする */
    #main-page .sidebar { width: 60px; min-width: 60px; }
    #main-page .sidebar .logo-area, 
    #main-page .sidebar .user-info, 
    #main-page .nav-item span { display: none; }
    
    /* メイン画面の一覧を広げる */
    #main-page .list-panel { flex: 1; min-width: auto; width: auto; }
    #main-page .view-panel { display: none; } /* 本文は隠す */
}

/* ==========================================
   【110番：レスポンシブ（タブレット対応 481px〜768px）】
   ========================================== */
@media (min-width: 481px) and (max-width: 768px) {
    .login-box { width: 80%; max-width: 400px; padding: 40px; }
}

/* ==========================================
   【120番：レスポンシブ（PC対応 769px以上）】
   ========================================== */
@media (min-width: 769px) {
    /* PCでは3ペイン（サイドバー・一覧・本文）をきっちり出す */
    .login-box { width: 380px; padding: 50px 40px; }
}