/* 진케이 채팅 화면: 로그인 · 프로필 입력 카드, 채팅 영역, 감정 패널.
   채팅 영역은 가운데에 최대 760px 폭으로 두고, 그보다 좁은 화면에서는 폭을 꽉 채운다.
   말풍선과 입력 중 표시(…)는 style.css의 공용 규칙(.msg · .bubble · .typing-bubble)을 재사용하고 이 화면에 필요한 부분만 덮어쓴다.
   같은 명시도의 규칙(.card · .messages)도 덮어쓰므로 style.css 다음에 로드해야 한다 */
:root {
  --jk-coral: #f56c76;       /* 주 강조색: 주요 버튼 · 아이콘 · 선택 표시 */
  --jk-coral-ink: #d94a5a;   /* 작은 강조 글자(LV · 읽음 등). 흰 배경에서 읽기 쉽도록 주 강조색보다 짙게 했다 */
  --jk-coral-soft: #fff5f3;  /* 옅은 강조 배경: 아이콘 버튼 · 선택/hover 항목 */
  --jk-coral-pill: #ffe6e8;  /* LV 배지 배경 · 포커스/열림 표시 링 */
  --jk-me: #fff0f1;          /* 내 말풍선 배경 */
  --jk-me-line: #fbd9dd;
  --jk-chat-bg: #f9fafc;     /* 대화 영역 배경 */
  --jk-line: #eef0f3;
  --jk-muted: #8e8e96;
  --jk-online: #3fae7a;      /* 「지금 활동 중」 상태 점 */
  --jk-page: #f3f4f7;        /* 채팅 영역 바깥 배경 */
}
.jk-main { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.jk-main > #jk-login, .jk-main > #jk-signup, .jk-main > #jk-intro { flex: 1; }
.jk { flex: 1; min-height: 0; display: flex; justify-content: center; background: var(--jk-page); }
.jk .ic {
  width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.jk-icon-btn {
  width: 38px; height: 38px; padding: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; color: var(--text);
}
.jk-icon-btn:hover:not(:disabled) { background: #f5f5f7; }
.jk-icon-btn.soft { background: var(--jk-coral-soft); color: var(--jk-coral); }
.jk-icon-btn.soft:hover:not(:disabled) { background: var(--jk-coral-pill); }
.jk-empty { margin: 28px 12px; text-align: center; color: var(--jk-muted); font-size: 13.5px; }

/* 진케이 프로필 사진. 사진이 표시되는 모든 위치에 「AI」 배지(AI로 만든 사진임을 알리는 표시)를 함께 붙인다.
   사진은 정원으로 잘라 표시하고(object-fit: cover), 배지는 사진을 가리지 않도록 원의 오른쪽 아래 바깥으로 걸친다.
   style.css의 .avatar-sm은 grid 컨테이너라 img가 세로로 늘어나 타원으로 보이므로, img를 absolute(inset: 0)로 원에 맞춘다 */
.jk-ph, .jk .avatar-sm {
  position: relative; flex: none; display: block; width: 48px; height: 48px; margin: 0; border-radius: 50%; background: var(--track);
}
.jk-ph img, .jk .avatar-sm img {
  position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 22%; display: block;
}
.jk-ph .ai, .jk .avatar-sm .ai {
  position: absolute; right: -10px; bottom: -6px; background: var(--ai); color: #fff; font-size: 9px; font-weight: 800;
  border-radius: 999px; padding: 0 5px; border: 1.5px solid #fff; line-height: 14px;
}
.jk-ph.md { width: 44px; height: 44px; }
.jk-ph.lg { width: 84px; height: 84px; }
.jk-ph.lg .ai { right: -12px; bottom: -4px; font-size: 11px; line-height: 17px; padding: 0 7px; border-width: 2px; }

/* 프로필 입력 카드(이름 · 나이 · 성별). style.css의 .card를 기반으로 한다.
   입력 필드와 성별 선택 버튼은 카드 폭에 맞춘 같은 높이(48px)로 통일하고, 라벨은 필드 위 왼쪽에 둔다.
   세 값이 모두 유효하기 전에는 「대화 시작하기」 버튼이 비활성 상태다(스타일은 style.css의 button:disabled) */
.jk-intro { background: var(--jk-page); }
.jk-intro-card { max-width: 380px; align-items: center; gap: 14px; padding: 28px 24px 24px; }
.jk-intro-card .jk-ph.lg { margin-bottom: 6px; }
.jk-field { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.jk-field > span:first-child { font-size: 13px; font-weight: 700; color: #55535c; }
.jk-field > input {
  appearance: textfield; -moz-appearance: textfield; height: 48px; padding: 0 14px; border: 1px solid #e6e8ec; border-radius: 14px;
  background: #fff; color: var(--text); font-weight: 700; outline: none; caret-color: var(--jk-coral);
}
.jk-field > input:focus { border-color: var(--jk-coral); }
.jk-field > input::-webkit-outer-spin-button, .jk-field > input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.jk-seg { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.jk-seg label { position: relative; display: block; cursor: pointer; }
.jk-seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.jk-seg span {
  display: grid; place-items: center; height: 48px; border: 1px solid #e6e8ec; border-radius: 14px; background: #fff; color: var(--text);
  font-size: 15px; font-weight: 700;
}
.jk-seg input:checked + span { border-color: var(--jk-coral); background: var(--jk-coral-soft); color: var(--jk-coral-ink); }
.jk-seg input:focus-visible + span { outline: 2px solid var(--jk-coral); outline-offset: 2px; }
.jk-start { width: 100%; height: 50px; margin-top: 6px; padding: 0 16px; border-radius: 14px; background: var(--jk-coral); font-size: 15.5px; font-weight: 800; }
.jk-intro-card .error { text-align: center; }
.jk-intro-card .error:empty { display: none; } /* 오류 문구가 없으면 요소를 숨긴다(.error의 min-height 때문에 카드 아래에 빈 공간이 생기지 않도록) */
/* 로그인 · 회원가입 카드는 프로필 입력 카드와 같은 스타일을 쓴다. .jk-alt는 두 카드를 오가는 보조 버튼(텍스트 버튼)이다 */
.jk-alt {
  margin-top: -4px; padding: 6px 12px; border-radius: 10px; background: transparent; color: var(--jk-muted); font-size: 14px; font-weight: 700;
}
.jk-alt:hover { background: transparent; color: var(--jk-coral-ink); }

/* 채팅 영역: 가운데 정렬, 최대 760px */
.jk-chat {
  width: 100%; max-width: 760px; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--jk-chat-bg);
  border-left: 1px solid var(--jk-line); border-right: 1px solid var(--jk-line);
}
.jk-chat-head {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 68px; padding: 10px 16px; background: #fff;
  border-bottom: 1px solid var(--jk-line);
}
.jk-who { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 4px 8px 4px 4px; color: var(--text); }
.jk-who-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jk-who-text b { font-size: 16px; font-weight: 800; }
.jk-who-text small { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--jk-muted); }
.jk-who-text .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--jk-online); }
/* 사용자 지역 날씨: 이름 아래에 한 행으로 표시하고 넘치면 말줄임 처리한다. 520px 이하에서는 날씨 설명(.jk-wd)을 숨긴다 */
.jk-who-text .jk-weather { display: block; min-width: 0; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jk-who-text .jk-weather b { font-size: inherit; font-weight: 700; } /* 이름용 규칙(.jk-who-text b)의 글자 크기가 적용되지 않게 한다 */
@media (max-width: 520px) { .jk-weather .jk-wd { display: none; } }
/* 헤더 오른쪽 컨트롤(.jk-head-side): 관계 레벨 「LV n」(표시 전용) · 구간 드롭다운 · 답변 속도 드롭다운 · 감정 패널 버튼.
   두 드롭다운과 감정 패널 버튼은 .jk-band 스타일을 함께 쓰고, 드롭다운에서 선택된 옵션은 강조색으로 칠한다.
   새 대화 버튼(#jk-new)은 이 묶음 밖, 헤더 맨 오른쪽에 둔다 */
.jk-head-side { flex: none; display: flex; align-items: center; gap: 8px; margin-left: auto; }
.jk-chat-head > #jk-new { flex: none; }
.jk-lv {
  display: inline-block; height: 30px; line-height: 30px; padding: 0 12px; border-radius: 999px; background: var(--jk-coral-pill);
  color: var(--jk-coral-ink); font-size: 13px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; cursor: default;
}
.jk-lv b { font-weight: 800; }
.jk-band-wrap { position: relative; }
.jk-band {
  display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 8px 0 12px; border-radius: 999px; border: 1px solid #e6e8ec;
  background: #fff; color: var(--text); font-size: 13px; font-weight: 700; white-space: nowrap;
}
.jk-band:hover { border-color: var(--jk-coral); }
.jk-band[aria-expanded="true"] { border-color: var(--jk-coral); box-shadow: 0 0 0 2px var(--jk-coral-pill); }
.jk-band .chev {
  width: 14px; height: 14px; fill: none; stroke: var(--jk-muted); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.jk-band-pop {
  position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; min-width: 116px; padding: 6px; background: #fff;
  border: 1px solid var(--jk-line); border-radius: 14px; box-shadow: 0 10px 30px rgba(30, 20, 60, .12);
}
.jk-band-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; outline: none; }
.jk-band-list [role=option] {
  padding: 8px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 700; color: var(--text); cursor: pointer; outline: none;
}
.jk-band-list [role=option]:hover, .jk-band-list [role=option]:focus-visible { background: var(--jk-coral-soft); }
.jk-band-list [role=option][aria-selected="true"] { background: var(--jk-coral); color: #fff; }
.jk-band-err { margin: 6px 4px 2px; font-size: 12px; }
.jk-band-err:empty { display: none; }
/* 520px 이하: 컨트롤 묶음(.jk-head-side)을 이름 아래 둘째 행 오른쪽으로 내린다. 한 행에 모두 두면 이름 영역이 좁아져
   「진케이」가 줄바꿈된다(360 · 390px 폭에서 확인). 첫 행에는 사진 · 이름과 새 대화 버튼이 남는다 */
@media (max-width: 520px) {
  .jk-chat-head { flex-wrap: wrap; row-gap: 6px; }
  .jk-who { flex: 1 1 0; }
  .jk-head-side { order: 1; flex: 1 0 100%; justify-content: flex-end; margin-left: 0; }
}
.jk-messages { padding: 18px 20px 20px; gap: 14px; background: var(--jk-chat-bg); }
.jk-messages > .jk-empty { margin: auto; }
/* 말풍선: 상대는 흰 배경 + 옅은 테두리, 내 말풍선은 연한 코랄. 시각과 「읽음」은 말풍선 안 아래쪽에 표시한다.
   「읽음」은 답변 말풍선이 나오기 시작해 .is-read가 붙은 뒤에만 보인다(jink.js markRead) */
.jk .msg { max-width: min(86%, 560px); }
.jk .msg .col { gap: 6px; }
.jk .bubble {
  display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.5;
  word-break: keep-all; overflow-wrap: anywhere; /* 한글은 단어 단위로 줄바꿈하고, 공백 없는 긴 문자열은 영역을 넘지 않게 끊는다 */
}
.jk .msg.assistant .bubble { background: #fff; color: #27262b; border: 1px solid #eaecf0; }
.jk .msg.user .bubble { background: var(--jk-me); color: #27262b; border: 1px solid var(--jk-me-line); }
.jk .bubble .stamp { display: block; font-size: 11px; line-height: 1.3; color: #a3a3a9; }
.jk .msg.user .bubble .stamp { display: none; color: var(--jk-coral-ink); font-weight: 600; }
.jk .msg.user.is-read .bubble .stamp { display: block; }
.jk .avatar-sm { width: 32px; height: 32px; margin-top: 2px; }
.jk .avatar-sm .ai { right: -9px; bottom: -6px; font-size: 8px; padding: 0 4px; line-height: 12px; }
.jk .msg.assistant { gap: 12px; } /* 원 밖으로 나온 「AI」 배지가 말풍선에 닿지 않도록 간격을 넓힌다 */
.jk .typing-bubble .bubble { flex-direction: row; align-items: center; gap: 5px; padding: 14px 16px; }
.jk .typing-bubble .bubble span { background: var(--jk-coral); }
.jk-composer { flex: none; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--jk-line); }
/* 입력창: 둥근 컨테이너(.jk-input) 안에 textarea와 전송 버튼을 둔다. 한 행일 때 높이가 52px(textarea 42 + 상하 패딩 8 + 테두리 2)이므로
   반지름을 절반인 26px로 맞춰 양끝이 반원이 되게 한다(더 작으면 양옆에 꺾인 부분이 보인다).
   textarea의 전역 · 브라우저 기본 스타일(테두리 · 둥근 모서리 · 그림자 · outline · 탭 하이라이트)은 모두 끄고, 테두리와 포커스 표시는 컨테이너가 맡는다 */
.jk-input {
  display: flex; align-items: flex-end; gap: 8px; padding: 4px 4px 4px 18px; border: 1px solid #e6e8ec;
  border-radius: 26px; background: #fff; -webkit-tap-highlight-color: transparent;
}
.jk-input:focus-within { border-color: var(--jk-coral); }
.jk-input textarea {
  appearance: none; -webkit-appearance: none; resize: none; height: 42px; max-height: 140px; border: 0; border-radius: 0;
  padding: 10px 0; line-height: 22px; background: transparent; outline: none; box-shadow: none; caret-color: var(--jk-coral);
  -webkit-tap-highlight-color: transparent;
}
.jk-send {
  flex: none; width: 36px; height: 36px; margin-bottom: 3px; padding: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--jk-coral); color: #fff; -webkit-tap-highlight-color: transparent;
}
.jk .jk-send .ic { width: 18px; height: 18px; }

/* 760px 이하: 채팅 영역이 화면 폭을 꽉 채우므로 좌우 테두리를 없애고 여백을 줄인다 */
@media (max-width: 760px) {
  .jk-chat { max-width: none; border: 0; }
  .jk-chat-head { padding: 8px 10px; }
  .jk-messages { padding: 14px 12px 16px; }
  .jk .msg { max-width: 90%; }
}

/* 진케이 감정 패널. 채팅 영역 오른쪽에 붙으며 행마다 이름 · 수치 · 변화량 · 구간 라벨 · 감정 게이지를 표시한다.
   1024px 미만에서는 헤더의 「감정」 버튼으로 여닫는 오버레이 패널이 된다(.jk 기준 absolute 배치 — 아래 미디어 쿼리 참고) */
.jk { position: relative; }
.jk-emo {
  flex: none; width: 248px; min-height: 0; overflow-y: auto; padding: 20px 18px 22px; background: #fff; border-right: 1px solid var(--jk-line);
}
.jk-emo-title { margin: 0 0 16px; font-size: 15px; font-weight: 800; color: var(--text); }
/* 값 고정 스위치(패널 헤더 오른쪽). 켜 두면 대화가 감정 값을 바꾸지 않는다.
   style.css의 전역 input 스타일(테두리 · 패딩 · 폭 100%)과 기본 체크박스 모양을 끄고 스위치를 직접 그린다 */
.jk-emo-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 16px; }
.jk-emo-head .jk-emo-title { margin: 0; }
.jk-emo-hold {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; font-size: 12.5px; font-weight: 700; color: var(--jk-muted);
  white-space: nowrap; cursor: pointer; -webkit-user-select: none; user-select: none;
}
.jk-emo-hold input {
  flex: none; position: relative; width: 30px; height: 18px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: #d9dce3; cursor: pointer;
  -webkit-appearance: none; appearance: none; transition: background .15s;
}
.jk-emo-hold input::before {
  content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(30, 20, 60, .25); transition: transform .15s;
}
.jk-emo-hold input:checked { background: var(--jk-coral); }
.jk-emo-hold input:checked::before { transform: translateX(12px); }
.jk-emo-hold:has(input:checked) { color: var(--text); }
.jk-emo-hold input:focus-visible { outline: 2px solid var(--jk-coral-pill); outline-offset: 2px; }
.jk-emo-hold:has(input:disabled) { cursor: default; opacity: .55; }
.jk-emo-hold input:disabled { cursor: default; }
.jk-emo-group + .jk-emo-group { margin-top: 20px; }
.jk-emo-group h3 { margin: 0 0 10px; font-size: 12px; font-weight: 700; color: var(--jk-muted); }
.jk-emo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.jk-emo-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 30px 58px; align-items: baseline; column-gap: 6px; row-gap: 3px; cursor: default; }
.jk-emo-row .n { min-width: 0; font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; }
.jk-emo-row .v { min-width: 28px; text-align: right; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); }
.jk-emo-row .b { text-align: right; font-size: 12.5px; font-weight: 600; color: var(--jk-muted); white-space: nowrap; }
/* 대화로 인한 변화량(「+7」 · 「−12」). 수치 옆에 표시하며 증가는 코랄, 감소는 푸른 회색이다 */
.jk-emo-row .d { font-style: normal; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--jk-muted); }
.jk-emo-row .d.up { color: var(--jk-coral-ink); }
.jk-emo-row .d.down { color: #5b7fb5; }
/* 감정 게이지(range input, 0 ~ 100). 각 항목의 아래쪽에 전체 폭으로 놓인다.
   브라우저 기본 range에 코랄색을 지정하면 트랙의 나머지 부분이 짙은 회색으로 그려져 무거워 보이므로 트랙과 썸을 직접 그린다.
   채움 비율 --p는 jink.js paintEmotion이 값에 맞춰 설정한다(WebKit 계열은 --p 그라디언트로, Firefox는 ::-moz-range-progress로 채운다) */
.jk-emo-row .g {
  grid-column: 1 / -1; width: 100%; height: 20px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none; touch-action: pan-y; --p: 0%; --fill: var(--jk-coral); /* touch-action: pan-y — 가로 드래그는 게이지 조작, 세로 스와이프는 패널 스크롤이 된다 */
}
.jk-emo-group.neg .g { --fill: var(--jk-muted); }
.jk-emo-row .g::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--fill) var(--p), #e6e8ee var(--p)); }
.jk-emo-row .g::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -5px; border-radius: 50%; background: #fff;
  border: 2px solid var(--fill); box-shadow: 0 1px 3px rgba(30, 20, 60, .18);
}
.jk-emo-row .g::-moz-range-track { height: 6px; border-radius: 3px; background: #e6e8ee; }
.jk-emo-row .g::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--fill); }
.jk-emo-row .g::-moz-range-thumb { box-sizing: border-box; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--fill); box-shadow: 0 1px 3px rgba(30, 20, 60, .18); }
.jk-emo-row .g:focus-visible { outline: 2px solid var(--jk-coral-pill); outline-offset: 2px; border-radius: 4px; }
.jk-emo-btn { display: none; padding: 0 12px; }
.jk-emo-btn[aria-expanded="true"] { border-color: var(--jk-coral); box-shadow: 0 0 0 2px var(--jk-coral-pill); }
/* 1024px 미만: 「감정」 버튼을 표시하고 패널을 오버레이로 바꾼다. 여기의 top · right · max-height는 기본값이며,
   패널이 열리면 jink.js placeEmotion이 헤더 바로 아래 · 채팅 영역 오른쪽 끝에 맞춰 인라인 스타일로 다시 지정한다 */
@media (max-width: 1023px) {
  .jk-emo-btn { display: inline-flex; }
  .jk-emo {
    position: absolute; z-index: 15; top: 68px; right: 0; width: min(264px, 100%); max-height: calc(100% - 68px); border: 1px solid var(--jk-line);
    border-top: 0; border-right: 0; border-radius: 0 0 0 16px; box-shadow: 0 10px 30px rgba(30, 20, 60, .12);
  }
  .jk-emo:not(.open) { display: none; }
}