/* frontend/css/sputnik.css — sputnik(톡 목록 + 노아와의 1:1 토크룸). 감각 층(v1.7 §13)은 sputnik-feel.css.
 * 정본: ~/Desktop/control/NOA-MESSENGER-SPUTNIK.md §2·§4-1·§4-2·§9·§12. noa.css(N-M2) 계승.
 * 색은 아래 --sp-* 토큰 두 벌(라이트/다크) — 판정은 theme.js 스탬프 html[data-theme] 단일 기준(DARK-MODE-PLAN). 초록 토큰 금지.
 *   v1.2 팔레트: SKY #85C6F0 주색 · NAVY #3A4B81(다크 대체 면) · 라이트 바탕 #EEF6FC (theme.css --sputnik-*)
 * 장식 없음: 그림자·그라데이션 없음, 풍선 꼬리만(LINE 문법). 글자 대비 ≥ 4.5:1 (e2e_sputnik t3).
 * 기계 트랙: 이 파일에는 노아가 말하는 문구가 한 글자도 없다(::before/::after 문구 없음).
 */

:root {
  --sp-bg: var(--sputnik-tint, #EEF6FC);      /* 아주 옅은 하늘 바탕 */
  --sp-bar: var(--sputnik-tint, #EEF6FC);     /* 머리 — 바탕과 같다 */
  --sp-compose: #ffffff;       /* 입력줄 */
  --sp-line: #d3deeb;          /* 헤어라인 */
  --sp-text: #111827;
  --sp-muted: #56657a;         /* 이름·시각·既読 */
  --sp-accent: var(--sputnik-sky, #85C6F0);   /* 노아 원판 */
  --sp-send: var(--sputnik-navy, #3A4B81);    /* 보내기 아이콘·입력 포커스 */
  --sp-bubble-me: var(--sputnik-sky, #85C6F0);
  --sp-on-me: var(--sputnik-navy, #3A4B81);
  --sp-bubble-noa: #ffffff;
  --sp-noa-text: #111827;
  --sp-pill-bg: #dbe7f4;       /* 날짜 알약 */
  --sp-pill-text: #4c5b70;
  --sp-input-bg: #f2f7fc;
  --sp-input-line: #d3deeb;
  --sp-bar-bg: #dbe7f4;        /* 오프라인 줄·알림 줄 */
  --sp-badge-bg: var(--sputnik-sky, #85C6F0);   /* 미읽음 배지(§9-1): 라이트 SKY+NAVY 글자 */
  --sp-badge-text: var(--sputnik-navy, #3A4B81);
  /* 톡 목록 원판(v1.6 §12-1) — 방 등록부(js/sputnik/rooms.js)가 이름으로 부른다. 라이트·다크 동일값(다크에서 다시 정의하지 않는다). */
  --sp-avatar-noa: var(--sp-accent);              /* ノア = SKY(현행 그대로) */
  --sp-avatar-yuuka: var(--sputnik-navy, #3A4B81); /* ユウカ = NAVY */
  --sp-avatar-miyo: #6C8581;                      /* ミヨ(형권님 첨부 색) */
}

html[data-theme="dark"] {
  --sp-bg: #151d2e;            /* 어두운 바탕(v1 그대로) */
  --sp-bar: #151d2e;
  --sp-compose: #1b2438;
  --sp-line: #26324a;
  --sp-text: #e6ebf3;
  --sp-muted: #9aa8bf;
  --sp-accent: var(--sputnik-sky, #85C6F0);   /* 노아 원판은 다크에서도 SKY */
  --sp-send: var(--sputnik-sky, #85C6F0);
  --sp-bubble-me: var(--sputnik-navy, #3A4B81);
  --sp-on-me: #ffffff;
  --sp-bubble-noa: #243049;
  --sp-noa-text: #e6ebf3;
  --sp-pill-bg: #1f2a40;
  --sp-pill-text: #a3afc4;
  --sp-input-bg: #243049;
  --sp-input-line: #2d3a55;
  --sp-bar-bg: #1f2a40;
  --sp-badge-bg: var(--sputnik-navy, #3A4B81);  /* 다크 NAVY+흰 글자 */
  --sp-badge-text: #ffffff;
}

/* 문서는 스크롤하지 않는다 — 스크롤은 스레드·목록 안에서만(§9-2) */
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; overscroll-behavior: none; background: var(--sp-bg); color: var(--sp-text); }

body {
  display: block;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Apple SD Gothic Neo",
    "Noto Sans JP", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* 앱 셸(§9-2) — 보이는 창(visualViewport)에 못박은 고정 판. --sp-vv-top·--sp-vv-h는 js/sputnik/shell.js가
   매 resize·scroll마다 찍는다(값이 없으면 전체 화면). 머리 = 판 맨 위, 입력줄 = 판 맨 아래(키보드 바로 위). */
.sp-app {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--sp-vv-top, 0px);
  height: var(--sp-vv-h, 100dvh);
  display: flex;
  flex-direction: column;
  max-width: 720px;
  margin: 0 auto;
  overflow: hidden;
}

/* 두 뷰(§9-1) = 두 패널(v1.7 §13-2). html[data-sp-view] = list(첫 화면) | room — 첫 페인트 전 head 스크립트가 찍는다.
   평소 한 패널만. 전환·스와이프 중(html.sp-nav, js/sputnik/nav.js)에는 둘 다 보이고 방 패널이 위에서 민다(sputnik-feel.css). */
.sp-panel { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--sp-bg); }
.sp-panel-room { z-index: 1; }
html:not([data-sp-view="room"]):not(.sp-nav) .sp-panel-room,
html[data-sp-view="room"]:not(.sp-nav) .sp-panel-list { display: none; }
/* 빈 방(v1.6 §12-1, html.sp-room-empty — main.js)은 워커에 닿지 않는다 — 노아 워커의 연결 상태 줄(接続できません)은 두지 않는다. */
html.sp-room-empty .sp-panel-room .sp-offline { display: none; }

/* ---- 머리: ‹(브라우저에서만) · ノア 가운데 ------------------------------ */

.sp-head {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--safe-top, 0px) 48px 0;     /* standalone 상단 안전 여백 — 상태 막대 밑으로 들어가지 않게 */
  background: var(--sp-bar);
  border-bottom: 1px solid var(--sp-line);
}

.sp-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 48px;
  color: var(--sp-text);
  letter-spacing: 0.01em;
}

.sp-back {
  position: absolute;
  left: 4px;
  bottom: 0;
  width: 44px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  line-height: 1;
  color: var(--sp-text);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.sp-back:focus-visible { outline: 2px solid var(--sp-send); outline-offset: -4px; border-radius: 8px; }
/* iOS 앱 sputnik(SPUTNIK-IOS.md §2-1·§3-1) — webview가 화면 가장자리까지(safe-area 아님)라 안전 여백은 웹이 맡는다.
   theme.css의 html.app-shell { --safe-top: 0 }(네이티브가 안전 영역을 맡는 은하 앱 웹뷰용)을 이 셸에서만 되돌린다. */
html.app-shell.sp-standalone { --safe-top: env(safe-area-inset-top, 0px); }
/* 방의 「‹」 = 목록으로 — 브라우저·홈 화면 웹 앱 모두 항상 보인다(§9-1).
   목록의 「‹」(#spHome, v1.3.1) = 홈('/' replace) — 브라우저에서만. 홈 화면 웹 앱에는 돌아갈 곳이 없다. */
html.sp-standalone .sp-home { display: none; }
@media (display-mode: standalone) { .sp-home { display: none; } }

/* 목록 머리 = 앱 이름 sputnik — 워드마크체(타일 제목·선언과 같은 글꼴·굵기, css/declaration.css --home-font) */
.sp-brand {
  margin: 0;
  font-family: var(--home-font, system-ui, sans-serif);
  font-weight: var(--home-title-weight, 700);
  font-size: 18px;
  line-height: 48px;
  color: var(--sp-text);
}

/* ---- 톡 목록(§9-1, LINE 「トーク」 문법 — 스킨 없이) ---------------------- */

.sp-rooms {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  padding: 4px 0 calc(8px + env(safe-area-inset-bottom, 0px));
  list-style: none;
}

.sp-room {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 0 16px;
  color: var(--sp-text);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.sp-room:focus-visible { outline: 2px solid var(--sp-send); outline-offset: -2px; }

.sp-room-avatar {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--sp-accent);
}

.sp-room-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sp-room-name {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--sp-text);
}

/* 마지막 메시지 한 줄 — 원문 그대로, 줄바꿈은 공백으로 접고 넘치면 말줄임. 없으면 빈 줄(높이 유지). */
.sp-room-preview {
  min-height: 1.4em;
  font-size: 13px;
  line-height: 1.4;
  color: var(--sp-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-room-side {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  padding: 16px 0 15px;
}

.sp-room-time {
  min-height: 1.35em;
  font-size: 11px;
  line-height: 1.35;
  color: var(--sp-muted);
  white-space: nowrap;
}

.sp-room-badge {
  min-width: 20px;
  height: 20px;
  box-sizing: border-box;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--sp-badge-bg);
  color: var(--sp-badge-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}
.sp-room-badge[hidden] { display: none; }

/* ---- 한 줄 바: 오프라인 · 알림 켜기 ------------------------------------ */

.sp-offline,
.sp-push {
  flex: 0 0 auto;
  display: block;
  width: 100%;
  margin: 0;
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px solid var(--sp-line);
  background: var(--sp-bar-bg);
  color: var(--sp-muted);
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
.sp-push { color: var(--sp-text); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sp-offline[hidden],
.sp-push[hidden] { display: none; }

/* ---- 스레드 ------------------------------------------------------------ */

.sp-thread {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding: 12px 12px 8px;
  display: flex;
  flex-direction: column;
}

/* 메신저처럼 바닥에서부터 쌓인다. justify-content: flex-end 대신 첫 자식의 auto 마진 —
   내용이 넘칠 때 flex-end는 엔진에 따라 위쪽을 잘라 스크롤이 닿지 않는 영역을 만든다. */
.sp-thread > *:first-child { margin-top: auto; }

/* 빈 스레드는 아무것도 그리지 않는다(노아의 선제 발화 없음). ::before/::after로도 문구를 넣지 않는다. */
.sp-thread:empty { display: block; }

/* 날짜 알약 — 가운데, M月D日(曜) */
.sp-day {
  align-self: center;
  margin: 14px 0 10px;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--sp-pill-bg);
  color: var(--sp-pill-text);
  font-size: 12px;
  line-height: 1.7;
}

/* 한 메시지 = 한 행. 같은 묶음(연속 같은 쪽) 사이는 좁게, 묶음 사이는 넓게. */
.sp-row {
  display: flex;
  align-items: flex-start;
  margin-top: 4px;
}
.sp-row.is-first { margin-top: 12px; }
.sp-day + .sp-row { margin-top: 0; }
.sp-row.is-user { justify-content: flex-end; }

/* 노아 프로필 = 밝은 파랑 단색 원판(36px, 사진 없음). 묶음 뒤 풍선은 자리만 비운다. */
.sp-avatar {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--sp-accent);
}
.sp-avatar.is-blank { background: transparent; }

.sp-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: calc(100% - 44px);
}
.sp-row.is-user .sp-col { align-items: flex-end; max-width: 100%; }

.sp-name {
  margin: 0 0 4px 2px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--sp-muted);
}

/* 풍선 + 바깥 시각. 노아: [풍선][시각] / 나: [既読·시각][풍선] — 둘 다 아래 정렬. */
.sp-line {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
}

.sp-bubble {
  position: relative;
  min-width: 0;
  max-width: min(78vw, 520px);
  padding: 8px 12px;
  border-radius: 18px;
  font-size: 16px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.sp-row.is-noa .sp-bubble { background: var(--sp-bubble-noa); color: var(--sp-noa-text); }
.sp-row.is-user .sp-bubble { background: var(--sp-bubble-me); color: var(--sp-on-me); }

/* 꼬리 — 묶음의 첫 풍선에만. 노아 = 왼쪽 위, 나 = 오른쪽 위. 풍선 색 그대로의 작은 삼각. */
.sp-row.is-first .sp-bubble::before {
  content: "";
  position: absolute;
  top: 0;
  width: 12px;
  height: 12px;
  background: inherit;
}
.sp-row.is-noa.is-first .sp-bubble { border-top-left-radius: 4px; }
.sp-row.is-noa.is-first .sp-bubble::before { left: -6px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.sp-row.is-user.is-first .sp-bubble { border-top-right-radius: 4px; }
.sp-row.is-user.is-first .sp-bubble::before { right: -6px; clip-path: polygon(0 0, 100% 0, 0 100%); }

.sp-meta {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-bottom: 1px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--sp-muted);
  white-space: nowrap;
}
.sp-row.is-user .sp-meta { align-items: flex-end; }

/* ---- 입력줄 ------------------------------------------------------------ */

.sp-compose {
  position: relative;            /* 아래로 가기 단추(§13-3)의 자리 기준 */
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)) 12px;
  background: var(--sp-compose);
  border-top: 1px solid var(--sp-line);
}
/* 키보드가 떠 있으면(html.sp-kb — shell.js) 아래 안전 여백을 뺀다: 입력줄이 폼 보조 막대 바로 위에 붙는다(이중 여백 없음). */
html.sp-kb .sp-compose { padding-bottom: 8px; }

.sp-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  max-height: 40vh;
  max-height: calc(var(--sp-vv-h, 100dvh) * 0.4);   /* 키보드가 떠도 보이는 창의 40%까지만 */
  box-sizing: border-box;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid var(--sp-input-line);
  border-radius: 20px;
  background: var(--sp-input-bg);
  color: var(--sp-text);
  font: inherit;
  font-size: 16px;      /* 16px 미만이면 iOS가 포커스 시 확대한다 */
  line-height: 1.5;
  resize: none;
  overflow-y: auto;
}
.sp-input:focus { outline: none; border-color: var(--sp-send); }

.sp-send {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--sp-send);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sp-send svg { width: 24px; height: 24px; }
.sp-send:disabled { color: var(--sp-muted); opacity: 0.45; cursor: default; }
.sp-send:focus-visible { outline: 2px solid var(--sp-send); outline-offset: 0; }

/* 로그인 창(auth.js — 401 권한 안내의 「로그인」)은 권한 안내 층 위에 뜬다. 창 모양은 components.css 그대로. */
#loginModal.login-modal { z-index: 2147483001; }

@media (min-width: 720px) {
  .sp-thread { padding: 16px 16px 10px; }
}

/* 비로그인·권한 안내(js/accessGate.js)는 공용 토큰(--bg, 초록)으로 그려진다 — sputnik에서는 이 화면의 파랑 토큰을 쓴다(10/2).
   accessGate가 읽는 변수(--ios-*)를 그 요소에서만 덮는다. 문구·구성 무변경. */
#accessGate { --ios-grouped-bg: var(--sp-bg); --ios-secondary: var(--sp-muted); --ios-separator: var(--sp-line); --ios-label: var(--sp-text); }