/* 화면 셋 공용. 팔레트·활자·간격은 여기 한 곳에만 있다. 다른 CSS는 var(--이름)만 쓴다.

   차분한 안내 (2026-09-23). 병원·상담센터 안내 화면에서 가져왔다 — 글이 크고,
   누르는 자리가 넓고, 한 번에 한 가지만 보인다. 실험실 컴퓨터 앞에 처음 앉은 사람도
   무엇을 읽고 어디를 눌러야 하는지 헤매지 않게 한다.

   바탕은 흰 종이, 층은 옅은 회색 면과 선으로만 가른다.
   강조색은 쪽빛 하나다 — 핵심 문항 · 단추 · 지금 진행 칸 · 초점 테두리 · 링크.
   요인 다섯 색은 점수 그림(결과·계기판·관리 상세)에만 쓴다. 빨강은 상태(중단·막힘·오류)에만. */

:root{
  color-scheme:light;                /* 스크롤 막대·입력칸을 밝은 모양으로 */
  --sans:"IBM Plex Sans KR",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",
         Pretendard,"Malgun Gothic","Noto Sans KR",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;   /* 계기판·관리 화면의 아이디·숫자 */

  --bg:#ffffff;        /* 바탕 — 흰 종이. 누런 기운이 없다 */
  --paper:#ffffff;     /* 쓰는 칸. 밝은 화면에서는 바탕과 같다 */
  --fill:#f5f7f8;      /* 한 겹 가라앉은 면 — 참가자 답 칸, 표 머리, 오류 안내 */
  --line:#e2e6e9;      /* 가르는 선 · 그림의 10점 격자선 */
  --line-2:#cfd5da;    /* 한 단계 짙은 선 · 진행 표시의 남은 칸 */
  --rule:#7d868e;      /* 쓰는 칸 테두리 · 그림의 50 기준선 · 지난 진행 칸. 기준선은 늘 띠 위에 서므로
                          띠에 맞췄다 — 띠 위 3.2:1, 흰 바탕 3.7:1 */
  --ink:#16191d;       /* 제목 · 면담자 말 · 숫자 */
  --body:#2a2f35;      /* 참가자 답 · 본문 */
  --dim:#525b64;       /* 보조 글 — 화자 이름표, 안내, 눈금 숫자 */
  --faint:#687179;     /* 흐린 글 — 자리표시, 빈칸 표시(—), 점을 잇는 선. 글자에도 쓰므로 AA를 넘긴다 —
                          흰 바탕 5.0:1, 옅은 면 4.6:1 */
  --band:#edf0f2;      /* 결과의 평균 근처(T 45~55). 약 38%가 든다 — "대부분"이 아니다.
                          바탕과 1.14:1뿐이라 양 끝에 --line-2 선을 긋는다(report.css) */
  --accent:#34409b;    /* 강조색 하나, 쪽빛 — 핵심 문항 · 단추 · 지금 진행 칸 · 초점 테두리 · 링크 */
  --on-accent:#ffffff; /* 강조색 위의 글 */
  --warn:#b42318;      /* 상태색 — 중단 · 막힘 · 위기 신호 · 오류. 요인 색에는 빨강을 안 쓴다 */

  /* 성격 5요인 — 점수 그림(결과·계기판·관리 상세)에만 쓴다. 단추·표·문항에는 안 쓴다.
     주황+초록(신호등)·빨강(상태색)을 피했다. 순서가 곧 색각 이상 구분 장치다 — 바꾸면 다시 검사.
     이웃한 짝만 갈린다. 모든 짝을 견주면 수용성·정서안정성(두 보라)과 외향-내향성·성실성이 가깝다
     — 그래서 색만 따로 쓰지 않고 늘 요인 이름 옆에 둔다 */
  --f-EXI:#009ca9;     /* 외향-내향성 — 청록 */
  --f-AGB:#923c88;     /* 수용성 — 자두 */
  --f-CON:#418ad1;     /* 성실성 — 파랑 */
  --f-OPN:#aa7e1a;     /* 개방성 — 황토 */
  --f-EMS:#8152ba;     /* 정서안정성 — 보라 */

  /* 계기판·관리 화면만 쓰는 것 */
  --panel:#f7f8f9;     /* 계기판·설정 판 바탕. 면담 흰 바탕과 한 겹 가른다 */
  --track:#e6eaed;     /* 계기판 진행 칸 바탕 · 점수 막대 바탕 */
  --ghost:#b3bbc2;     /* 빈 점 테두리 · 막대 가운데선 · 지난 점수 표시 */
  --low:#606a74;       /* 되물은 문항 칸 · 도구 결과 로그 · 내려간 점수 차이. 판 위 5.18:1 */
  --high:#16191d;      /* 올라간 점수 차이 (= --ink) */
  --done:#98a1a9;      /* 계기판 지난 진행 칸 */
  --err:#8f1c13;       /* 오류 로그. 판 위 8.43:1 */
}
/* 같은 이름 전부. 밝기 단추(data-dark)가 켠다. 글꼴은 밝기와 무관해 다시 적지 않는다 */
:root[data-dark]{
  color-scheme:dark;
  --bg:#131518;        /* 바탕 — 찬 먹색 */
  --paper:#191c1f;     /* 쓰는 칸 — 바탕에서 한 겹 뜬다 */
  --fill:#212428;      /* 참가자 답 칸 · 표 머리 · 오류 안내 */
  --line:#282c30;
  --line-2:#393e43;
  --rule:#6c757e;      /* 쓰는 칸 테두리 · 50 기준선. 쓰는 칸 위 3.65:1, 띠 위 3.1:1 */
  --ink:#eceef1;
  --body:#c9ced4;
  --dim:#9ea6ae;
  --faint:#838c95;     /* 옅은 면 위에서도 4.56:1 */
  --band:#25292e;      /* 평균 근처(45~55). 관리 상세는 쓰는 칸(--paper) 위에 그려서 거기서도 보이게 올렸다 */
  --accent:#98a5f0;    /* 어두운 바탕에서는 밝힌 쪽빛 */
  --on-accent:#141a3c; /* 밝힌 강조색 위의 글은 짙게 */
  --warn:#f3827a;

  --f-EXI:#13a5b2;
  --f-AGB:#a5479a;
  --f-CON:#3e89d7;
  --f-OPN:#b78a2c;
  --f-EMS:#8a5bc4;

  --panel:#171a1d;
  --track:#262a2e;
  --ghost:#4a5158;
  --low:#939ba3;       /* 판 위 6.21:1 */
  --high:#eceef1;
  --done:#5a626a;
  --err:#ffaaa2;       /* 판 위 9.59:1 */
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);color:var(--body);font-family:var(--sans);
  display:flex;flex-direction:column;overflow:hidden;
  word-break:keep-all;overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
  transition:background .18s ease,color .18s ease;
}
button{font:inherit;color:inherit}
svg{display:block}
/* 초점은 강조색 2px 하나로 통일한다. 쓰는 칸만 테두리가 곧 초점 표시다 */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
textarea:focus,textarea:focus-visible{outline:0}

.left{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}

/* ── 위쪽 띠 ── 이름 · 진행 · 밝기 ─────────────────────── */
.topbar{
  flex:0 0 64px;border-bottom:1px solid var(--line);
  display:flex;align-items:stretch;
}
.topbar > .in{
  flex:1;min-width:0;width:100%;max-width:760px;margin:0 auto;
  display:flex;align-items:center;gap:20px;padding:0 32px;
}
.mark{margin-right:auto;font-size:18px;font-weight:600;
      letter-spacing:-.01em;color:var(--ink)}

/* 끝이 보여야 대충 쓰지 않는다 */
.prog{display:flex;align-items:center;gap:16px}
.pips{display:flex;gap:5px}
.pips i{width:24px;height:6px;border-radius:3px;background:var(--line-2)}
.pips i.done{background:var(--rule)}
.pips i.now{background:var(--accent)}
.at{
  font-size:17px;color:var(--dim);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.at b{font-size:20px;font-weight:700;color:var(--ink)}

.ghost{
  flex:0 0 auto;width:40px;height:40px;
  border:0;border-radius:8px;background:none;color:var(--dim);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .12s,color .12s;
}
.ghost:hover{background:var(--fill);color:var(--ink)}
.ghost svg{width:20px;height:20px}
.ghost .sun{display:none}
:root[data-dark] .ghost .moon{display:none}
:root[data-dark] .ghost .sun{display:block}

/* ── 한 칸 ─────────────────────────────────────────── */
.stage{
  flex:1;min-height:0;width:100%;max-width:760px;margin:0 auto;
  display:flex;flex-direction:column;padding:0 32px;
}

/* ── 대화 ──────────────────────────────────────────── */
.chat{
  --chat-top:36px;                   /* 위 여백. 접힌 줄이 붙는 자리도 이 값으로 셈한다 */
  flex:1;min-height:0;overflow-y:auto;
  padding:var(--chat-top) 0 12px;display:flex;flex-direction:column;gap:28px;

  /* 짧으면 가운데, 넘치면 위에서부터 흐른다 (그다음은 interview.js가 바닥으로 민다).
     `safe`가 있어야 넘칠 때 위쪽이 잘려 못 읽는 일이 안 생긴다. */
  justify-content:safe center;
}
/* 앞 문항을 접었으면 접힌 줄이 맨 위에 붙어 있어야 한다 */
.chat:has(> .fold){justify-content:flex-start}
.msg{white-space:pre-wrap}

/* 면담자 — 말풍선 없이 화면이 직접 말한다. 참가자 답만 칸에 담겨 누가 한 말인지 갈린다.
   "면담자"·"내 답" 이름표는 두지 않는다 (2026-09-23) — 칸만으로 충분히 갈린다 */
.msg.ai{
  align-self:stretch;
  font-size:20px;line-height:1.78;letter-spacing:-.005em;color:var(--ink);
}
/* 핵심 문항. 받아 주는 말과 섞여 있어도 무엇을 묻는지 한눈에 들어와야 한다.
   서버가 앞에 빈 줄을 붙여 보내 제 줄에 선다 — block이나 margin을 주면 빈 줄이 겹친다 */
.msg.ai .q{
  font-size:21px;line-height:1.66;font-weight:700;letter-spacing:-.01em;
  color:var(--accent);
}
/* 참가자 — 자기가 쓴 것만 옅은 면에 담긴다. 익숙한 대로 오른쪽 */
.msg.user{
  position:relative;align-self:flex-end;max-width:min(560px,82%);
  background:var(--fill);border-radius:14px 14px 4px 14px;padding:16px 20px;
  font-size:20px;line-height:1.75;color:var(--body);
  transition:background .18s;
}

/* ── 앞 문항 접기 ── 지금 문항의 대화만 보인다 ─────────────
   접힌 말도 화면에 남아 있다(data-past). 참가자가 펼쳐 다시 볼 수 있다.

   접힌 줄은 대화 칸 위에 붙여 둔다. 좁은 화면에서는 지금 문항의 대화만으로도 넘쳐 바닥으로 밀리는데,
   그러면 이 줄이 위로 사라지고 밑선만 떠 있었다. 위 여백 14px은 음수 margin으로 대화 칸의
   위 여백 안에 넣는다 — 안 붙었을 때 자리는 그대로고, 붙었을 때 글이 위쪽 띠에 닿지 않는다.
   브라우저는 붙는 자리를 스크롤 칸의 위 여백만큼 내려 잡는다. top을 그만큼 올려야 틈이 없다 */
.fold{
  flex:0 0 auto;display:flex;align-items:center;gap:14px;
  position:sticky;top:calc(-1 * var(--chat-top));z-index:1;background:var(--bg);
  margin-top:-14px;padding:14px 0;border-bottom:1px solid var(--line);
  font-size:16px;line-height:1.5;color:var(--dim);
  transition:background .18s;
}
.fold .again{
  margin-left:auto;border:0;background:none;cursor:pointer;
  padding:10px 4px;                   /* 누르는 높이 44px */
  font-size:16px;font-weight:500;color:var(--accent);white-space:nowrap;
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;
}
/* 대화 칸 오른쪽 끝에 붙어 있어 바깥으로 그린 테두리는 스크롤 칸에 잘린다. 안쪽으로 그린다 */
.fold .again:focus-visible{outline-offset:-2px}
.msg[data-past]{display:none}
.chat[data-show-past] .msg[data-past]{display:block}
/* 펼쳤을 때 지난 말은 한 단계 흐리게 — 지금 문항이 어디서 시작하는지 섞이지 않게 */
.msg[data-past].ai,.msg[data-past].ai .q,.msg[data-past].user{color:var(--dim)}
.chat[data-show-past] .msg[data-past] + .msg:not([data-past]){
  padding-top:28px;border-top:1px solid var(--line);
}

/* ── 기다림 ────────────────────────────────────────── */
.wait{display:flex;gap:7px;align-items:center;height:34px}
.wait i{
  width:6px;height:6px;border-radius:50%;background:var(--dim);
  animation:pulse 1.4s infinite both;
}
.wait i:nth-child(2){animation-delay:.2s}
.wait i:nth-child(3){animation-delay:.4s}
/* 스킬 방식은 다 만든 뒤에 내보내서 첫 글자까지 4~5초 걸린다. 점만 보고 기다리기엔 길다 */
.wait-note{
  margin-left:10px;font-size:16px;color:var(--dim);
  opacity:0;animation:note-in .4s ease 2.2s forwards;
}
@keyframes note-in{to{opacity:1}}
@keyframes pulse{0%,65%,100%{opacity:.2}32%{opacity:.85}}

/* 오류 안내 — 아이콘도 색 테두리도 없이 옅은 면 하나. 겁주지 않고 다시 할 길만 보인다 */
.trouble{
  align-self:stretch;background:var(--fill);border-radius:10px;padding:16px 20px;
  font-size:17px;line-height:1.7;color:var(--body);
}
.trouble a{
  color:var(--accent);font-weight:600;
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;
}

/* ── 쓰는 자리 ── 칸이 크면 답이 커진다 ────────────────
   보내기는 칸 안 오른쪽 아래의 아이콘 단추다. 안내는 칸 안의 자리표시 글 하나뿐이다.
   **눌러도 테두리가 바뀌지 않는다** (2026-09-23) — 칸이 늘 하나라 어디에 쓰는지 이미 보인다.
   깜박이는 글쇠 표시가 초점을 알려 준다 */
.composer{flex:0 0 auto;margin:12px 0 24px}
.composer[hidden]{display:none}
.composer .box{position:relative}
.composer textarea{
  display:block;width:100%;min-height:132px;max-height:30vh;resize:none;
  border:2px solid var(--rule);border-radius:12px;background:var(--paper);
  padding:16px 84px 16px 18px;
  font:inherit;font-size:20px;line-height:1.75;color:var(--body);
  transition:background .18s;
}
.composer textarea:focus,.composer textarea:focus-visible{outline:0;border-color:var(--rule);box-shadow:none}
.composer textarea::placeholder{color:var(--faint)}
.composer .send{
  position:absolute;right:12px;bottom:12px;
  width:52px;height:52px;min-width:0;padding:0;border-radius:12px;
}
.composer .send svg{width:26px;height:26px}

/* ── 큰 단추 ── 보내기 · 마치기 · 다시 해 보기가 같은 모양이다 ──
   글만 적는다. 화살표 아이콘을 안 붙인다 */
.send,.big{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:180px;height:60px;padding:0 30px;
  border:0;border-radius:10px;cursor:pointer;text-decoration:none;
  background:var(--accent);color:var(--on-accent);
  font-size:20px;font-weight:600;letter-spacing:-.005em;
  transition:background .12s,color .12s;
}
/* 쓸 글이 없거나 보내는 중. 흐리게 하지 않고 회색 면으로 — 흐린 쪽빛은 눌러도 되는 것처럼 보인다 */
.send{background:var(--line);color:var(--faint)}
.send.on{background:var(--accent);color:var(--on-accent)}
.send:disabled{cursor:default}
.big:hover,.send.on:hover{background:color-mix(in srgb,var(--accent) 88%,var(--ink))}

/* ── 한 장짜리 화면 (결과·안내) ───────────────────────
   상자를 걷었다. 제목 → 설명 → 그림 → 알림 → 단추가 위에서 아래로 흐른다.
   결과 그림(.profile)은 report.css가 맡는다 */
/* 스크롤 칸은 가로도 자른다. 단추가 칸 왼끝에 붙어 있으면 바깥으로 그리는 초점 테두리(2px 띄워 2px)의
   왼 변이 잘린다. 좌우에 6px 여백을 두고 같은 만큼 바깥으로 넓혀 글 자리는 그대로 둔다.
   안쪽으로 그리면(음수 offset) 강조색 단추 위에 강조색 테두리라 안 보인다 */
.sheet{flex:1;min-height:0;overflow-y:auto;padding:48px 6px 56px;margin:0 -6px}
.card{display:flex;flex-direction:column}
.card h1{
  font-size:30px;font-weight:700;line-height:1.35;letter-spacing:-.02em;color:var(--ink);
}
.card .lead{margin-top:14px;font-size:19px;line-height:1.75;color:var(--body)}
.card .note{
  margin-top:28px;padding-top:18px;border-top:1px solid var(--line);
  font-size:16px;line-height:1.75;color:var(--dim);
}
.card .big{align-self:flex-start;margin-top:32px}
.card .quiet{
  align-self:flex-start;margin-top:14px;font-size:16px;color:var(--dim);
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;
}
.card .quiet:hover{color:var(--ink)}

.chat::-webkit-scrollbar,.sheet::-webkit-scrollbar{width:9px}
.chat::-webkit-scrollbar-thumb,.sheet::-webkit-scrollbar-thumb{
  background:var(--line);border-radius:5px;border:3px solid var(--bg);
}

@media(max-width:600px){
  .topbar{flex-basis:56px}
  .topbar > .in{padding:0 16px;gap:10px}
  .mark{font-size:16px}
  .pips{display:none}
  .at{font-size:16px}
  .at b{font-size:18px}
  .stage{padding:0 16px}

  .chat{--chat-top:24px;gap:24px}
  .msg.ai{font-size:18px}
  .msg.ai .q{font-size:19px}
  .msg.user{max-width:90%;padding:14px 16px;font-size:18px}
  .composer textarea{min-height:112px;padding:14px 72px 14px 16px;font-size:18px}
  .composer .send{width:48px;height:48px;right:10px;bottom:10px}
  .send,.big{min-width:132px;height:56px;padding:0 22px;font-size:18px}

  .card h1{font-size:26px}
  .card .lead{font-size:17px}
}
@media(prefers-reduced-motion:reduce){
  .wait i{animation:none;opacity:.45}
  .wait-note{animation:none;opacity:1}
  *{transition:none!important}
}