:root{
    --up-purple: #5A51FF;   /* 포인트 컬러 */
    --num-bg   : #F1F0FE;   /* 번호 원 배경 */
    --text-light: #757575;
  }     /* 업스테이지 메인 컬러 */

/* ───────────────────────── 공통 레이아웃 ───────────────────────── */
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto;
  background:#fff;
  color:#111;
  line-height: 1.45;
}

.gnb{height:48px;display:flex;align-items:center;top:0; left:0; position: fixed; width: 100%; background-color: white; z-index: 10000000;}
.gnb-inner{max-width:1200px; width : 100%;margin:0 auto;padding:0 12px;display:flex;align-items:center; justify-content: space-between; position: relative; }
.brand{display:flex;align-items:center;gap:8px;font-weight:600;font-size:18px;cursor:pointer;}
.brand-logo{width:22px;height:22px;border-radius:4px;object-fit:cover;}

.main-layout{max-width:1200px;margin:64px auto;padding:24px 12px;}
.chat-area{display:flex;flex-direction:column;gap:32px;}           /* 턴 간 여백 */

/* ───────────────── 한 턴(질문+답변+기사) ──────────────── */
.chat-turn{display:grid;grid-template-columns:minmax(0,1fr) 260px;column-gap:32px;}
.messages{grid-column:1;display:flex;flex-direction:column;gap:8px;}

/* ── 관련 기사 박스 ───────────────────────── */

  
  /* ─────────── 기사 타임라인 박스 ─────────── */
  .rag-inline{
    grid-column:2;
    align-self:start;        /* 그대로 두기 */
    width:260px;
    background:#f7f9fc;
    border:1px solid #e4e6f0;
    border-radius:10px;
    padding:16px 18px 18px;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
  }
  
  .rag-inline .panel-title{margin:0 0 12px;font:700 15px/1 "Segoe UI",-apple-system;}
  
  /* 세로선 */
  .rag-list{
    position:relative;margin:0;padding:0;list-style:none;
  }
  .rag-list::before{
    content:'';position:absolute;left:20px;top:0;bottom:0;width:2px;background:#d7d9e5;
  }
  
  /* ── 단일 아이템 ───────────────────────── */
  .rag-item{position:relative;padding-left:44px;margin-bottom:18px;font-size:13px;line-height:1.35;}
  .rag-item:last-child{margin-bottom:0;}
  
    /* 번호 원 */
  .rag-num{
    position:absolute;left:9px;top:0;width:22px;height:22px;
    border-radius:50%;line-height:22px;text-align:center;
    font:700 11px/22px "Segoe UI",-apple-system;
    color:var(--up-purple);background:var(--num-bg);;
  }
  
    /* 본문 링크 – 텍스트 + 썸네일  */
  .rag-link{
    display:flex;justify-content:space-between;align-items:flex-start;
    gap:10px;text-decoration:none;color:inherit;border-radius:6px;padding:2px 4px;
  }
  .rag-link:hover{background:#eef2ff;}
  
      /* 날짜 / 제목 묶음 */
  .rag-meta{flex:1;min-width:0;}
  .rag-date{display:block;font-size:12px;color:#666;margin-bottom:2px;}
  .rag-title{display:block;font-weight:500;word-break:break-word;}
  .rag-today-line{margin:0 0 12px;font:600 13px/1 "Segoe UI",-apple-system;color:#5A51FF;}

    /* TODAY 강조 */
  .time-today .rag-date{font-weight:700;color:var(--up-purple);font-size:13px;}
  
    /* 썸네일 */
  .rag-thumb{
    flex-shrink:0;width:54px;height:54px;object-fit:cover;border-radius:4px;border:1px solid #d0d2e3;
  }
  
/* ================== Chat 라인 기본 ================== */

/* ─── 사용자 발화 ─────────────────────── */
.chat-line.user{
  font-weight:700;
  font-size:28px;
  line-height:1.35;
  letter-spacing:-.3px;
  color:var(--up-purple);
  margin-bottom:6px;
}
.chat-line.user::before{
  content:"💬 ";
  font-size:28px;
}

/* ─── 어시스턴트 답변 ─────────────────── */
.chat-line.assistant{
  font-size:16px;
}

.chat-line.assistant p{
  margin:0.6em 0;          /* 1em → 0.6em */
  line-height:1.6;         /* 살짝 넉넉하게 */
}


/* 제목(h2·h3) 여백 ↓ */
.chat-line.assistant h2,
.chat-line.assistant h3{
  margin:0.8em 0 0.4em;   /* 위 0.8em / 아래 0.4em */
}

/* 소제목·본문 단락 여백 ↓ */
.chat-line.assistant h4,
.chat-line.assistant p{
  margin:0.4em 0;         /* 기본 1em → 0.4em */
}

/* ─── 목록(ul·ol) 스타일 ───────────────── */
.chat-line.assistant ul,
.chat-line.assistant ol{
  /* 불릿/숫자 기본 유지 */
  margin:0.75em 0 0.75em 1.4em;  /* 들여쓰기 + 상하 간격 */
  padding:0;                     /* padding → 0 */
}

/* 단일 항목 간격 */
.chat-line.assistant li{
  margin:0.25em 0;
  line-height:1.5;
}
.chat-line.assistant li:empty {
  display: none;
}
/* 중첩 목록 추가 들여쓰기 */
.chat-line.assistant ul ul,
.chat-line.assistant ol ol{
  margin-left:1.2em;
}
.chat-line.assistant ol:empty {
  display: none;
}
.chat-line.assistant ul:empty {
  display: none;
}
/* ─── (1)(2)… 숫자 스타일 ─────────────── */
.chat-line.assistant ol.decimal-paren{
  counter-reset:item;
}
.chat-line.assistant ol.decimal-paren > li{
  list-style:none;            /* 기본 숫자 숨김 */
  position:relative;
  padding-left:1.6em;
}
.chat-line.assistant ol.decimal-paren > li::before{
  position:absolute;
  left:0;
  counter-increment:item;
  content:"(" counter(item) ")";  /* (1) (2) … */
  color:var(--up-purple);
  font-weight:600;
}



/* ─────────────────── 입력창 ─────────────────── */
.chat-input-wrap{position:sticky;bottom:0;left:0;right:0;background:white;padding:16px 0;}
.chat-form{max-width:840px;margin:0 auto;background:#fff;border:1px solid #e0e0e0;border-radius:12px;display:flex;gap:8px;padding:10px 14px;}
.chat-input{flex:1;resize:none;border:none;outline:none;font-size:16px;line-height:1.4;min-height:40px;max-height:200px;overflow-y:auto;}
.chat-send-btn{
    width:40px;height:40px;min-width:40px;           /* 정사각형 */
    border-radius:50%;border:none;
    background:#0d1117;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:background .15s;
  }
  .chat-send-btn:hover{background:#161b22;}
  /* 스트림 중(stop) 상태 – 붉은 계열 색 */
  .chat-send-btn.stop{background:#161b22;}
  .chat-send-btn.stop:hover{background:#161b22;}

/* 채팅 영역 안의 모든 테이블에 테두리 추가 */
.chat-area table {
  border-collapse: collapse;
  width: 100%;
}
.chat-area th,
.chat-area td {
  border: 1px solid #ddd;
  padding: 0.5em;
  text-align: left;
}



.hint-box{color:#888;font-size:14px;margin-bottom:4px;}


/* ─── Hero ─────────────────────────────── */
.hero{
    max-width:640px;margin:80px auto;text-align:center;
    display:flex;flex-direction:column;align-items:center;gap:36px;
    animation:fadeIn .4s;
  }
  .hero-star{width:72px;height:72px}
  
  .hero-title{
    font-size:42px;font-weight:700;line-height:1.2;margin:0;
  }
  .hero-title small{font-size:24px;font-weight:600}
  .accent{
    background:linear-gradient(90deg,#5A51FF 0%,#3b35a7 100%);
    -webkit-background-clip:text;color:transparent
  }
  
  /* 샘플 프롬프트 */
  .prompt-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%;}
  .prompt-btn{
    padding:14px 18px;border:1px solid #e4e6f0;border-radius:12px;
    background:#fff;font-size:14px;cursor:pointer;
    color: var(--text-light);
  }
  .prompt-btn:hover{background:#f1f0fe;border-color:#d9d9ff}
  

  /* ───────────────── 모바일 전용 레이아웃 ───────────────── */
/* ─────────────────── 전체 뷰포트 넘침 방지 ─────────────────── */
@media (max-width:800px){
  html, body{
    overflow-x:hidden;           /* ① 가로 스크롤 근본 차단 */
  }
  .hero{
    margin : 24px;
    gap: 12px;
    margin-top: 64px;
  }

  .hero-star{width:48px;height:48px}
  
  .hero-title{
    font-size:36px;font-weight:700;line-height:1.2;margin:0;
  }
  .prompt-btn{
    padding:14px 18px;border:1px solid #e4e6f0;border-radius:12px;
    background:#fff;font-size:12px;cursor:pointer;transition:.15s;
  }
  /* 메인 레이아웃 좌우 여백 + 가운데 정렬 */
  .main-layout{
    display: flex;
    align-items: center;
    justify-content: center;
    padding:24px 16px;           /* ② 모바일 좌우 여백 통일 */
    box-sizing:border-box;
    margin: 60px 0;
  }

  /* chat-area 내부 카드도 한 줄로 꽉 차게 */
  .chat-turn{
    grid-template-columns:1fr;
    justify-items:center;        /* ③ 내부 요소 가운데 정렬 */
  }
  .chat-area{align-items: center; justify-content: center;}     
  /* 관련 기사 패널 폭 = 내용 폭, 자동 가운데 정렬 */
  .rag-inline{
    grid-column:1;   
    width:100%;
    max-width:420px;             /* ④ 너무 넓어지지 않도록 상한 */
    margin:20px 0 0;          /*   위 여백 20px + 좌우 auto */
    padding:18px 20px;
    box-sizing:border-box;
    border-top:1px solid #e5e7eb;   /* 위쪽 구분선 */
  }
  .prompt-grid{
    padding:0 12px;          /* 좌우 여백 */
    box-sizing:border-box;
  }
  .chat-input-wrap{
    padding:8px 24px;          /* 기존 위·아래 16px, 좌우 12px */
    box-sizing:border-box;
    position:fixed;      /* ← absolute → fixed  로 교체 */
    left:0;
    right:0;
    bottom:0;
    z-index:100;   
  }
  .chat-input,
  .chat-form input,
  .chat-form textarea {
    font-size: 16px !important;   /* ← 핵심: 16 px 이상이면 확대 안 됨 */
  }

  /* .chat-form 의 margin:auto 제거 → wrap 안에서 100% 폭 사용 */
  .chat-form{
    margin:0;
  }
  /* 번호 원·본문 링크 좌우 여백 살짝 추가 */
  .rag-item{padding-left:48px;margin-bottom:22px;}
  .rag-num{left:12px;}
  .rag-link{gap:12px;padding:4px 6px;}

.chat-line.user::before{content:"💬 ";font-size:18px;}
.chat-line.user{
  font-weight:700;font-size:16px;line-height:1.35;letter-spacing:-.3px;
  color:var(--up-purple);margin-bottom:6px;
}
.chat-line.assistant{font-size:14px;}
}
  
  /* ─── 모델 선택 토글 ───────────────────────── */
.model-selector{position:relative; justify-content: center; align-items: center; display: flex; }
.model-btn{
  padding:6px 14px;border-radius:20px;border-width: 0;
  background:#fff;font:18px "Segoe UI",sans-serif;cursor:pointer;
  color: #5D5D5D; font-weight: 600;
}
/* 중복 중 하나만 유지 – 이것만 남겨두세요 */
.model-menu{
    position:absolute;left:0;top:110%;min-width:180px;
    background:#fff;border-radius:10px;
    box-shadow:0 4px 12px rgba(0,0,0,.08);display:none;z-index:10;
    padding : 12px;
  }
  
.model-menu li{
  padding:10px 14px;font-size:18px;cursor:pointer;list-style:none;
}

.model-menu li:hover{background:#f5f6ff}
.model-menu li.active{font-weight:700;color:#5A51FF}

/* ─── <think> 임시 표시 박스 ────────────────── */
.think-box{
  background:#E5DEF6;border-radius:8px;padding:10px 12px;
  font-size:14px;color:#5D5D5D;font-style:italic;
  margin-bottom:6px;white-space:pre-wrap;
}

/* ▽ 라벨 추가 — 이 줄만 신규 */
.think-box::before{
  content:"💭 생각 중…";
  display:block;
  font-weight:600;
  margin-bottom:4px;
}


/* 숫자 뱃지 기본 모양 */
.ref-badge{
  display:inline-flex;           /* 숫자를 수평·수직 가운데 정렬 */
  justify-content:center;
  align-items:center;

  width:22px; height:22px;       /* 원 크기 = 기사 리스트 번호와 동일 */
  margin:0 2px;                  /* 글자와 살짝 간격 */
  border-radius:50%;
  font:700 12px/1 "Segoe UI",-apple-system;
  color:var(--up-purple);
  background:var(--num-bg);

  text-decoration:none;          /* 밑줄 제거 */
  transition:opacity .15s;
}
.ref-badge:hover{ opacity:.75; }

/* ( ) 자동으로 붙이기 ― 숫자를 감쌀 필요가 없으면 생략해도 OK */
.ref-badge::before{content:"(";}
.ref-badge::after {content:")";}

 /* style.css */
.rag-notice{
  margin-top:0.5rem;
  padding:0.6rem 1rem;
  font-size:0.875rem;
  line-height:1.4;
  
  border-radius:0.5rem;
  color:#5e5e5e;
}


.menu-btn{
  font-size:32px;
  background:none;
  border:none;
  cursor:pointer;
  padding:4px 16px;
  color: var(--text-light);
}

.menu-dropdown{
  position:absolute;
  right:20px;
  top:56px;
  z-index:1000;

  background:#fff;
  border:1px solid #e5e5e5;
  border-radius:16px;              /* 둥글게 */
  box-shadow:0 6px 24px rgba(0,0,0,.08);
  padding:8px 0;                   /* 위·아래 여백 */
  
  opacity:0;
  transform:translateY(-12px);
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  text-decoration: none;
}
.menu-dropdown.active{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

/* ─── 리스트 & 아이템 ─── */
.menu-list{list-style:none;margin:0;padding:0;width:210px;}

.menu-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  font-size:15px;
  cursor:pointer;
  user-select:none;
  color:#111;              /* 원하는 글자색 */
  text-decoration:none;
 
}
.menu-item:hover{background:#f6f6f6}

/* 아이콘 & 화살표 */
.menu-item .icon{font-size:20px;line-height:1}
.menu-item .arrow{margin-left:auto;font-size:18px;line-height:1}

/* 구분선 */
.divider{
  height:1px;
  margin:4px 0 4px 16px;
  background:#e5e5e5;
}

/* 삭제(위험) 항목 */
.menu-item.danger{
  color:#d32f2f;
}
.menu-item.danger:hover{
  background:rgba(211,47,47,0.1);
}