/* NewStart — 새출발기금 부실차주 홈: NewStart AI → 회원 채팅/나의 상태 → 최신 업데이트 */
.newstart-page { --ns-blue: #2563eb; --ns-blue-soft: #eef3ff; --ns-ink: #111827; --ns-muted: #5b6472; --ns-line: #e5e7eb; --ns-warm: #f6f1e7; --ns-warm-line: #e7e0cf; }

.newstart-shell { max-width: 760px; margin: 0 auto; padding: 16px 16px 48px; }
.newstart-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.newstart-brand { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; color: var(--ns-ink); text-decoration: none; white-space: nowrap; }
@media (min-width: 400px) { .newstart-brand { font-size: 20px; } }
.newstart-topbar { display: flex; gap: 8px; flex-wrap: wrap; }
.newstart-topbar .ns-btn { flex: 0 1 auto; }

/* 내부 상세 화면 공통 뒤로가기 — 390px에서 손으로 누르기 쉬운 최소 44px 타깃 */
.ns-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 10px 12px; margin: 4px 0 2px; border-radius: 10px; color: var(--ns-blue); font-weight: 700; text-decoration: none; }
.ns-back:hover { background: var(--ns-blue-soft); }

/* NewStart AI — 첫 화면 핵심 영역 */
.ns-ai-hero { margin-top: 22px; padding: 18px 16px 14px; border: 1.5px solid var(--ns-blue); border-radius: 14px; background: var(--ns-blue-soft); }
.ns-chat-login-alert { color: #b91c1c; font-weight: 600; }
.ns-ai-title { font-size: 20px; font-weight: 800; color: var(--ns-ink); margin: 0 0 12px; }
.ns-ai-input-row { display: flex; gap: 8px; }
.ns-ai-input { flex: 1; min-width: 0; font-size: 15px; padding: 11px 12px; }
.ns-ai-send { flex-shrink: 0; font-size: 14.5px; padding: 10px 20px; }
.ns-ai-note { margin-top: 8px; }

/* 회원 채팅 / 나의 상태 진입점 */
.ns-entry-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.ns-entry { display: block; border: 1px solid var(--ns-line); border-radius: 12px; padding: 14px 12px; background: #fff; text-decoration: none; min-height: 44px; }
.ns-entry:hover { border-color: var(--ns-blue); background: var(--ns-blue-soft); }
.ns-entry-title { display: block; font-size: 15.5px; font-weight: 700; color: var(--ns-ink); }
.ns-entry-sub { display: block; margin-top: 2px; font-size: 12px; color: var(--ns-muted); }

/* 나의 상태 패널 (선택 시 표시) */
.ns-status-panel { margin-top: 10px; }
.ns-status-inner { padding: 0; border: none; border-top: 1px solid var(--ns-line); border-radius: 0; }
.ns-status-inner:first-of-type { border-top: none; }

/* 최신 업데이트 (단순 목록 영역) */
.ns-updates { margin-top: 18px; }
.ns-updates-title { font-size: 16px; font-weight: 700; color: var(--ns-ink); margin: 0 0 6px; }
.ns-updates-item { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--ns-line); font-size: 14px; }
.ns-updates-item:last-child { border-bottom: none; }
.ns-updates-date { color: var(--ns-muted); font-size: 12.5px; white-space: nowrap; }
.ns-updates-link { flex: 1; color: var(--ns-ink); text-decoration: none; }
.ns-updates-link:hover { color: var(--ns-blue); }
.ns-updates-arrow { color: var(--ns-muted); }

/* 공통 컴포넌트 */
.ns-card { background: #fff; border: 1px solid var(--ns-line); border-radius: 14px; padding: 14px; }
.ns-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.ns-card-title { font-size: 14px; font-weight: 700; color: var(--ns-ink); margin: 0; }
.ns-card-meta { font-size: 12px; color: var(--ns-muted); }
.ns-empty { color: var(--ns-muted); font-size: 13px; line-height: 1.5; padding: 6px 0 2px; }
.ns-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 760px) { .ns-grid-2 { grid-template-columns: 1fr 1fr; } .ns-grid-3 { grid-template-columns: 1fr 1fr 1fr; } }
.ns-btn { appearance: none; border-radius: 10px; font-size: 13.5px; font-weight: 600; padding: 8px 12px; border: 1px solid var(--ns-line); background: #fff; color: var(--ns-ink); cursor: pointer; text-decoration: none; display: inline-block; text-align: center; transition: background .15s, border-color .15s, color .15s; }
.ns-btn:hover { background: #f6f8fc; border-color: #cfd8e6; }
.ns-btn-primary { background: var(--ns-blue); color: #fff; border-color: var(--ns-blue); }
.ns-btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.ns-btn-ghost { background: transparent; border-color: transparent; color: var(--ns-blue); }
.ns-btn-ghost:hover { background: var(--ns-blue-soft); }
.ns-btn:disabled { opacity: .55; cursor: not-allowed; }
.ns-input, .ns-textarea, .ns-select { width: 100%; font-size: 13.5px; padding: 8px 10px; border: 1px solid var(--ns-line); border-radius: 9px; background: #fff; color: var(--ns-ink); box-sizing: border-box; }
.ns-input:focus, .ns-textarea:focus, .ns-select:focus { outline: 2px solid var(--ns-blue); outline-offset: 0; border-color: var(--ns-blue); }
.ns-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ns-ink); margin-bottom: 4px; }
.ns-note { font-size: 11.5px; color: var(--ns-muted); margin-top: 5px; line-height: 1.45; }
.ns-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ns-tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: #f1f3f6; color: var(--ns-muted); }
.ns-tag-blue { background: var(--ns-blue-soft); color: var(--ns-blue); }
.ns-tag-warm { background: var(--ns-warm); color: #7a5a1f; }
.ns-divider { height: 1px; background: var(--ns-line); margin: 10px 0; }
.ns-list { list-style: none; padding: 0; margin: 0; }
.ns-list li { padding: 7px 0; border-bottom: 1px dashed var(--ns-line); }
.ns-list li:last-child { border-bottom: none; }
.ns-check { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.ns-check-box { width: 16px; height: 16px; border: 1.4px solid #9aa6b5; border-radius: 4px; background: #fff; display: inline-block; flex-shrink: 0; }
.ns-check.checked .ns-check-box { background: var(--ns-blue); border-color: var(--ns-blue); }
.ns-check.checked .ns-check-mark { color: #fff; }
.ns-check-mark { display: inline-block; width: 12px; height: 12px; }
.ns-check-text { flex: 1; }
.ns-check-time { font-size: 11.5px; color: var(--ns-muted); }

.ns-footer { margin-top: 22px; font-size: 12px; color: var(--ns-muted); text-align: center; }
.ns-bottom-hint { margin-top: 16px; padding: 10px 12px; background: var(--ns-warm); border: 1px solid var(--ns-warm-line); border-radius: 10px; font-size: 12.5px; color: #5a4517; line-height: 1.5; }
/* NewStart AI 답변 스레드 — 화려한 채팅 UI 대신 질문/답변 구분만 한다 */
.ns-ai-thread { margin-top: 12px; display: grid; gap: 8px; }
.ns-ai-thread:empty { display: none; }
.ns-ai-block { border: 1px solid var(--ns-line); border-radius: 10px; padding: 10px 12px; background: #fff; }
.ns-ai-error { border-color: #e8b4b4; background: #fdf6f6; }
.ns-ai-who { display: block; font-size: 12px; font-weight: 700; color: var(--ns-muted); margin-bottom: 3px; }
.ns-ai-text { font-size: 14px; line-height: 1.65; color: var(--ns-ink); overflow-wrap: anywhere; white-space: pre-wrap; word-break: break-word; }
.ns-ai-sources { background: #fff; }
.ns-ai-source-list { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; font-size: 13px; color: var(--ns-ink); }
.ns-ai-source-list li { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; word-break: keep-all; overflow-wrap: anywhere; }
.ns-ai-atoz { margin-top: 14px; display: flex; flex-direction: column; gap: 7px; }
.ns-ai-atoz-lead { font-size: 13px; font-weight: 700; color: var(--ns-muted); }
.ns-ai-atoz-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 16px; border-radius: 12px; background: var(--ns-blue); color: #fff; font-size: 15px; font-weight: 800; text-decoration: none; }
.ns-ai-source-kind { flex: none; font-size: 11px; font-weight: 700; color: #0c4a6e; background: #e0f2fe; border-radius: 999px; padding: 1px 8px; }
.ns-ai-source-link { color: #2563eb; font-weight: 700; text-decoration: none; }
/* ── 회원 채팅 (/newstart/chat) — 모바일 우선 메신저 구조 ─────────────────── */
.ns-chat-shell { display: flex; flex-direction: column; min-height: 100svh; }
.ns-chat-main { flex: 1; display: flex; flex-direction: column; margin-top: 14px; min-height: 0; }
.ns-chat-room { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 12px 12px 10px; }
.ns-chat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ns-chat-title { font-size: 17px; font-weight: 800; color: var(--ns-ink); margin: 0; }
.ns-chat-sub { font-size: 12px; color: var(--ns-muted); margin: 2px 0 0; }
.ns-chat-login { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 8px; }
.ns-chat-login .ns-btn { min-width: 120px; }
/* [hidden]이 없으면 위 display:flex가 UA 기본 [hidden]{display:none}을 이긴다 — 로그인 상태
   전환(newstart-chat.js enterRoom())이 loginBox.hidden=true로 정확히 반영돼도 화면에서는
   "회원 채팅은 로그인 회원만..." 안내가 계속 보이던 회귀의 원인. account_menu.css의
   .auth-actions[hidden]/.account-menu[hidden]과 동일한 방어 규칙을 여기에도 둔다. */
.ns-chat-login[hidden], .ns-chat-form[hidden] { display: none !important; }

.ns-chat-list { flex: 1; min-height: 180px; overflow-y: auto; padding: 10px 2px 6px; display: flex; flex-direction: column; gap: 10px; -webkit-overflow-scrolling: touch; }
.ns-chat-more { align-self: center; font-size: 12.5px; padding: 6px 14px; }
.ns-chat-empty { text-align: center; padding: 18px 0; }

.ns-msg { max-width: 82%; display: flex; flex-direction: column; }
.ns-msg-meta { display: flex; align-items: baseline; gap: 6px; font-size: 11.5px; color: var(--ns-muted); }
.ns-msg-name { font-size: 12.5px; font-weight: 700; color: var(--ns-ink); overflow-wrap: anywhere; }
.ns-msg-time { white-space: nowrap; }
.ns-msg-body { margin-top: 3px; font-size: 14px; line-height: 1.5; color: var(--ns-ink); background: #fff; border: 1px solid var(--ns-line); border-radius: 12px; border-top-left-radius: 4px; padding: 8px 11px; overflow-wrap: anywhere; }
.ns-msg-mine { align-self: flex-end; align-items: flex-end; }
.ns-msg-mine .ns-msg-body { background: var(--ns-blue-soft); border-color: #d5e0f7; border-radius: 12px; border-top-right-radius: 4px; }
.ns-msg-deleted .ns-msg-body { color: var(--ns-muted); background: #fafafa; border-style: dashed; }
.ns-msg-del { appearance: none; border: none; background: transparent; color: var(--ns-muted); font-size: 11px; cursor: pointer; padding: 0 2px; text-decoration: underline; }
.ns-msg-del:hover { color: #b91c1c; }

.ns-chat-form { display: flex; gap: 8px; align-items: flex-end; padding-top: 10px; border-top: 1px solid var(--ns-line); margin-top: 4px; }
.ns-chat-input { flex: 1; min-width: 0; resize: none; font-size: 15px; padding: 10px 12px; line-height: 1.45; max-height: 96px; }
.ns-chat-send { flex-shrink: 0; font-size: 14.5px; padding: 10px 18px; }
.ns-chat-status { min-height: 14px; margin: 4px 2px 0; }

/* ── 내 프로필(별명) 모달 — 모바일 우선, 단일 입력 ─────────────────────────── */
.ns-profile-modal {
  position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center;
  justify-content: center; width: 100vw; min-height: 100dvh; padding: 20px;
  background: rgba(15, 23, 42, .48); box-sizing: border-box;
}
.ns-profile-modal[hidden] { display: none !important; }
.ns-profile-modal-card {
  position: relative; width: min(360px, 100%); padding: 22px; border-radius: 18px;
  background: #fff; box-shadow: 0 24px 60px rgba(15, 23, 42, .28); box-sizing: border-box;
}
.ns-profile-modal-close { position: absolute; top: 10px; right: 12px; border: 0; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; color: #64748b; }
.ns-profile-modal-title { margin: 0 0 14px; font-size: 17px; font-weight: 800; color: var(--ns-ink); }
.ns-profile-modal-message.ns-profile-modal-error { color: #b91c1c; }
.ns-profile-modal-save { width: 100%; margin-top: 12px; }

@media (min-width: 640px) {
  .ns-chat-shell { max-width: 720px; }
  .ns-msg { max-width: 70%; }
}


/* 2026-09-20 final home polish — 4 core services, public-finance tone, mobile first */
.newstart-page { min-height: 100vh; background: #f7f9fc; color: var(--ns-ink); }
.newstart-shell { max-width: 1120px; padding: 18px 20px 56px; }
.newstart-top { min-height: 52px; flex-wrap: nowrap; }
.newstart-brand { font-size: 19px; }
.newstart-topbar { align-items: center; justify-content: flex-end; flex-wrap: nowrap; }
.ns-hero { margin-top: 24px; padding: clamp(28px, 5vw, 58px); border: 1px solid #dbe5f4; border-radius: 24px; background: linear-gradient(135deg, #ffffff 0%, #eef4ff 100%); box-shadow: 0 14px 36px rgba(30, 64, 175, .07); }
.ns-eyebrow, .ns-section-kicker { margin: 0 0 8px; color: #1d4ed8; font-size: 13px; font-weight: 800; letter-spacing: .04em; }
.ns-hero h1 { max-width: 760px; margin: 0; font-size: clamp(30px, 5vw, 48px); line-height: 1.22; letter-spacing: -.045em; }
.ns-hero-copy { max-width: 680px; margin: 18px 0 0; color: var(--ns-muted); font-size: clamp(16px, 2vw, 18px); line-height: 1.7; }
.ns-hero-actions { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.ns-btn-large { min-height: 48px; padding: 13px 19px; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; }
.ns-core, .ns-content-section { margin-top: 42px; }
.ns-section-heading h2, .ns-content-section h2 { margin: 0; font-size: clamp(22px, 3vw, 30px); letter-spacing: -.035em; }
.ns-core-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-top: 18px; }
.ns-core-card { min-width: 0; min-height: 220px; padding: 22px; display: flex; flex-direction: column; border: 1px solid #dfe5ee; border-radius: 18px; background: #fff; box-shadow: 0 8px 22px rgba(15,23,42,.04); }
.ns-core-card-accent { border-color: #b9cff7; background: #f4f7ff; }
.ns-core-number { color: #3565b8; font-size: 13px; font-weight: 800; }
.ns-core-card h3, .ns-info-card h3 { margin: 18px 0 8px; font-size: 19px; letter-spacing: -.025em; }
.ns-core-card p, .ns-info-card p { margin: 0; color: var(--ns-muted); font-size: 14px; line-height: 1.65; }
.ns-text-link { margin-top: auto; padding-top: 18px; color: #1d4ed8; font-size: 14px; font-weight: 750; text-decoration: none; }
.ns-text-link:hover { text-decoration: underline; }
.ns-core-links { display: flex; gap: 14px; margin-top: auto; }
.ns-core-links .ns-text-link { margin-top: 0; }
.ns-ai-hero { margin-top: 42px; padding: clamp(22px, 4vw, 34px); border: 1px solid #b9cff7; border-radius: 20px; background: #fff; box-shadow: 0 10px 28px rgba(30,64,175,.06); }
.ns-ai-title { font-size: 25px; letter-spacing: -.03em; }
.ns-ai-input { min-height: 48px; }
.ns-ai-send { min-width: 84px; min-height: 48px; }
.ns-status-panel { margin-top: 22px; }
.ns-info-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-top: 18px; }
.ns-info-card { padding: 20px; border: 1px solid #dfe5ee; border-radius: 16px; background: #fff; }
.ns-info-card h3 { margin-top: 14px; }
.ns-cases { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px; border: 1px solid #e4dfd2; border-radius: 18px; background: #fbf8f1; }
.ns-cases p { max-width: 720px; margin: 10px 0 0; color: #665c49; line-height: 1.65; }
.ns-ready-badge { flex-shrink: 0; padding: 9px 12px; border-radius: 999px; background: #fff; color: #745d2d; font-size: 13px; font-weight: 750; }
.ns-updates { padding-top: 4px; }
.ns-updates-title { font-size: clamp(22px,3vw,30px); }
.ns-bottom-hint { margin-top: 36px; padding: 16px 18px; border-radius: 14px; }
.ns-footer { display: grid; gap: 4px; padding: 28px 0 10px; border-top: 1px solid var(--ns-line); text-align: left; }
.ns-footer strong { color: var(--ns-ink); font-size: 13px; }
@media (max-width: 860px) { .ns-core-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .ns-core-card { min-height: 196px; } }
@media (max-width: 620px) {
  .newstart-shell { padding: 12px 14px 40px; }
  .newstart-top { align-items: flex-start; gap: 8px; }
  .newstart-brand { max-width: 58%; font-size: 17px; white-space: normal; line-height: 1.25; }
  .newstart-topbar { gap: 2px; }
  .newstart-topbar .ns-btn { padding: 8px; font-size: 12.5px; }
  .ns-hero { margin-top: 14px; padding: 26px 20px; border-radius: 18px; }
  .ns-hero h1 br { display: none; }
  .ns-hero-actions { display: grid; grid-template-columns: 1fr; }
  .ns-core, .ns-content-section, .ns-ai-hero { margin-top: 30px; }
  .ns-core-grid, .ns-info-grid { grid-template-columns: 1fr; gap: 10px; }
  .ns-core-card { min-height: auto; padding: 18px; }
  .ns-core-card h3 { margin-top: 12px; }
  .ns-text-link { padding-top: 14px; }
  .ns-ai-input { font-size: 16px; }
  .ns-ai-send { padding-inline: 15px; }
  .ns-cases { align-items: flex-start; flex-direction: column; padding: 20px; gap: 16px; }
  .ns-ready-badge { align-self: flex-start; }
  .ns-status-panel .ns-card { padding-inline: 0; }
}
@media (max-width: 390px) { .newstart-brand { max-width: 52%; font-size: 16px; } .ns-hero { padding: 24px 18px; } .ns-hero h1 { font-size: 28px; } .ns-ai-hero { padding: 20px 16px; } }

/* ── NewStart home 2026-09-21: mobile-first landing page ───────────── */
* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: clip; }
.newstart-page {
  --ns-blue: #1558d6;
  --ns-blue-deep: #0b2f73;
  --ns-blue-soft: #edf4ff;
  --ns-ink: #101828;
  --ns-muted: #586477;
  --ns-line: #dfe6ef;
  --ns-surface: #f5f7fa;
  color: var(--ns-ink);
  background: linear-gradient(180deg, #f8faff 0, #fff 420px);
  font-family: Pretendard, "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.newstart-shell { width: 100%; max-width: 1180px; margin: 0 auto; padding: 14px 18px 40px; }
.newstart-top { min-height: 56px; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 12px; }
.newstart-brand { min-width: 0; display: flex; flex-direction: column; color: var(--ns-ink); text-decoration: none; white-space: normal; }
.newstart-brand-name { font-size: clamp(17px, 4.8vw, 21px); line-height: 1.15; font-weight: 800; letter-spacing: -.045em; }
.newstart-brand-sub { margin-top: 3px; font-size: 10px; line-height: 1.2; font-weight: 700; letter-spacing: .08em; color: #667085; }
.newstart-topbar { flex: 0 0 auto; display: flex; align-items: center; }
.newstart-topbar .ns-btn { min-height: 44px; display: inline-flex; align-items: center; padding-inline: 13px; }
.newstart-topbar .account-menu-trigger { width: 44px; height: 44px; }

/* 프로필 메뉴 뷰포트 안전 배치 (2026-10-02)
   공용 css/account_menu.css의 .account-menu-panel{position:absolute;right:0}은 패널 폭(154~168px)만큼
   아이콘 "왼쪽"으로 펼친다. 홈(index)은 헤더에 .newstart-brand가 없어 topbar가 유일한 자식이고,
   실측으로 아이콘이 좌측(x=26)에 붙는다 → 패널 좌변이 -84px(360px)까지 나가 html·body의
   overflow-x:clip(L220)에 잘린다. 769~1399px에서도 같은 원리로 24~78px 잘림(1400px 이상은 shell이
   중앙 정렬되어 정상). 아이콘 위치는 그대로 두고 패널 앵커만 고친다. 공용 css/js는 다른 서비스
   (BuildIt·Wiki)가 쓰므로 NewStart 범위로만 지정한다. */
@media (min-width: 769px) and (max-width: 1399px) {
  /* 데스크톱·태블릿: 아이콘 오른쪽으로 열리게 앵커를 반전(기존 1400px 이상 레이아웃은 그대로). */
  .newstart-page .newstart-top > .newstart-topbar:only-child .account-menu-panel { left: 0; right: auto; }
}
@media (max-width: 768px) {
  /* 모바일: 앵커를 헤더로 올려(아이콘 폭 44px에서는 중앙 정렬 불가) 헤더 폭 기준으로 중앙 정렬.
     top:calc(100% + 8px)은 헤더 높이 기준이라 브레이크포인트마다 아이콘 바로 아래에 붙는다. */
  .newstart-page .newstart-top { position: relative; }
  .newstart-page .newstart-topbar .account-menu { position: static; }
  .newstart-page .newstart-topbar .account-menu-panel {
    top: calc(100% + 8px); left: 50%; right: auto;
    transform: translateX(-50%); max-width: calc(100% - 32px); z-index: 950;
  }
}

.ns-hero { padding: 48px 0 36px; max-width: 720px; }
.ns-eyebrow, .ns-section-kicker { margin: 0 0 10px; color: var(--ns-blue); font-size: 11px; line-height: 1.3; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ns-hero h1 { margin: 0; max-width: 680px; font-size: clamp(32px, 9vw, 62px); line-height: 1.14; font-weight: 850; letter-spacing: -.055em; word-break: keep-all; }
.ns-hero-copy { max-width: 570px; margin: 18px 0 0; color: var(--ns-muted); font-size: clamp(15px, 4vw, 18px); line-height: 1.65; word-break: keep-all; }
.ns-hero-cta { width: 100%; min-height: 52px; margin-top: 25px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; font-size: 15px; }

/* A to Z 단계 선택 — 로그인 후 홈의 중심 진입점(§2). 큰 터치 영역, 한 화면에서 단계 즉시 선택. */
.ns-step-picker { margin: 24px 0 0; }
.ns-step-title { margin: 0; font-size: clamp(22px, 6vw, 30px); line-height: 1.25; font-weight: 850; letter-spacing: -.04em; word-break: keep-all; }
.ns-step-sub { margin: 8px 0 16px; color: var(--ns-muted); font-size: 16px; line-height: 1.6; font-weight: 500; word-break: keep-all; }
.ns-step-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.ns-step-link { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 16px; border: 1.5px solid var(--ns-line); border-radius: 14px; background: #fff; color: var(--ns-ink); font-size: 16px; font-weight: 700; text-decoration: none; word-break: keep-all; transition: border-color .15s, background .15s; }
.ns-step-link:hover { border-color: var(--ns-blue); background: var(--ns-blue-soft); }
.ns-step-num { flex-shrink: 0; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--ns-blue-soft); color: var(--ns-blue); font-size: 14px; font-weight: 850; }
.ns-step-atoz-all { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 14px; color: var(--ns-blue); font-size: 15px; font-weight: 800; text-decoration: none; }
.ns-step-atoz-all:hover { text-decoration: underline; }
@media (min-width: 560px) { .ns-step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ns-btn-secondary { background: #fff; color: var(--ns-blue); border: 1.5px solid var(--ns-blue); }
.ns-btn-secondary:hover { background: var(--ns-blue-soft); border-color: var(--ns-blue); color: var(--ns-blue); }

.ns-core { padding: 16px 0 28px; }
.ns-section-heading { margin-bottom: 18px; }
.ns-section-heading h2 { margin: 0; font-size: clamp(24px, 7vw, 38px); line-height: 1.2; font-weight: 800; letter-spacing: -.045em; word-break: keep-all; }
.ns-core-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 13px; }
.ns-practical-grid { grid-template-columns: minmax(0, 1fr); }
/* 채무상황 헤더 row: 제목과 CTA·상태 배지를 하나의 block으로 인식 — CTA를 오른쪽 끝으로 고립시키지 않고 제목 가까이에 둔다. */
.ns-debt-heading { display: flex; align-items: baseline; justify-content: flex-start; gap: 8px 12px; flex-wrap: wrap; }
.ns-debt-heading .ns-row { margin: 0; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.ns-debt-heading .ns-row .ns-text-link { margin-top: 0; padding-top: 0; min-height: 44px; display: inline-flex; align-items: center; font-size: 15px; font-weight: 800; }
.ns-debt-heading .ns-debt-home-state { margin-top: 0; flex-shrink: 0; }
.ns-debt-desc { margin: 10px 0 0; color: var(--ns-muted); font-size: 14px; line-height: 1.65; word-break: keep-all; }
.ns-debt-lead { display: inline-flex; align-items: center; min-height: 44px; margin: 4px 0 8px; font-size: 15px; font-weight: 800; color: var(--ns-blue); text-decoration: none; }
.ns-debt-lead:hover { text-decoration: underline; }
.ns-practical-heading { margin-top: 28px; }
.ns-service-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 13px; margin-top: 22px; }
.ns-service-card { display: flex; flex-direction: column; min-height: 170px; padding: 22px; border-radius: 20px; border: 1.5px solid var(--ns-blue); background: linear-gradient(160deg, var(--ns-blue-soft), #fff 65%); color: var(--ns-ink); text-decoration: none; box-shadow: 0 8px 24px rgba(16, 24, 40, .05); }
.ns-service-card .ns-section-kicker { margin: 0; }
.ns-service-card strong { margin-top: 6px; font-size: 23px; line-height: 1.25; letter-spacing: -.04em; }
.ns-service-copy { display: block; margin-top: 8px; color: var(--ns-muted); font-size: 14px; line-height: 1.6; word-break: keep-all; }
.ns-service-cta { margin-top: auto; padding-top: 14px; min-height: 44px; display: flex; align-items: center; color: var(--ns-blue); font-size: 15px; font-weight: 800; }
.ns-service-chat { border-color: #176b4d; background: linear-gradient(160deg, #eaf8f2, #fff 65%); }
.ns-service-chat .ns-service-cta, .ns-service-chat .ns-section-kicker { color: #176b4d; }
.ns-service-consult { border-color: #4c1d95; background: linear-gradient(160deg, #f3ecff, #fff 65%); }
.ns-service-consult .ns-service-cta { color: #5b21b6; }
.ns-service-consult strong { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ns-consult-unread { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 13px; font-weight: 800; line-height: 1.4; }
.ns-consult-unread[hidden] { display: none; }
@media (min-width: 760px) { .ns-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 서비스 카드가 1장이면 절반이 빈 행으로 남는다 — 남은 열까지 채운다. */
@media (min-width: 760px) { .ns-service-grid > :only-child { grid-column: 1 / -1; } }
.ns-feature-card { position: relative; min-width: 0; min-height: 218px; padding: 22px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--ns-line); border-radius: 20px; color: var(--ns-ink); background: #fff; text-decoration: none; box-shadow: 0 8px 24px rgba(16, 24, 40, .045); }
.ns-feature-card:focus-visible { outline: 3px solid rgba(21, 88, 214, .28); outline-offset: 3px; }
.ns-feature-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: var(--ns-blue); background: var(--ns-blue-soft); }
.ns-feature-icon svg { display: block; width: 22px; height: 22px; max-width: 22px; max-height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ns-feature-category { margin-top: 19px; color: #667085; font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.ns-feature-card strong { margin-top: 5px; font-size: 25px; line-height: 1.2; letter-spacing: -.04em; }
.ns-feature-copy { margin-top: 8px; color: var(--ns-muted); font-size: 14px; line-height: 1.55; word-break: keep-all; }
.ns-feature-cta { min-height: 44px; margin-top: auto; padding-top: 14px; display: flex; align-items: flex-end; color: var(--ns-blue); font-size: 14px; font-weight: 750; }

.ns-ai-hero { scroll-margin-top: 18px; margin-top: 34px; padding: 25px 20px 20px; border: 0; border-radius: 20px; background: #edf4ff; }
.ns-ai-title { margin: 0 0 16px; font-size: clamp(25px, 7vw, 35px); line-height: 1.2; letter-spacing: -.04em; }
.ns-ai-input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.ns-ai-input, .ns-ai-send { min-height: 48px; }
.ns-ai-send { padding-inline: 17px; }
.ns-ai-thread { margin-top: 14px; }
.ns-ai-block { padding: 12px 0; border-top: 1px solid #d3def0; }
.ns-ai-who { display: block; margin-bottom: 4px; font-size: 12px; }
.ns-ai-text { font-size: 14px; line-height: 1.6; white-space: pre-wrap; }

.ns-status-panel { scroll-margin-top: 18px; margin-top: 24px; padding: 20px; }
.ns-status-panel[hidden] { display: none !important; }
.ns-status-panel .ns-card-title { margin: 0; font-size: 24px; line-height: 1.2; }
.ns-status-panel .ns-grid { margin-top: 18px; }
.ns-status-panel .ns-row { margin-top: 16px; }
.ns-status-panel .ns-btn { min-height: 44px; }
.ns-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ns-debt-guide { margin-top: 20px; }
.ns-debt-guide-main { margin: 0; color: var(--ns-ink); font-size: 13.5px; font-weight: 600; line-height: 1.65; word-break: keep-all; }
.ns-debt-guide-sub { margin: 7px 0 0; color: var(--ns-muted); font-size: 11.5px; line-height: 1.55; word-break: keep-all; }
.ns-debt-upload-box { margin: 18px 0; padding: 16px; border: 1px solid var(--ns-line, #dfe5e2); border-radius: 14px; background: #f8fbfa; }
.ns-debt-upload-box .ns-note { margin: 6px 0 12px; }
.ns-debt-analysis-results { display: grid; gap: 12px; margin-top: 14px; }
.ns-debt-result-card { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 14px; border: 1px solid var(--ns-line, #dfe5e2); border-radius: 12px; background: #fff; }
.ns-debt-result-field { display: grid; gap: 6px; color: #47534f; font-size: 12px; font-weight: 700; }
.ns-debt-result-input { width: 100%; min-width: 0; }
.ns-debt-result-card .ns-btn { grid-column: 1 / -1; justify-self: start; }

@media (max-width: 600px) {
  #ns-debt-summary { min-height: 220px; font-size: 16px; line-height: 1.55; }
  .ns-debt-guide { margin-top: 18px; }
  .ns-debt-guide-main { font-size: 14px; line-height: 1.7; }
  .ns-debt-guide-sub { font-size: 12px; }
  .ns-debt-upload-box { margin-inline: -4px; padding: 14px; }
  .ns-debt-upload-box .ns-row { align-items: stretch; }
  .ns-debt-upload-box .ns-row .ns-btn { width: 100%; }
  .ns-debt-result-card { grid-template-columns: 1fr; }
  .ns-debt-result-card .ns-btn { grid-column: 1; width: 100%; }
}

.ns-debt-checklist { display: grid; gap: 10px; margin-top: 18px; }
.ns-debt-checklist .ns-check { min-height: 44px; }
@media (min-width: 640px) { .ns-debt-checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ns-debt-checklist .ns-label { grid-column: 1 / -1; } }
.ns-check-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ns-check-box { display: inline-flex; align-items: center; justify-content: center; }
.ns-check .ns-check-mark { color: transparent; font-size: 11px; line-height: 1; }
.ns-check.checked .ns-check-mark { color: #fff; }
.ns-check:focus-within { outline: 2px solid var(--ns-blue); outline-offset: 2px; border-radius: 8px; }
.ns-debt-save-state { font-size: 13px; color: var(--ns-muted); align-self: center; }
.ns-debt-agent-row { display: grid; gap: 8px; }
.ns-debt-home-state { display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #eef2f7; color: #64748b; }
.ns-debt-home-state[data-state="IN_PROGRESS"] { background: #fff6e8; color: #735116; }
.ns-debt-home-state[data-state="COMPLETED"] { background: var(--ns-blue-soft, #e8f0fe); color: var(--ns-blue); }

.ns-content-section { margin-top: 52px; padding: 0; }
.ns-update-list { border-top: 1px solid var(--ns-line); }
.ns-update-item { padding: 15px 0; display: grid; grid-template-columns: 70px minmax(0, 1fr) auto auto; gap: 8px; border-bottom: 1px solid var(--ns-line); color: inherit; text-decoration: none; }
.ns-update-item span { color: var(--ns-blue); font-size: 11px; font-weight: 800; }
.ns-update-item strong { min-width: 0; font-size: 14px; line-height: 1.5; font-weight: 600; word-break: keep-all; }
.ns-update-copy { min-width: 0; display: grid; gap: 3px; }
.ns-update-copy small { color: var(--ns-muted); font-size: 12px; line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns-update-date { color: var(--ns-muted) !important; white-space: nowrap; font-size: 11px !important; font-weight: 500 !important; }
.ns-update-item:hover strong { color: var(--ns-blue); }
.ns-updates-all { min-height: 44px; margin-top: 10px; display: inline-flex; align-items: center; }
@media (max-width: 620px) {
  /* 출처 라벨(예: 새출발기금 공식 FAQ)을 62~70px 칸에 가두면 여러 줄로 깨진다 —
     모바일에서는 제목 위 전체 폭 행으로 뽑는다. */
  .ns-update-item { grid-template-columns: minmax(0, 1fr) auto; }
  .ns-update-source { grid-column: 1 / -1; grid-row: 1; }
  .ns-update-copy { grid-column: 1; grid-row: 2; }
  .ns-update-date { grid-column: 2; grid-row: 2; align-self: end; }
  .ns-update-item > span:last-child { display: none; }
  .ns-update-copy small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

/* 내부 상세보기 (/newstart/updates/{id}) */
.ns-detail { margin-top: 26px; }
.ns-detail-meta { display: flex; flex-direction: column; gap: 2px; }
.ns-detail-meta .ns-section-kicker { margin: 0; }
.ns-detail-source { margin: 0; color: var(--ns-muted); font-size: 12px; }
.ns-detail-title { margin: 8px 0 4px; font-size: 21px; line-height: 1.45; font-weight: 750; color: var(--ns-ink); word-break: keep-all; }
.ns-detail-date { margin: 0 0 14px; color: var(--ns-muted); font-size: 12.5px; }
.ns-detail-body { padding: 16px 0 6px; border-top: 1px solid var(--ns-line); font-size: 15px; line-height: 1.7; color: var(--ns-ink); }
.ns-detail-body p { margin: 0 0 10px; }
.ns-detail-plain { white-space: pre-line; word-break: keep-all; }
.ns-detail-missing { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--ns-warm-line); border-radius: 12px; background: var(--ns-warm); }
.ns-detail-missing strong { display: block; font-size: 12px; letter-spacing: .4px; color: #92400e; }
.ns-detail-missing p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ns-ink); }
.ns-detail-partial { margin-top: 10px; font-size: 12.5px; color: var(--ns-muted); }
.ns-detail-footer { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--ns-line); }
.ns-detail-provenance { margin: 0 0 10px; font-size: 13px; color: var(--ns-muted); }
.ns-detail-official { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 13.5px; font-weight: 650; color: var(--ns-blue); text-decoration: none; }
.ns-detail-official:hover { text-decoration: underline; }

.ns-footer { margin-top: 50px; padding: 22px 0; display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--ns-line); color: var(--ns-ink); }

.ns-footer-mark { width: 28px; height: 28px; min-width: 28px; max-width: 28px; min-height: 28px; max-height: 28px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: var(--ns-blue); font-size: 13px; font-weight: 850; }
.ns-footer div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ns-footer strong { font-size: 13px; }
.ns-footer div > span { color: var(--ns-muted); font-size: 11px; line-height: 1.4; word-break: keep-all; }

/* The shared footer stylesheet is now loaded by the home template. These hard
   limits keep its SVG mark safe even if that stylesheet is changed or cached. */
.public-footer .footer-logo-box img,
.public-footer .footer-parent-logo-box img {
  display: block !important;
  width: auto !important;
  height: 28px !important;
  max-width: 40px !important;
  max-height: 28px !important;
  object-fit: contain;
}
.public-footer .footer-logo-box,
.public-footer .footer-parent-logo-box {
  flex: 0 0 auto;
  width: auto !important;
  max-width: 40px !important;
  max-height: 28px !important;
  overflow: hidden;
}

@media (hover: hover) and (pointer: fine) {
  .ns-feature-card { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
  .ns-feature-card:hover { transform: translateY(-3px); border-color: #b9c9e3; box-shadow: 0 14px 32px rgba(16,24,40,.09); }
}
@media (min-width: 560px) {
  .newstart-shell { padding-inline: 28px; }
  .ns-hero-cta { width: auto; padding-inline: 24px; }
  .ns-core-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ns-practical-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .newstart-shell { padding: 20px 38px 58px; }
  .newstart-top { min-height: 66px; }
  .ns-hero { padding: 72px 0 54px; }
  .ns-core { padding-top: 20px; }
  .ns-feature-card { padding: 26px; }
  .ns-ai-hero { padding: 32px; }
  .public-footer .footer-logo-box img,
  .public-footer .footer-parent-logo-box img { height: 32px !important; max-height: 32px !important; }
}
@media (min-width: 1024px) {
  .newstart-shell { padding-inline: 48px; }
  .ns-core-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
  /* 지피지기 Agent 상단 카드 제거로 4장 — 빈 칸 없이 한 행에 맞춘다. */
  .ns-practical-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ns-feature-card { grid-row: auto; min-height: 278px; }
  .ns-ai-hero { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: 30px; align-items: center; }
  .ns-ai-hero .ns-section-kicker, .ns-ai-hero .ns-ai-title, .ns-ai-hero .ns-ai-note { grid-column: 1; }
  .ns-ai-hero .ns-ai-input-row, .ns-ai-hero .ns-ai-thread { grid-column: 2; }
  .ns-ai-hero .ns-ai-input-row { grid-row: 1 / span 2; }
}
@media (max-width: 359px) {
  .newstart-shell { padding-inline: 14px; }
  .newstart-brand-name { font-size: 16px; }
  .newstart-brand-sub { font-size: 9px; }
}

/* ═══ NewStart 기능성 모션 Phase 1 ═══
   모션은 기능 피드백(진입/안내/상태변화)에만 사용.장식 루프·스크롤 하이재킹 금지.
   prefers-reduced-motion에서는 모든 이동이 중단되고 콘텐츠가 그대로 보인다. */
:root {
  --ns-motion-fast: 180ms;
  --ns-motion-normal: 300ms;
  --ns-motion-guided: 560ms;
  --ns-ease-out: cubic-bezier(.22, .61, .36, 1);
}

/* 스크롤 진입 reveal: JS가 동작 가능으로 판단한 페이지(ns-motion-on)에만 적용 — no-JS는 항상 노출 */
.ns-motion-on [data-ns-reveal] { opacity: 0; transform: translateY(20px); }
.ns-motion-on [data-ns-reveal].ns-revealed {
  opacity: 1;
  transform: none;
  transition: opacity var(--ns-motion-guided) var(--ns-ease-out) var(--ns-reveal-delay, 0ms),
              transform var(--ns-motion-guided) var(--ns-ease-out) var(--ns-reveal-delay, 0ms);
}

/* 지피지기 AI 도달 강조: #ns-ai 앵커 도착(:target, no-JS 포함)과 사전입력 버튼 이동 시 1회만 재생 */
#ns-ai:target, .ns-ai-arrival { animation: ns-ai-arrival var(--ns-motion-guided) var(--ns-ease-out) 1; }
@keyframes ns-ai-arrival {
  0% { box-shadow: 0 0 0 6px rgba(37, 99, 235, .46); }
  100% { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0); }
}

/* 내 채무상태: 배지 색상 전이 + 상태가 실제로 바뀐 때만 1회 강조 */
.ns-debt-home-state { transition: background-color var(--ns-motion-fast) linear, color var(--ns-motion-fast) linear; }
.ns-debt-home-state.ns-debt-flash { animation: ns-debt-flash var(--ns-motion-normal) var(--ns-ease-out) 1; }
@keyframes ns-debt-flash {
  0% { transform: scale(.92); }
  55% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.ns-debt-save-state.ns-debt-flash { animation: ns-debt-text-in var(--ns-motion-normal) var(--ns-ease-out) 1; }
@keyframes ns-debt-text-in { from { opacity: 0; } to { opacity: 1; } }

/* 체크리스트 체크 피드백 (색 전이 + 표시 scale) */
.ns-check-box { transition: background-color var(--ns-motion-fast) linear, border-color var(--ns-motion-fast) linear; }
.ns-check .ns-check-mark { transition: color var(--ns-motion-fast) linear, transform var(--ns-motion-fast) var(--ns-ease-out); }
.ns-check:not(.checked) .ns-check-mark { transform: scale(.6); }

/* 모바일(터치) 카드 눌림 피드백 — 데스크톱 hover는 위 (hover:hover) 블록이 이미 담당 */
@media (hover: none) and (pointer: coarse) {
  .ns-feature-card { transition: transform var(--ns-motion-fast) var(--ns-ease-out); }
  .ns-feature-card:active { transform: scale(.985); }
}

/* 하드 게이트: reduce에서는 NewStart 화면 전체의 이동·깜빡임을 중단하고 콘텐츠를 즉시 노출 */
@media (prefers-reduced-motion: reduce) {
  .newstart-page *, .newstart-shell *, .ns-tool-page * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  .ns-motion-on [data-ns-reveal], .ns-motion-on [data-ns-reveal-group] > li {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ══ 2026-09-29 지피지기 질문·답변 가독성 레이어 (마지막 레이어 — 이전 레이어 위임) ══
   입력·질문 카드·답변 카드의 여백/줄간격/문단·목록 구조만 다룬다. 색상·모서리는 기존 토큰 재사용. */
.ns-ai-input-row { align-items: center; gap: 10px; }
.ns-ai-input { min-height: 64px; max-height: 168px; padding: 12px 14px; font-size: 15px; line-height: 1.55; border-radius: 12px; resize: none; overflow-y: auto; }
.ns-ai-send { min-height: 48px; padding: 10px 18px; }
@media (max-width: 480px) { .ns-ai-input { font-size: 16px; } }

.ns-ai-thread { gap: 12px; margin-top: 18px; }
.ns-ai-block { padding: 14px 16px 15px; border: 1px solid #d3def0; border-radius: 14px; background: #fff; }
.ns-ai-error { border-color: #e8b4b4; background: #fdf6f6; }
.ns-ai-user { max-width: min(100%, 560px); margin-left: auto; background: var(--ns-blue-soft); border-color: #cdddfb; }
.ns-ai-user .ns-ai-text { white-space: pre-wrap; }
.ns-ai-user .ns-ai-who { color: var(--ns-blue); }
.ns-ai-who { margin-bottom: 7px; font-size: 11.5px; }
.ns-ai-text { max-width: 40em; font-size: 15px; line-height: 1.78; word-break: keep-all; overflow-wrap: anywhere; }
.ns-ai-p { margin: 0 0 14px; white-space: pre-wrap; }
.ns-ai-p:last-child { margin-bottom: 0; }
.ns-ai-block > .ns-ai-text > :last-child { margin-bottom: 0; }
.ns-ai-list { margin: 2px 0 14px; padding-left: 22px; }
.ns-ai-list li { margin-bottom: 8px; padding-left: 2px; }
.ns-ai-list li:last-child { margin-bottom: 0; }

.ns-ai-sources { margin-top: 18px; padding-top: 13px; border-top: 1px solid #e2e9f5; }
.ns-ai-sources-title { margin: 0 0 9px; font-size: 12px; font-weight: 700; color: var(--ns-muted); }
.ns-ai-source-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ns-ai-source-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; font-size: 12.5px; line-height: 1.6; color: var(--ns-muted); }
.ns-ai-source-kind { flex-shrink: 0; padding: 1px 8px; border-radius: 999px; background: #eef2fb; font-size: 11px; font-weight: 700; color: var(--ns-blue); }
.ns-ai-source-body { min-width: 0; overflow-wrap: anywhere; }
.ns-ai-source-body a { color: var(--ns-blue); text-decoration: none; overflow-wrap: anywhere; }
.ns-ai-source-body a:hover { text-decoration: underline; }

.ns-ai-pending .ns-ai-text { color: var(--ns-muted); }
.ns-ai-dots { display: inline-flex; gap: 4px; margin-left: 7px; vertical-align: 1px; }
.ns-ai-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ns-blue); animation: ns-ai-dot 1.2s ease-in-out infinite; }
.ns-ai-dots i:nth-child(2) { animation-delay: .18s; }
.ns-ai-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes ns-ai-dot { 0%, 70%, 100% { opacity: .25; } 35% { opacity: 1; } }

@media (max-width: 390px) {
  .ns-ai-block { padding: 13px 13px 14px; }
  .ns-ai-thread { gap: 10px; }
  .ns-ai-text { font-size: 14.5px; line-height: 1.75; }
  .ns-ai-list { padding-left: 19px; }
}
@media (min-width: 1000px) {
  .ns-ai-hero .ns-ai-thread { max-height: 70vh; overflow-y: auto; padding-right: 6px; }
}

/* ══ 2026-10-01 지피지기 질문 안내문 강조 (제목+안내문+스타일만 — 입력창·RAG 불변) ══
   안내문이 작은 각주로 보이지 않도록 본문급 크기로 키우고, 핵심 3구간만 굵게.
   포인트 색상은 기존 NewStart 토큰(--ns-blue)만 사용, 빨간 경고색 금지. */
.ns-ai-note { font-size: 14.5px; line-height: 1.7; color: var(--ns-muted); word-break: keep-all; }
.ns-ai-note strong { font-weight: 700; color: inherit; }
.ns-ai-note .ns-ai-em-point { color: var(--ns-blue); }
@media (min-width: 768px) {
  .ns-ai-note { font-size: 15.5px; }
}

/* ══ 2026-10-01 감사회원 전용 badge (지피지기 Agent + 추심 대응 공용) ══
   기존 카드/버튼 구조를 바꾸지 않는 작은 pill. 한 줄을 넘기면 다음 줄로
   자연스럽게 내려가 가로 overflow를 만들지 않는다. */
.ns-member-badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; line-height: 1.5; font-weight: 700; letter-spacing: -.01em;
  white-space: nowrap; vertical-align: middle;
  background: var(--ns-blue-soft); color: var(--ns-blue);
  border: 1px solid currentColor;
}
.ns-section-kicker .ns-member-badge { margin-left: 6px; }
.ns-feature-card .ns-member-badge { align-self: flex-start; margin-top: 8px; }

/* ══ 2026-10-01 접속 회원 + 내부 쪽지 패널 (HOME 전용, 모바일 우선) ══
   모바일(<1024px): 왼쪽 엣지 탭 1종. PC(1024px↑): 왼쪽 레일 상시 표시.
   패널은 왼쪽 슬라이드 1종으로 통일. 카드·버튼 기존 구조 변경 없음. */
.ns-presence-edge {
  display: inline-flex; position: fixed; left: 0; top: 42%; z-index: 900;
  align-items: center; gap: 4px; min-height: 44px; max-width: 46vw;
  padding: 10px 10px 10px 8px; border: 1px solid var(--ns-line); border-left: none;
  border-radius: 0 14px 14px 0; background: #fff; color: var(--ns-ink);
  font-size: 12px; font-weight: 800; cursor: pointer;
  box-shadow: 4px 4px 16px rgba(16, 24, 40, .10);
}
.ns-presence-edge .ns-presence-unread {
  position: absolute; top: -8px; right: -6px;
}
/* author display 규칙이 UA [hidden]을 이기므로 명시 방어(#350 동일 결함). */
.ns-presence-edge[hidden], .ns-presence-rail[hidden] { display: none !important; }
.ns-presence-rail .ns-presence-unread {
  position: absolute; top: -8px; right: -4px;
}
.ns-presence-rail {
  display: none; position: fixed; left: 12px; top: 50%; z-index: 900;
  transform: translateY(-50%); min-width: 52px; min-height: 52px;
  align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--ns-line); border-radius: 999px; background: #fff;
  color: var(--ns-ink); font-size: 13px; font-weight: 800; cursor: pointer;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .08); padding: 6px 12px;
}
@media (min-width: 1024px) {
  .ns-presence-edge { display: none; }
  .ns-presence-rail { display: inline-flex; }
}
.ns-presence-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #16a34a; flex-shrink: 0;
}
.ns-presence-panel {
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 1000;
  width: min(340px, 94vw); overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: #fff; border-right: 1px solid var(--ns-line);
  box-shadow: 8px 0 32px rgba(16, 24, 40, .10);
  padding: 16px 14px calc(20px + env(safe-area-inset-bottom));
  transform: translateX(-105%); transition: transform var(--ns-motion-normal, 300ms) var(--ns-ease-out, ease);
}
.ns-presence-panel.is-open { transform: none; }
.ns-presence-panel[hidden] { display: none !important; }
.ns-presence-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ns-presence-head strong { font-size: 16px; }
.ns-presence-head .ns-btn { margin-left: auto; min-height: 44px; }
.ns-presence-unread {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; background: #fef3c7; color: #92400e; white-space: nowrap;
}
.ns-presence-unread[hidden] { display: none !important; }
.ns-presence-list, .ns-presence-inbox { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.ns-presence-member {
  width: 100%; display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 6px 10px; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--ns-ink); background: #fff; border: 1px solid var(--ns-line);
  border-radius: 12px; cursor: pointer; text-align: left;
}
.ns-presence-member:hover { border-color: #b9c9e3; background: var(--ns-blue-soft); }
.ns-presence-compose { margin-top: 10px; display: grid; gap: 8px; }
.ns-presence-compose[hidden] { display: none !important; }
.ns-presence-to { margin: 0; font-size: 13px; color: var(--ns-muted); }
.ns-presence-to button {
  border: none; background: none; color: var(--ns-blue); font: inherit;
  font-size: 13px; font-weight: 700; cursor: pointer; padding: 6px 4px;
}
.ns-presence-compose .ns-input { min-height: 64px; resize: vertical; }
.ns-presence-compose .ns-btn { min-height: 44px; }
.ns-presence-sub { margin: 18px 0 0; font-size: 14px; font-weight: 800; }
.ns-presence-dm { border: 1px solid var(--ns-line); border-radius: 12px; padding: 10px 12px; }
.ns-presence-dm.is-unread { border-color: var(--ns-blue); background: var(--ns-blue-soft); cursor: pointer; }
.ns-presence-dm-head { margin: 0 0 4px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--ns-muted); }
.ns-presence-dm-head strong { color: var(--ns-ink); font-size: 13px; }
.ns-presence-dm-body { margin: 0; font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.ns-presence-dm-del {
  border: none; background: none; color: var(--ns-muted); font: inherit;
  font-size: 12px; cursor: pointer; padding: 6px 4px; min-height: 32px; text-decoration: underline;
}
.ns-presence-setting { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; cursor: pointer; }
.ns-presence-setting input { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) {
  .ns-presence-panel { transition: none; }
}

/* ══ 2026-10-01 NewStart 모바일 퍼스트 가독성 레이어 — HOME ══
   50~60대 사용자가 본문을 확대하지 않고 읽도록 설명 글씨를 17px 이상·진한 색으로.
   구조·라우트·카드·CTA·기능은 그대로 — 크기·색·줄간격·여백만 다룬다.
   (HOUSE: 이 레이어는 파일 마지막에 유지 — 앞선 모든 레이어 위에서 적용된다.) */
.ns-hero-copy { font-size: 17.5px; line-height: 1.7; font-weight: 500; color: #475467; }
.ns-debt-desc { font-size: 17px; line-height: 1.7; color: #475467; }
.ns-feature-copy { font-size: 17px; line-height: 1.65; color: #475467; }
.ns-service-copy { font-size: 17px; line-height: 1.65; color: #475467; }
.ns-feature-card strong { font-weight: 800; }
.ns-service-card strong { font-weight: 800; }
.ns-feature-cta { font-size: 15.5px; font-weight: 800; }
.ns-update-item strong { font-size: 16.5px; line-height: 1.55; font-weight: 700; }
.ns-update-copy small { font-size: 15px; line-height: 1.55; font-weight: 400; color: #475467; }
.ns-update-source { font-size: 13px !important; }
.ns-update-date { font-size: 13px !important; }
.ns-updates-item { font-size: 16px; }
.ns-updates-date { font-size: 14px; }
.ns-ai-note { font-size: 16px; line-height: 1.75; }
.ns-empty { font-size: 15px; line-height: 1.6; }
.ns-text-link { font-size: 16px; }
.newstart-topbar .ns-btn { font-size: 15px; }
.ns-ai-send { font-size: 15px; }
.newstart-brand-sub { font-size: 11.5px; }
.ns-footer div > span { font-size: 13px; }
/* 서비스 카드(회원 채팅·전자책)는 첫 화면을 과도하게 차지하지 않게 압축하되 CTA는 유지 */
@media (max-width: 620px) {
  .ns-service-grid { margin-top: 16px; gap: 12px; }
  .ns-service-card { min-height: 0; padding: 18px; border-radius: 18px; }
  .ns-service-card strong { font-size: 22px; }
  .ns-service-cta { padding-top: 12px; font-size: 16px; }
}
@media (min-width: 768px) {
  .ns-hero-copy { font-size: 18.5px; }
  .ns-debt-desc, .ns-feature-copy, .ns-service-copy { font-size: 17.5px; }
  .ns-ai-note { font-size: 16.5px; }
}
/* 1:1 비공개 상담 진입점: A-to-Z 바로 아래 전폭 카드. 낮은 min-height로 여백을 없애 첫 화면에서 바로 상담으로. */
.ns-consult-entry { margin-top: 28px; }
.ns-consult-entry .ns-service-card { min-height: 0; }
.ns-consult-entry .ns-service-copy { font-size: 17px; font-weight: 600; }
@media (min-width: 640px) { .ns-consult-entry { margin-top: 34px; } }
/* 단계명(A-to-Z 진입)은 홈의 핵심 선택지 — 본문 가독성 기준(≥17px)에 맞춰 굵고 크게. */
.ns-step-link { font-size: 17px; font-weight: 800; }

/* ── Phase 1 개인화 상담 HOME: 히어로 + 1:1 비공개 상담 CTA ─────────────────
 * 390px 기준. 360/430에서도 줄바꿈으로 흡수하고 가로 스크롤을 만들지 않는다. */
.ns-hero-consult { padding: 28px 20px 24px; max-width: none; }
.ns-hero-kicker { margin: 0 0 10px; color: var(--ns-blue); font-size: 14px; font-weight: 800; letter-spacing: -.01em; word-break: keep-all; }
.ns-hero-consult h1 { font-size: clamp(26px, 7.4vw, 40px); line-height: 1.25; word-break: keep-all; }
.ns-hero-consult .ns-hero-copy { margin-top: 14px; font-size: 16.5px; }
.ns-consult-cta { box-sizing: border-box; flex-wrap: wrap; padding: 12px 18px; background: var(--ns-blue); color: #fff; font-weight: 800; text-align: center; text-decoration: none; line-height: 1.35; word-break: keep-all; }
.ns-consult-cta:hover, .ns-consult-cta:focus-visible { filter: brightness(.94); }
.ns-consult-cta .ns-consult-unread { margin: 0; }
.ns-consult-sub { margin: 10px 0 0; color: var(--ns-muted); font-size: 15px; font-weight: 600; line-height: 1.5; }
.ns-consult-sub[hidden] { display: none; }
.ns-debt-section { margin-top: 28px; }
.ns-debt-section .ns-debt-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ns-debt-actions { margin-top: 12px; }
.ns-ai-locked { margin-top: 28px; padding: 20px 18px; border: 1.5px dashed var(--ns-line, #cfd8e6); border-radius: 16px; background: #f8fafc; }
.ns-ai-locked-title { margin: 6px 0 8px; font-size: 18px; line-height: 1.4; font-weight: 800; word-break: keep-all; }
.ns-ai-locked .ns-note { margin: 0 0 10px; word-break: keep-all; }

/* ── 운영자 상담 안내 배너 ── */
.ns-cns-admin-notice {
  margin: 16px 0;
  padding: 16px 18px;
  border: 1.5px solid var(--ns-blue, #2563eb);
  border-radius: 12px;
  background: #eff6ff;
}
.ns-cns-admin-notice p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.5;
  word-break: keep-all;
}
.ns-cns-admin-notice[hidden] { display: none; }