body {
    font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f9;
    color: #333;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    background: white;
    min-height: 100vh;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #007bff;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

h1, h2 {
    margin: 0;
    color: #007bff;
}

button {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}

.btn-primary {
    background-color: #007bff;
    color: white;
}

    .btn-primary:hover {
        background-color: #0056b3;
    }

.btn-secondary {
    background-color: #6c757d;
    color: white;
}

.btn-success {
    background-color: #28a745;
    color: white;
}

.btn-logout {
    background-color: #dc3545;
    color: white;
}

input[type="text"], input[type="password"] {
    width: 100%;
    padding: 10px;
    margin: 5px 0 15px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

/* .video-wrapper ºÎºÐ¿¡ cursor ¼Ó¼º Ãß°¡ */
.video-wrapper {
    /* ±âÁ¸ ¼Ó¼º À¯Áö */
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    background: #000;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* [Ãß°¡] ¸¶¿ì½º Ä¿¼­ ¸ð¾ç º¯°æ (¼Õ¹Ù´Ú) */
    cursor: grab;
}

/* µå·¡±× ÁßÀÏ ¶§ Ä¿¼­ ¸ð¾ç (¿òÄÑÁå ¼Õ) */
.video-wrapper:active {
    cursor: grabbing;
}

video {
    /* [Áß¿ä] ¿µ»ó ÀÚü Å©±â´Â ÄÁÅ×À̳ʸ¦ ²Ë ä¿ì°Ô ½ÃÀÛ */
    width: 100%;
    height: 100%;
    object-fit: cover; /* ȤÀº contain */
    transition: transform 0.3s ease; /* ºÎµå·¯¿î ȸÀü È¿°ú */
    /* [Ãß°¡] ¼±¸íµµ Çâ»ó ÇÊÅÍ */
    /* contrast: ´ëºñ¸¦ ³ô¿© °ËÀº ±Û¾¾¸¦ ´õ ÁøÇÏ°Ô */
    /* brightness: È­¸éÀ» ¾à°£ ¹à°Ô */
    /* saturate: »ö°¨À» »ì¦ •û¼­(Èæ¹é¿¡ °¡±õ°Ô) ±ÛÀÚ °¡µ¶¼º ³ôÀÓ (¼±ÅûçÇ×) */
    /*filter: contrast(1.1) brightness(1.05) saturate(1.1);*/
}

.controls {
    text-align: center;
    margin-top: 15px;
}

#status {
    margin-top: 10px;
    font-weight: bold;
    text-align: center;
    height: 20px;
    color: #555;
}

/* Settings Grid */
.pub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.pub-card {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    background: #fff;
}

.pub-card h3 {
    font-size: 16px;
    margin-bottom: 10px;
    color: #333;
}

.result-container {
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid #ddd;
}

.result-grid {
    display: grid;
    /* È­¸é Å©±â¿¡ µû¶ó ÀÚµ¿À¸·Î ¿­ °³¼ö Á¶Àý (ÃÖ¼Ò 160px) */
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 15px;
}

.result-card {
    background: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.result-card:hover {
    transform: translateY(-3px);
    border-color: #28a745;
    box-shadow: 0 5px 15px rgba(40, 167, 69, 0.3);
    background-color: #f0fff4; /* ¾ÆÁÖ ¿¬ÇÑ ³ì»ö */
}

.result-card h3 {
    margin: 0 0 5px 0;
    font-size: 18px;
    color: #333;
}

.result-card p {
    margin: 0;
    font-size: 14px;
    color: #666;
}

.result-card .score {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: #999;
}

/* Á¦¸ñ°ú ·Î°í¸¦ °¡·Î·Î Á¤·ÄÇϱâ À§ÇÑ Flex ¼³Á¤ */
.brand-title {
    display: flex;
    align-items: center; /* ·Î°í°¡ Ä¿Á®µµ ±ÛÀÚ´Â ¼öÁ÷ Áß¾Ó Á¤·Ä À¯Áö */
    margin: 0;
    color: #007bff;
    font-size: 28px;
}

.logo-img {
    height: 2em; /* [¼öÁ¤µÊ] 1em -> 2em (±ÛÀÚ ³ôÀÌÀÇ 2¹è) */
    width: auto; /* ºñÀ² À¯Áö */
    margin-right: 15px; /* ·Î°í°¡ Ä¿Áø ¸¸Å­ °£°Ýµµ »ì¦ ³ÐÈû */
    object-fit: contain;
}


/* =========================================================
   [¸ð¹ÙÀÏ °­Á¦ Àû¿ë ½ºÅ¸ÀÏ] 
   ½º¸¶Æ®Æù(È­¸é Æø 768px ÀÌÇÏ)¿¡¼­¸¸ Àû¿ëµÊ
   ========================================================= */
@media screen and (max-width: 768px) {

    /* 1. Çì´õ: °¡·Î ¹èÄ¡ -> ¼¼·Î ¹èÄ¡·Î º¯°æ */
    header {
        display: flex;
        flex-direction: column !important; /* ¹«Á¶°Ç ¼¼·Î·Î ½×À½ */
        align-items: center !important; /* °¡¿îµ¥ Á¤·Ä */
        gap: 10px;
        padding-bottom: 15px;
    }

    /* 2. Á¦¸ñ(·Î°í) ¿µ¿ª: ±ÛÀÚ ÁÙ¹Ù²Þ ±ÝÁö */
    .brand-title {
        width: 100%;
        display: flex;
        justify-content: center; /* °¡¿îµ¥ Á¤·Ä */
        align-items: center;
        font-size: 22px !important; /* ±ÛÀÚ Å©±â Ãà¼Ò */
        white-space: nowrap !important; /* [Áß¿ä] ±ÛÀÚ°¡ ¼¼·Î·Î ¶³¾îÁö´Â °Í ¹æÁö */
    }

    .logo-img {
        height: 30px !important; /* ·Î°í Å©±â °íÁ¤ */
        margin-right: 8px;
    }

    /* 3. »ó´Ü ¹öÆ° (ÃâÆǻ缳Á¤, ·Î±×¾Æ¿ô) */
    header nav {
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 10px;
    }

        header nav button {
            flex: 1; /* ¹öÆ° Å©±â ±Õµî ºÐÇÒ */
            max-width: 140px;
            font-size: 14px;
            padding: 8px 0;
        }

    /* 4. Ä«¸Þ¶ó ¼±Åà ¹Ú½º */
    #cameraSelect {
        width: 100%;
        font-size: 16px; /* ¸ð¹ÙÀÏ¿¡¼­ ÅÍÄ¡Çϱâ ÁÁ°Ô */
        padding: 8px;
        margin-bottom: 10px;
    }

    /* 5. ÇÏ´Ü ÄÁÆ®·Ñ ¹öÆ° (ȸÀü, ÀνÄ) */
    .controls {
        display: flex !important;
        flex-direction: row !important; /* °¡·Î ¹èÄ¡ */
        gap: 8px;
        width: 100%;
    }

        .controls button {
            height: 50px !important; /* ¹öÆ° ³ôÀÌ Å°¿ò */
            font-size: 16px !important;
        }

    /* ÀÎ½Ä ¹öÆ°À» ´õ ³Ð°Ô */
    .btn-success {
        flex: 2;
    }

    .btn-secondary {
        flex: 1;
    }
}