:root { --bg: #F9F8FB; --bg-active: #2C2C2C; --text: #1e1d1d; --purple: #A46DFF; --pink: #F07EB9; --green: #4CC47C; --blue: #38A6F3; --yellow: #ffcc00; --purple2: #451575; --text-error: #808080 } 
html, body { background: var(--bg); height: auto !important; color: var(--text); overflow-x: hidden; overflow-y: auto; } 
main { display: grid; grid-template-rows: auto 1fr; height: 100%; padding: 15px; } 
.greeting-article { border-radius: 30px; padding: 16px; background: #fff; font-size: 1rem; font-weight: 500; line-height: 1.5; } 
.greeting-article p { margin: 0; } 
.stream-output { padding-bottom: 90px; } 
.qa-block { padding-bottom: 10px; margin-bottom: 40px; width: 100%; } 
#form-box { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; background: var(--bg); padding: 10px; } 
.input-box { background: #fff; padding: 10px 15px; border-radius: 30px; width: 100%; border: 1px solid #e5e7eb; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),0 1px 3px rgba(0, 0, 0, 0.1); transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out; } 
.user-question { position: relative; padding-left: 30px; font-size: 1.2rem; font-weight: 700; margin: 10px 0; } 
.user-question svg { position: absolute; left: 0; top: 0; white-space: normal; } 
.qa-block > article { font-size: 1.1rem; line-height: 1.5; font-weight: normal; } 
#chat-form { grid-column: 1; grid-row: 1px; } 
#message { width: 100%; padding: 12px; border: 0; font-size: 1rem; background: #fff; box-sizing: border-box; } 
#message:focus { outline: none; border:0; } 
.input-box { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 0fr; transition: all 0.3s ease-in-out; } 
.input-box:focus-within { grid-column: 1; grid-row: 2; } 
.button-box { display: flex; grid-column: 2px; grid-row: 1px; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform-origin: top center; } 
.input-box:focus-within .button-box { grid-column: 1; grid-row: 2; } 
.input-box:focus-within .button-box #button-history.active { display: block; } 
.input-box button { border-radius: 50%; background: #F4F3F8; border: 0; width: 40px; height: 40px; display: none; } 
#button-history { display: none; } 
#button-stop.active, #button-submit.active, #button-mic.active { margin-left: auto; display: block; } 
#button-submit { background: var(--bg-active); color: var(--bg); } 
#button-mic.recording { animation: pulse 1.5s infinite; background: #B3191E; color: var(--bg); } 
nav { position: fixed; top: 0; width: 100%; height: 100vh; background: #fff; z-index: 600; transform: translateX(100%); transition: transform 0.3s ease-in-out; display: flex; flex-wrap: wrap; place-content: flex-start; align-items: flex-start; gap: 6px; padding: 40px 15px 15px 15px; } 
nav.active { transform: translateX(0); } 
nav button { position: absolute; right: 30px; top: 5px; border: 0; background: none; } 
nav a { display: inline-block; background: #F4F3F8; text-decoration: none; padding: 10px; border-radius:30px; font-size: .9rem; color: #1e1d1d; font-weight: normal; align-content: flex-start; } 
.send-btn { padding: 12px; border: none; border-radius: 8px; background: #0078d7; color: #fff; font-size: 1rem; cursor: pointer; } 
.error { text-align: center; margin: 0; color: var(--text-error); padding: 3% 0; border-top: 1px dashed #eee; } 
.error svg { display: block; margin: 0 auto 10px; height: 40px; width: 40px; stroke-width: 1.5; } 
.error span { display: block; margin: 0 auto; } 
.bg-overlay { display: none; } 
.bg-overlay.active { width: 100%; height: 100vh; position: fixed; left: 0; top: 0%; background: #fff; opacity: .6; display: block; } 
/* 전체 답변 컨테이너 */
.markdown-body { font-family: 'Pretendard', -apple-system, sans-serif; line-height: 1.75; color: #1f1f1f; padding: 10px 15px 15px 15px; width: 100%; } 
/* 마크다운 내부 링크 스타일 */
.markdown-body a { color: #0b57d0; /* 구글/제미나이 스타일 블루 */
 text-decoration: none; /* 밑줄 제거 */
 font-weight: 500; border-bottom: 1px solid transparent; transition: border-color 0.2s; } 

.markdown-body a:hover { border-bottom: 1px solid #0b57d0; /* 마우스 올렸을 때만 밑줄 효과 */}
.markdown-body ol li {list-style: decimal;}
/* target="_blank" 링크 뒤에 SVG 아이콘 추가 */
.markdown-body a[target="_blank"]::after { content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 4px; vertical-align: middle; /* 새 창 열기 SVG 아이콘 데이터 */
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b57d0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; opacity: 0.8; } 

.markdown-body a:hover::after { opacity: 1; } 
/* 문단 및 리스트 간격 */
.markdown-body p, .markdown-body ol, .markdown-body ul { margin-bottom: 15px; } 

/* 굵은 글씨 포인트 */
.markdown-body strong { font-weight: 600; color: #000; } 

/* 번호/불렛 리스트 심플화 */
.markdown-body ol, .markdown-body ul { padding-left: 10px; } 

.markdown-body li { margin-bottom: 8px; padding-left: 4px; } 

/* 구분선 (아주 얇게) */
.markdown-body hr { border: 0; border-top: 1px solid #e3e3e3; margin: 20px 0; } 

/* 하단 버튼 영역 (Action Buttons) */
.action-buttons { display: flex; justify-content: flex-end; border-top: 1px dashed #ccc; padding-top: 5px; } 

.action-buttons button { display: flex; align-items: center; gap: 6px; background: none; border: none; color: #444746; font-size: 13px; padding: 8px; border-radius: 20px; /* 제미나이 특유의 둥근 버튼 */
 cursor: pointer; transition: background 0.2s; font-weight: 700; } 

.action-buttons button:hover { background-color: #f0f2f4; } 

.action-buttons button i { font-size: 16px; } 

/* 링크 스타일 */
.markdown-body a { color: #0b57d0; /* 구글 링크 블루 */
 text-decoration: none; } 

.markdown-body a:hover { text-decoration: underline; } 
@keyframes pulse { 
 0% { transform: scale(1); } 
 50% { transform: scale(1.2); } 
 100% { transform: scale(1); } 
 }