@import url('../refer/font/pretendard/pretendard.css');

:root {
    --font-size-basic:14.5px;
    --font-size-lg2: 24px;
    --font-size-lg: 20px;
    --font-size-md: 16px;
    --font-size-md2: 15px;
    --font-size-sm: 12.5px;
    --font-size-sm2: 0.96em;

    --font-color-basic: #333;
    --font-color-lightgray: #888;
    --line-height-basic:1.4;
    --line-height-chat:1.5;
    --background-color: #FFFBF2;
    --background-color-header: #FFD700;
    --background-color-assistant-chat: #FFE94D;
    --background-color-lightgray: #f6f6f6;
    --background-color-lightgray2: #f1f1f1;
    --color-white: #fff;
    --color-blue: #2C79FF;
}
html, body {padding: 0; margin: 0;}
button {font: inherit;}
img {display: block; margin: 0; padding: 0;}
a {text-decoration: none; color: inherit; font: inherit;}

body {
    font-family: 'pretendard', sans-serif;   
    font-size: var(--font-size-basic);
    letter-spacing: -0.02em;
    color: var(--font-color-basic);
    font-weight: normal;
    white-space: normal;
    word-break: break-all;
    line-height: var(--line-height-basic);
    -webkit-font-smoothing: antialiased;
    background-color: var(--background-color);
}
.max-wid {width: 100%; max-width: 800px; margin: 0 auto;}

/* ==
Header
== */
.header {
    position: sticky;
    top: 0; left: 0;
    background-color: var(--background-color-header);
    z-index: 30;
}
.header .line {
    height: 1.5px;
    background-image: linear-gradient(90deg, rgb(255, 75, 75), rgb(255, 253, 128));
}
.header .inner {
    height: 50px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 13px;
    box-sizing: border-box;
}
.header .inner > h2 {font-size: var(--font-size-md2);}
.header .inner .menu-area {
    position: relative;
}
.header .inner .menu-area .btn-menu {
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; outline: none;
    padding: 0; margin: 0;
    cursor: pointer;
}
.header .inner .btn-menu img {height: 18px; width: auto;}
.header .inner .menu-area .sub-menu {
    display: none;
    position: absolute;
    top: 30px; right: 1px;
    width: 125px;
    background-color: var(--color-white);
    border-radius: 8px;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    overflow: hidden;
}
.header .inner .menu-area .sub-menu > button {
    display: block; width: 100%;
    outline: none; border: none;
    padding: 0.8em;
    font-size: var(--font-size-md2);
    background: transparent;
    box-sizing: border-box;
    text-align: left;
    cursor: pointer;
}
.header .inner .menu-area .sub-menu > button:hover {
    background-color: var(--background-color-lightgray);
}
.header .inner .menu-area .sub-menu > button:not(:first-child) {
    border-top: 1px solid #dfdfdf;
}

/* === 
Chat Container
=== */
.chat-wrapper {
    min-height: 100vh;
    padding: 1rem 1rem 90px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.chat-wrapper > div {
    position: relative;
    margin-top: 20px;
    max-width: 83%;
}
.chat-wrapper > div > .date, .chat-wrapper > div > .add {
    font-size: var(--font-size-sm);
    color: var(--font-color-lightgray);
}
.chat-wrapper .message .chat {
    padding: 0.8em 1em;
    border-radius: 0.8em;
    box-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.1);
    line-height: var(--line-height-chat);
    box-sizing: border-box;
}
.chat-wrapper .message.user {align-self: flex-end;}
.chat-wrapper .message.assistant {align-self: flex-start;}
.chat-wrapper .message.user .chat {
    background-color: var(--background-color-assistant-chat);
    border-top-right-radius: 0;
}
.chat-wrapper .message.assistant .chat {
    background-color: var(--color-white);
}
.chat-wrapper .message.user > .date {
    text-align: right; 
    margin: 0 3px 2px 0;
}
.chat-wrapper .message.assistant > .date {
    text-align: left;
    margin: 0 0 2px 3px;
}
.chat-wrapper .message.assistant > .add {
    text-align: left; 
    margin: 6px 0 0 3px; 
    font-size: var(--font-size-sm);
}
.chat-wrapper > div > .add .sources::before {
    content: '출처'; display: inline-block; 
    border: 1px solid rgba(0,0,0,0.3); 
    padding: 0 0.4em; 
    border-radius: 0.8em; 
    margin: 0 0.35em 0 0; 
    font-size: 11px;
}
.chat-wrapper > div > .add .sources {font-size: var(--font-size-sm);}
.chat-wrapper > div > .add .help-link {color: var(--color-blue);}
.chat-wrapper > span.date {
    display: block; 
    text-align: center; 
    margin-top: 20px; 
    font-size: var(--font-size-sm2); 
    color: var(--font-color-lightgray);
}
.chat-wrapper > span.date::before {content: '- ';}
.chat-wrapper > span.date::after {content: ' -';}

/* -- Top Information -- */
.chat-wrapper > div.infoTop {max-width: 100%; margin: 0;}
.chat-wrapper .message .chat.infomation-Top > .tit20 {
    font-size: var(--font-size-md);
}

/* -- Top Intro -- */
.chat-wrapper > div.introTop {
    max-width: 100% !important;
    font-size: var(--font-size-md2);
    padding: 0 0 0 0;
    margin: 0;
    line-height: 1.6;
}
.chat-wrapper > div.introTop > p {margin: 0;}
.chat-wrapper > div.introTop > p.desc {
    color: var(--font-color-lightgray);
    font-size: var(--font-size-basic);
}

/* -- Loading Text -- */
.chat-wrapper .message .chat .loading {color: var(--font-color-lightgray);}
.chat-wrapper .message .chat .loading .loading-img::after {
    content: ''; display: inline-block;
    width: 1.2em; height: 1.2em;
    vertical-align: middle;
    margin: 0 0 0 3px;
    background: url('../images/icons/loading-img.gif') no-repeat center / cover;
}

/* -- Weather Box -- */
.infoBx {width: 280px;}
@media screen and (max-width:768px) {.infoBx {width: 75vw;}}

.infoBx p {margin: 0; padding: 0;}
.infoBx .title .tit {
    position: relative;
    font-size: var(--font-size-md);
    font-weight: 500;
    z-index: 2;
}
.infoBx .title .tit::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 100%;
    height: 8px; background-color: var(--background-color-assistant-chat);
    z-index: -1;
}
.info2-Box > .desc {
    margin: 10px 0 0; 
    font-size: var(--font-size-sm2);
    color: var(--font-color-lightgray);
}
.btn-list20 {
    display: flex; flex-direction: column;
    gap: 10px;
    margin: 10px 0 5px;
}
.btn-list20 > button {
    font: inherit;
    display: block; width: 100%; text-align: left;
    outline: none; background-color: transparent;
    font-size: var(--font-size-sm2);
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 5px;
    padding: 0.7em 1em;
    box-sizing: border-box;
    line-height: 1.4;
    cursor: pointer;
    transition: border 0.5s;    
}
.info2-Box > .faq > button {transition: border 0.5s;}
.info2-Box > .faq > button:hover {
    border: 1px solid var(--background-color-header);
}
.btn-list20.desc-list {max-width: 300px;}
.btn-list20.desc-list > button {
    background-color: var(--background-color-lightgray2);
    border: none;
}
.weather-Box .weather-state {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0 0 0;
    gap: 15px;
}
.weather-Box img {width: 5em;}
.weather-Box .weather-state .icon-weather {margin: 0 0 0 0;}
.weather-Box .weather-state .report {
    font-weight: 500;
    margin: 0 0 0 20px;
}
.weather-Box .weather-state .report .temperature {
    font-size: var(--font-size-lg2);
}
.weather-Box .weather-state .report .temperature::after {
    content: '°';
    margin: 0 0 0 2px;
}
.weather-Box .temper-box {
    background-color: var(--background-color-lightgray);
    text-align: center;
    padding: 0.3em 10px;
    margin: 13px 0 5px;
    box-sizing: border-box;
}
.weather-Box .temper-box > span::before {margin: 0 3px 0 0; color: #888;}
.weather-Box .temper-box .min::before {content: '최소';}
.weather-Box .temper-box .max::before {content: '최고';}
.weather-Box .temper-box > span::after {
    content: '°';
    margin: 0 0 0 2px;
}
.weather-Box .temper-box > i::before {
    content: '/'; 
    margin: 0 6px 0 1px; 
    color: var(--font-color-lightgray);
}
.weather-Box .etc-box {
    display: flex;  gap: 15px;
    padding: 8px 20px 5px;
    box-sizing: border-box;
}
.weather-Box .etc-box > div {flex: 1; text-align: center; font-size: var(--font-size-md2); position: relative;}
.weather-Box .etc-box > div::before {display: block; font-size: var(--font-size-sm2); color: var(--font-color-lightgray); margin: 0 0 2px 0;}
.weather-Box .etc-box > div.wind::before {content: '바람';}
.weather-Box .etc-box > div.rain::before {content: '강수확률';}
.weather-Box .etc-box > div:last-child::after {
    content: ''; 
    position: absolute; display: block; 
    width: 1px; height: 25%; 
    background-color: rgba(0,0,0,0.2); 
    top: 50%; transform: translateY(-50%); left: -8px;
}
.chat-wrapper .message.array-col {
    width: 100%; max-width: none;
}
.chat-wrapper .message.array-col .array-box {
    width: 100%;
    overflow-x: auto;
    display: flex;
    gap: 15px;
    padding: 0 0 5px;
    box-sizing: border-box;
}
.chat-wrapper .message.array-col .array-box > .chat {flex-shrink: 0;}

/* -- Slide Contents -- */
.slide-wrapp {
    position: relative;
    padding: 0 0 15px;
    margin: 0 0 -2px;
    box-sizing: border-box;
}
.slide-wrapp .chat-slide {
    padding: 0 0 5px;
    box-sizing: border-box;
}
.slide-wrapp .sw-pagination {
    position: absolute; 
    left: 0;  bottom: 0 !important; 
    z-index: 20;}
.slide-wrapp .sw-pagination span.swiper-pagination-bullet {
    width: 8px; height: 8px; 
    background-color: rgba(0,0,0,0.3); 
    -webkit-transition: all 0.3s; 
    transition: all 0.3s; 
    opacity: 0.7; 
    margin: 0 2px;
}
.slide-wrapp .sw-pagination span.swiper-pagination-bullet-active {
    background-color:rgba(0,0,0,0.6);
    width: 25px;
    border-radius: 9px;
}

/* ==
Chat input Box -- Bottom
== */
.chatInput-wrap {
    position: fixed;
    bottom: 0; left: 0; width: 100%; height: 65px;
    background-color: var(--background-color);
    z-index: 40;
}
.chatInput-wrap .inner {
    position: relative;
    width: 100%; height: 100%;
    display: flex; align-items: center;
    padding: 1em;
    box-sizing: border-box;
}
.chatInput-wrap .inner .input-style20 {
    border: none; outline: none; resize: none;
    width: 100%; height: 40px; box-sizing: border-box;
    font: inherit;
    padding: 0.7em 2.5em 0.7em 1.3em; 
    border: 1px solid transparent;
    box-sizing: border-box;
    background-color: rgb(240, 242, 246);
    border-radius: 2em;
    overflow: hidden;
}
.chatInput-wrap .inner .input-style20:focus {
    border: 1px solid #66afe9;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);    
}
.chatInput-wrap .inner .input-style20::placeholder {
    color: var(--font-color-lightgray);
}
.chatInput-wrap .inner .btn-submit {
    background: transparent; border: none; outline: none;
    position: absolute; 
    top: 50%; transform: translateY(-50%);
    right: 25px;
    display: block; width: 33px; height: 33px;
    cursor: pointer;
}

/* -- Add GPT & WETHER ICON -- */
.chat .gpt-img {
    display: inline-block;
    width: 1em; height: 1em; 
    vertical-align: middle; 
    margin: 0 0 0 3px;
}
.source_gpt {
    display: inline-block;
    width: 1em; height: 1em;
    background: url('../images/gpt-icon.png') no-repeat center / 100%;
    vertical-align: middle;
    margin: 0 0 0 3px;
}
.weather-Box {position: relative;}
.weather-Box::before {
    content: '제공';
    display: block;
    color: var(--font-color-lightgray);
    width: 5.8em; height: 1.6em;
    position: absolute;
    top: 0; right: 1px;
    font-size: var(--font-size-sm);
    background: url('../images/open_wtr-icon.png') no-repeat center right / contain;
}