* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.logo {

    width: 260px;

    height: auto;

    margin-bottom: 10px;

}

.subTitle {

    margin-top: 25px;

    margin-bottom: 50px;

    font-size: 22px;

}



/* 背景 */

body {

    font-family:
        "Yu Gothic",
        "Hiragino Sans",
        sans-serif;

    background:
        linear-gradient(to bottom,
            #f7fbff,
            #eef5ff);

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 40px;

}



/* 全体カード */

.container {

    width: 100%;

    max-width: 1400px;

    background:
        rgba(255, 255, 255, 0.88);

    backdrop-filter: blur(10px);

    border-radius: 36px;

    padding: 60px;

    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.05);

}



/* タイトル */

.topArea {

    text-align: center;

}



.heart {

    font-size: 42px;

    color: #7d95d8;

}



.title {

    margin-top: 10px;

    font-size: 92px;

    font-weight: bold;

    color: #2d3c6b;

}



.subTitle {

    margin-top: 18px;

    font-size: 26px;

    color: #7d879d;

}



/* 接続ボタン */

#connectButton {

    width: 100%;

    margin-top: 40px;

    padding: 28px;

    border: none;

    border-radius: 24px;

    background:
        linear-gradient(to right,
            #5ea2ff,
            #447dff);

    color: white;

    font-size: 38px;

    font-weight: bold;

    cursor: pointer;

    transition: 0.3s;

}



#connectButton:hover {

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(68, 125, 255, 0.25);

}

.connectedButton {

    background:
        linear-gradient(to right,
            #43c96b,
            #2ea84f);

    box-shadow:
        0 6px 20px rgba(67, 201, 107, 0.25);

}

#userSelect {

    width: 100%;

    margin-top: 20px;

    padding: 18px;

    border: 2px solid #dfe7f5;

    border-radius: 16px;

    font-size: 22px;

    background: white;

    color: #2d3c6b;

}



/* メインエリア */

.mainGrid {

    margin-top: 50px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 40px;

}



/* 左 */

.leftColumn {

    display: flex;

    flex-direction: column;

    gap: 30px;

}



/* 情報カード */

.infoCard {

    background: #f9fbff;

    border-radius: 28px;

    padding: 40px;

}



.label {

    color: #96a0b5;

    font-size: 24px;

}



.statusText {

    margin-top: 16px;

    font-size: 72px;

    font-weight: bold;

}



.disconnected {

    color: #e35d5d;

}



.connected {

    color: #447dff;

}



/* 受信秒数 */

.timerText {

    margin-top: 16px;

    font-size: 42px;

    font-weight: bold;

    color: #2d3c6b;

    word-break: break-word;

}



/* 利用者名・時刻・台数 */

.smallInfo {

    margin-top: 16px;

    font-size: 36px;

    font-weight: bold;

    color: #2d3c6b;

    word-break: break-word;

}

/* SAFE / NG */

.judgeCard {

    min-height: 280px;

    border-radius: 32px;

    padding: 35px 25px;

    text-align: center;

    display: flex;

    flex-direction: column;

    justify-content: center;

    transition: 0.3s;

}



.judgeLabel {

    font-size: 24px;

    color: #97a1b6;

}



#judge {

    margin-top: 18px;

    font-size: 120px;

    font-weight: bold;

}



#message {

    margin-top: 18px;

    font-size: 30px;

    color: #6e7890;

}



/* フッター */

.footer {

    margin-top: 30px;

    text-align: center;

    color: #a0aac0;

    font-size: 22px;

}



/* ---------------- */
/* タブレット */
/* ---------------- */

@media (max-width: 1000px) {

    .container {

        padding: 40px;

    }



    .title {

        font-size: 68px;

    }



    .subTitle {

        font-size: 20px;

    }



    #connectButton {

        font-size: 30px;

        padding: 22px;

    }



    .statusText {

        font-size: 54px;

    }



    .timerText {

        font-size: 42px;

    }



    .smallInfo {

        font-size: 28px;

    }



    #judge {

        font-size: 88px;

    }



    #message {

        font-size: 22px;

    }

}



/* ---------------- */
/* スマホ */
/* ---------------- */

@media (max-width: 768px) {

    body {

        padding: 16px;

    }



    .container {

        padding: 28px;

        border-radius: 28px;

    }



    .title {

        font-size: 48px;

    }



    .subTitle {

        font-size: 16px;

    }



    #connectButton {

        margin-top: 30px;

        font-size: 24px;

        padding: 18px;

    }



    .mainGrid {

        grid-template-columns:
            1fr;

    }



    .infoCard {

        padding: 26px;

    }



    .label {

        font-size: 16px;

    }



    .statusText {

        font-size: 42px;

    }



    .timerText {

        font-size: 30px;

    }



    .smallInfo {

        font-size: 24px;

    }



    .judgeCard {

        min-height: 220px;

        padding: 25px 15px;

    }



    #judge {

        font-size: 72px;

        font-weight: bold;

        line-height: 1.1;

    }



    #message {

        font-size: 16px;

        margin-top: 10px;

    }



    .footer {

        font-size: 16px;

    }

    .rightColumn {

        display: flex;

        flex-direction: column;

        gap: 20px;

    }

    .alertCard {

        margin-top: 0;

    }

    .logCard {

        margin-top: 20px;

    }

    .leftColumn {

        gap: 20px;

    }

}

/* ===================== */
/* 利用者名・BLEタグID */
/* ===================== */

#userName,
#tagId {

    margin-top: 16px;

    font-size: 36px;

    font-weight: bold;

    color: #2d3c6b;

    word-break: break-word;

}



/* ===================== */
/* 異常通知 */
/* ===================== */

.alertCard {

    margin-top: 30px;

    background: #fffafa;

    border: 2px solid #ffdede;

    border-radius: 28px;

    padding: 30px;

}



#alertList {

    margin-top: 16px;

    font-size: 28px;

    font-weight: bold;

    color: #d84b4b;

}



/* ===================== */
/* 検知ログ */
/* ===================== */

.logCard {

    margin-top: 40px;

    background: #f9fbff;

    border-radius: 28px;

    padding: 35px;

    min-height: 600px;

}



#logList {

    margin-top: 20px;

    max-height: 500px;

    overflow-y: auto;

    font-size: 22px;

    line-height: 1.8;

    color: #2d3c6b;

}

#logList::-webkit-scrollbar {

    width: 8px;

}

#logList::-webkit-scrollbar-thumb {

    background: #cfd8ea;

    border-radius: 999px;

}

#logList::-webkit-scrollbar-track {

    background: transparent;

}



/* ログ1件 */

.logItem {

    padding: 4px 0;

    border-bottom: 1px solid #e6edf8;

}

/* NGログだけ赤文字 */

.ngLog {

    color: #e35d5d;

}

.logCount {

    margin-top: 12px;

    color: #7d879d;

    font-size: 20px;

    font-weight: 600;

}

.logTime {

    font-size: 19px;

    font-weight: 600;

    color: #5b6f99;

}

.logUser {

    font-size: 20px;

    font-weight: bold;

    color: #2d3c6b;

    margin-top: 4px;

    line-height: 1.3;

}

/* ログ状態 */

.logStatus {

    margin-top: 6px;

    font-size: 28px;

    font-weight: bold;

    line-height: 1.2;

}

.logSafe {

    color: #39a65a;

    font-weight: 800;

}

.logRecover {

    color: #447dff;

    font-weight: 800;

}

.logDisconnect {

    color: #e35d5d;

    font-weight: 800;

}

.searchArea {

    margin-top: 15px;

    margin-bottom: 25px;

}

#userSearch {

    width: 100%;

    padding: 16px 20px;

    border: 2px solid #dfe7f5;

    border-radius: 16px;

    font-size: 18px;

    background: white;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.03);

}

#userSearch:focus {

    outline: none;

    border-color: #447dff;

}

.logDateHeader {

    margin: 20px 0 15px 0;

    padding-bottom: 8px;

    display: inline-block;

    border-bottom: 2px solid #5b6f99;

    font-size: 16px;

    font-weight: bold;

    color: #5b6f99;

}

.alertLabel {

    font-size: 18px;

    color: #888;

    font-weight: normal;

}

.alertTime {

    font-size: 18px;

    color: #7d879d;

    margin-top: 10px;

}

/* ===================== */
/* 利用者一覧 */
/* ===================== */

#userList {

    margin-top: 20px;

    display: flex;

    flex-direction: column;

    gap: 15px;

}

.userCard {

    background: white;

    border-radius: 18px;

    padding: 12px;

    border: 2px solid #edf2fb;

}

.userName {

    font-size: 22px;

    font-weight: bold;

    color: #2d3c6b;

}

.userTag {

    margin-top: 4px;

    color: #7d879d;

    font-size: 14px;

}

.userTime {

    margin-top: 10px;

    font-size: 15px;

    color: #5b6f99;

}

.userSafe {

    border-left: 8px solid #43c96b;

}

.userNg {

    border-left: 8px solid #e35d5d;

}

.userStatusSafe {

    margin-top: 8px;

    font-size: 16px;

    font-weight: bold;

    color: #43c96b;

}

.userStatusNg {

    margin-top: 8px;

    font-size: 16px;

    font-weight: bold;

    color: #e35d5d;

}

/* ===================== */
/* スマホ用追加 */
/* ===================== */

@media (max-width: 768px) {

    #userName,
    #tagId {

        font-size: 28px;

        line-height: 1.3;

    }

    #alertList {

        font-size: 20px;

    }

    #logList {

        max-height: 650px;

        overflow-y: auto;

        padding-right: 8px;

    }

}

/* ===================== */
/* 小型スマホ対応 */
/* ===================== */

@media (max-width: 480px) {

    #judge {

        font-size: 64px;

        line-height: 1.1;

        word-break: keep-all;

    }

    #message {

        font-size: 16px;

    }

    .judgeCard {

        min-height: 250px;

        padding: 25px 12px;

    }

    .alertCard {

        padding: 20px;

    }

    .logCard {

        padding: 20px;

    }

}