/* 체험 웹의 세 화면(로그인·훈련·관리)이 함께 쓴다.
   테마는 라이트 하나, D안 「네이처 캄」에 두 색을 섞은 투톤(듀오톤) 블렌드를 얹은 것이다 (2026-09-23 확정,
   시안: docs/mockups/theme-d-nature-calm.html — 그 시안은 이 파일을 그대로 링크한다).
   모래색 바탕 · 흰 카드 · 세이지 그린 포인트 · 낮은 채도 · 모서리 12px · 그림자는 팝업만.
   **블렌드는 버튼과 포인트에만 쓴다** — 연한 --blend(세이지 → 모래)는 보조 버튼, 진한 --blendDeep 은 주 버튼·
   「접속 중」 칩·토스트·워드마크 점. 면(위 막대·카드·말풍선·표 머리글)은 섞지 않고 단색이다. 처음엔 면에도 넣었다가
   "모두 다 섞으면 안 된다"로 걷어냈다(2026-09-23). 상태색은 상태에만.
   「테스트」(docs/agent_flow.html · pipeline_flow.html)의 :root 도 같은 값이다 — 이름은 그쪽 것(paper·teal …)을
   그대로 두고 값만 맞췄고, tests/test_trial_pages.py 의 ThemeTest 가 짝(bg=paper, accent=teal …)을 맞춰 본다.
   --mute 까지는 글자에 써도 되고(연한 블렌드 위에서도 4.5:1) --hint 는 자리 표시자·장식에만 쓴다.
   CSP 가 인라인 스타일을 막으므로 모양은 전부 여기 클래스로 둔다. */
:root {
  color-scheme: light;
  --bg:#F7F5EF; --bg2:#F1EFE8; --card:#FFFFFF; --ink:#2B2F2A; --ink2:#575D56; --mute:#5C635B; --hint:#9AA097;
  --line:#E3E0D6; --line2:#CFCBBE; --onInk:#FFFFFF;
  --accent:#5F7F62; --accentDeep:#4A6B4E; --accentBg:#E8EFE6; --accentLine:#C9D8C8; --sand:#F4EFE3;
  --blend:linear-gradient(120deg, #DCE6D6 0%, #F4EFE3 100%);                  /* 연한 투톤: 세이지 → 모래 */
  --blendDeep:linear-gradient(120deg, #3A5740 0%, #5F7F62 60%, #6E8B60 100%); /* 진한 투톤: 글자가 놓이는 가운데까지 흰 글자 4.5:1 이상,
                                                                                 오른쪽 끝 모서리만 그 아래 — 두 톤이 보이게 */
  --blendFlow:linear-gradient(120deg, #DCE6D6 0%, #F4EFE3 35%, #C9D8C8 65%, #EDE9DC 100%);   /* 이미지를 만드는 동안 흐르는 투톤 */
  --ok:#35704A; --okBg:#E8EFE6; --warn:#7F5622; --warnBg:#F5EBDD; --warnLine:#E6D3B8;
  --stop:#A9463F; --stopBg:#F7E8E5; --stopLine:#E8C3BF;
  --scrim:rgba(43,47,42,.45); --shadow:0 12px 32px rgba(43,47,42,.14); --soft:0 1px 2px rgba(43,47,42,.05);
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:"Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
  --r:12px;
}

* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { height:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:15px;
       line-height:1.6; -webkit-font-smoothing:antialiased; }
button, input { font:inherit; color:inherit; }
::placeholder { color:var(--hint); }
/* 브라우저가 저장된 아이디를 채우면 칸을 연파랑으로 칠한다 — 흰 칸을 지킨다 */
input:-webkit-autofill { -webkit-box-shadow:0 0 0 1000px var(--card) inset; -webkit-text-fill-color:var(--ink); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
input:focus-visible { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accentBg); }
a.link { color:var(--ink2); text-decoration:none; font-size:14px; }
a.link:hover { color:var(--accentDeep); text-decoration:underline; }

.wordmark { display:flex; align-items:center; gap:8px; }
.wm { display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:700; letter-spacing:.02em; }
.wm::before { content:""; width:10px; height:10px; border-radius:50%; background:var(--blendDeep); }
.wm-sub { font-size:13px; color:var(--mute); }
.btn { font-family:var(--sans); font-size:14px; font-weight:500; line-height:20px; padding:9px 16px; border:1px solid var(--accentLine);
       border-radius:10px; background:var(--blend); color:var(--ink); cursor:pointer; white-space:nowrap; text-decoration:none;
       display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.btn:hover { filter:brightness(.97); }
.btn:disabled { opacity:.5; cursor:default; filter:none; }
.btn.primary { background:var(--blendDeep); border-color:transparent; color:var(--onInk); font-weight:600; }
.btn.primary:hover:not(:disabled) { filter:brightness(1.06); }
.btn.wide { width:100%; padding-block:12px; font-size:15px; }
.btn.ghost { background:transparent; border-color:transparent; color:var(--ink2); }
.btn.ghost:hover { background:var(--bg2); filter:none; }
.btn.danger { background:var(--card); border-color:var(--line2); color:var(--stop); }
.btn.danger.arm { background:var(--stopBg); border-color:var(--stop); }
.btn.small { font-family:var(--mono); font-size:11px; letter-spacing:.02em; line-height:18px; padding:2px 8px; border-radius:6px;
             background:var(--card); border-color:var(--line2); color:var(--ink2); margin-left:4px; }
.btn.small:hover { background:var(--bg2); color:var(--ink); }
label, .lbl { display:block; font-size:13px; font-weight:600; color:var(--ink2); }
input[type="text"], input[type="password"] {
  width:100%; padding:10px 14px; border:1px solid var(--line2); border-radius:10px; background:var(--card); color:var(--ink); }
input.mono { font-family:var(--mono); font-size:13.5px; letter-spacing:.02em; }
input[readonly] { background:var(--bg2); color:var(--ink2); cursor:default; }
.help { font-size:12.5px; color:var(--mute); margin:0; line-height:1.55; }
.err { color:var(--stop); background:var(--stopBg); border:1px solid var(--stopLine); padding:8px 12px; border-radius:10px; font-size:13.5px; margin:0; }
/* 상태 칩 — 점 + 글자. 색만으로 뜻을 나르지 않는다 */
.tag { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:500; padding:3px 10px; border-radius:999px;
       background:var(--bg2); color:var(--ink2); white-space:nowrap; }
.tag::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--hint); }
.tag.online, .tag.done { background:var(--blendDeep); color:var(--onInk); }
.tag.online::before, .tag.done::before { background:#fff; }
.tag.active { background:var(--accentBg); color:var(--accentDeep); }
.tag.active::before { background:var(--accent); }
.tag.never { color:var(--mute); }
.tag.stop { background:var(--warnBg); color:var(--warn); }
.tag.stop::before { background:var(--warn); }
.tag.safety { background:var(--stopBg); color:var(--stop); }
.tag.safety::before { background:var(--stop); }

.bar { flex:none; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:0 24px; height:58px;
       border-bottom:1px solid var(--line); background:var(--bg); position:sticky; top:0; z-index:2; }
.bar .who { font-family:var(--mono); font-size:13px; color:var(--ink2); display:flex; gap:12px; align-items:center; }

/* ── 로그인 ── */
.screen.login { min-height:100%; display:grid; place-items:center; padding:40px 16px; background:var(--bg); }
.login-card { width:100%; max-width:380px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:32px 28px;
              display:flex; flex-direction:column; gap:18px; box-shadow:var(--soft); }
.login-card h1 { font-size:22px; font-weight:700; margin:0; letter-spacing:-.01em; }
.login-card .lead { margin:-8px 0 0; color:var(--ink2); font-size:14px; }
.login-card form { display:flex; flex-direction:column; gap:6px; }
.login-card form label { margin-top:8px; }
.login-card form .err { margin-top:8px; }
.login-card form .btn { margin-top:12px; }
/* 자동 로그인 체크 — 이름과 안내 문구까지 한 덩어리라 어디를 눌러도 켜진다. 전역 label(굵은 작은 글씨)을 덮는다 */
.login-card form label.check { display:grid; grid-template-columns:18px 1fr; column-gap:8px; row-gap:2px; align-items:center;
                               margin-top:8px; padding:8px 0; font-size:14px; font-weight:500; color:var(--ink); cursor:pointer; }
.login-card form label.check input { width:18px; height:18px; margin:0; accent-color:var(--accentDeep); cursor:pointer; }
.login-card form label.check input:focus-visible { outline:2px solid var(--accent); outline-offset:2px; box-shadow:none; }
#intro-title:focus { outline:none; }     /* 「나가기」 뒤 초점만 옮긴다 — 제목에 테두리를 두르지 않는다 */
.login-card form label.check .help { grid-column:2; font-weight:400; }
/* 비밀번호 칸 안의 보기 버튼. 글자가 버튼 밑으로 들어가지 않게 오른쪽을 비운다. */
.pwfield { position:relative; }
.pwfield input { padding-right:44px; }
.pwfield .icon-btn { position:absolute; right:8px; top:50%; transform:translateY(-50%); width:30px; height:30px; }
.pwfield .icon-btn svg { width:18px; height:18px; }

/* ── 훈련 — 대화만 있다. 채점·가드 판정·원문 로그는 여기까지 오지 않는다 ── */
.screen.train { height:100%; display:flex; flex-direction:column; }
.chat { flex:1; min-height:0; overflow-y:auto; scrollbar-gutter:stable both-edges; display:flex; flex-direction:column; }
.intro { width:100%; max-width:440px; margin:auto; padding:32px 16px; display:flex; flex-direction:column; gap:16px; }
.intro h1 { font-size:22px; font-weight:700; margin:0; letter-spacing:-.01em; text-wrap:balance; }
.intro ol { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:8px; font-size:15px; line-height:1.65; }
.intro .lead { color:var(--ink2); margin:0; }
.chat-log { width:100%; max-width:660px; margin:0 auto; padding:28px 16px; display:flex; flex-direction:column; gap:14px; }
.chat-log:empty { display:none; }
.cue-card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:26px 22px; text-align:center; box-shadow:var(--soft); }
.cue-label { font-size:12px; font-weight:600; color:var(--mute); letter-spacing:.04em; }
.cue-card .cue { font-size:32px; font-weight:700; color:var(--accentDeep); letter-spacing:-.02em; margin-top:4px; }
.cue-card .inst { margin:10px 0 0; color:var(--ink2); font-size:15px; line-height:1.65; text-wrap:balance; }
.msg { display:flex; flex-direction:column; gap:5px; max-width:84%; }
.msg.user { align-self:flex-end; align-items:flex-end; }
.msg.bot { align-self:flex-start; align-items:flex-start; }
.msg .from { font-size:12px; color:var(--mute); font-weight:600; padding-left:4px; }
.bubble { padding:12px 16px; border-radius:16px; font-size:15.5px; line-height:1.65; white-space:pre-wrap; overflow-wrap:anywhere; }
.msg.user .bubble { background:var(--accentBg); border:1px solid var(--accentLine); border-bottom-right-radius:6px; }
.msg.bot .bubble { background:var(--card); border:1px solid var(--line); border-bottom-left-radius:6px; }
.bubble.dots { display:flex; align-items:center; gap:5px; color:var(--mute); font-size:13px; }
.bubble.dots i { width:6px; height:6px; border-radius:50%; background:var(--accent); opacity:.35; }
.bubble.dots .tlabel { margin-left:6px; }
@media (prefers-reduced-motion: no-preference) {
  .bubble.dots i { animation:blink 1.2s infinite; }
  .bubble.dots i:nth-child(2) { animation-delay:.2s; }
  .bubble.dots i:nth-child(3) { animation-delay:.4s; }
  @keyframes blink { 0%, 80%, 100% { opacity:.25; } 40% { opacity:1; } }
}
.summary-card { background:var(--card); border:1px solid var(--accentLine); border-radius:16px; padding:18px 20px; }
.summary-card h4 { margin:0 0 6px; font-size:12px; font-weight:700; color:var(--accentDeep); letter-spacing:.04em; }
.summary-card p { margin:0; font-size:15.5px; line-height:1.75; white-space:pre-wrap; }
.image-card { align-self:flex-start; width:100%; max-width:400px; border:1px solid var(--line); border-radius:16px;
              overflow:hidden; background:var(--card); }
.image-card img { display:block; width:100%; height:auto; }
/* 이미지를 만드는 동안의 자리 — 두 톤이 흐른다. 글은 붙이지 않는다("기억을 그린 이미지" 같은 문구 없음) */
.image-card.pending .img { aspect-ratio:1; background:var(--blendFlow); background-size:300% 300%; background-position:0% 50%; }
.image-card.pending .label { display:flex; align-items:center; justify-content:center; gap:5px; padding:10px 12px;
                             font-size:13px; color:var(--mute); }
.image-card.pending .label i { width:6px; height:6px; border-radius:50%; background:var(--accent); opacity:.35; }
.image-card.pending .label span { margin-left:6px; }
@media (prefers-reduced-motion: no-preference) {
  .image-card.pending .img { animation:blendflow 3.2s ease-in-out infinite alternate; }
  @keyframes blendflow { from { background-position:0% 50%; } to { background-position:100% 50%; } }
  .image-card.pending .label i { animation:blink 1.2s infinite; }
  .image-card.pending .label i:nth-child(2) { animation-delay:.2s; }
  .image-card.pending .label i:nth-child(3) { animation-delay:.4s; }
}
.safety-card { border:1px solid var(--stopLine); background:var(--stopBg); border-radius:16px; padding:20px;
               display:flex; flex-direction:column; gap:12px; }
.safety-card p { margin:0; font-size:15.5px; line-height:1.7; }
.safety-card .tel { display:flex; flex-direction:column; align-items:center; gap:2px; padding:14px; border-radius:12px;
                    background:var(--stop); color:#fff; text-decoration:none; font-size:26px; font-weight:700;
                    letter-spacing:.06em; font-variant-numeric:tabular-nums; }
.safety-card .tel small { font-size:12px; font-weight:500; letter-spacing:0; }
.chat-log .note { align-self:center; max-width:100%; font-size:12.5px; line-height:1.6; color:var(--mute); text-align:center; }
.dock { flex:none; border-top:1px solid var(--line); background:var(--bg); padding:12px 16px;
        padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px)); }
.dock-inner { width:100%; max-width:628px; margin:0 auto; }   /* 대화 열(660 - 좌우 16)과 같은 폭 */
#composer-wrap { display:flex; flex-direction:column; gap:6px; }
.composer { display:flex; gap:8px; }
.composer input { flex:1; min-width:0; font-size:15px; padding:11px 14px; border-radius:12px; }
.dock-foot { display:flex; justify-content:flex-end; }
.stoplink { font-size:13px; line-height:18px; padding:2px 8px; }
.choices { display:flex; gap:10px; flex-wrap:wrap; }
.choices .btn { flex:1 1 160px; padding-block:12px; }

/* ── 관리 ── */
.screen.admin { min-height:100%; display:flex; flex-direction:column; }
.content { width:100%; max-width:1040px; margin:0 auto; padding:0 24px; padding-block:28px 64px;
           display:flex; flex-direction:column; gap:18px; }
.head { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; }
.head h2 { font-size:22px; font-weight:700; margin:0; letter-spacing:-.01em; }
.summary { font-size:13px; color:var(--mute); margin:4px 0 0; }
.head-actions { display:flex; gap:8px; align-items:center; }
/* input[type="text"] 의 width:100% 보다 특이도가 높아야 한다 — 아니면 버튼이 다음 줄로 밀린다 */
input.search { width:250px; min-width:0; flex:0 1 250px; padding:9px 14px; font-size:14px; }
.tablewrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--card); box-shadow:var(--soft); }
table.accounts { border-collapse:collapse; width:100%; min-width:780px; font-size:14px; }
.accounts th { text-align:left; font-size:12px; font-weight:600; color:var(--mute); letter-spacing:.02em;
               padding:11px 14px; border-bottom:1px solid var(--line); background:var(--bg2); white-space:nowrap; }
.accounts td { padding:0 14px; height:46px; border-bottom:1px solid var(--line); vertical-align:middle; white-space:nowrap; }
.accounts tbody tr:last-child td { border-bottom:none; }
.accounts tbody tr[data-id] { cursor:pointer; }
.accounts tbody tr:hover td { background:#FBFAF6; }
.accounts td.name { font-weight:600; white-space:normal; min-width:150px; }
.accounts td.mono { font-family:var(--mono); font-size:13px; letter-spacing:.02em; }
.accounts td.pw { color:var(--hint); letter-spacing:.14em; }
.accounts td.dt { font-family:var(--mono); font-size:12.5px; color:var(--ink2); font-variant-numeric:tabular-nums; }
.accounts td.dt.none { color:var(--hint); }
.accounts th.num, .accounts td.num { text-align:right; font-variant-numeric:tabular-nums; }
.accounts td.acts { text-align:right; }
.acts button { font-family:var(--mono); font-size:11px; letter-spacing:.02em; padding:2px 8px; margin-left:4px;
               border:1px solid var(--line2); border-radius:6px; background:var(--card); color:var(--ink2); cursor:pointer; }
.acts button:hover { background:var(--bg2); color:var(--ink); }
.acts button.arm { background:var(--stopBg); color:var(--stop); border-color:var(--stop); }
.accounts td.empty { text-align:center; color:var(--mute); padding:28px; white-space:normal; }

.scrim { position:fixed; inset:0; background:var(--scrim); z-index:10; display:grid; place-items:center; padding:16px; }
.modal { width:100%; max-width:420px; max-height:calc(100vh - 32px); overflow-y:auto; background:var(--card);
         border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); display:flex; flex-direction:column; }
.modal.wide { max-width:720px; }
.modal-head { display:flex; justify-content:space-between; align-items:center; padding:14px 20px; border-bottom:1px solid var(--line); }
.modal-head h3 { margin:0; font-size:15px; font-weight:700; }
.modal form { padding:20px; display:flex; flex-direction:column; gap:6px; }
.modal form label { margin-top:10px; }
.modal form label:first-child { margin-top:0; }
.pwrow { display:flex; gap:8px; }
.pwrow input { flex:1; }
.modal-foot { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }
@media (prefers-reduced-motion: no-preference) {
  .modal { animation:pop .16s ease-out; }
  @keyframes pop { from { transform:translateY(8px); opacity:0; } to { transform:none; opacity:1; } }
}
.detail { padding:20px; display:flex; flex-direction:column; gap:18px; }
.kv { display:flex; flex-wrap:wrap; gap:12px 32px; margin:0; }
.kv div { display:flex; flex-direction:column; gap:2px; }
.kv dt { font-size:12px; color:var(--mute); letter-spacing:.02em; font-weight:600; }
.kv dd { margin:0; font-size:14px; min-height:26px; display:flex; align-items:center; }
.kv dd.mono { font-family:var(--mono); letter-spacing:.02em; }
.pwline { display:flex; align-items:center; gap:4px; }
.pwline .val { font-family:var(--mono); letter-spacing:.06em; min-width:9ch; }
.icon-btn { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0;
            border:1px solid transparent; border-radius:8px; background:transparent; color:var(--mute); cursor:pointer; }
.icon-btn:hover { background:var(--bg2); color:var(--ink); }
.icon-btn svg { width:17px; height:17px; }
.block { display:flex; flex-direction:column; gap:8px; }
.block h4 { margin:0; font-size:12px; font-weight:600; color:var(--mute); letter-spacing:.02em; }
.sesswrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); }
table.sess { border-collapse:collapse; width:100%; min-width:560px; font-size:13px; }
.sess th { text-align:left; font-size:12px; font-weight:600; color:var(--mute); padding:8px 10px;
           border-bottom:1px solid var(--line); background:var(--bg2); white-space:nowrap; }
.sess td { padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; white-space:nowrap; }
.sess tbody tr:last-child td { border-bottom:none; }
.sess td.dt { font-family:var(--mono); font-size:11.5px; color:var(--ink2); font-variant-numeric:tabular-nums; }
.sess th.num, .sess td.num { text-align:right; font-variant-numeric:tabular-nums; }
.sess td.sum { white-space:normal; min-width:220px; color:var(--ink2); }
.sess td.empty { text-align:center; color:var(--mute); padding:20px; }
.detail-foot { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }

.toast { position:fixed; top:16px; left:50%; transform:translateX(-50%); background:var(--blendDeep); color:var(--onInk);
         padding:9px 16px; border-radius:10px; font-size:14px; z-index:20; box-shadow:var(--shadow);
         max-width:calc(100% - 32px); overflow-wrap:anywhere; }
@media (max-width: 520px) {
  .head-actions { width:100%; }
  input.search { flex:1 1 auto; width:auto; }
}