/* =========================================================
   전체 공통
   ========================================================= */

:root {

    --page-gap: 7px;

    --radius: 12px;

    --bg: #0d1015;

    --panel: #181d25;

    --panel-border: #303846;

    --text: #f3f6fa;

    --muted: #a7b0bd;


    --co2: #55b8ff;

    --co2-bg: #142737;

    --co2-border: #377eac;


    --temp: #ff9a62;

    --temp-bg: #352219;

    --temp-border: #a7613f;


    --hum: #51d69a;

    --hum-bg: #142d25;

    --hum-border: #358d69;

}


* {

    box-sizing: border-box;

    -webkit-tap-highlight-color:
        transparent;

}


html,
body {

    margin: 0;

    width: 100%;

    height: 100%;

    overflow: hidden;

    background:
        var(--bg);

    color:
        var(--text);

    font-family:
        Arial,
        sans-serif;

}


body {

    padding:
        var(--page-gap);

}


/* =========================================================
   전체 레이아웃

   세로:
   header
   센서/그래프
   AI chat
   ========================================================= */

.main {

    width: 100%;

    height: 100%;

    min-width: 0;

    min-height: 0;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr);

    grid-template-rows:
        auto
        minmax(0, 1.45fr)
        minmax(220px, .72fr);

    grid-template-areas:
        "header"
        "content"
        "chat";

    gap:
        var(--page-gap);

}


/* =========================================================
   HEADER
   ========================================================= */

.header {

    grid-area:
        header;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    min-width:
        0;

    min-height:
        42px;

    padding:
        0 7px;

}


.headerTitle {

    flex:
        0 0 auto;

    font-size:
        clamp(
            21px,
            3.2vw,
            34px
        );

    font-weight:
        800;

    letter-spacing:
        -1px;

    line-height:
        1;

}


.locationBox {

    min-width:
        0;

    flex:
        1;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    color:
        #bac4d1;

}


.locationText {

    min-width:
        0;

    font-size:
        clamp(
            11px,
            1.5vw,
            15px
        );

    font-weight:
        700;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

}


.locationBtn {

    flex:
        0 0 auto;

    border:
        1px solid #526174;

    border-radius:
        8px;

    background:
        #202833;

    color:
        #eef3f8;

    padding:
        5px 8px;

    font-size:
        12px;

    font-weight:
        800;

    cursor:
        pointer;

}


.locationBtn:hover {

    background:
        #293442;

}


.locationBtn:active {

    transform:
        scale(.97);

}


.status {

    flex:
        0 0 auto;

    font-size:
        12px;

    font-weight:
        bold;

    color:
        #9ba6b5;

}


/* =========================================================
   센서/그래프 Content
   ========================================================= */

.content {

    grid-area:
        content;

    min-width:
        0;

    min-height:
        0;

    display:
        grid;

    grid-template-columns:
        1fr;

    grid-template-rows:
        minmax(0, .85fr)
        minmax(0, 1fr)
        minmax(0, 1fr);

    grid-template-areas:
        "values"
        "co2"
        "env";

    gap:
        var(--page-gap);

    transition:
        grid-template-rows
        .25s ease;

}


/* =========================================================
   터치 영역
   ========================================================= */

.zone {

    min-width:
        0;

    min-height:
        0;

    cursor:
        pointer;

    transition:
        opacity .22s ease,
        transform .22s ease,
        filter .22s ease;

}


.zone:active {

    transform:
        scale(.992);

}


.zone.shrunk {

    opacity:
        .68;

    filter:
        saturate(.72);

}


/* =========================================================
   현재값 카드
   ========================================================= */

.values {

    grid-area:
        values;

    min-height:
        0;

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        7px;

}


.card {

    min-width:
        0;

    min-height:
        0;

    border-radius:
        var(--radius);

    border:
        2px solid;

    padding:
        10px 8px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    box-shadow:
        0 3px 10px
        rgba(
            0,
            0,
            0,
            .22
        );

}


.card.co2 {

    background:
        var(--co2-bg);

    border-color:
        var(--co2-border);

}


.card.temp {

    background:
        var(--temp-bg);

    border-color:
        var(--temp-border);

}


.card.hum {

    background:
        var(--hum-bg);

    border-color:
        var(--hum-border);

}


.label {

    font-size:
        clamp(
            15px,
            2.2vw,
            22px
        );

    font-weight:
        800;

    line-height:
        1;

    margin-bottom:
        5px;

}


.card.co2 .label {

    color:
        var(--co2);

}


.card.temp .label {

    color:
        var(--temp);

}


.card.hum .label {

    color:
        var(--hum);

}


.number {

    font-size:
        clamp(
            29px,
            4.7vw,
            48px
        );

    font-weight:
        800;

    line-height:
        1;

    white-space:
        nowrap;

}


.unit {

    font-size:
        .42em;

    font-weight:
        700;

    color:
        #c2c9d2;

}


/* =========================================================
   그래프
   ========================================================= */

.graph {

    min-width:
        0;

    min-height:
        0;

    background:
        var(--panel);

    border:
        2px solid
        var(--panel-border);

    border-radius:
        var(--radius);

    padding:
        6px 8px 7px;

    display:
        grid;

    grid-template-rows:
        auto
        minmax(0, 1fr);

    box-shadow:
        0 3px 10px
        rgba(
            0,
            0,
            0,
            .18
        );

}


#co2Zone {

    grid-area:
        co2;

    border-color:
        #315e7a;

}


#envZone {

    grid-area:
        env;

    border-color:
        #5f4e3d;

}


.graphTitle {

    min-height:
        25px;

    padding:
        1px 4px 3px;

    font-size:
        clamp(
            15px,
            2vw,
            21px
        );

    font-weight:
        800;

}


#co2Zone .graphTitle {

    color:
        var(--co2);

}


#envZone .graphTitle {

    color:
        #ffc08f;

}


.canvasWrap {

    position:
        relative;

    width:
        100%;

    height:
        100%;

    min-height:
        0;

}


canvas {

    position:
        absolute;

    left:
        0;

    top:
        0;

    width:
        100%;

    height:
        100%;

    display:
        block;

}


/* =========================================================
   센서/그래프 확대
   ========================================================= */

.content.focus-values {

    grid-template-rows:
        minmax(0, 2.35fr)
        minmax(0, .52fr)
        minmax(0, .52fr);

}


.content.focus-co2 {

    grid-template-rows:
        minmax(0, .52fr)
        minmax(0, 2.35fr)
        minmax(0, .52fr);

}


.content.focus-env {

    grid-template-rows:
        minmax(0, .52fr)
        minmax(0, .52fr)
        minmax(0, 2.35fr);

}


.content.focus-values
#valuesZone
.label {

    font-size:
        clamp(
            20px,
            3.5vw,
            30px
        );

}


.content.focus-values
#valuesZone
.number {

    font-size:
        clamp(
            40px,
            7.4vw,
            66px
        );

}


.content.focus-co2
#co2Zone
.graphTitle,

.content.focus-env
#envZone
.graphTitle {

    font-size:
        clamp(
            20px,
            3.2vw,
            29px
        );

    min-height:
        32px;

}


.zone.shrunk .label {

    font-size:
        clamp(
            11px,
            1.8vw,
            16px
        );

}


.zone.shrunk .number {

    font-size:
        clamp(
            20px,
            3.5vw,
            30px
        );

}


.zone.shrunk .graphTitle {

    font-size:
        clamp(
            10px,
            1.5vw,
            14px
        );

    min-height:
        17px;

}


/* =========================================================
   AI CHAT
   ========================================================= */

.chatPanel {

    grid-area:
        chat;

    min-width:
        0;

    min-height:
        0;

    overflow:
        hidden;

    display:
        grid;

    grid-template-rows:
        auto
        minmax(0, 1fr)
        auto
        auto;

    background:
        #151b24;

    border:
        2px solid
        #34415a;

    border-radius:
        var(--radius);

    box-shadow:
        0 3px 12px
        rgba(
            0,
            0,
            0,
            .25
        );

}


/* =========================================================
   AI Header
   ========================================================= */

.chatHeader {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    padding:
        9px 12px;

    background:
        #1b2431;

    border-bottom:
        1px solid
        #313d4e;

}


.chatTitle {

    color:
        #d9e6ff;

    font-size:
        17px;

    font-weight:
        800;

}


.chatModel {

    margin-top:
        2px;

    color:
        #8592a5;

    font-size:
        11px;

}


.chatConnection {

    flex:
        0 0 auto;

    color:
        #51d69a;

    font-size:
        11px;

    font-weight:
        bold;

}


/* =========================================================
   AI 메시지
   ========================================================= */

.chatMessages {

    min-width:
        0;

    min-height:
        0;

    overflow-x:
        hidden;

    overflow-y:
        auto;

    padding:
        10px;

    background:
        #10151d;

    scrollbar-width:
        thin;

    scrollbar-color:
        #3d4a5e
        #10151d;

}


.chatMessage {

    width:
        fit-content;

    max-width:
        84%;

    margin-bottom:
        9px;

    padding:
        8px 11px;

    border-radius:
        10px;

    font-size:
        13px;

    line-height:
        1.55;

    white-space:
        pre-wrap;

    word-break:
        break-word;

}


.chatMessage.ai {

    margin-right:
        auto;

    background:
        #202a38;

    border:
        1px solid
        #304057;

    color:
        #edf2f8;

    border-bottom-left-radius:
        3px;

}


.chatMessage.user {

    margin-left:
        auto;

    background:
        #245ead;

    border:
        1px solid
        #3474cf;

    color:
        #ffffff;

    border-bottom-right-radius:
        3px;

}


/* =========================================================
   AI Status
   ========================================================= */

.chatStatus {

    min-height:
        23px;

    padding:
        4px 10px;

    color:
        #8592a5;

    background:
        #151c27;

    border-top:
        1px solid
        #263244;

    font-size:
        10px;

}


/* =========================================================
   AI 입력
   ========================================================= */

.chatInputArea {

    display:
        flex;

    gap:
        7px;

    min-height:
        58px;

    padding:
        7px;

    background:
        #1a222e;

    border-top:
        1px solid
        #313d4e;

}


.chatInputArea textarea {

    flex:
        1;

    min-width:
        0;

    min-height:
        44px;

    max-height:
        120px;

    resize:
        vertical;

    outline:
        none;

    padding:
        8px 10px;

    background:
        #101720;

    color:
        #f3f6fa;

    border:
        1px solid
        #405069;

    border-radius:
        8px;

    font-size:
        13px;

    line-height:
        1.4;

}


.chatInputArea textarea:focus {

    border-color:
        #5798e5;

    box-shadow:
        0 0 0 2px
        rgba(
            85,
            184,
            255,
            .10
        );

}


.chatInputArea textarea::placeholder {

    color:
        #6f7d90;

}


.chatInputArea button {

    width:
        75px;

    flex:
        0 0 auto;

    border:
        1px solid
        #377fd2;

    border-radius:
        8px;

    background:
        #2867b5;

    color:
        #ffffff;

    font-size:
        13px;

    font-weight:
        800;

    cursor:
        pointer;

}


.chatInputArea button:hover {

    background:
        #3278cd;

}


.chatInputArea button:active {

    transform:
        scale(.98);

}


.chatInputArea button:disabled {

    background:
        #3c4654;

    border-color:
        #505a68;

    color:
        #929ba7;

    cursor:
        default;

}


/* =========================================================
   가로 화면

   [ HEADER                       ]
   [ 센서/그래프       ][ AI CHAT ]

   ========================================================= */

@media (orientation: landscape) {

    :root {

        --page-gap:
            5px;

    }


    .main {

        grid-template-columns:
            minmax(0, 1.75fr)
            minmax(300px, .75fr);

        grid-template-rows:
            auto
            minmax(0, 1fr);

        grid-template-areas:

            "header header"

            "content chat";

        gap:
            5px;

    }


    .header {

        min-height:
            34px;

        padding:
            0 5px;

        gap:
            7px;

    }


    .headerTitle {

        font-size:
            clamp(
                20px,
                2.2vw,
                29px
            );

    }


    .locationText {

        font-size:
            clamp(
                10px,
                1.1vw,
                13px
            );

    }


    .locationBtn {

        padding:
            3px 6px;

        font-size:
            10px;

    }


    /* 기존 Fold 가로 그래프 */

    .content {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        grid-template-rows:
            minmax(0, .60fr)
            minmax(0, 1fr);

        grid-template-areas:

            "values values"

            "co2 env";

        gap:
            5px;

        transition:
            grid-template-columns
            .25s ease,

            grid-template-rows
            .25s ease;

    }


    .card {

        padding:
            5px 7px;

    }


    .label {

        font-size:
            clamp(
                13px,
                1.5vw,
                18px
            );

        margin-bottom:
            2px;

    }


    .number {

        font-size:
            clamp(
                24px,
                2.8vw,
                38px
            );

    }


    .graphTitle {

        min-height:
            21px;

        font-size:
            clamp(
                13px,
                1.4vw,
                18px
            );

    }


    /* 현재값 확대 */

    .content.focus-values {

        grid-template-columns:
            1fr
            1fr;

        grid-template-rows:
            minmax(0, 1.75fr)
            minmax(0, .42fr);

        grid-template-areas:

            "values values"

            "co2 env";

    }


    /* CO2 확대 */

    .content.focus-co2 {

        grid-template-columns:
            minmax(0, 2fr)
            minmax(0, .50fr);

        grid-template-rows:
            1fr
            1fr;

        grid-template-areas:

            "co2 values"

            "co2 env";

    }


    /* 온습도 확대 */

    .content.focus-env {

        grid-template-columns:
            minmax(0, .50fr)
            minmax(0, 2fr);

        grid-template-rows:
            1fr
            1fr;

        grid-template-areas:

            "values env"

            "co2 env";

    }


    .content.focus-values
    #valuesZone
    .label {

        font-size:
            clamp(
                18px,
                2.2vw,
                27px
            );

    }


    .content.focus-values
    #valuesZone
    .number {

        font-size:
            clamp(
                34px,
                4vw,
                58px
            );

    }


    .content.focus-co2
    #co2Zone
    .graphTitle,

    .content.focus-env
    #envZone
    .graphTitle {

        font-size:
            clamp(
                18px,
                2vw,
                26px
            );

        min-height:
            30px;

    }


    .zone.shrunk .label {

        font-size:
            clamp(
                9px,
                1vw,
                13px
            );

    }


    .zone.shrunk .number {

        font-size:
            clamp(
                16px,
                1.8vw,
                24px
            );

    }


    .zone.shrunk .graphTitle {

        font-size:
            clamp(
                9px,
                .9vw,
                12px
            );

        min-height:
            15px;

    }


    .chatTitle {

        font-size:
            15px;

    }


    .chatMessage {

        max-width:
            92%;

    }

}


/* =========================================================
   좁은 세로 화면
   ========================================================= */

@media (
    orientation: portrait
)
and (
    max-width: 650px
) {

    .main {

        grid-template-rows:

            auto

            minmax(
                0,
                1.25fr
            )

            minmax(
                210px,
                .78fr
            );

    }


    .headerTitle {

        font-size:
            20px;

    }


    .locationText {

        font-size:
            10px;

    }


    .locationBtn {

        padding:
            4px 6px;

        font-size:
            10px;

    }


    .status {

        font-size:
            10px;

    }


    .card {

        padding:
            6px 4px;

    }


    .label {

        font-size:
            13px;

    }


    .number {

        font-size:
            clamp(
                25px,
                8vw,
                36px
            );

    }


    .graph {

        padding:
            4px 5px;

    }


    .graphTitle {

        min-height:
            20px;

        font-size:
            13px;

    }


    .chatHeader {

        padding:
            6px 8px;

    }


    .chatTitle {

        font-size:
            14px;

    }


    .chatModel {

        font-size:
            9px;

    }


    .chatMessages {

        padding:
            7px;

    }


    .chatMessage {

        max-width:
            92%;

        padding:
            7px 9px;

        font-size:
            12px;

    }


    .chatInputArea {

        min-height:
            52px;

        padding:
            5px;

    }


    .chatInputArea textarea {

        min-height:
            42px;

        font-size:
            12px;

    }


    .chatInputArea button {

        width:
            62px;

        font-size:
            12px;

    }

}


/* =========================================================
   높이가 아주 작은 화면
   ========================================================= */

@media (
    max-height: 520px
) {

    .header {

        min-height:
            30px;

    }


    .headerTitle {

        font-size:
            19px;

    }


    .status {

        font-size:
            9px;

    }


    .locationText {

        font-size:
            9px;

    }


    .locationBtn {

        padding:
            2px 5px;

        font-size:
            9px;

    }


    .card {

        padding:
            3px 5px;

    }


    .label {

        font-size:
            11px;

        margin-bottom:
            1px;

    }


    .number {

        font-size:
            21px;

    }


    .graph {

        padding:
            3px 5px;

    }


    .graphTitle {

        min-height:
            18px;

        font-size:
            11px;

    }


    .chatHeader {

        padding:
            5px 8px;

    }


    .chatTitle {

        font-size:
            13px;

    }


    .chatModel {

        display:
            none;

    }


    .chatMessages {

        padding:
            6px;

    }


    .chatMessage {

        margin-bottom:
            5px;

        padding:
            5px 7px;

        font-size:
            11px;

    }


    .chatStatus {

        min-height:
            18px;

        padding:
            2px 6px;

        font-size:
            9px;

    }


    .chatInputArea {

        min-height:
            42px;

        padding:
            4px;

    }


    .chatInputArea textarea {

        min-height:
            34px;

        padding:
            5px 7px;

        font-size:
            11px;

    }


    .chatInputArea button {

        width:
            55px;

        font-size:
            11px;

    }

}


/* =========================================================
   확대/축소 최종 우선 적용
   ========================================================= */

.content.focus-values
#valuesZone
.label {

    font-size:
        clamp(
            20px,
            3.5vw,
            30px
        );

}


.content.focus-values
#valuesZone
.number {

    font-size:
        clamp(
            40px,
            7.4vw,
            66px
        );

}


.content.focus-co2
#co2Zone
.graphTitle,

.content.focus-env
#envZone
.graphTitle {

    font-size:
        clamp(
            20px,
            3.2vw,
            29px
        );

    min-height:
        32px;

}


.content.focus-co2
#valuesZone
.label,

.content.focus-env
#valuesZone
.label {

    font-size:
        clamp(
            9px,
            1.4vw,
            13px
        );

}


.content.focus-co2
#valuesZone
.number,

.content.focus-env
#valuesZone
.number {

    font-size:
        clamp(
            16px,
            2.4vw,
            24px
        );

}


.content.focus-values
#co2Zone
.graphTitle,

.content.focus-values
#envZone
.graphTitle,

.content.focus-co2
#envZone
.graphTitle,

.content.focus-env
#co2Zone
.graphTitle {

    font-size:
        clamp(
            9px,
            1.3vw,
            13px
        );

    min-height:
        15px;

}