/* 배치와 값: docs/design/mockups(desktop-main, mobile-main, mobile-detail). 시안의 인라인 값을 변수와 클래스로 옮겼고 값은 바꾸지 않았다 */
:root{
  --bg:#F5F6F7; --paper:#FFFFFF; --line:#DEE2E5; --track:#E9ECEF;
  --ink:#12161A; --ink2:#333A40; --ink3:#4A5259; --mute:#79838B; --mute2:#8D969D; --mute3:#A3ACB3; --dot:#C3C9CE; --cur:#8A9299;
  --accent:#B93A21; --ok:#1F6B4F;
  --d-cur:#9A938A; --d-div:#EDEAE3; --d-label:#A9A29A;
  /* 글꼴: 시안의 Noto Sans KR+Geist Mono 대신 Pretendard 한 벌. 숫자 표시는 고정폭 숫자(tnum)로 맞춰 정렬을 지킨다 */
  --sans:"Pretendard Variable",system-ui,sans-serif; --num:var(--sans);
  /* 간격 체계: 4pt 기준 6단계(4/8/12/16/24/32). 데스크톱 패딩과 간격은 이 값만 쓴다 */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;
  font-family:var(--sans); font-variant-numeric:tabular-nums; color:var(--ink); -webkit-text-size-adjust:100%;
}
*,::before,::after{box-sizing:border-box}
body{margin:0;background:var(--bg);word-break:keep-all;overflow-wrap:anywhere}
button,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0;text-align:left}
button:disabled,[aria-disabled=true]{cursor:not-allowed}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
button,summary{touch-action:manipulation}
h1,h2,p,ol,ul{margin:0;padding:0}
ol,ul{list-style:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
mark{background:var(--track);color:var(--ink);box-shadow:inset 0 -1px var(--accent);padding:0 1px}
.cid{color:var(--mute2);font-family:var(--num);font-size:9px;font-weight:400}
.lbl{color:var(--accent);font-family:var(--num);font-size:9px;letter-spacing:1.2px;white-space:nowrap}
svg{flex-shrink:0;overflow:visible}
.i11{width:11px;height:11px}.i12{width:12px;height:12px}.i13{width:13px;height:13px}.i14{width:14px;height:14px}.i15{width:15px;height:15px}.i16{width:16px;height:16px}.i17{width:17px;height:17px}

/* 데스크톱: 상단바 / 사이드바 236px / 대화 / 후보 패널 392px */
.app{display:grid;grid-template-columns:236px minmax(0,1fr) 392px;grid-template-rows:52px minmax(0,1fr);height:100vh;height:100dvh}
.topbar{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;height:52px;padding:0 var(--space-5);background:var(--paper);border-bottom:1px solid var(--line)}
.tb-left{display:flex;align-items:center;gap:var(--space-3)}
.logo{color:var(--ink);font-size:13px;font-weight:700;letter-spacing:-.2px;white-space:nowrap}
.tb-rule{width:1px;height:13px;background:var(--line)}
.product{color:var(--mute);font-family:var(--num);font-size:9px;letter-spacing:1.3px;white-space:nowrap}

.side{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-4);background:var(--paper);border-right:1px solid var(--line);overflow:auto;min-height:0}
.new-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-2);width:100%;min-height:36px;padding:var(--space-2) var(--space-3);background:var(--ink);border-radius:3px;color:#FFFFFF;font-size:11.5px;font-weight:600;white-space:nowrap}
.side-label{color:var(--mute2);font-family:var(--num);font-size:9px;font-weight:400;letter-spacing:1.2px;white-space:nowrap}
.recent li{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-3) 0;border-bottom:1px solid var(--line)}
.recent li.on{padding:var(--space-3) 0 var(--space-3) var(--space-2);border-bottom:0;border-left:2px solid var(--accent)}
.rc-t{color:var(--ink2);font-size:11.5px;font-weight:400}
.recent li.on .rc-t{color:var(--ink);font-weight:600}
.rc-m{color:var(--mute2);font-family:var(--num);font-size:9px;white-space:nowrap}
.side-empty{color:var(--mute2);font-size:10.5px;line-height:17px}
.recent:not(:empty) + .side-empty{display:none}

/* 대화 영역 */
.conv{display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--bg)}
.th-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);height:64px;flex-shrink:0;padding:0 var(--space-5);border-bottom:1px solid var(--line)}
.th-left{display:flex;align-items:center;gap:var(--space-2);min-width:0}
.th-titles{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}
.th-title{color:var(--ink);font-size:16px;font-weight:600;letter-spacing:-.7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th-meta{color:var(--mute);font-family:var(--num);font-size:9px;letter-spacing:.6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th-meta:empty{display:none}
.m-new{display:none;align-items:center;gap:4px;min-height:24px;color:var(--ink2);font-size:11px;white-space:nowrap}
body:not(.started) .m-new{display:none!important}
/* 빈 화면에는 편집할 조건이 없다 */
body:not(.started) #edit-conds{display:none}
.th-acts{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0}
.ghost{display:inline-flex;align-items:center;min-height:32px;padding:var(--space-1) var(--space-3);background:var(--paper);border:1px solid var(--line);border-radius:3px;color:var(--ink2);font-size:11px;white-space:nowrap}
.ghost:disabled,.ghost[aria-disabled=true]{color:var(--mute3)}
.banner{padding:var(--space-3) var(--space-5);background:var(--paper);border-bottom:1px solid var(--line);box-shadow:inset 2px 0 var(--accent);color:var(--ink);font-size:12px;font-weight:600}

.thread{flex:1 1 0;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-4) var(--space-5)}
.start h2{color:var(--ink);font-size:16px;font-weight:600;letter-spacing:-.7px;margin:4px 0 6px}
.start p{color:var(--ink3);font-size:12.5px;line-height:21px}
.results{display:flex;flex-direction:column;gap:var(--space-4)}
body.loading .results{opacity:.5;pointer-events:none}
.query{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3) var(--space-4);background:var(--paper);border:1px solid var(--line)}
.q-row{display:flex;align-items:center;justify-content:space-between}
.q-time{color:var(--mute2);font-family:var(--num);font-size:9px;white-space:nowrap}
.q-text{color:var(--ink);font-size:13.5px;line-height:24px;white-space:pre-wrap;max-height:240px;overflow:auto}
.agent-row{display:flex;align-items:center;gap:8px}
.agent-tools{color:var(--mute2);font-family:var(--num);font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.understood{color:var(--mute);font-size:11px;margin-top:-10px}

/* 조건: 키 62px + 값. 고치기 버튼은 겉보기만 작고 누르는 영역은 넓다 */
.conds{display:flex;flex-direction:column}
.cond{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-2) 0;border-bottom:1px solid var(--line)}
.cond:last-child{border-bottom:0}
.cond .k{width:62px;flex-shrink:0;color:var(--mute2);font-size:11px}
.cond .v{flex:1 1 0;min-width:0;color:var(--ink);font-size:12.5px;font-weight:500}
.cond .v small{display:block;margin-top:2px;color:var(--mute2);font-family:var(--num);font-size:9px;font-weight:400;letter-spacing:.4px}
.cond.ex .v{color:var(--ink2)}
.tog,.x{position:relative;color:var(--mute2);font-family:var(--num);font-size:9px;letter-spacing:.8px;white-space:nowrap}
.x{font-size:13px;letter-spacing:0;padding:0 4px}
.tog:hover,.x:hover{color:var(--accent)}
.tog::after,.x::after,.ev-link::after,.sug::after{content:"";position:absolute;inset:-14px -8px}
body.kw .tog{display:none}
body.kw #follow{display:none!important}
.cnote{margin-top:8px;color:var(--mute);font-size:11px}
.excl{margin-top:10px;font-size:11.5px;color:var(--ink2)}
.excl summary{cursor:pointer;color:var(--ink);font-weight:600;padding:6px 0}
.excl li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}
.excl #excl-all{margin-top:8px}

.notes{display:flex;flex-direction:column;gap:var(--space-2)}
.notes:empty{display:none}
.note{color:var(--ink3);font-size:11.5px;line-height:19px}
.note.warn{padding:8px 12px;background:var(--paper);box-shadow:inset 2px 0 var(--accent)}
.note.quiet{color:var(--mute2);font-size:10.5px}
.notes .ghost{align-self:flex-start}
.undo{display:flex;align-items:center;gap:10px;color:var(--ink3);font-size:11.5px}

.res-head{display:flex;align-items:flex-end;justify-content:space-between;padding-top:2px}
.res-head h2{color:var(--ink);font-size:14px;font-weight:600;letter-spacing:-.3px;white-space:nowrap}
.res-sort{color:var(--mute2);font-family:var(--num);font-size:9px;letter-spacing:.8px;white-space:nowrap}
.legend{color:var(--mute3);font-family:var(--num);font-size:9px;letter-spacing:.4px;margin-top:-10px}

/* 후보 행: 순위 18px / 이름 176px / 이유 / 동작 */
.list{border-top:1px solid var(--line)}
.cand{display:grid;grid-template-columns:18px 176px minmax(0,1fr) auto;grid-template-areas:"rk nm rs ra";column-gap:var(--space-4);width:100%;padding:var(--space-3) var(--space-3);background:transparent;border-bottom:1px solid var(--line)}
.cand.on{background:var(--paper)}
.cand .rk{grid-area:rk;color:var(--mute3);font-family:var(--num);font-size:10px}
.cand .nm{grid-area:nm;display:flex;flex-direction:column;gap:2px;min-width:0}
.cand .who{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--ink);font-size:15px;font-weight:600;letter-spacing:-.3px;white-space:nowrap}
.cand .role{color:var(--mute);font-family:var(--num);font-size:9.5px;line-height:14px}
.cand .rs{grid-area:rs;display:flex;flex-direction:column;gap:4px;min-width:0}
.cand .why{color:var(--ink3);font-size:11.5px;line-height:20px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cand .tags{color:var(--mute2);font-family:var(--num);font-size:9px;letter-spacing:.4px}
.cand .partial{color:var(--accent);font-weight:400}
.cand .ra{grid-area:ra;color:var(--mute3);font-family:var(--num);font-size:9px;letter-spacing:.8px;white-space:nowrap}
.cand.on .rk,.cand.on .who,.cand.on .ra{color:var(--accent)}
.cand:hover .who{text-decoration:underline;text-underline-offset:3px}

.follow-q{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-1)}
.fq-label{color:var(--mute2);font-family:var(--num);font-size:9px;letter-spacing:1px;white-space:nowrap}
.fq-text{color:var(--ink);font-size:12.5px;font-weight:500;text-align:right}
.reply{display:flex;align-items:flex-start;gap:8px}
.reply:has(#status:empty){display:none}
.reply-col{display:flex;flex-direction:column;gap:var(--space-1);flex:1 1 0}
.status{color:var(--ink3);font-size:12.5px;line-height:21px}
body.loading .status::before{content:"";display:inline-block;width:9px;height:9px;margin-right:8px;border-radius:50%;border:1.5px solid var(--accent);border-right-color:transparent;animation:spin .8s linear infinite;vertical-align:-1px}
@keyframes spin{to{transform:rotate(1turn)}}
.reply:has(#cancel:not([hidden])){align-items:center}
/* 취소: 진행 표시 줄 오른쪽 끝의 작은 X. 누르는 영역 44px, 줄 높이는 음수 여백으로 유지 */
.cancel{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);min-width:44px;min-height:44px;margin:-12px calc(-1 * var(--space-3)) -12px 0;padding:0 var(--space-3);color:var(--ink3);font-size:11px;white-space:nowrap}
.cancel:hover{color:var(--accent)}
.reply-link{color:var(--accent);font-size:10.5px;font-weight:600;white-space:nowrap}
/* 토큰 모달: 안쪽 폼이 대화상자를 채워 바깥 클릭을 대화상자 자신의 클릭으로 구분한다 */
.token-dialog{width:min(360px,92vw);padding:0;border:1px solid var(--line);border-radius:3px;color:var(--ink)}
.token-dialog::backdrop{background:rgba(18,22,26,.45)}
.token-box{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4)}
.token-box h2{font-size:14px;font-weight:600;letter-spacing:-.3px}
.token-box p{color:var(--ink3);font-size:12px;line-height:18px}
.token-box input{min-height:32px;padding:var(--space-1) var(--space-2);border:1px solid var(--line);border-radius:3px;font-size:12px}
.token-acts{display:flex;justify-content:flex-end;gap:var(--space-2)}
.error{padding:8px 12px;background:var(--paper);box-shadow:inset 2px 0 var(--accent);color:var(--accent);font-size:12px;line-height:19px}
.trace{color:var(--mute);font-size:11px}
.trace summary{cursor:pointer;font-family:var(--num);font-size:9px;letter-spacing:.8px;color:var(--mute2);padding:6px 0}
.scroll{overflow-x:auto}
.trace table{border-collapse:collapse;font-family:var(--num);font-size:9.5px}
.trace th,.trace td{border-bottom:1px solid var(--line);padding:5px 8px;text-align:left;font-weight:400}
.trace p{margin-top:6px}

/* 입력창 */
.composer{display:flex;flex-direction:column;gap:var(--space-2);flex-shrink:0;padding:var(--space-3) var(--space-5) var(--space-4);background:var(--paper);border-top:1px solid var(--line)}
.in-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-2) 0;border-bottom:1px solid var(--line)}
.in-row textarea{flex:1 1 0;min-width:0;border:0;outline:0;resize:none;padding:0;background:transparent;color:var(--ink);font-size:12.5px;line-height:20px;field-sizing:content;min-height:60px;max-height:200px}
.in-row:focus-within{border-bottom-color:var(--ink2)}
body.started .in-row textarea{min-height:20px;max-height:120px}
.in-row textarea::placeholder{color:var(--mute3)}
.send{color:var(--accent);font-family:var(--num);font-size:9.5px;letter-spacing:.8px;white-space:nowrap;min-height:32px;padding:0 var(--space-2)}
.send:disabled{color:var(--mute3)}
.sugs{display:flex;align-items:center;gap:var(--space-2);min-height:15px}
.examples,.follow{display:flex;align-items:center;min-width:0}
.sug{position:relative;color:var(--mute);font-size:10.5px;white-space:nowrap}
.examples .sug{white-space:normal}
.sug:hover{color:var(--accent)}
.sug-dot{color:var(--dot);font-family:var(--num);font-size:9.5px}
.count{margin-left:auto;color:var(--mute3);font-family:var(--num);font-size:9px;white-space:nowrap}
.count.over{color:var(--accent)}
body.started .count:not(.over){display:none}

/* 후보 패널 */
.panel{display:flex;flex-direction:column;min-height:0;background:var(--paper);border-left:1px solid var(--line)}
.p-head{display:flex;align-items:center;justify-content:space-between;height:52px;flex-shrink:0;padding:0 var(--space-4);border-bottom:1px solid var(--line)}
.p-head-l{display:flex;align-items:center;gap:8px}
.eyebrow{color:var(--accent);font-family:var(--num);font-size:9px;letter-spacing:1.3px;white-space:nowrap}
.p-num{color:var(--mute2);font-family:var(--num);font-size:9px;letter-spacing:.8px;white-space:nowrap}
.p-close{display:flex;align-items:center;justify-content:center;min-width:32px;min-height:32px}
.panel.empty .p-close{visibility:hidden}
.d-head{display:none}
.p-body{display:flex;flex-direction:column;gap:var(--space-4);flex:1 1 0;min-height:0;overflow:auto;padding:var(--space-4)}
.p-empty{color:var(--mute);font-size:11px;line-height:17px}
.ident{display:flex;flex-direction:column;gap:4px}
.p-name{color:var(--ink);font-size:24px;font-weight:600;letter-spacing:-.9px}
.p-role{color:var(--mute);font-family:var(--num);font-size:10px;letter-spacing:.4px}
.p-cur{color:var(--cur);font-size:11.5px}
.p-acts{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3)}
.act{position:relative;display:inline-flex;align-items:center;gap:4px;color:var(--ink2);font-size:11.5px;font-weight:500;white-space:nowrap}
.act::after{content:"";position:absolute;inset:-12px -6px}
.act:hover{color:var(--accent)}
.act:disabled{color:var(--mute3)}
.t-m,.i-m{display:none}
.sec{display:flex;flex-direction:column;gap:var(--space-2);padding-top:var(--space-3);border-top:1px solid var(--line)}
.sec-l{color:var(--mute2);font-family:var(--num);font-size:9px;font-weight:400;letter-spacing:1.2px;white-space:nowrap}
.crit{display:flex;align-items:flex-start;gap:7px}
.crit .mk{display:flex;align-items:center;justify-content:center;width:11px;height:11px;flex-shrink:0;color:var(--mute3);font-family:var(--num);font-size:10px}
.crit-t{display:flex;flex-direction:column;gap:2px;flex:1 1 0;min-width:0}
.crit-n{color:var(--ink);font-size:11.5px;font-weight:600}
.crit-n small{color:var(--mute2);font-family:var(--num);font-size:9px;font-weight:400;letter-spacing:.4px}
.crit-e{color:var(--mute);font-size:11px;line-height:17px}
.crit-e b{font-weight:600}
.crit.met .crit-e b{color:var(--ok)}
.crit blockquote,.sec blockquote{margin:2px 0 0;padding-left:8px;border-left:1px solid var(--line);color:var(--ink3);font-size:11px;line-height:17px}
.src{color:var(--mute2);font-family:var(--num);font-size:9px;letter-spacing:.4px}
.expl{color:var(--ink2);font-size:12px;line-height:21px}
.miss-t{color:var(--mute);font-size:11px;line-height:17px}
.ev-link{position:relative;color:var(--accent);font-family:var(--num);font-size:9px;letter-spacing:.4px;text-decoration:underline;text-underline-offset:2px;padding:0 3px}
.ev-missing{color:var(--mute2);font-size:10.5px}
.flash{animation:flash 1.6s}
@keyframes flash{0%,60%{background:var(--track)}100%{background:transparent}}
.p-note{margin-top:auto;color:var(--mute3);font-family:var(--num);font-size:9px;line-height:14px}

.resume{width:min(760px,96vw);max-height:90vh;padding:0;border:1px solid var(--line);border-radius:3px;color:var(--ink)}
.resume::backdrop{background:rgba(18,22,26,.45)}
.resume-top{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 16px;background:var(--paper);border-bottom:1px solid var(--line)}
.resume-top h2{font-size:14px;font-weight:600;letter-spacing:-.3px}
.resume .notice{padding:8px 16px;background:var(--bg);color:var(--mute);font-size:11px}
.resume-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-2) var(--space-4) 0;color:var(--mute);font-family:var(--num);font-size:9.5px}
/* 근거 슬라이드: 카드 하나가 슬라이드 폭 전체, scroll-snap으로 스와이프를 한 장씩 정지, overscroll 차단으로 가로 스크롤 전파 방지 */
.hl-btn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;background:var(--paper);border:1px solid var(--line);border-radius:3px;color:var(--ink2)}
.hl-btn[aria-disabled=true]{color:var(--mute3)}
#hl-count{font-size:11px;color:var(--ink3)}
.hl-slides{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;margin-top:var(--space-2)}
.hl-slides::-webkit-scrollbar{display:none}
.hl-card{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;padding:var(--space-2) var(--space-4) var(--space-3);max-height:160px;overflow:auto;font-size:12.5px;line-height:21px;color:var(--ink3)}
.hl-card mark{background:var(--accent);color:#FFFFFF;box-shadow:none}
.hl-empty{padding:var(--space-2) var(--space-4);color:var(--ink3);font-size:11px}
.resume-text{padding:8px 16px 24px;border-top:1px solid var(--line);white-space:pre-wrap;font-size:12.5px;line-height:21px}
.resume-text mark.cur{background:var(--accent);color:#FFFFFF;box-shadow:none}

/* 사이드바를 둘 폭이 없으면 빼고, 새 검색은 머리의 새 검색 버튼이 맡는다 */
@media (max-width:1099px) and (min-width:768px){
  .app{grid-template-columns:minmax(0,1fr) 392px}
  .side{display:none}
  .m-new{display:flex}
}

/* 모바일 메인(390px 시안): 상단바·사이드바·패널을 빼고 대화만 둔다 */
@media (max-width:767px){
  /* 고정 머리와 입력창이 포커스나 스크롤 대상을 가리지 않게 한다 */
  html{scroll-padding-top:56px;scroll-padding-bottom:120px}
  .app{display:block;height:auto}
  .topbar,.side,.panel{display:none}
  .conv{min-height:100vh;min-height:100dvh}
  .th-head{position:sticky;top:0;z-index:5;height:50px;padding:0 14px;background:var(--paper)}
  .th-titles{gap:1px}
  .th-title{font-size:13px;letter-spacing:-.3px}
  .th-meta{font-size:8.5px;letter-spacing:0}
  .m-new{display:flex}
  .th-acts .ghost{display:none}
  .banner{padding:10px 16px}
  .thread{flex:1 0 auto;overflow:visible;gap:13px;padding:14px 16px}
  .results{gap:13px}
  .lbl{font-size:8.5px;letter-spacing:1.1px}
  .query{gap:6px;padding:11px 12px}
  .q-time{font-size:8.5px}
  .q-text{font-size:12px;line-height:22px}
  .agent-row{gap:6px}
  .agent-tools{font-size:8.5px}
  .agent-tools .tn{display:none}
  .understood{margin-top:-7px}
  .cond{gap:10px;padding:6px 0}
  .cond .k{width:44px;font-size:10px}
  .cond .v{font-size:11.5px}
  .res-head{padding-top:0}
  .res-head h2{font-size:13px}
  .res-sort{font-size:8.5px;letter-spacing:.6px}
  .legend{margin-top:-7px;font-size:8.5px}
  .cand{grid-template-columns:16px minmax(0,1fr) auto;grid-template-areas:"rk nm ra" "rk rs rs";column-gap:9px;row-gap:3px;padding:11px 6px;align-items:start}
  .cand .rk{font-size:9.5px}
  .cand .nm{flex-direction:row;align-items:center;gap:6px}
  .cand .who{font-size:14px}
  .cand .role{font-size:8.5px}
  .cand .ra{font-size:8.5px;letter-spacing:0;align-self:center}
  .cand .rs{gap:3px}
  .cand .why{font-size:11px;line-height:19px}
  .cand .tags{font-size:8.5px;letter-spacing:.3px}
  .follow-q{gap:4px}
  .fq-label{font-size:8.5px;letter-spacing:.9px}
  .fq-text{font-size:11.5px}
  .reply{gap:7px}
  .status{font-size:11.5px;line-height:20px}
  .composer{position:sticky;bottom:0;z-index:5;gap:6px;padding:9px 16px calc(12px + env(safe-area-inset-bottom))}
  .in-row{padding:7px 0}
  /* 입력칸 글자 16px 미만이면 iOS Safari가 포커스 때 화면을 확대해 페이지가 옆으로 밀림, 그래서 16px */
  .in-row textarea,.token-box input{font-size:16px;line-height:24px}
  .send{font-size:9px;letter-spacing:.6px}
  .send .kbd{display:none}
  .sug{font-size:10px}
  .sug-dot{font-size:9px}

  /* 모바일 상세: 후보를 누르면 대화를 가리고 패널을 한 화면으로 연다 */
  body.m-detail .conv{display:none}
  body.m-detail .panel{display:flex;min-height:100vh;min-height:100dvh;border-left:0}
  .p-head{display:none}
  .d-head{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 14px;background:var(--paper);border-bottom:1px solid var(--line)}
  .d-head-l{display:flex;align-items:center;gap:8px}
  .d-back{display:flex;align-items:center;justify-content:center;min-width:24px;min-height:24px}
  .d-title{color:var(--ink);font-size:12.5px;font-weight:600;white-space:nowrap}
  .p-body{flex:1 0 auto;overflow:visible;gap:13px;padding:16px 16px 18px}
  .ident{gap:3px}
  .p-name{font-size:22px;font-weight:700;letter-spacing:-.5px}
  .p-role{font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:0}
  .p-cur{color:var(--d-cur)}
  .p-acts{gap:6px}
    .act.prof{gap:5px;padding:8px 11px;background:var(--paper);border:1px solid var(--line);border-radius:4px;font-size:12px}
  .act.prof::after{content:none}
  .p-acts .act:not(.prof){font-size:12px}
  .t-d,.i-d{display:none}
  .t-m{display:inline}
  .i-m{display:block}
  .sec{gap:13px;padding-top:13px;border-top-color:var(--d-div)}
  .sec-l{color:var(--d-label);font-size:9.5px;letter-spacing:1.1px}
  .crit{gap:8px}
  .crit .mk{width:12px;height:12px}
  .crit-n{font-size:12px}
  .p-note{margin-top:0;color:var(--d-label);font-family:var(--sans);font-size:10px;line-height:normal}
}
@media (prefers-reduced-motion:reduce){.flash{animation:none;background:var(--track)}body.loading .status::before{animation:none}}

/* 대비: 정보를 담은 글자는 --ink3(#4A5259) 이상, 10px 이상으로 둔다. 시안 색은 장식 레이블(.lbl, .side-label, .sec-l,
   .eyebrow, .product, .res-sort, .sug-dot)과 비활성 자리에만 남긴다. 미디어 쿼리 뒤에 두어 모바일 크기도 덮는다 */
.p-cur,.p-role,.crit-e,.ev-missing,.miss-t,.p-empty,.note.quiet,.cnote,.understood,.side-empty,.resume .notice,.trace,.sug,.x{color:var(--ink3)}
.cid,.q-time,.th-meta,.rc-m,.cand .role,.cand .tags,.agent-tools,.p-num,.cond .v small,.crit-n small,.legend,.count,.fq-label,.src,.trace summary,.tog,.resume-nav,.p-note{color:var(--ink3);font-size:10px}
.cand .ra,.send{font-size:10px}
/* 한글 라벨 자간: 시안 값은 고정폭 Geist Mono 기준이라 비례폭 Pretendard에서는 글자가 흩어진다. 영문 대문자 라벨(.lbl .product .eyebrow)은 그대로 둔다 */
.side-label,.sec-l,.th-meta,.tog,.x,.res-sort,.cand .ra,.fq-label,.trace summary,.send,.p-num{letter-spacing:0}