@charset "UTF-8";
/* 사이트 두 곳(파랑은행 고객 사이트 · 임직원 포털)과 챗봇 대화창·발표자 화면의 모양 (D57).
 *
 * - 모든 선택자는 `.site`(사이트의 body 클래스)로 시작한다 — 허브·처리 기록·콘솔·보고서의 모습은 바뀌지 않는다
 *   (tests/ui/test_sites.py가 확인). 색·둥글기는 `--s-*` 토큰만 쓴다 — 모노톤 바탕·모서리·그림자·움직임은 tokens.css의
 *   공유 토큰을 가리키고, 포인트 색(--point)만 여기서 파랑으로 바꾼다(AIAP 화면은 붉은 계열, D58). 판정·등급 색은 쓰지 않는다
 *   (사이트는 판정하지 않는다).
 * - 바탕은 밝은 회색·흰 카드·짙은 회색 글자의 모노톤, 파랑 한 계열(--s-blue)은 포인트로만.
 * - 움직임은 CSS와 site_fx.js(클래스만 바꾼다)로. `prefers-reduced-motion`이면 멈춘다. 키보드 포커스는 항상 보인다.
 * - 외부 글꼴·이미지 없음(오프라인). 인라인 style 없음(CSP style-src 'self').
 * - 대화창의 testid·data-role·.msg-body·.msg-detail은 브라우저 시연 엔진(D50)이 읽는다 — 여기서는 모양만 정한다.
 */

.site {
  /* 모노톤 바탕·모서리·그림자·움직임은 tokens.css의 공유 토큰 그대로 — 사이트는 포인트 색만 파랑으로 바꾼다(D58) */
  --point: var(--site-point);
  --point-ink: #1a47c4;
  --point-soft: #e9effd;
  --on-point: #ffffff;
  --focus-ring: var(--point);
  --s-bg: var(--page);
  --s-grid: var(--grid-line);
  --s-card: var(--surface);
  --s-sunken: var(--surface-sunken);
  --s-ink: var(--text);
  --s-sub: var(--muted);
  --s-faint: var(--faint);
  --s-border: var(--border);
  --s-border-strong: var(--border-strong);
  --s-blue: var(--point);
  --s-blue-ink: var(--point-ink);
  --s-blue-soft: var(--point-soft);
  --s-on-blue: var(--on-point);
  --s-top: rgb(255 255 255 / 0.86);
  --s-panel: #1b1e25;
  --s-panel-text: #eef0f4;
  --s-panel-sub: #aab0bc;
  --s-panel-line: #3a4050;
  --s-panel-chip: #262a34;
  --s-shadow: var(--shadow-2);
  --s-shadow-hover: var(--shadow-hover);
  --s-r-xl: var(--radius-xl);
  --s-r-l: var(--radius-l);
  --s-r-m: var(--radius-m);
  --s-ease: var(--ease);
  color: var(--s-ink);
  background-color: var(--s-bg);
  background-image:
    linear-gradient(to right, var(--s-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--s-grid) 1px, transparent 1px);
  background-size: 420px 100%, 100% 560px;
  background-position: calc(50% - 210px) 0, 0 64px;
  letter-spacing: -0.01em;
}
@media (prefers-color-scheme: dark) {
  .site {
    --point-ink: #a3bdff;
    --point-soft: #1c2740;
    --on-point: #0d1220;
    --s-top: rgb(16 18 22 / 0.86);
    --s-panel: #0a0b0e;
    --s-panel-sub: #a3aab7;
    --s-panel-chip: #171a20;
  }
}

.site :focus-visible { outline: 3px solid var(--s-blue); outline-offset: 3px; border-radius: 8px; }
.site h1, .site h2, .site h3 { margin: 0; color: var(--s-ink); letter-spacing: -0.03em; }
.site .s-wrap { width: min(1180px, 100% - 40px); margin-inline: auto; }
.site .s-icon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ───────────── 안내 띠 — 사이트에서는 작고 차분하게 */
.site .fake-notice {
  gap: 2px 8px;
  padding: 5px 16px;
  font-size: 0.76rem;
  color: var(--s-faint);
  background: var(--s-sunken);
  border-bottom: 1px solid var(--s-border);
}
.site .fake-notice-mode { font-weight: 600; color: var(--s-sub); }
.site .demo-notice {
  gap: 4px 14px;
  padding: 14px 16px 22px;
  font-size: 0.76rem;
  color: var(--s-faint);
  background: transparent;
}
.site .demo-notice-text { font-weight: 400; letter-spacing: 0; }
.site .demo-notice-hub { color: var(--s-faint); }

/* ───────────── 머리(브랜드·메뉴·계정) */
.site .s-top {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--s-top);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.site .s-top.is-scrolled { border-bottom-color: var(--s-border); box-shadow: 0 8px 24px -20px rgb(24 28 36 / 0.5); }
.site .s-top-inner { display: flex; align-items: center; gap: 12px 28px; min-height: 64px; }
.site .s-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--s-ink);
  text-decoration: none;
  white-space: nowrap;
}
.site .s-mark { flex: none; transition: transform 0.35s var(--s-ease); }
.site .s-brand:hover .s-mark { transform: rotate(-8deg) scale(1.06); }
.site .s-mark-box { fill: var(--s-blue); }
.site .s-mark-line { fill: none; stroke: var(--s-on-blue); stroke-width: 2.6; stroke-linecap: round; }
.site .s-brand-name { font-size: 1.16rem; font-weight: 800; letter-spacing: -0.04em; }
.site .s-brand-en { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; color: var(--s-faint); }
.site .s-brand-sub {
  padding-left: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--s-sub);
  border-left: 1px solid var(--s-border-strong);
}
.site .s-nav { display: flex; gap: 4px; margin-inline: auto; }
.site .s-nav a {
  position: relative;
  padding: 8px 16px;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--s-sub);
  text-decoration: none;
  border-radius: 999px;
  transition: color 0.2s, background-color 0.2s;
}
.site .s-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--s-blue);
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity 0.25s, transform 0.25s var(--s-ease);
}
.site .s-nav a:hover { color: var(--s-ink); background: var(--s-sunken); }
.site .s-nav a[aria-current="true"] { color: var(--s-ink); }
.site .s-nav a[aria-current="true"]::after { opacity: 1; transform: translate(-50%, 0); }
.site .s-profile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px 5px 5px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--s-ink);
  background: var(--s-sunken);
  border: 1px solid transparent;
  border-radius: 999px;
  transition: border-color 0.2s, background-color 0.2s;
}
.site .s-profile:hover, .site .s-profile:focus-within { border-color: var(--s-border-strong); background: var(--s-card); }
.site .s-profile--fixed { padding-right: 14px; }
/* 계정 메뉴(고객 고르기)는 누르는 것 — 보조 버튼과 같은 테두리·그림자. 고정 이름표(포털)는 정보라 평평하다 */
.site .s-profile:not(.s-profile--fixed) { background: var(--s-card); border: 1.5px solid var(--btn-secondary-border); box-shadow: var(--btn-shadow); }
.site .s-profile:not(.s-profile--fixed):hover { border-color: var(--s-ink); box-shadow: var(--btn-shadow-hover); }
.site .s-avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  color: var(--s-blue);
  background: var(--s-blue-soft);
  border-radius: 50%;
}
.site .s-avatar .s-icon { width: 17px; height: 17px; }
.site .s-profile select {
  max-width: 46vw;
  padding: 4px 6px 4px 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.site .s-profile select:disabled { opacity: 0.55; cursor: progress; }
.site .s-profile-name { white-space: nowrap; }

/* ───────────── 첫 화면(문구 · 대화창 · 계좌 카드) */
.site .s-main { padding-bottom: 72px; }
.site .s-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 468px);
  grid-template-areas: "hero side" "under side";
  grid-template-rows: auto 1fr;
  align-items: start;
  gap: 28px 56px;
  padding-top: 64px;
}
.site .s-hero { grid-area: hero; padding-top: 12px; animation: s-rise 0.7s var(--s-ease) both; }
.site .s-side { grid-area: side; display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 84px; animation: s-rise 0.7s 0.08s var(--s-ease) both; }
.site .s-account, .site .s-shortcuts { grid-area: under; scroll-margin-top: 84px; animation: s-rise 0.7s 0.16s var(--s-ease) both; }
.site .s-kicker { margin: 0 0 14px; font-size: 0.95rem; font-weight: 600; color: var(--s-sub); }
.site .s-crumb { display: flex; gap: 8px; }
.site .s-crumb span:last-child { color: var(--s-blue-ink); }
.site .s-hero h1 { font-size: clamp(2rem, 1.2rem + 2.7vw, 3.1rem); font-weight: 800; line-height: 1.24; }
.site .s-lede { max-width: 34em; margin: 20px 0 0; font-size: 1.05rem; line-height: 1.7; color: var(--s-sub); }
.site .s-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

.site .s-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  font: inherit;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--s-ink);
  background: var(--s-card);
  border: 1.5px solid var(--btn-secondary-border);
  box-shadow: var(--btn-shadow);
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s var(--s-ease), box-shadow 0.25s, background-color 0.2s, border-color 0.2s;
}
.site .s-pill:hover { border-color: var(--s-ink); box-shadow: var(--btn-shadow-hover); transform: translateY(-1px); }
.site .s-pill:active { transform: translateY(1px) scale(0.97); box-shadow: none; }
/* 주 버튼 — 포인트 색(파랑) 채움(D62). 화살표 동그라미는 흰 바탕 + 파란 화살표 */
.site .s-pill--primary { padding-right: 8px; color: var(--s-on-blue); background: var(--s-blue); border-color: transparent; }
.site .s-pill--primary:hover { background: var(--s-blue-ink); border-color: transparent; }
.site .s-pill-arrow {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--s-blue);
  background: var(--s-on-blue);
  border-radius: 50%;
  transition: transform 0.25s var(--s-ease);
}
.site .s-pill-arrow .s-icon { width: 16px; height: 16px; }
.site .s-pill--primary:hover .s-pill-arrow { transform: translateX(3px); }
/* 약한 버튼 — 옅은 파랑 채움 + 파란 테두리 */
.site .s-pill--soft { padding: 9px 16px; font-size: 0.9rem; color: var(--s-blue-ink); background: var(--s-blue-soft); border-color: var(--s-blue); box-shadow: none; }
.site .s-pill--soft:hover { border-color: var(--s-blue-ink); box-shadow: var(--btn-shadow); }

.site .s-card {
  background: var(--s-card);
  border: 1px solid var(--s-border);
  border-radius: var(--s-r-l);
  /* 정보 카드 — 누를 수 없다: 그림자 없이 평평하게(D62). 그림자는 누를 수 있는 것과 대화창에만 */
  box-shadow: none;
}
.site .s-account { max-width: 440px; padding: 24px 26px 22px; box-shadow: none; }
.site .s-account-head { display: flex; align-items: center; gap: 10px; }
.site .s-account-icon {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--s-blue);
  background: var(--s-blue-soft);
  border-radius: 12px;
}
.site .s-account-kind { font-weight: 700; }
.site .s-badge {
  margin-left: auto;
  padding: 4px 10px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--s-sub);
  background: var(--s-sunken);
  border-radius: 999px;
}
.site .s-account-owner { margin: 18px 0 0; font-size: 0.95rem; color: var(--s-sub); }
.site .s-account-owner strong { color: var(--s-ink); }
.site .s-account-balance { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; }
.site .s-mask { display: inline-flex; gap: 7px; padding: 12px 0; }
.site .s-mask i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--s-border-strong);
  animation: s-breathe 2.4s ease-in-out infinite;
}
.site .s-mask i:nth-child(2) { animation-delay: 0.15s; }
.site .s-mask i:nth-child(3) { animation-delay: 0.3s; }
.site .s-mask i:nth-child(4) { animation-delay: 0.45s; }
.site .s-mask i:nth-child(5) { animation-delay: 0.6s; }
.site .s-account-unit { font-size: 1.3rem; font-weight: 800; }
.site .s-account-note { margin: 2px 0 0; font-size: 0.88rem; color: var(--s-faint); }
.site .s-account-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* ───────────── 구역(서비스 · 상품 · 공지) */
.site .s-section { padding-top: 96px; scroll-margin-top: 8px; }
.site .s-section-head { margin-bottom: 28px; }
.site .s-section-head .s-kicker { margin-bottom: 8px; }
.site .s-section-head h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); font-weight: 800; line-height: 1.3; }
.site .s-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr));
  gap: 14px;
}
.site .s-tiles--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 520px; }
.site .s-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  height: 100%;
  padding: 20px;
  font: inherit;
  text-align: left;
  color: var(--s-ink);
  background: var(--s-card);
  border: 1.5px solid var(--btn-secondary-border);
  box-shadow: var(--btn-shadow);
  border-radius: var(--s-r-m);
  cursor: pointer;
  transition: transform 0.22s var(--s-ease), box-shadow 0.25s, border-color 0.2s;
}
.site .s-tile:hover { transform: translateY(-4px); border-color: var(--s-blue); box-shadow: var(--btn-shadow-hover); }
.site .s-tile:active { transform: translateY(0) scale(0.98); box-shadow: none; }
.site .s-tile-icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 12px;
  color: var(--s-ink);
  background: var(--s-sunken);
  border-radius: 13px;
  transition: color 0.2s, background-color 0.2s, transform 0.3s var(--s-ease);
}
.site .s-tile:hover .s-tile-icon { color: var(--s-on-blue); background: var(--s-blue); transform: scale(1.06) rotate(-4deg); }
.site .s-tile-name { font-weight: 700; }
.site .s-tile-sub { font-size: 0.84rem; color: var(--s-faint); }

.site .s-products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}
.site .s-products--even { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.site .s-product {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border-radius: var(--s-r-xl);
  box-shadow: none;
}
.site .s-product--wide { flex-direction: row; align-items: stretch; gap: 20px; }
.site .s-product-text { flex: 1 1 auto; }
.site .s-product-kind { margin: 0 0 6px; font-size: 0.84rem; font-weight: 700; color: var(--s-blue-ink); }
.site .s-product h3 { font-size: 1.18rem; font-weight: 800; }
.site .s-rate { margin: 18px 0 0; font-size: 0.95rem; font-weight: 600; color: var(--s-sub); }
.site .s-rate-num {
  margin-left: 4px;
  font-size: 2.3rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--s-ink);
  font-variant-numeric: tabular-nums;
}
.site .s-rate-unit { margin-left: 2px; font-size: 1.1rem; font-weight: 800; color: var(--s-ink); }
.site .s-product-desc { margin: 14px 0 0; font-size: 0.92rem; line-height: 1.65; color: var(--s-sub); }
/* 꾸밈 막대 — 값이 아니다(고객 데이터를 그리지 않는다). 가는 가로줄 무늬의 막대가 들어올 때 아래에서 자란다 */
.site .s-bars { display: flex; align-items: flex-end; gap: 9px; flex: 0 0 44%; align-self: flex-end; height: 132px; margin-top: auto; }
.site .s-product:not(.s-product--wide) .s-bars { flex: 0 0 auto; align-self: stretch; height: 72px; margin-top: 24px; }
.site .s-bars i {
  flex: 1 1 0;
  height: var(--h, 40%);
  border-radius: 6px 6px 2px 2px;
  background: repeating-linear-gradient(to bottom, var(--s-blue) 0 2px, transparent 2px 5px);
  opacity: var(--o, 0.5);
  transform-origin: bottom;
  animation: s-grow 0.9s var(--s-ease) both;
}
.site .s-bars i:nth-child(1) { --h: 22%; --o: 0.22; animation-delay: 0.05s; }
.site .s-bars i:nth-child(2) { --h: 34%; --o: 0.3; animation-delay: 0.1s; }
.site .s-bars i:nth-child(3) { --h: 45%; --o: 0.4; animation-delay: 0.15s; }
.site .s-bars i:nth-child(4) { --h: 58%; --o: 0.52; animation-delay: 0.2s; }
.site .s-bars i:nth-child(5) { --h: 70%; --o: 0.66; animation-delay: 0.25s; }
.site .s-bars i:nth-child(6) { --h: 84%; --o: 0.82; animation-delay: 0.3s; }
.site .s-bars i:nth-child(7) { --h: 100%; --o: 1; animation-delay: 0.35s; }
.site .s-bars--flat i:nth-child(n) { --h: 62%; --o: 0.5; }
.site .s-bars--step i:nth-child(1), .site .s-bars--step i:nth-child(2) { --h: 36%; --o: 0.35; }
.site .s-bars--step i:nth-child(3), .site .s-bars--step i:nth-child(4) { --h: 66%; --o: 0.6; }
.site .s-bars--step i:nth-child(5) { --h: 100%; --o: 1; }
.site .reveal-wait .s-bars i { animation-play-state: paused; }
.site .s-footnote { margin: 16px 4px 0; font-size: 0.82rem; color: var(--s-faint); }

.site .s-notices {
  list-style: none;
  margin: 0;
  padding: 6px 24px;
  background: var(--s-card);
  border: 1px solid var(--s-border);
  border-radius: var(--s-r-l);
}
.site .s-notice + .s-notice { border-top: 1px solid var(--s-border); }
.site .s-notice summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 0;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  transition: color 0.2s;
}
.site .s-notice summary::-webkit-details-marker { display: none; }
.site .s-notice summary:hover { color: var(--s-blue-ink); }
.site .s-notice summary .s-icon { margin-left: auto; flex: none; color: var(--s-faint); transition: transform 0.3s var(--s-ease); }
.site .s-notice details[open] summary .s-icon { transform: rotate(180deg); }
.site .s-notice-title { transition: transform 0.25s var(--s-ease); }
.site .s-notice summary:hover .s-notice-title { transform: translateX(3px); }
.site .s-tag {
  flex: none;
  min-width: 46px;
  padding: 3px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
  color: var(--s-blue-ink);
  background: var(--s-blue-soft);
  border-radius: 999px;
}
.site .s-notice p { margin: 0; padding: 0 0 20px 60px; font-size: 0.93rem; line-height: 1.7; color: var(--s-sub); animation: s-rise 0.3s var(--s-ease) both; }

.site .s-foot { margin-top: auto; border-top: 1px solid var(--s-border); }
.site .s-foot-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding: 22px 0 6px; font-size: 0.84rem; color: var(--s-faint); }
.site .s-foot-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--s-sub); }
.site .s-foot-brand .s-mark { width: 20px; height: 20px; }
.site .s-foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* 스크롤 등장 — site_fx.js가 화면 아래에 있는 구역에만 reveal-wait를 붙였다가 보이면 뗀다(스크립트가 없으면 그냥 보인다) */
.site [data-reveal] { transition: opacity 0.7s var(--s-ease), transform 0.7s var(--s-ease); }
.site .reveal-wait { opacity: 0; transform: translateY(28px); }

/* ───────────── 챗봇 대화창 */
.site .chat {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--s-card);
  border: 1px solid var(--s-border);
  border-radius: var(--s-r-xl);
  box-shadow: var(--s-shadow);
  transition: box-shadow 0.3s;
}
.site .chat:focus-within { box-shadow: var(--s-shadow-hover); }
.site .chat.is-called { animation: s-call 0.9s var(--s-ease); }
.site .chat-head { display: flex; align-items: center; gap: 12px; padding: 20px 22px 14px; }
.site .chat-avatar {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: var(--s-blue);
}
.site .chat-avatar::before, .site .chat-avatar::after {
  content: "";
  position: absolute;
  top: 16px;
  width: 6px;
  height: 8px;
  border-radius: 3px;
  background: var(--s-on-blue);
  animation: s-blink 4.2s infinite;
}
.site .chat-avatar::before { left: 11px; }
.site .chat-avatar::after { right: 11px; }
.site .chat-names { display: flex; flex-direction: column; line-height: 1.3; }
.site .chat-title { font-weight: 800; letter-spacing: -0.02em; }
.site .chat-sub { font-size: 0.8rem; color: var(--s-faint); }
.site .chat-log {
  list-style: none;
  margin: 0;
  padding: 10px 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 320px;
  overflow-y: auto;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}
.site .chat-placeholder { margin: auto; max-width: 20em; text-align: center; font-size: 0.92rem; color: var(--s-faint); }
.site .msg { display: flex; flex-direction: column; gap: 4px; max-width: 86%; animation: s-msg 0.32s var(--s-ease) both; }
.site .msg-who { padding-inline: 4px; font-size: 0.72rem; font-weight: 600; color: var(--s-faint); }
.site .msg-body {
  margin: 0;
  padding: 11px 15px;
  font-size: 0.95rem;
  line-height: 1.6;
  border-radius: 20px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.site .msg--user { align-self: flex-end; align-items: flex-end; transform-origin: bottom right; }
.site .msg--user .msg-body { color: var(--s-on-blue); background: var(--s-blue); border-bottom-right-radius: 6px; }
.site .msg--bot { align-self: flex-start; transform-origin: bottom left; }
.site .msg--bot .msg-body { background: var(--s-sunken); border-bottom-left-radius: 6px; }
/* 꾸민 사본(굵게·문단·목록) — 원문 말풍선(.msg-body)은 hidden으로 남고 이 상자가 같은 모양으로 보인다 */
.site .msg-rich {
  padding: 11px 15px;
  font-size: 0.95rem;
  line-height: 1.6;
  background: var(--s-sunken);
  border-radius: 20px;
  border-bottom-left-radius: 6px;
  overflow-wrap: anywhere;
}
.site .msg-para, .site .msg-list { margin: 0; }
.site .msg-rich > * + * { margin-top: 8px; }
.site .msg-list { padding-left: 1.3em; }
.site .msg-entry + .msg-entry { margin-top: 2px; }
.site .msg-rich strong { font-weight: 800; }
.site .msg--error { align-self: stretch; max-width: 100%; }
.site .msg--error .msg-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.9rem;
  background: transparent;
  border: 1px dashed var(--s-border-strong);
  border-radius: var(--s-r-m);
}
.site .msg-plain { font-weight: 700; }
.site .msg-detail { color: var(--s-faint); }
.site .msg--system { align-self: center; max-width: 100%; }
.site .msg--system .msg-who { display: none; }
.site .msg--system .msg-body { padding: 2px 10px; font-size: 0.78rem; text-align: center; color: var(--s-faint); background: none; }
/* 답을 기다리는 동안 — 점 세 개가 차례로 뛴다(말풍선을 DOM에 더하지 않는다: 엔진은 data-role이 붙은 말풍선만 센다) */
.site .chat.is-busy .chat-log::after {
  content: "";
  flex: none;
  align-self: flex-start;
  width: 60px;
  height: 40px;
  border-radius: 20px 20px 20px 6px;
  background-color: var(--s-sunken);
  background-image:
    radial-gradient(circle, var(--s-faint) 3.2px, transparent 3.8px),
    radial-gradient(circle, var(--s-faint) 3.2px, transparent 3.8px),
    radial-gradient(circle, var(--s-faint) 3.2px, transparent 3.8px);
  background-repeat: no-repeat;
  background-size: 10px 10px;
  background-position: 14px 15px, 25px 15px, 36px 15px;
  animation: s-typing 1.1s ease-in-out infinite, s-msg 0.3s var(--s-ease) both;
}

.site .source-docs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 22px;
  padding: 12px 0;
  font-size: 0.84rem;
  border-top: 1px solid var(--s-border);
}
.site .source-label { font-weight: 700; color: var(--s-sub); }
.site .source-list { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.site .source-empty { color: var(--s-faint); }
.site .source-chip {
  padding: 3px 11px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--s-blue-ink);
  background: var(--s-blue-soft);
  border-radius: 999px;
  animation: s-pop 0.4s var(--s-ease) both;
}
.site .source-chip:nth-child(2) { animation-delay: 0.06s; }
.site .source-chip:nth-child(3) { animation-delay: 0.12s; }

.site .chip-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 22px 0; }
.site .chip {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  max-width: 100%;
  padding: 8px 15px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: left;
  color: var(--s-ink);
  background: var(--s-card);
  border: 1.5px solid var(--btn-secondary-border);
  box-shadow: var(--btn-shadow);
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.18s var(--s-ease), color 0.2s, background-color 0.2s, border-color 0.2s;
}
.site .chip:hover { color: var(--s-blue-ink); background: var(--s-blue-soft); border-color: var(--s-blue); box-shadow: var(--btn-shadow-hover); transform: translateY(-2px); }
.site .chip:active { transform: translateY(1px) scale(0.96); box-shadow: none; }
.site .chip:disabled { opacity: 0.5; cursor: progress; transform: none; box-shadow: none; }
.site .chip-tag { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; }

.site .chat-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin: 14px 16px 16px;
  padding: 6px 6px 6px 18px;
  background: var(--s-sunken);
  border: 1px solid transparent;
  border-radius: 26px;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.site .chat-form:focus-within { background: var(--s-card); border-color: var(--s-blue); box-shadow: 0 0 0 4px var(--s-blue-soft); }
.site .chat-form textarea {
  flex: 1;
  min-height: 40px;
  max-height: 168px;
  field-sizing: content; /* 긴 질문은 입력칸이 내용만큼 자란다(지원하지 않는 브라우저는 두 줄 높이) */
  padding: 9px 0;
  font: inherit;
  font-size: 0.96rem;
  line-height: 1.4;
  color: var(--s-ink);
  background: transparent;
  border: 0;
  outline: 0;
  resize: none;
}
.site .chat-form textarea::placeholder { color: var(--s-faint); }
.site .chat-send {
  flex: none;
  padding: 10px 18px;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--s-on-blue);
  background: var(--s-blue);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.18s var(--s-ease), background-color 0.2s, opacity 0.2s;
}
.site .chat-send:hover { background: var(--s-blue-ink); }
.site .chat-send:active { transform: scale(0.94); }
.site .chat-send:disabled { opacity: 0.5; cursor: progress; }
/* 연결 안내 한 줄 — 평소에는 화면에서 숨기고(DOM에는 있다), 오류 말풍선이 생겼을 때만 보인다(D57 후속) */
.site .chat-honest {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  font-size: 0.72rem;
  text-align: center;
  color: var(--s-faint);
}
.site .chat:has(.msg--error) .chat-honest {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0 24px 14px;
  overflow: visible;
  clip-path: none;
  white-space: normal;
}
.site .site-hint { margin: 0; padding: 0 12px; font-size: 0.76rem; line-height: 1.6; text-align: center; color: var(--s-faint); }

/* ───────────── 발표자 화면(?presenter=1) — 고객 화면과 분명히 다른 어두운 판 */
.site .presenter-panel {
  padding: 18px 0 20px;
  color: var(--s-panel-text);
  background: var(--s-panel);
  border: 1px dashed var(--s-panel-line);
  border-radius: var(--s-r-l);
}
.site .presenter-head, .site .presenter-desc, .site .presenter-observe { padding: 0 22px; }
.site .presenter-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.site .presenter-badge {
  padding: 4px 11px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--s-panel);
  background: var(--s-panel-text);
  border-radius: 999px;
}
.site .presenter-note { font-size: 0.8rem; color: var(--s-panel-sub); }
.site .presenter-desc { margin: 10px 0 0; font-size: 0.86rem; line-height: 1.6; color: var(--s-panel-sub); }
.site .presenter-panel .chip-row { padding: 14px 22px 0; }
.site .presenter-panel .chip {
  color: var(--s-panel-text);
  background: var(--s-panel-chip);
  border: 1.5px solid var(--s-panel-sub);
  border-radius: var(--s-r-m);
  box-shadow: 0 3px 8px -2px rgb(0 0 0 / 0.6);
}
.site .presenter-panel .chip:hover { color: var(--s-panel-text); background: var(--s-panel-line); border-color: var(--s-panel-text); }
.site .presenter-panel .chip-tag { color: var(--s-panel-sub); }
.site .presenter-panel .chip-text { font-weight: 500; line-height: 1.5; }
.site .presenter-observe { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 16px 0 0; }
.site .observe-link {
  padding: 9px 16px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--s-panel);
  background: var(--s-panel-text);
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.18s var(--s-ease), opacity 0.2s;
}
.site .observe-link:hover { transform: translateY(-1px); }
.site .observe-link[aria-disabled="true"] { color: var(--s-panel-sub); background: var(--s-panel-chip); cursor: default; pointer-events: none; }
.site .observe-link:not([aria-disabled="true"]) { animation: s-pop 0.45s var(--s-ease) both; }
.site .observe-note { font-size: 0.8rem; line-height: 1.6; color: var(--s-panel-sub); }

/* ───────────── 움직임 */
@keyframes s-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes s-msg { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes s-pop { 0% { opacity: 0; transform: scale(0.8); } 60% { opacity: 1; transform: scale(1.05); } 100% { transform: none; } }
@keyframes s-grow { from { transform: scaleY(0.05); } to { transform: scaleY(1); } }
@keyframes s-breathe { 0%, 100% { opacity: 0.45; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1); } }
@keyframes s-blink { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.15); } }
@keyframes s-call { 0% { box-shadow: 0 0 0 0 var(--s-blue); } 100% { box-shadow: 0 0 0 18px transparent; } }
@keyframes s-typing {
  0%, 60%, 100% { background-position: 14px 15px, 25px 15px, 36px 15px; }
  15% { background-position: 14px 10px, 25px 15px, 36px 15px; }
  30% { background-position: 14px 15px, 25px 10px, 36px 15px; }
  45% { background-position: 14px 15px, 25px 15px, 36px 10px; }
}

/* ───────────── 좁은 화면 — 문구 다음에 곧바로 대화창 */
@media (max-width: 980px) {
  .site .s-stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "side" "under"; gap: 24px; padding-top: 36px; }
  .site .s-hero { padding-top: 0; }
  .site .s-account, .site .s-tiles--compact { max-width: none; }
  .site .s-products, .site .s-products--even { grid-template-columns: minmax(0, 1fr); }
  .site .s-section { padding-top: 64px; }
}
@media (max-width: 720px) {
  .site .s-wrap { width: min(1180px, 100% - 32px); }
  .site .s-top-inner { flex-wrap: wrap; gap: 0 12px; min-height: 56px; padding-top: 6px; }
  .site .s-brand-en { display: none; }
  .site .s-profile { margin-left: auto; }
  .site .s-nav { order: 3; flex: 1 0 100%; margin: 0 -8px; overflow-x: auto; scrollbar-width: none; }
  .site .s-nav a { padding: 8px 12px 10px; font-size: 0.92rem; white-space: nowrap; }
  .site .s-cta { display: none; }
  .site .fake-notice { text-align: center; font-size: 0.72rem; }
  .site .s-brand-sub { padding-left: 8px; font-size: 0.8rem; }
  .site .s-profile { font-size: 0.82rem; }
  .site .s-profile--fixed { padding: 6px 12px; }
  .site .s-profile--fixed .s-avatar { display: none; }
  .site .s-avatar { width: 26px; height: 26px; }
  .site .s-stage { padding-top: 28px; gap: 20px; }
  .site .s-kicker { margin-bottom: 10px; }
  .site .s-lede { margin-top: 14px; }
  .site .s-lede { font-size: 0.98rem; }
  .site .chat-log { height: 240px; padding-inline: 16px; }
  .site .chat-head { padding: 16px 16px 10px; }
  .site .chip-row { padding-inline: 16px; }
  .site .source-docs { margin-inline: 16px; }
  .site .chat-form { margin-inline: 10px; }
  .site .presenter-head, .site .presenter-desc, .site .presenter-observe, .site .presenter-panel .chip-row { padding-inline: 16px; }
  .site .s-product--wide { flex-direction: column; }
  .site .s-product--wide .s-bars { flex: 0 0 auto; align-self: stretch; height: 96px; margin-top: 24px; }
  .site .s-notices { padding-inline: 16px; }
  .site .s-notice p { padding-left: 0; }
  .site .s-foot-inner { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .site *, .site *::before, .site *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .site .reveal-wait { opacity: 1; transform: none; }
}