/* docs/mockup.html의 색·글꼴 토큰을 그대로 쓴다 (CLAUDE.md, SPEC.md 11.1) */
:root{
  --paper:#FBFBF9; --ink:#16202B; --muted:#5E6B78; --rule:#DDE2E6;
  --panel:#FFFFFF; --steel:#35566E; --signal:#B86A12; --signal-soft:#F5E8D6;
  --sunk:#F2F3F1; --danger:#B23A2E; --danger-soft:#F6E3E0; --ok:#3A7D5C; --ok-soft:#E1EFE7;
  box-sizing:border-box;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#11171D; --ink:#E8ECEF; --muted:#93A1AC; --rule:#2A343D;
    --panel:#171F26; --steel:#8FB3CC; --signal:#E0A055; --signal-soft:#332818;
    --sunk:#1C242B; --danger:#D98276; --danger-soft:#33201D; --ok:#7FBF9E; --ok-soft:#1B2E24;
  }
}
:root[data-theme="dark"]{
  --paper:#11171D; --ink:#E8ECEF; --muted:#93A1AC; --rule:#2A343D;
  --panel:#171F26; --steel:#8FB3CC; --signal:#E0A055; --signal-soft:#332818;
  --sunk:#1C242B; --danger:#D98276; --danger-soft:#33201D; --ok:#7FBF9E; --ok-soft:#1B2E24;
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"IBM Plex Sans KR","Malgun Gothic","Apple SD Gothic Neo",sans-serif;
  font-weight:400;line-height:1.65;letter-spacing:-0.005em;-webkit-font-smoothing:antialiased;
}
.mono{font-family:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;font-feature-settings:"tnum"}
.wrap{max-width:64rem;margin:0 auto;padding:0 1.25rem}

.mast{border-bottom:1px solid var(--rule);padding:1rem 0}
.mast .wrap{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;justify-content:space-between}
.mark{font-size:1.0625rem;font-weight:600;letter-spacing:-0.02em;margin:0}
.mark span{color:var(--muted);font-weight:400}
.topnav{display:flex;gap:1.25rem;align-items:center;font-size:.9375rem}
.topnav a{color:var(--ink);text-decoration:none;border-bottom:2px solid transparent;padding-bottom:.15rem}
.topnav a:hover,.topnav a.active{border-bottom-color:var(--signal)}
.linklike{font:inherit;background:none;border:none;color:var(--muted);cursor:pointer;padding:0}
.linklike:hover{color:var(--ink)}

main.wrap{padding:2rem 1.25rem 4rem}
h1{font-size:1.4rem;font-weight:600;letter-spacing:-0.02em;margin:0 0 .3rem}
h2{font-size:1.0625rem;font-weight:600;margin:0 0 .6rem}
.sub{color:var(--muted);margin:0 0 1.25rem;font-size:.9375rem}

.card{background:var(--panel);border:1px solid var(--rule);border-radius:6px;padding:1.25rem}
.card + .card{margin-top:1.5rem}

/* 로그인 */
.login-wrap{max-width:22rem;margin:4rem auto}
.field{margin-bottom:1rem}
.field label{display:block;font-size:.8125rem;color:var(--muted);margin-bottom:.3rem}
.field input{
  width:100%;padding:.55rem .7rem;border:1px solid var(--rule);border-radius:4px;
  background:var(--paper);color:var(--ink);font:inherit;
}
.field input:focus{outline:2px solid var(--signal);outline-offset:1px}
.btn{
  font:inherit;font-size:.9375rem;font-weight:500;color:var(--paper);background:var(--steel);
  border:none;border-radius:4px;padding:.6rem 1.1rem;cursor:pointer;
}
.btn:hover{opacity:.92}
.btn.secondary{background:var(--panel);color:var(--ink);border:1px solid var(--rule)}
.btn.danger{background:var(--danger)}
.error-msg{
  background:var(--danger-soft);color:var(--danger);border-radius:4px;
  padding:.6rem .8rem;font-size:.875rem;margin-bottom:1rem;
}

/* 드롭존 */
.dropzone{
  border:2px dashed var(--rule);border-radius:8px;padding:2.5rem 1rem;text-align:center;
  color:var(--muted);background:var(--sunk);cursor:pointer;transition:border-color .15s;
}
.dropzone.drag-over{border-color:var(--signal);color:var(--ink)}
.dropzone input[type=file]{display:none}
.dropzone .pick-btn{margin-top:.75rem}

.toolbar{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin:1rem 0}
.toolbar .hint{font-size:.8125rem;color:var(--muted)}

/* 표 */
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.9375rem}
th,td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid var(--rule);vertical-align:top}
th{font-weight:500;color:var(--muted);font-size:.8125rem}
td.num{font-family:"IBM Plex Mono",monospace;white-space:nowrap}
td.filename{font-family:"IBM Plex Mono",monospace;font-size:.8125rem;word-break:break-all}

/* 상태 배지 */
.status{display:inline-flex;align-items:center;gap:.4rem;font-size:.875rem}
.status .dot{width:.55rem;height:.55rem;border-radius:50%;flex:none}
.status.approved .dot{background:var(--ok)}
.status.approved{color:var(--ok)}
.status.pending .dot{background:var(--signal);border:none}
.status.pending{color:var(--signal)}
.status.received .dot{background:var(--muted)}
.status.received{color:var(--muted)}
.status.duplicate .dot{background:transparent;border:1px solid var(--muted)}
.status.duplicate{color:var(--muted)}
.status.failed .dot{background:var(--danger)}
.status.failed{color:var(--danger)}
.status.rejected .dot{background:var(--danger)}
.status.rejected{color:var(--danger)}
.reason{display:block;font-size:.8125rem;color:var(--muted);margin-top:.15rem}

select,button.filter{font:inherit;padding:.4rem .6rem;border:1px solid var(--rule);border-radius:4px;background:var(--panel);color:var(--ink)}

.note{border-left:2px solid var(--rule);padding:.1rem 0 .1rem .9rem;color:var(--muted);font-size:.9375rem}

/* ---- 메신저 화면 (mockup.html의 console/thread 패턴을 그대로 씀) ---- */
main.wrap.chat-main{padding:1.25rem;max-width:none}
.chat-layout{display:grid;grid-template-columns:16rem 1fr;gap:1.25rem;height:calc(100vh - 6rem)}
/* 휴대폰용 버튼 — PC에서는 숨긴다 (아래 휴대폰 화면 규칙에서 보인다) */
.nav-toggle,.list-open,.list-head{display:none}

.convo-list{border:1px solid var(--rule);border-radius:6px;background:var(--panel);overflow-y:auto;display:flex;flex-direction:column}
.convo-list .new-btn{padding:.7rem .9rem}
.convo-row{display:flex;align-items:center;border-bottom:1px solid var(--rule)}
.convo-row:hover,.convo-row.active{background:var(--sunk)}
.convo-row a{flex:1;display:block;padding:.7rem .9rem;color:var(--ink);text-decoration:none;font-size:.875rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.convo-delete{flex:none;background:none;border:none;color:var(--muted);font-size:1.1rem;line-height:1;padding:.4rem .7rem;cursor:pointer}
.convo-delete:hover{color:var(--danger)}

.console{display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:6px;background:var(--panel);overflow:hidden}
.console-head{display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;border-bottom:1px solid var(--rule);background:var(--sunk)}
.console-head select{margin-left:auto}
.console-head .model-pick{margin-left:auto;display:flex;align-items:center;gap:.4rem;font-size:.8125rem;color:var(--muted)}
.console-head .model-pick select{margin-left:0;max-width:22rem;font-size:.8125rem}
.thread{flex:1;padding:1.25rem;overflow-y:auto}
.turn{margin:0 0 1.1rem}
.turn:last-child{margin-bottom:0}
.ask{display:inline-block;max-width:min(34rem,88%);background:var(--steel);color:var(--paper);padding:.5rem .85rem;border-radius:3px 3px 3px 0;font-size:.9375rem;white-space:pre-wrap}
.reply{border-left:2px solid var(--signal);padding:.15rem 0 .15rem .9rem;max-width:44rem;font-size:.9375rem}
.reply p{margin:0 0 .6rem;white-space:pre-wrap}
.reply p:last-child{margin-bottom:0}

.grade{display:inline-flex;align-items:baseline;gap:.4rem;border:1px solid var(--signal);color:var(--signal);background:var(--signal-soft);padding:.1rem .5rem .15rem;border-radius:2px;font-size:.75rem;margin-bottom:.55rem}
.grade.none{border-color:var(--muted);color:var(--muted);background:var(--sunk)}
.grade b{font-family:"IBM Plex Mono",monospace;font-size:.9375rem;font-weight:500;line-height:1}
.code-card{font-family:"IBM Plex Mono",monospace;font-size:.9375rem;margin:.3rem 0 .6rem}
.cases{margin:.55rem 0 .6rem;padding:0;list-style:none;border-top:1px solid var(--rule)}
.cases li{padding:.5rem 0;border-bottom:1px solid var(--rule);font-size:.875rem}
.cases .meta{display:flex;gap:.75rem;color:var(--muted);font-family:"IBM Plex Mono",monospace;font-size:.75rem;margin-bottom:.2rem}
.cases .body{color:var(--ink)}
.attachment-note{font-size:.8125rem;color:var(--muted);margin:.3rem 0}

.composer{display:flex;gap:.5rem;align-items:flex-end;padding:.85rem 1rem;border-top:1px solid var(--rule);background:var(--sunk)}
.composer textarea{flex:1;resize:none;font:inherit;padding:.55rem .7rem;border:1px solid var(--rule);border-radius:4px;background:var(--paper);color:var(--ink);min-height:2.6rem;max-height:8rem}
.composer .attach-btn{font-size:1.1rem;line-height:1;padding:.5rem .65rem}
.composer input[type=file]{display:none}

.chips{display:flex;flex-wrap:wrap;gap:.5rem;padding:.85rem 1rem;border-top:1px solid var(--rule);background:var(--sunk)}
.chips button{font:inherit;font-size:.875rem;color:var(--ink);background:var(--panel);border:1px solid var(--rule);border-radius:2px;padding:.4rem .7rem;cursor:pointer}
.chips button:hover{border-color:var(--steel)}

.dots{display:inline-flex;gap:.22rem;padding:.3rem 0}
.dots i{width:.3rem;height:.3rem;border-radius:50%;background:var(--muted);animation:blink 1.1s infinite}
.dots i:nth-child(2){animation-delay:.18s}
.dots i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}
@media (prefers-reduced-motion:reduce){.dots i{animation:none;opacity:.5}}

/* ---- 휴대폰·작은 태블릿 (폭 768px 이하, 2026-10-16) ----
   - 위쪽 메뉴는 '메뉴' 버튼으로 접는다 (마스터는 링크가 11개라 화면 밖으로 넘쳤다)
   - 채팅은 채팅창이 화면을 다 쓰고, 대화 목록은 '대화 목록' 버튼으로 바꿔 본다
   - 입력칸 글자를 16px로 — 그보다 작으면 아이폰이 누를 때마다 화면을 확대한다 */
@media (max-width:48rem){
  .wrap{padding:0 1rem}
  main.wrap{padding:1rem 1rem 2.5rem}
  h1{font-size:1.25rem}
  .mast{padding:.6rem 0}
  .mast .wrap{flex-wrap:wrap;gap:.5rem}
  .mark{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nav-toggle{display:inline-flex;align-items:center;font:inherit;font-size:.9375rem;color:var(--ink);background:var(--panel);border:1px solid var(--rule);border-radius:4px;padding:.4rem .8rem;cursor:pointer}
  .topnav{display:none;flex-basis:100%}
  .mast.nav-open .topnav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.25rem;padding-top:.25rem}
  .topnav a,.topnav .linklike{display:block;padding:.6rem .7rem;border:1px solid var(--rule);border-radius:4px;background:var(--panel);text-align:left;width:100%}
  .topnav a.active{border-color:var(--signal);background:var(--signal-soft)}

  input,select,textarea{font-size:16px!important}
  th,td{padding:.45rem .5rem;font-size:.875rem}
  td:first-child:not(.filename){white-space:nowrap}
  .login-wrap{margin:1.5rem auto}
  .toolbar{gap:.5rem}
  .toolbar input:not([type=checkbox]):not([type=radio]):not([type=file]){flex:1 1 100%;min-width:0!important;padding:.5rem .6rem;border:1px solid var(--rule);border-radius:4px;background:var(--panel);color:var(--ink)}
  .toolbar select{flex:1 1 auto}

  main.wrap.chat-main{padding:.5rem;padding-bottom:max(.5rem,env(safe-area-inset-bottom))}
  .chat-layout{grid-template-columns:1fr;gap:0;height:calc(100vh - 4rem);height:calc(100dvh - 4rem)}
  .convo-list{display:none}
  .chat-layout.show-list .convo-list{display:flex}
  .chat-layout.show-list .console{display:none}
  .list-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.6rem .9rem;border-bottom:1px solid var(--rule);background:var(--sunk)}
  .list-open{display:inline-flex;margin-left:auto;font-size:.875rem;padding:.35rem .7rem}
  .convo-row a{padding:.85rem .9rem;font-size:.9375rem}
  .convo-delete{padding:.6rem .9rem;font-size:1.3rem}

  .console-head{flex-wrap:wrap;gap:.4rem .6rem;padding:.55rem .75rem}
  .console{min-width:0}
  .console-head .model-pick{margin-left:0;flex-basis:100%;min-width:0;width:100%}
  .console-head .model-pick select{flex:1;max-width:none;min-width:0;width:100%;text-overflow:ellipsis}
  .thread{padding:.85rem .75rem}
  .ask{max-width:92%}
  .reply{padding-left:.7rem}
  .chips{flex-wrap:nowrap;overflow-x:auto;padding:.6rem .75rem;-webkit-overflow-scrolling:touch}
  .chips button{flex:none;white-space:nowrap}
  .composer{padding:.6rem .75rem;padding-bottom:max(.6rem,env(safe-area-inset-bottom))}
  .composer .btn{padding:.6rem .9rem}
}