/*
 * 티키타 디자인 시스템 — 방향 D 「잉크와 종이」
 * 잉크 남색 위의 종이와 봉랍. 유틸리티 클래스 없이 의미 단위 클래스로만 쓴다.
 * 토큰을 바꾸면 화면 전체가 따라온다.
 */

:root {
  /* 색 — 잉크와 종이 */
  --night:      #0E1119;  /* 바탕: 순수 검정이 아닌 잉크 남색 */
  --night-2:    #161B27;  /* 면 */
  --night-3:    #1E2534;  /* 한 단계 위의 면 */
  --paper:      #EFE7D8;  /* 글자: 종이 크림 */
  --paper-dim:  #B9B2A6;  /* 보조 글자 */
  --paper-faint:#7E7A73;  /* 가장 약한 글자 */
  --halo:       #93A9CF;  /* 달무리 은청: 시간·상태·링크 */
  --wax:        #A34A5E;  /* 봉랍 자두: 액센트 */
  --wax-deep:   #7E3550;
  --wax-soft:   rgba(163, 74, 94, 0.16);
  --lamp:       #E9A94D;  /* 램프 앰버: 한 화면에 한 번만 */
  --danger:     #C4574F;
  --grow:       #6FA88C;
  --line:       rgba(239, 231, 216, 0.14);
  --line-soft:  rgba(239, 231, 216, 0.07);

  /* 서체 */
  --sans:  "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --serif: "Gowun Batang", "Noto Serif KR", serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  /* 형태 — 종이와 봉투의 각 */
  --r:    2px;
  --r-lg: 4px;
  --r-full: 999px;

  --shell: 1080px;
  --gap: 22px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--night);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}

/* 종이 그레인 한 겹 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

a { color: inherit; text-decoration: none; }
p { margin: 0; }
img { max-width: 100%; display: block; }

:focus-visible { outline: 2px solid var(--halo); outline-offset: 2px; }

/* ── 레이아웃 ─────────────────────────────── */
.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gap); }
.page  { padding: 26px 0 90px; }
.page--narrow { max-width: 640px; margin: 0 auto; }
.page--mid    { max-width: 840px; margin: 0 auto; }

.stack   { display: flex; flex-direction: column; gap: 14px; }
.row     { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.spacer  { flex: 1; }

/* ── 타이포 ───────────────────────────────── */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--halo);
}
.title    { font-size: clamp(24px, 4vw, 34px); }
.title-sm { font-size: 19px; }
.lede     { color: var(--paper-dim); font-size: 15.5px; }
.muted    { color: var(--paper-dim); }
.faint    { color: var(--paper-faint); font-size: 13px; }
.mono     { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; }
.serif    { font-family: var(--serif); }
.strike   { text-decoration: line-through; color: var(--paper-faint); }

/* 세로쓰기 — 방향 D 의 시그니처 */
.vertical {
  writing-mode: vertical-rl;
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.5;
}

/* ── 헤더 ─────────────────────────────────── */
.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(14, 17, 25, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.masthead__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gap);
  height: 58px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.brand { display: flex; align-items: baseline; gap: 7px; margin-right: 8px; flex-shrink: 0; }
.brand__mark {
  width: 22px; height: 22px; border-radius: 6px;
  display: block;
  align-self: center;
}
.brand__name { font-family: var(--serif); font-weight: 700; font-size: 19px; letter-spacing: 0.02em; white-space: nowrap; }

.navlink {
  font-size: 14px;
  color: var(--paper-dim);
  padding: 6px 9px;
  border-radius: var(--r);
  transition: color 0.18s;
  white-space: nowrap;   /* 좁은 폭에서 글자가 세로로 쪼개지지 않게 */
  flex-shrink: 0;
}
.navlink:hover { color: var(--paper); }
.navlink--icon { font-size: 17px; position: relative; }

.beta-chip {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--halo);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  padding: 4px 11px;
  white-space: nowrap;
}
@media (max-width: 860px) { .beta-chip { display: none; } }

/* ── 모바일 하단 바 ───────────────────────────
   좁은 폭에서 헤더에 링크를 밀어 넣으면 글자가 세로로 쪼개진다.
   이동은 엄지가 닿는 아래로 내리고, 헤더에는 만들기만 남긴다. */
.tabbar { display: none; }

@media (max-width: 700px) {
  .masthead__inner { padding: 0 14px; gap: 2px; }
  .nav-wide { display: none; }
  .masthead .btn { padding: 9px 15px; font-size: 13.5px; }

  .tabbar {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: rgba(14, 17, 25, 0.94);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .tabbar a {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 9px 0 8px;
    font-size: 10.5px; letter-spacing: -0.02em;
    color: var(--paper-faint);
    position: relative;
  }
  .tabbar a[aria-current="page"] { color: var(--paper); }
  .tabbar a[aria-current="page"] .tabbar__ico { color: var(--wax); }
  .tabbar__ico { font-size: 15px; line-height: 1.2; }
  .tabbar .badge-dot { top: 4px; right: 50%; margin-right: -18px; }

  body.with-tabbar { padding-bottom: 60px; }
  body.with-tabbar .page { padding-bottom: 40px; }
}

.badge-dot {
  position: absolute;
  top: 0; right: 2px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: var(--r-full);
  background: var(--wax);
  color: #fff;
  font-family: var(--mono);
  font-size: 9.5px;
  line-height: 16px;
  text-align: center;
}

/* ── 버튼 ─────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: var(--r);
  border: 1px solid transparent;
  background: var(--wax);
  color: #fff;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  text-align: center;
  white-space: nowrap;
}
.btn:hover { background: var(--wax-deep); }
.btn--ghost { background: transparent; border-color: var(--line); color: var(--paper); }
.btn--ghost:hover { background: var(--night-2); border-color: var(--halo); }
.btn--quiet {
  background: transparent; border-color: transparent; color: var(--paper-faint);
  font-weight: 400; font-size: 13px; padding: 6px 8px;
}
.btn--quiet:hover { color: var(--paper-dim); background: transparent; }
.btn--danger { background: transparent; border-color: rgba(196, 87, 79, 0.5); color: var(--danger); }
.btn--danger:hover { background: rgba(196, 87, 79, 0.12); }
.btn--block { width: 100%; }
.btn--lg { font-size: 16px; padding: 14px 30px; }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--wax); }

/* 폼 요소도 같은 손으로 */
input[type="text"], input[type="email"], input[type="password"], input[type="file"],
textarea, select {
  width: 100%;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--paper);
  background: var(--night-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 11px 13px;
  transition: border-color 0.18s;
}
textarea { resize: vertical; line-height: 1.7; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--halo); }
input::placeholder, textarea::placeholder { color: var(--paper-faint); }
select { appearance: none; padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23B9B2A6' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.field { margin-bottom: 18px; }
.field__hint { font-size: 12px; color: var(--paper-faint); margin-top: 6px; }
.choice { display: flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 400; margin-bottom: 4px; }
.choice input { width: auto; accent-color: var(--wax); }

/* ── 알림 배너 ────────────────────────────── */
.flash { border-left: 2px solid var(--halo); background: var(--night-2); padding: 11px 16px;
  font-size: 14px; margin-bottom: 18px; border-radius: 0 var(--r) var(--r) 0; }
.flash--alert { border-color: var(--danger); color: #E9C4C0; }
.flash--notice { border-color: var(--grow); }

/* ── 카드(캐릭터) ─────────────────────────── */
.deck { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.deck--wide { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* 이미지 프레임 — 카드·랜딩·상세가 함께 쓴다 */
.chr__frame {
  position: relative;
  aspect-ratio: 3 / 4;              /* 정사각형보다 인물이 잘 담긴다 */
  overflow: hidden;
  background: var(--night-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.chr__frame--linked { display: block; transition: transform 0.28s, border-color 0.28s; }
.chr__frame--linked:hover { transform: translateY(-3px); border-color: rgba(163, 74, 94, 0.65); }
.chr__frame--linked:hover .chr__img { transform: scale(1.04); }

/* 그리드 카드 — 이미지 아래에 글이 층으로 쌓인다 */
.chr {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--night-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform 0.28s, border-color 0.28s;
}
.chr:hover { transform: translateY(-3px); border-color: rgba(163, 74, 94, 0.65); }
.chr > .chr__frame { border: 0; border-radius: 0; border-bottom: 1px solid var(--line-soft); }
.chr__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.chr:hover .chr__img { transform: scale(1.04); }
.chr__blank { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(170deg, var(--night-3), var(--night-2));
  font-family: var(--serif); font-size: 30px; color: var(--paper-faint); }
.chr__body { display: flex; flex-direction: column; gap: 5px; flex: 1; padding: 11px 12px 12px; }
.chr__scrim { position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 36%, rgba(14, 17, 25, 0.86) 76%, rgba(14, 17, 25, 0.97) 100%); }
.chr__meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 13px; }
/* 이름과 공식 배지는 한 줄에 — 좁은 카드에서 배지가 쪼개지지 않게 이름을 줄인다 */
.chr__name { font-family: var(--serif); font-weight: 700; font-size: 15.5px; color: var(--paper);
  display: flex; align-items: center; gap: 4px; min-width: 0; margin: 0; }
.chr__link { min-width: 0; }
/* 카드 어디를 눌러도 캐릭터로 — 태그만 이 위로 올라온다 */
.chr__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.chr__text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chr__official { font-family: var(--sans, inherit); font-size: 9.5px; font-weight: 700; line-height: 1.5;
  color: #9ecbff; border: 1px solid rgba(158, 203, 255, .45); border-radius: 99px; padding: 0 6px;
  white-space: nowrap; flex-shrink: 0; }
/* 태그라인이 곧 훅이다 — 마지막 문장까지 닿도록 줄 수를 넉넉히 준다 */
.chr__line { font-size: 12px; line-height: 1.55; color: var(--paper-dim); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.chr__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; padding-top: 3px;
  max-height: 25px; overflow: hidden; position: relative; z-index: 2; }
.chr__tag { font-size: 10.5px; line-height: 1.6; color: var(--paper-faint); white-space: nowrap;
  border: 1px solid var(--line-soft); border-radius: var(--r-full); padding: 2px 7px; transition: 0.18s; }
.chr__tag:hover { border-color: var(--wax); color: #E7B9C2; }
.chr__stat { position: absolute; top: 9px; right: 9px; display: inline-flex; align-items: center; gap: 3px;
  font-family: var(--mono); font-size: 10px; color: var(--paper);
  background: rgba(14, 17, 25, 0.74); border: 1px solid var(--line); border-radius: var(--r-full);
  padding: 2px 8px; backdrop-filter: blur(6px); }
.chr__flags { position: absolute; top: 9px; left: 9px; display: flex; gap: 4px; z-index: 2; }

/* 모바일은 2열 고정 — auto-fill에 맡기면 좌우 여백 탓에 1열로 떨어진다.
   대신 좁아진 카드에서 태그라인이 잘리지 않게 글자를 줄이고 한 줄 더 준다. */
@media (max-width: 700px) {
  .deck, .deck--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  .chr__body { padding: 10px 10px 11px; gap: 4px; }
  .chr__name { font-size: 14.5px; }
  .chr__line { font-size: 11.5px; line-height: 1.5; -webkit-line-clamp: 5; }
  .chr__tags { max-height: 23px; }
  .chr__tag { font-size: 10px; padding: 1px 6px; }
}

.tag-pill {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em;
  padding: 3px 8px; border-radius: var(--r);
  background: rgba(14, 17, 25, 0.78); border: 1px solid var(--line); color: var(--paper-dim);
}
.tag-pill--wax { border-color: rgba(163,74,94,.6); color: #E7B9C2; }
.tag-pill--danger { border-color: rgba(196,87,79,.6); color: #E9C4C0; }

/* ── 태그·탭 ──────────────────────────────── */
.tabs { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px; }
.tab {
  font-size: 14px; padding: 7px 15px; border-radius: var(--r-full);
  border: 1px solid var(--line); color: var(--paper-dim); white-space: nowrap;
  transition: 0.18s;
}
.tab:hover { color: var(--paper); border-color: var(--halo); }
.tab[aria-current="page"] { background: var(--paper); color: var(--night); border-color: var(--paper); }

.tagrow { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.tagchip {
  font-size: 12px; padding: 4px 11px; border-radius: var(--r-full);
  border: 1px solid var(--line-soft); background: var(--night-2); color: var(--paper-dim);
  white-space: nowrap;
}
.tagchip:hover { border-color: var(--halo); color: var(--paper); }
.tagchip[aria-current="true"] { background: var(--wax-soft); border-color: var(--wax); color: #E7B9C2; }

/* ── 면(패널·표) ──────────────────────────── */
.panel { background: var(--night-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; }
.panel--flush { padding: 0; overflow: hidden; }
.panel__hd { padding: 14px 18px; border-bottom: 1px solid var(--line); }

.rows { display: flex; flex-direction: column; }
.rows > * + * { border-top: 1px solid var(--line-soft); }
.rowitem { display: flex; align-items: center; gap: 12px; padding: 13px 16px; transition: background 0.16s; }
a.rowitem:hover { background: var(--night-3); }
.rowitem__thumb { width: 42px; height: 56px; object-fit: cover; border-radius: var(--r); flex-shrink: 0;
  background: var(--night-3); }
.rowitem__body { flex: 1; min-width: 0; }
.rowitem__title { font-family: var(--serif); font-size: 15px; font-weight: 700; }
.rowitem__sub { font-size: 12.5px; color: var(--paper-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rowitem__side { font-family: var(--mono); font-size: 10.5px; color: var(--paper-faint); flex-shrink: 0; }

.dl { display: grid; grid-template-columns: 92px 1fr; gap: 12px; font-size: 14.5px; }
.dl dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--halo); padding-top: 4px; }
.dl dd { margin: 0; }
.dl + .dl { border-top: 1px solid var(--line-soft); padding-top: 11px; margin-top: 11px; }

table.grid { width: 100%; border-collapse: collapse; font-size: 14px; }
table.grid th { text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--halo); font-weight: 500; padding: 11px 14px;
  border-bottom: 1px solid var(--line); }
table.grid td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); }
table.grid td.num, table.grid th.num { text-align: right; font-family: var(--mono); }

.empty { text-align: center; padding: 64px 20px; color: var(--paper-faint); }
.empty__mark { font-family: var(--serif); font-size: 34px; color: var(--line); margin-bottom: 10px; }

/* ── 대화 ─────────────────────────────────── */
/* 대화 화면 — body.chatting 이 뷰포트 높이의 플렉스 컬럼이 되고,
   .talk 은 헤더·플래시를 뺀 나머지를 정확히 채운다. 높이 하드코딩 없음. */
body.chatting { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
body.chatting main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.talk { display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; max-width: 680px; margin: 0 auto; }
.talk__hd { display: flex; align-items: center; gap: 11px; padding: 11px var(--gap);
  border-bottom: 1px solid var(--line); }
.talk__face { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: var(--night-3); }
.talk__who { flex: 1; min-width: 0; }
.talk__name { font-family: var(--serif); font-weight: 700; font-size: 15px; }
.talk__state { font-family: var(--mono); font-size: 10.5px; color: var(--halo); }
.talk__body { flex: 1; overflow-y: auto; padding: 20px var(--gap); display: flex; flex-direction: column; gap: 12px; }
.talk__foot { border-top: 1px solid var(--line); padding: 12px var(--gap) 16px; }
/* 입력창 1줄 높이와 옆 버튼 크기를 한 값으로 묶는다 — 따로 두면 버튼만 처져 보인다
   (여러 줄로 늘어나면 버튼은 flex-end 로 바닥에 남는다).
   아래 값은 폰트가 아직 안 잡혔을 때의 대비책이고, 실제 값은 chat#autogrow 가
   빈 입력창의 실측 높이로 덮어쓴다 — 렌더링에 따라 1px 씩 달라지기 때문이다 */
.talk__compose { display: flex; align-items: flex-end; gap: 9px; --compose-h: 47px; }
.talk__compose textarea { min-height: var(--compose-h); max-height: 132px; border-radius: var(--r-lg); resize: none; overflow-y: auto; }
.talk__send { flex-shrink: 0; width: var(--compose-h); height: var(--compose-h); padding: 0; border-radius: var(--r-lg); font-size: 17px; }
.talk__note { text-align: center; font-size: 10.5px; color: var(--paper-faint); margin-top: 9px; font-family: var(--mono); }
.talk__readonly { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* 대화 메뉴 — 헤더 우측 ⋯ 드롭다운 */
.talkmenu { position: relative; }
.talkmenu summary { list-style: none; cursor: pointer; }
.talkmenu summary::-webkit-details-marker { display: none; }
.talkmenu[open] summary { color: var(--paper); }
.talkmenu__sheet { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 168px;
  background: var(--night-2); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5); padding: 5px; display: flex; flex-direction: column; }
.talkmenu__sheet form { display: contents; } /* button_to 래퍼 폼이 레이아웃을 깨지 않게 */
.talkmenu__item { display: block; width: 100%; text-align: left; background: transparent; border: 0;
  color: var(--paper-dim); font-size: 13.5px; padding: 9px 11px; border-radius: var(--r); cursor: pointer; }
.talkmenu__item:hover { background: var(--night-3); color: var(--paper); }
.talkmenu__item--danger { color: var(--danger); }
.talkmenu__item--danger:hover { background: rgba(196, 87, 79, 0.12); color: var(--danger); }

/* 말풍선 — 모서리를 서로 반대로 깎아 "오간다"는 감각만 남긴다 (A안에서 가져온 것) */
.bubble { max-width: 82%; padding: 11px 15px; font-size: 15px; line-height: 1.8; white-space: pre-wrap; word-break: break-word; }
.bubble--them { align-self: flex-start; background: var(--night-2); border: 1px solid var(--line);
  border-radius: var(--r) var(--r-lg) var(--r-lg) var(--r-lg); font-family: var(--serif); }
.bubble--me { align-self: flex-end; background: var(--wax); color: #fff;
  border-radius: var(--r-lg) var(--r) var(--r-lg) var(--r-lg); }
.bubble--pending { opacity: 0.45; }
.bubble__caret { animation: blink 1.1s steps(2) infinite; color: var(--halo); }

/* 메시지 = 블록 컨테이너. 대사 버블·행동 지문·나레이션이 세로로 쌓인다 */
.msg { display: flex; flex-direction: column; gap: 7px; width: 100%; }
.msg--me { align-items: flex-end; }
.msg--them { align-items: flex-start; }
.block-action { max-width: 82%; color: var(--paper-dim); font-style: italic;
  font-size: 13.5px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.block-narration { align-self: center; max-width: 88%; text-align: center;
  color: var(--paper-dim); font-style: italic; font-size: 14px; line-height: 1.9;
  white-space: pre-wrap; word-break: break-word; padding: 2px 0; }

/* 전송 버튼과 같은 정사각(입력창 1줄 높이). ＊ 글리프는 폰트상 위로 치우쳐 있어
   padding-top 으로 살짝 내려 광학 중앙을 맞춘다 */
.talk__star {
  flex-shrink: 0; width: var(--compose-h); height: var(--compose-h); padding: 3px 0 0;
  border-radius: var(--r-lg); font-size: 20px; font-style: normal; line-height: 1;
  color: var(--paper-dim);
}
.talk__star:hover { color: var(--paper); }
/* 지문을 열어 둔 상태 — 다음 ＊ 는 닫기라는 신호 */
.talk__star.is-on { color: var(--paper); border-color: var(--wax); background: color-mix(in srgb, var(--wax) 30%, transparent); }

/* 지문 구간 표시. 입력창 뒤에 같은 글자를 깔고 *…* 구간에만 배경을 칠한다.
   글자는 textarea 가 그대로 그리므로(조합 중인 한글도 그대로 보인다) 미러는
   배경만 담당한다 — 메트릭이 어긋나면 칠이 밀리니 폰트·줄높이·패딩을 함께 고칠 것 */
.talk__field { position: relative; flex: 1; min-width: 0; display: flex; }
.talk__field textarea { position: relative; z-index: 1; background: transparent; }
.talk__mirror {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  color: transparent; white-space: pre-wrap; overflow-wrap: break-word;
  font-family: var(--sans); font-size: 15px; line-height: 1.7;
  padding: 11px 13px; border: 1px solid transparent;
  border-radius: var(--r-lg); background: var(--night-2);
}
.talk__mirror span {
  background: color-mix(in srgb, var(--wax) 22%, transparent);
  border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* 행동 지문 온보딩 안내 — 나레이션과 같은 자리·톤, 점선 테두리로 "무대 밖 목소리"임을 구분 */
.talkhint {
  align-self: center; max-width: 88%;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  border: 1px dashed var(--line); border-radius: var(--r-lg);
  padding: 13px 18px; text-align: center;
}
.talkhint__lede { color: var(--paper-dim); font-size: 13.5px; }
.talkhint__chip {
  font-family: inherit; font-size: 13.5px; color: var(--paper-dim);
  background: var(--night-2); border: 1px solid var(--line); border-radius: var(--r-full);
  padding: 8px 15px; cursor: pointer;
  transition: color 0.18s, border-color 0.18s;
}
.talkhint__chip:hover { color: var(--paper); border-color: var(--halo); }
.talkhint__cta { font-style: normal; color: var(--halo); font-size: 12px; margin-left: 8px; }
@keyframes blink { 50% { opacity: 0; } }
.typing { display: inline-flex; gap: 5px; align-items: center; }
.typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--halo); animation: hop 1.1s infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes hop { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ── 지갑·수치 ────────────────────────────── */
.vault { background: linear-gradient(150deg, var(--night-3), var(--night-2)); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 24px; position: relative; overflow: hidden; }
.vault::after { content: ""; position: absolute; right: -40px; top: -60px; width: 220px; height: 220px;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(233, 169, 77, 0.14), transparent 70%); }
.vault__amount { font-family: var(--serif); font-size: 40px; font-weight: 700; line-height: 1.2; }
.stat-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stat { background: var(--night-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; text-align: center; }
.stat__n { font-family: var(--serif); font-size: 26px; font-weight: 700; }
.stat__k { font-size: 12px; color: var(--paper-dim); margin-top: 3px; }

.spark { display: flex; align-items: flex-end; gap: 2px; height: 108px; }
.spark i { flex: 1; background: var(--wax); border-radius: 1px 1px 0 0; min-height: 2px; opacity: 0.85; }
.spark i.zero { background: var(--line); opacity: 1; }

/* ── 아바타 편집 ──────────────────────────── */
.avatar-edit { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.avatar-edit__preview { width: 132px; aspect-ratio: 3/4; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--night-3); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; }
.avatar-edit__preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-edit__ctrl { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 12px; }

/* ── 댓글 ─────────────────────────────────── */
.note-item { display: flex; gap: 11px; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.note-item__who { width: 30px; height: 30px; border-radius: 50%; background: var(--night-3);
  display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 13px;
  color: var(--paper-dim); flex-shrink: 0; }
.note-item__body { flex: 1; min-width: 0; }
.note-item__head { display: flex; align-items: baseline; gap: 8px; }
.note-item__name { font-size: 13px; font-weight: 600; }
.note-item__text { font-size: 14.5px; margin-top: 2px; }
.note-item__text--gone { color: var(--paper-faint); font-style: italic; }

/* ── 요금제 ───────────────────────────────── */
.plans { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.plan { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; background: var(--night-2); }
.plan--lead { border-color: var(--wax); background: linear-gradient(170deg, var(--night-3), var(--night-2)); position: relative; }
.plan__tag { position: absolute; top: -11px; left: 22px; background: var(--wax); color: #fff;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; padding: 3px 10px; border-radius: var(--r); }
.plan__price { font-family: var(--serif); font-size: 32px; font-weight: 700; margin: 10px 0 2px; }
.plan__list { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px;
  font-size: 14.5px; color: var(--paper-dim); }
.plan__list b { color: var(--paper); }

/* ── 랜딩 ─────────────────────────────────── */
.hero { position: relative; min-height: clamp(500px, 82vh, 720px); display: flex; align-items: flex-end;
  overflow: hidden; border-bottom: 1px solid var(--line); }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.hero::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,17,25,.62) 0%, rgba(14,17,25,.24) 34%, rgba(14,17,25,.95) 100%); }
.hero__inner { position: relative; z-index: 2; width: 100%; max-width: var(--shell); margin: 0 auto;
  padding: 0 var(--gap) 54px; display: flex; align-items: flex-end; gap: 30px; }
.hero__copy { flex: 1; min-width: 0; }
.hero__title { font-size: clamp(28px, 4.4vw, 48px); padding: 6px 0;
  border-right: 1px solid rgba(239,231,216,.28); margin-left: auto; text-shadow: 0 2px 28px rgba(0,0,0,.6); }
.hero__sub { max-width: 40ch; color: var(--paper-dim); margin-top: 14px; }
@media (max-width: 720px) {
  .hero__inner { flex-direction: column-reverse; align-items: flex-start; gap: 20px; }
  .hero__title { writing-mode: horizontal-tb; margin-left: 0; border-right: 0;
    border-left: 1px solid rgba(239,231,216,.28); padding-left: 13px; }
}
.band { padding: 62px 0; border-bottom: 1px solid var(--line); }
.band--quiet { background: var(--night-2); }
.marks { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.mark { border-left: 1px solid var(--wax); padding-left: 15px; }
.mark__t { font-family: var(--serif); font-size: 17px; font-weight: 700; margin-bottom: 5px; }
.mark__d { font-size: 14.5px; color: var(--paper-dim); }

/* ── 유틸(최소한만) ───────────────────────── */
.hide { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* 이벤트 팝업 — 모바일 퍼스트: 바텀 시트, 640px 이상에서 중앙 카드 */
.evpop { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; }
.evpop[hidden] { display: none; }
.evpop__backdrop { position: absolute; inset: 0; background: rgba(6, 8, 13, 0.74); backdrop-filter: blur(2px); }
.evpop__card { position: relative; width: 100%; max-width: 430px; max-height: 92dvh; overflow-y: auto;
  background: var(--night-2); border: 1px solid var(--line); border-bottom: none;
  border-radius: var(--r-lg) var(--r-lg) 0 0; animation: evpop-rise 0.28s ease-out; }
.evpop__img { display: block; width: 100%; height: auto; }
.evpop__x { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border: none; cursor: pointer;
  border-radius: var(--r-full); background: rgba(6, 8, 13, 0.55); color: var(--paper); font-size: 20px; line-height: 1; }
.evpop__actions { padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); display: grid; gap: 10px; }
.evpop__later { background: none; border: none; cursor: pointer; padding: 4px;
  color: var(--paper-faint); font-size: 13px; font-family: var(--sans); }
.evpop__later:hover { color: var(--paper-dim); }
@keyframes evpop-rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 640px) {
  .evpop { align-items: center; padding: 24px; }
  .evpop__card { border-bottom: 1px solid var(--line); border-radius: var(--r-lg); }
  .evpop__actions { padding-bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; }
}