/* ───────────── 사이드바 ───────────── */
#sidebar{
  --sidebar-width:360px;
  width:var(--sidebar-width); min-width:var(--sidebar-width); background:var(--bg-side); border-right:1px solid var(--line);
  display:flex; flex-direction:column; height:100%; min-height:0; transition:margin .25s ease;
}
#sidebar.closed{margin-left:calc(-1 * var(--sidebar-width))}
@media(max-width:860px){
  #sidebar{--sidebar-width:min(360px,calc(100vw - 56px))}
}
.side-head{padding:18px 16px 10px; display:flex; align-items:center; gap:10px}
/* 브랜드는 상단바가 갖는다(사이드바 없는 9개 화면에서도 보이도록). 여기는 섹션 이름만. */
.side-head .side-title{flex:1; min-width:0; font-size:var(--font-size-base); font-weight:700;
  color:var(--tx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* 사이드바 접기·펼치기는 chat 화면이 소유한다 — 나머지 화면에는 버튼이 아예 없다 */
#sb-open{position:absolute; left:0; top:6px; z-index:20; display:none;
  width:26px; height:34px; border-radius:0 9px 9px 0; background:var(--bg-card);
  border:1px solid var(--line); border-left:none; color:var(--tx-dim)}
#sb-open:hover{color:var(--accent)}
body.chat-mode.sidebar-closed #sb-open{display:flex}
/* 손잡이는 사이드바의 실제 상태를 따른다 — 다른 화면을 들렀다 돌아와도(본문 클래스가 초기화돼도)
   접힌 사이드바를 다시 펼칠 수 있어야 한다 */
body.chat-mode #sidebar.closed + #main #sb-open{display:flex}

/* 좁은 폭(≤860px)에서 사이드바는 헤더 아래 작업 영역에 겹친다.
   겹친 동안만 딤 배경을 깔고, 누르면 닫는다. */
#sb-backdrop{
  position:absolute; inset:0; z-index:29; background:rgba(16,24,40,.38); border:none; padding:0;
  cursor:pointer;
}
#sb-backdrop[hidden]{display:none}
body:not(.chat-mode) #sb-backdrop{display:none}

.logo{
  width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,#7c8cf8,#5eead4);
  display:flex; align-items:center; justify-content:center; font-size:18px; flex:none;
}
.brand b{font-size:var(--font-size-base); display:block; letter-spacing:-.01em}
.brand span{font-size:var(--font-size-base); color:var(--tx-dim)}

.new-btn{
  margin:10px 14px 6px; padding:10px 14px; border-radius:12px; border:1px solid var(--line);
  display:flex; align-items:center; gap:8px; font-size:var(--font-size-base); color:var(--tx);
  background:var(--bg-card); transition:background .15s;
}
.new-btn:hover{background:var(--bg-hover)}
.side-scroll{flex:1; overflow-y:auto; padding:6px 8px 12px}
/* 한글 라벨에 대문자 변환은 뜻이 없고 자간만 벌어졌다.
   구역은 크기가 아니라 경계선과 굵기로 나눈다(기본 13pt 유지). */
.side-label{
  font-size:var(--font-size-base); font-weight:700; color:var(--tx-dim);
  padding:14px 10px 6px; margin-top:8px; border-top:1px solid var(--line);
}
.side-scroll > .side-label:first-child{margin-top:0; border-top:none; padding-top:8px}
.scn-item{
  width:100%; text-align:left; padding:9px 10px; border-radius:10px; font-size:var(--font-size-base);
  color:var(--tx-dim); display:flex; gap:8px; align-items:flex-start; transition:background .12s;
}
.scn-item:hover{background:var(--bg-hover); color:var(--tx)}
.scn-item.active{background:var(--accent-soft); color:var(--tx)}
.scn-item .ic{flex:none; margin-top:1px}
.scn-item .t{overflow:hidden; text-overflow:ellipsis; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; font-weight:600}
.scn-item .sub{display:block; font-size:.9em; font-weight:400; color:var(--tx-faint); margin-top:2px}
.topic-grid{display:flex; flex-wrap:wrap; gap:6px; padding:4px 10px}
.topic-chip{
  font-size:var(--font-size-base); padding:4px 10px; border-radius:999px; background:var(--bg-chip);
  border:1px solid var(--line); color:var(--tx-dim); transition:all .12s;
}
.topic-chip:hover{color:var(--tx); border-color:var(--accent)}
.side-foot{
  border-top:1px solid var(--line); padding:12px 16px; font-size:.9em; color:var(--tx-faint);
}
.side-foot .dot{display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--green); margin-right:6px}


#chat{flex:1; overflow-y:auto; scroll-behavior:smooth}
.chat-inner{max-width:860px; margin:0 auto; padding:28px 20px 20px}


/* 환영 화면 */
#welcome{max-width:760px; margin:0 auto; padding:48px 20px 20px; text-align:center}
#welcome .hero-ic{font-size:42px; margin-bottom:18px}
#welcome h1{font-size:26px; letter-spacing:-.02em; margin-bottom:10px}
#welcome p{color:var(--tx-dim); font-size:var(--font-size-base); margin-bottom:30px}
.sugg-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; text-align:left}
/* 로딩 · 오류 · 빈 결과 상태 블록은 두 칸을 다 쓴다 */
.sugg-grid > .state{grid-column:1 / -1}
.sugg{
  padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--bg-card); transition:all .15s; font-size:var(--font-size-base); color:var(--tx);
}
.sugg:hover{border-color:var(--accent); transform:translateY(-1px); box-shadow:var(--shadow)}
.sugg b{display:block; margin-bottom:4px; font-size:var(--font-size-base)}
.sugg span{color:var(--tx-dim); font-size:var(--font-size-base); display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.sugg .tag{display:inline-block; font-size:var(--font-size-base); padding:1px 8px; border-radius:999px;
  margin-bottom:6px; font-weight:600}
.tag.real{background:var(--red-bg); color:var(--red)}
.tag.hypo{background:var(--blue-bg); color:var(--blue)}


/* 메시지 */
.msg{display:flex; gap:12px; margin-bottom:26px; animation:fadein .25s ease}
@keyframes fadein{from{opacity:0; transform:translateY(6px)} to{opacity:1}}
.msg .avatar{
  width:32px; height:32px; border-radius:9px; flex:none; display:flex;
  align-items:center; justify-content:center; font-size:var(--font-size-base); margin-top:2px;
}
.msg.user{flex-direction:row-reverse}
.msg.user .avatar{background:var(--user-bubble)}
.msg.assistant .avatar{background:linear-gradient(135deg,#7c8cf8,#5eead4); color:#10121a}
.msg .body{min-width:0; max-width:100%}
.msg.user .body{
  background:var(--user-bubble); padding:10px 16px; border-radius:16px 4px 16px 16px;
  max-width:70%; font-size:var(--font-size-base);
}
.msg.assistant .body{flex:1}
.a-text{font-size:var(--font-size-base); margin-bottom:12px}
.a-text b{color:var(--accent)}


.changes-box{margin-top:10px; border-top:1px dashed var(--line); padding-top:10px}
.changes-box .chg{font-size:var(--font-size-base); color:var(--tx-dim); padding:3px 0; display:flex; gap:6px;
  flex-wrap:wrap; align-items:center}
.chg .ct{font-weight:700; flex:none}
.ct.amend{color:var(--amber)} .ct.establish{color:var(--green)} .ct.repeal{color:var(--red)}
.norm-chips{display:inline-flex; gap:4px; flex-wrap:wrap}
.norm-chip{font-size:var(--font-size-base); padding:1px 8px; border-radius:999px; font-weight:600;
  border:1px solid var(--line); background:var(--bg-chip); color:var(--tx-dim)}
.norm-chip.obligation{background:var(--amber-bg); color:var(--amber); border-color:transparent}
.norm-chip.prohibition{background:var(--red-bg); color:var(--red); border-color:transparent}
.norm-chip.permission{background:rgba(7,148,85,.10); color:var(--green); border-color:transparent}
.norm-chip.recommendation{background:var(--blue-bg); color:var(--blue); border-color:transparent}
.norm-chip.subject{background:var(--accent-soft); color:var(--accent); border-color:transparent}


/* 결과 다음 행동 — 결과 요약 바로 아래 한 줄 */
.impact-actions{margin:-6px 0 12px}
.impact-actions .imp-publish{
  display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:10px;
  background:var(--accent); color:var(--accent-contrast); font-weight:600; font-size:var(--font-size-base);
  border:1px solid transparent;
}
.impact-actions .imp-publish:hover:not(:disabled){filter:brightness(1.06)}
.impact-actions .imp-publish:disabled{background:var(--bg-chip); color:var(--tx-dim); border-color:var(--line)}
.imp-msg{margin-bottom:12px}
.imp-msg:empty{display:none}

.sev-group{margin-bottom:14px}
.sev-head{
  display:flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px;
  font-size:var(--font-size-base); font-weight:700; width:100%; text-align:left; border:1px solid var(--line);
  background:var(--bg-card);
}
.sev-head .n{margin-left:auto; font-size:var(--font-size-base); color:var(--tx-dim); font-weight:500}
.sev-head .chev{transition:transform .2s; color:var(--tx-faint)}
.sev-group.open .chev{transform:rotate(90deg)}
.sev-head.direct{border-left:3px solid var(--red)}
.sev-head.indirect{border-left:3px solid var(--amber)}
.sev-head.review{border-left:3px solid var(--blue)}
.sev-head.section{border-left:3px solid var(--tx-faint)}
.sev-body{display:none; padding:8px 0 0}
.sev-group.open .sev-body{display:block}


.show-more{
  width:100%; padding:8px; font-size:var(--font-size-base); color:var(--accent); border:1px dashed var(--line);
  border-radius:10px; margin-top:2px;
}
.show-more:hover{background:var(--accent-soft)}


/* 지식 카드 — 챗 화면에서만 펼치기 단서와 머리·본문 경계를 준다
   (같은 .k-card 를 쓰는 시뮬레이터 화면에는 영향이 없도록 #chat 안으로 한정) */
#chat .k-card{cursor:pointer}
#chat .k-card .k-head{padding-bottom:6px; border-bottom:1px dashed var(--line)}
#chat .k-card .k-toggle{
  display:block; margin-top:8px; padding:2px 0; font-size:.9em; color:var(--accent);
  text-align:left; background:none; border:none;
}
#chat .k-card .k-toggle:hover{text-decoration:underline}
#chat .k-card.expanded .k-toggle{color:var(--tx-dim)}
#chat .k-card:hover{border-color:var(--accent)}
#chat .k-card .k-more{font-size:.9em; color:var(--tx-faint)}


/* 검색 결과 */
.search-card{border:1px solid var(--line); border-radius:12px; background:var(--bg-card);
  padding:10px 14px; margin-bottom:8px; font-size:var(--font-size-base)}
.search-card .meta{font-size:.9em; color:var(--tx-faint); margin-bottom:4px}


/* 로딩 */
.dots{display:inline-flex; gap:5px; padding:6px 2px}
.dots i{width:7px; height:7px; border-radius:50%; background:var(--tx-faint); animation:blink 1.2s infinite}
.dots i:nth-child(2){animation-delay:.2s} .dots i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25} 40%{opacity:1}}


/* ───────────── 입력 영역 ───────────── */
#composer-wrap{flex:none; padding:10px 20px 18px; background:linear-gradient(transparent, var(--bg) 40%)}
#composer{
  max-width:860px; margin:0 auto; position:relative;
}
#suggest-pop{
  position:absolute; bottom:100%; left:0; right:0; margin-bottom:8px;
  background:var(--bg-card); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); overflow:hidden; display:none; max-height:300px; overflow-y:auto;
}
#suggest-pop .sp-item{
  width:100%; text-align:left; padding:10px 14px; font-size:var(--font-size-base); display:flex; gap:8px;
  border-bottom:1px solid var(--line); color:var(--tx-dim);
}
#suggest-pop .sp-item:last-child{border-bottom:none}
#suggest-pop .sp-item:hover, #suggest-pop .sp-item.sel{background:var(--bg-hover); color:var(--tx)}
.input-box{
  display:flex; align-items:flex-end; gap:10px; background:var(--bg-input);
  border:1px solid var(--line); border-radius:18px; padding:10px 12px 10px 18px;
  box-shadow:var(--shadow); transition:border-color .15s;
}
.input-box:focus-within{border-color:var(--accent)}
#prompt{
  flex:1; background:none; border:none; resize:none; color:var(--tx);
  font-family:inherit; font-size:var(--font-size-base); line-height:1.5; max-height:120px; padding:4px 0;
}
#prompt::placeholder{color:var(--tx-faint)}
#prompt:disabled{cursor:not-allowed; color:var(--tx-faint)}
#send{
  width:36px; height:36px; border-radius:11px; background:var(--accent); color:var(--accent-contrast);
  display:flex; align-items:center; justify-content:center; font-size:var(--font-size-base); flex:none;
  opacity:.45; transition:opacity .15s;
}
#send.ready{opacity:1}
#send:disabled{cursor:not-allowed}
.hint{max-width:860px; margin:8px auto 0; text-align:center; font-size:var(--font-size-base); color:var(--tx-faint)}
/* 입력창 안내는 본문보다 한 단계 작게 — 상시 노출 문구가 본문과 경쟁하지 않게 */
#composer-wrap .hint{font-size:.9em; line-height:1.5}