/* ===========================================================
   비블 — 커리어 고민 상담
   팔레트 (2026-09-08 확정, DSN-nextstep ②):
     딥그린 하나로 앱을 묶는다. "내가 보내는 것"(내 말풍선 · 보내기)과
     "누르는 것의 반응"(포커스 · hover · active)이 초록, 봇이 주는 것은 무채색.
     선과 밑줄은 걷어냈다 — 구분은 면(회색 100)과 여백으로 한다.
     선은 하나도 없다. 💡 줄도 면이 아니라 보통 문장이다 — 전구 그림만 그 줄을 표시한다.
   =========================================================== */

:root{
  /* 초록 램프 — 700 이 브랜드 색. 진한 쪽은 누르는 것, 연한 쪽은 면 */
  --g900:#0a3628;   /* active */
  --g800:#0f5640;   /* hover */
  --g700:#146b4f;   /* 브랜드 · 보내기 · 포커스 · 상태 점 · 링크 · 마크 */
  --g600:#1d7f62;   /* (예비) 어두운 바탕용 */
  --g300:#a9cfc0;   /* (예비) 초록 면 위 테두리 */
  --g200:#c8e0d5;   /* 입력 컨테이너 포커스 링 */
  --g100:#dcebe4;   /* 내 말풍선 · 눌린 칩 · 고른 아바타 */
  --g50:#eef4f1;    /* 💡 다음 행동 블록 바탕 */

  /* 무채색 — 초록 기운을 살짝 띤 회색 */
  --n900:#0f1412;   /* 본문 · 워드마크 */
  --n700:#3b4441;   /* 보조 글자 · → 이유줄 */
  --n500:#687570;   /* 라벨 · 시각 · 푸터 */
  --n450:#747775;   /* placeholder (4.5:1) */
  --n400:#8d9591;   /* (예비) 3:1 테두리 */
  --n200:#e3e8e6;   /* hover 한 면 */
  --n100:#f3f5f4;   /* 면 — 봇 말풍선 · 칩 · 아바타 · 입력 컨테이너 · 앱 바깥 */
  --n50:#f8faf9;    /* 푸터 바탕 */
  --n0:#ffffff;     /* 앱 바탕 */

  --err:#b4453f;

  /* 역할 별칭 — 아래 규칙들은 이 이름으로 쓴다 */
  --ground:var(--n100);
  --paper:var(--n0);
  --surface:var(--n100);
  --ink:var(--n900);
  --ink-2:var(--n700);
  --muted:var(--n500);
  --muted-2:var(--n450);
  --face-hover:var(--n200);
  --mine:var(--g100);
  --accent:var(--g700);
  --accent-hover:var(--g800);
  --accent-active:var(--g900);
  --accent-tint:var(--g50);
  --accent-ring:var(--g200);
  --radius:12px;

  /* 타이포 스케일 — 크기는 이 셋뿐이다 (2026-09-08 소유자: 제일 작은 글자 13px, 본문 15, 제목 18) */
  --fs-meta:13px;      /* 작은 글자: 라벨 · 날짜 · 시각 · 상태 · 푸터 · 기억 문구 · 태그라인 · 칩 · 이유줄 · 저널 본문 · 다음 행동 */
  --fs-sub:13px;       /* = --fs-meta. 예전 13.5px 자리. 별칭으로만 남겨 규칙을 덜 흔든다 */
  --fs-body:15px;      /* 본문: 말풍선 · 핵심줄 · 커리어 카드 값 · 입력 · 브랜드 */
  --fs-title:18px;     /* 제목: 화면 제목(저널 · 설정) */

  /* 행간 둘 · 자간 셋 — 서체는 Pretendard 하나뿐이다 */
  --lh-body:1.65;
  --lh-loose:1.75;     /* 작은 글씨가 여러 줄일 때 */
  --ls-body:-.005em;
  --ls-label:.08em;    /* 라벨 공통 — 모노 없이 자간만으로 라벨감을 준다 */
  --ls-brand:.16em;    /* 워드마크 전용 */
}

*{box-sizing:border-box}
/* flex 컨테이너들이 hidden 을 덮어쓰지 못하게 */
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:Pretendard,"Malgun Gothic",system-ui,sans-serif;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased;
}
button,input,select{font-family:inherit;font-size:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.app{
  max-width:560px;
  margin:0 auto;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:var(--paper);   /* 바깥 --ground 와의 색 차이만으로 기둥이 보인다. 선 없음 */
}

/* ---------- 헤더 ---------- */
.badge{
  background:var(--paper);
  padding:20px 20px 4px;
}
.badge-main{display:flex;align-items:center;gap:12px}
.avatar{
  width:52px;height:52px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  border-radius:8px;
  background:var(--surface);
  color:var(--ink-2);
}
.avatar svg{display:block}
.badge-id{flex:1;min-width:0}
.brand{
  font-size:var(--fs-body);font-weight:500;letter-spacing:var(--ls-brand);
  color:var(--ink);
}
.tagline{font-size:var(--fs-sub);color:var(--muted);margin-top:4px}
.badge-state{
  font-size:var(--fs-meta);letter-spacing:var(--ls-label);color:var(--muted);
  display:flex;align-items:center;gap:8px;white-space:nowrap;
}
.dot{width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block}
.dot.busy{background:var(--muted)}
.dot.err{background:var(--err)}

/* 커리어 카드 = 챗봇이 기억하는 맥락 */
.badge-fields{
  display:grid;grid-template-columns:1.2fr .9fr 1fr;gap:16px;
  padding:20px 0 0;
}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field>span{
  font-size:var(--fs-meta);letter-spacing:var(--ls-label);color:var(--muted);
  text-transform:uppercase;
}
.field input,.field select{
  background:transparent;border:0;
  color:var(--ink);padding:4px 0 8px;width:100%;min-height:44px;
  font-size:var(--fs-body);font-weight:500;border-radius:0;
}
.field input:focus,.field select:focus{outline:none}
.field:focus-within>span{color:var(--accent)}   /* 밑줄 대신 라벨이 답한다 */
.field input::placeholder{color:var(--muted-2);font-weight:400}
.field select{appearance:none;cursor:pointer}
.memo-row{
  display:flex;align-items:center;gap:12px;
  margin:16px 0 0;padding:0 0 16px;
}
.memo{margin:0;flex:1;min-width:0;font-size:var(--fs-body);color:var(--muted);word-break:keep-all}   /* 15px (2026-09-08) */
.memo.on{color:var(--accent)}

/* 저널 버튼 — 칩과 같은 규격. 면으로만 보인다 */
.jbtn{
  flex:0 0 auto;cursor:pointer;
  background:var(--surface);border:0;border-radius:8px;
  padding:8px 12px;min-height:44px;font-size:var(--fs-body);color:var(--ink-2);white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;
}
.jbtn:hover{background:var(--face-hover);color:var(--ink)}
.jbtn:active{background:var(--mine);color:var(--accent-hover)}

/* ---------- 빠른 대화 (입력창 바로 위) ----------
   대화가 비어 있으면 고민 주제, 답변 뒤에는 그 답변이 제안한 이어질 말.
   한 줄 가로 스크롤. 칩 스타일 하나로 통일한다.
   웹(마우스)에서도 움직인다 — 세로 휠을 가로로 돌리고, 끌어서 넘긴다 (app.js). */
.quick{
  display:flex;gap:8px;overflow-x:auto;
  padding:10px 16px 0;
  scrollbar-width:none;
  cursor:grab;user-select:none;-webkit-user-select:none;
  scroll-behavior:smooth;
}
.quick.drag{cursor:grabbing;scroll-behavior:auto}
.quick.drag .chip{pointer-events:none}   /* 끄는 동안 칩이 눌리지 않게 */
.quick::-webkit-scrollbar{display:none}
.quick:empty{display:none}
.quick.busy{opacity:.45;pointer-events:none}
.chip{
  flex:0 0 auto;cursor:pointer;
  background:var(--surface);border:0;border-radius:8px;
  padding:8px 12px;min-height:44px;font-size:var(--fs-body);color:var(--ink-2);white-space:nowrap;
  display:inline-flex;align-items:center;
}
.chip:hover{background:var(--face-hover);color:var(--ink)}
.chip:active{background:var(--mine);color:var(--accent-hover)}

/* ---------- 대화 ---------- */
.chat{
  flex:1;overflow-y:auto;
  padding:20px 20px 12px;
  display:flex;flex-direction:column;gap:16px;
  background:var(--paper);
}
.daymark{
  align-self:center;
  font-size:var(--fs-meta);letter-spacing:var(--ls-label);color:var(--muted);
  margin:8px 0 4px;
}
.row{display:flex;gap:12px;align-items:flex-end;max-width:100%}
.row.me{flex-direction:row-reverse;align-self:flex-end}   /* 내 쪽엔 .pic 이 없다 — 오른쪽 정렬만으로 구분 */
.row.bot{align-self:flex-start}
.row .pic{
  width:40px;height:40px;border-radius:8px;flex:0 0 auto;   /* 28 → 40px (2026-09-08 소유자) */
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);
  color:var(--ink-2);
}
.row .pic svg{display:block}
.bubble{
  border-radius:var(--radius);
  padding:12px 16px;
  max-width:min(78vw,404px);
  word-break:keep-all;overflow-wrap:anywhere;
}
.row.bot .bubble{background:var(--surface)}                 /* 봇 = 회색 100 */
.row.me .bubble{background:var(--mine);color:var(--ink)}    /* 나 = 초록 100. 글자는 계속 잉크 */
.time{font-size:var(--fs-meta);color:var(--muted);flex:0 0 auto;padding-bottom:4px}

.bubble p{margin:0 0 8px}
.bubble p:last-child{margin:0}
/* 굵은 줄 = 짚어주는 핵심 */
.bubble .en{display:block;font-weight:600;color:var(--ink);margin:8px 0 4px}
/* → 줄 = 이유·근거 */
.bubble .ko{display:block;color:var(--ink-2)}   /* 말풍선 안은 전부 15px (2026-09-08) */
/* 💡 줄 = 다음 행동 */
.bubble .tip{
  display:block;margin-top:8px;
  color:var(--ink);   /* 2026-09-08 소유자: 블록(초록 면·패딩)을 걷어낸다. 다른 줄과 똑같이 말풍선 폭을 다 쓰는 한 문장이다 */
}
.bubble hr{border:0;height:0;margin:12px 0}   /* 구분은 여백으로. 선을 긋지 않는다 */
/* 링크 — 밑줄 없이 딥그린 글자. 화면에서 초록 글자는 링크와 기억 문구뿐이다 */
.bubble a{
  color:var(--accent);font-weight:500;text-decoration:none;
  overflow-wrap:anywhere;
}
.bubble a:hover{color:var(--accent-hover)}

/* 타이핑 */
.typing{display:flex;gap:4px;align-items:center;padding:4px}
.typing i{width:5px;height:5px;border-radius:50%;background:var(--muted);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}
.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* ---------- 전체 화면 시트 (결정 저널 · 설정 공통) ---------- */
.sheet{
  flex:1;overflow-y:auto;
  display:flex;flex-direction:column;
  padding:20px 20px calc(16px + env(safe-area-inset-bottom));
  background:var(--paper);
}
.sheet-bar{display:flex;align-items:center;gap:8px}
.sheet-bar h2{
  flex:1;min-width:0;margin:0;
  font-size:var(--fs-title);font-weight:600;letter-spacing:var(--ls-body);
}
.sheet-note{
  margin:12px 0 0;padding:0 0 8px;
  font-size:var(--fs-meta);line-height:var(--lh-loose);color:var(--muted);word-break:keep-all;
}
.journal-list{flex:1;padding:4px 0 16px}
.jday{
  font-size:var(--fs-meta);letter-spacing:var(--ls-label);color:var(--muted);
  margin:20px 0 8px;
}
.jday:first-child{margin-top:12px}
.jrow{
  display:grid;grid-template-columns:44px 1fr;gap:12px;
  padding:8px 0;
}
.jkind{font-size:var(--fs-meta);color:var(--muted)}
.jtext{font-size:var(--fs-sub);line-height:var(--lh-body);color:var(--ink-2);word-break:keep-all;overflow-wrap:anywhere}
.jrow.k-act .jtext{color:var(--ink)}   /* 행동은 조금 더 진하게 */
.jempty{
  padding:28px 0;text-align:center;
  font-size:var(--fs-sub);line-height:var(--lh-loose);color:var(--muted);
  white-space:pre-line;word-break:keep-all;
}
.journal-add{
  display:flex;gap:8px;align-items:center;
  padding-top:16px;
}
.journal-add input{
  flex:1;min-width:0;
  background:var(--surface);border:0;border-radius:8px;
  padding:8px 12px;min-height:44px;font-size:var(--fs-sub);
}
.journal-add input:focus{outline:2px solid var(--accent-ring);outline-offset:0}
.journal-add input::placeholder{color:var(--muted-2)}

/* ---------- 설정 ---------- */
.set-block{padding:20px 0}
.set-label{
  display:block;margin-bottom:8px;
  font-size:var(--fs-meta);letter-spacing:var(--ls-label);color:var(--muted);
}
.set-input{
  width:100%;
  background:var(--surface);border:0;border-radius:8px;
  padding:12px;min-height:44px;font-size:var(--fs-body);font-weight:500;color:var(--ink);
}
.set-input:focus{outline:2px solid var(--accent-ring);outline-offset:0}
.set-input::placeholder{color:var(--muted-2);font-weight:400}
.set-help{
  margin:8px 0 0;
  font-size:var(--fs-meta);line-height:var(--lh-loose);color:var(--muted);
  word-break:keep-all;
}

/* 아바타 고르기 — 선 없음. 고른 것은 초록 100 면으로 알린다 */
.avatars{display:flex;flex-wrap:wrap;gap:8px}
.pick{
  width:52px;height:52px;flex:0 0 auto;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:0;border-radius:8px;
  color:var(--ink-2);
}
.pick:hover{background:var(--face-hover);color:var(--ink)}
.pick[aria-checked="true"]{background:var(--mine);color:var(--accent-hover)}
.pick svg{display:block}

/* 올린 사진 · 기본 그림 — 컨테이너를 꽉 채우고 넘치는 부분은 잘라 낸다 */
.avatar,.row .pic,.pick{overflow:hidden}
.avatar .photo,.row .pic .photo,.pick .photo{
  width:100%;height:100%;object-fit:cover;display:block;
}
.pick.pick-img{padding:0}

/* 말풍선 안 이모지 — Fluent Emoji SVG (app.js emo()). 글자 크기를 따라간다 */
.emo{
  width:1.25em;height:1.25em;vertical-align:-.28em;
  display:inline-block;margin:0 .05em;
}
.set-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

/* ---------- 도크 = 빠른 대화 + 입력 ----------
   둘이 한 덩어리로 화면 아래에 붙는다. 선은 없다 — 여백으로 뗀다. */
.dock{
  position:sticky;bottom:0;
  background:var(--paper);
}
/* 입력 컨테이너 — 아바타(설정) · 입력 · 둥근 보내기가 회색 100 한 덩어리 안에 있다.
   메신저·어시스턴트의 입력창 구조 (2026-09-08 소유자 지정) */
.composer{
  display:flex;gap:4px;align-items:center;
  margin:10px 16px calc(12px + env(safe-area-inset-bottom));
  padding:6px 6px 6px 8px;
  background:var(--surface);border-radius:16px;
}
.composer:focus-within{outline:2px solid var(--accent-ring);outline-offset:0}
.composer input{
  flex:1;min-width:0;
  background:transparent;border:0;border-radius:0;
  padding:10px 8px;min-height:44px;
}
.composer input:focus{outline:none}
.reset{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:0 0 auto;
  background:transparent;border:0;cursor:pointer;
  color:var(--muted);padding:0;border-radius:50%;line-height:0;
}
.reset:hover{color:var(--ink-2);background:var(--face-hover)}
/* 보내기 — 딥그린 원. 안에는 Lucide send(종이비행기) 인라인 SVG (index.php). 이모지 없음 */
.send{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:0 0 auto;
  background:var(--accent);color:#fff;border:0;border-radius:50%;
  line-height:0;padding:0;cursor:pointer;
}
.send svg{display:block;margin-left:-2px;margin-top:1px}   /* 비행기가 원 가운데 앉도록 보정 */
.send:hover{background:var(--accent-hover)}
.send:active{background:var(--accent-active)}
.send:disabled{background:var(--n200);color:var(--muted);cursor:default}

.foot{
  padding:14px 20px calc(18px + env(safe-area-inset-bottom));
  font-size:var(--fs-meta);line-height:var(--lh-loose);color:var(--muted);text-align:center;
  word-break:keep-all;
  background:var(--n50);
}
.foot strong{color:var(--ink-2);font-weight:500}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}
@media (max-width:400px){
  .badge-fields{grid-template-columns:1fr 1fr}
  .field:last-child{grid-column:1 / -1}
}