/* 봄이 웹 — 봄꽃 팔레트와 두 가지 서체
   색: 꽃잎 흰빛 종이 · 석류빛 장미 · 가지색 먹 · 꽃가루 금빛 · 새순 초록
   서체: 고운돋움(본문·화면 글자) + 고운바탕(봄이의 목소리 — 제목·이름·날짜·일기)
   원칙: 그라데이션·유리 효과·떠다니는 장식을 쓰지 않는다. 그림자는 떠 있는 것(모달·메뉴)에만,
        알약 모양은 태그·칩에만, 움직임은 사용자의 행동이나 새 메시지에 답할 때만. */
:root {
  color-scheme: light dark;
  --page: #FBF1EE;          /* 창 바탕 — 데스크톱에서 대화 기둥 바깥 */
  --paper: #FFFFFF;         /* 대화 바탕·카드 */
  --petal: #FBEAE6;         /* 봄이 말풍선·옅은 채움 */
  --petal-deep: #F3D3CD;
  --rose: #CB4A5A;          /* 내 말풍선·주요 버튼 — 흰 글자 대비 4.5:1 */
  --rose-ink: #B03A4B;      /* 밝은 바탕 위의 장미색 글자 */
  --ink: #2E2230;
  --ink-soft: #6F6070;
  --ink-faint: #807180;     /* 시각·보조 글자 — 흰 바탕 대비 4.5:1 */
  --line: #EEDFE0;
  --line-strong: #DCC8CB;
  --gold: #F2B84B;
  --leaf: #4F8A62;
  --danger: #B3352F;
  --shade: rgba(46, 34, 48, .46);
  --art-petal: #F7C4C3;
  --art-petal-2: #FBDDD9;
  --art-branch: #6B4A57;
  --font-ui: "Gowun Dodum", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --font-voice: "Gowun Batang", "Nanum Myeongjo", "Apple SD Gothic Neo", "Malgun Gothic", serif;
  --r-bubble: 20px;
  --r-control: 12px;
  --r-sheet: 22px;
  /* 봄이의 얼굴 — 앱 아이콘과 같은 다섯 꽃잎 */
  --flower: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg transform='translate(24 24.6)' fill='%23FFF6F1'%3E%3Ccircle r='9.6' cy='-10.6'/%3E%3Ccircle r='9.6' cy='-10.6' transform='rotate(72)'/%3E%3Ccircle r='9.6' cy='-10.6' transform='rotate(144)'/%3E%3Ccircle r='9.6' cy='-10.6' transform='rotate(216)'/%3E%3Ccircle r='9.6' cy='-10.6' transform='rotate(288)'/%3E%3Ccircle r='4.8' fill='%23F2B84B'/%3E%3C/g%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  /* 밤 벚꽃 — 가지색이 도는 어둠 위에 꽃잎 빛 */
  :root {
    --page: #141016;
    --paper: #1D1721;
    --petal: #2D222E;
    --petal-deep: #44313E;
    --rose: #C9485B;
    --rose-ink: #F09AA5;
    --ink: #F3EAEC;
    --ink-soft: #BBABB7;
    --ink-faint: #94859A;
    --line: #322838;
    --line-strong: #4B3D52;
    --leaf: #74B58A;
    --danger: #F08A80;
    --shade: rgba(0, 0, 0, .62);
    --art-petal: #E9A7B0;
    --art-petal-2: #F5D2D4;
    --art-branch: #8C6B7A;
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: var(--font-ui);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--page);
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  font-synthesis-weight: none;   /* 고운돋움은 한 굵기 — 가짜 굵은 글씨를 만들지 않는다 */
}
.hidden { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
/* 강조는 굵기 대신 봄이의 목소리 서체로 */
b, strong { font-family: var(--font-voice); font-weight: 700; }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
::selection { background: var(--petal-deep); }

/* 선 아이콘 */
.ic {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

/* 봄이의 얼굴 — 프사가 없으면 꽃, 있으면 app.js 가 사진을 깐다 */
.avatar, .mark {
  flex: none; border-radius: 50%;
  background-color: var(--rose);
  background-image: var(--flower);
  background-size: 68%;
  background-position: center;
  background-repeat: no-repeat;
}
.avatar { position: relative; width: 40px; height: 40px; font-size: 0; }

/* ---------- 로그인 ---------- */
#login { position: relative; min-height: 100%; background: var(--paper); overflow: hidden; }
.login-wrap {
  max-width: 1120px; min-height: 100vh; min-height: 100dvh; margin: 0 auto; padding: 0 28px;
  display: flex; flex-direction: column;
}
.login-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 0; position: relative; z-index: 2; }
.brand { display: flex; align-items: center; gap: 9px; }
.brand .mark { width: 34px; height: 34px; }
.brand-name { font-family: var(--font-voice); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; white-space: nowrap; }
.login-main {
  flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px; align-items: center; padding: 8px 0 32px;
}
.login-copy { position: relative; z-index: 2; }
.login-copy h1 {
  font-family: var(--font-voice); font-weight: 700;
  font-size: clamp(34px, 4.4vw, 54px); line-height: 1.3; letter-spacing: -0.02em;
  word-break: keep-all;
}
.login-sub {
  margin-top: 20px; max-width: 27em;
  font-size: 17px; line-height: 1.8; color: var(--ink-soft); word-break: keep-all;
}
.login-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 30px; }
#btnLogin {
  padding: 14px 28px; border: 0; border-radius: var(--r-control);
  background: var(--rose); color: #fff; font-size: 16.5px;
}
.store-link { font-size: 15px; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.store-link:hover { color: var(--rose-ink); text-decoration-color: var(--rose); }
#btnLogin:hover { filter: brightness(.95); }
#btnLogin:active { transform: translateY(1px); }
.login-note { margin-top: 12px; min-height: 20px; font-size: 13.5px; color: var(--ink-soft); }

/* 무대 — 벚꽃 가지 아래에서 대화 한 토막이 재생된다 */
.login-stage { position: relative; align-self: stretch; display: flex; align-items: flex-end; min-height: 640px; }
.login-art { position: absolute; top: -78px; right: -150px; width: 720px; max-width: none; pointer-events: none; }
.art-branch { fill: none; stroke: var(--art-branch); stroke-linecap: round; }
.art-bud { fill: var(--petal-deep); }
.bl-p { fill: var(--p, var(--art-petal)); stroke: var(--paper); stroke-width: 1; }
.bl-s { fill: var(--rose); opacity: .5; }
.bl-c { fill: var(--gold); }
.demo {
  position: relative; z-index: 1; width: min(100%, 400px); margin-left: auto;
  display: flex; flex-direction: column; gap: 3px; padding-bottom: 8px;
}
.demo .row, .demo .date-pill { animation: demoIn .5s ease-out both; }
.demo .s1 { animation-delay: .3s; }
.demo .s2 { animation-delay: 1.3s; }
.demo .s3 { animation-delay: 2.5s; }
.demo .s4 { animation-delay: 3s; }
.demo .s5 { animation-delay: 3.9s; }
.demo .s6 { animation-delay: 5.2s; }
.demo .s8 { animation-delay: 8.2s; }
/* 입력 중 — 잠깐 떴다가 마지막 답장에 자리를 내준다 */
.demo .s7 { overflow: hidden; animation: demoType 2.2s ease-out 6.1s both; }
@keyframes demoIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes demoType {
  0% { opacity: 0; max-height: 0; }
  12%, 88% { opacity: 1; max-height: 48px; }
  100% { opacity: 0; max-height: 0; margin-top: 0; }
}
.login-foot {
  display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 16px 0 22px;
  font-size: 13px; color: var(--ink-faint); position: relative; z-index: 2;
}
.login-foot span { margin-right: auto; }
.login-foot a { text-underline-offset: 3px; }
.login-foot a:hover { color: var(--ink); }

@media (max-width: 1100px) {
  /* 두 단이 좁아지면 가지가 문구 쪽으로 넘어오지 않게 줄인다 */
  .login-main { gap: 32px; }
  .login-art { top: -64px; right: -120px; width: 580px; }
}
@media (max-width: 860px) {
  .login-wrap { padding: 0 22px; }
  .login-top { padding: 16px 0; }
  .login-main { grid-template-columns: minmax(0, 1fr); gap: 4px; align-items: start; padding-top: 18px; }
  .login-copy h1 { font-size: clamp(27px, 8.6vw, 38px); }   /* 320px 폰에서도 한 줄이 넘치지 않게 */
  .login-sub { font-size: 16px; margin-top: 16px; }
  .login-cta { margin-top: 24px; justify-content: center; }
  #btnLogin { width: 100%; }
  .login-note { text-align: center; }
  .login-stage { min-height: 0; padding-top: 206px; }
  .login-art { top: 4px; right: -84px; width: 430px; }
  .login-art .low { display: none; }   /* 좁은 화면에선 대화와 겹치는 아래쪽 꽃잎을 뺀다 */
  .demo { width: 100%; max-width: 420px; }
  .login-foot span { width: 100%; }
}

/* ---------- 온보딩 (봄이가 직접 말을 건네는 화면) ---------- */
#onboarding {
  position: fixed; inset: 0; z-index: 30; padding: 20px;
  display: flex; align-items: center; justify-content: center;
  background: var(--page);
}
.ob-card {
  width: min(100%, 400px); padding: 32px 28px 24px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sheet);
}
.ob-mark { width: 60px; height: 60px; margin-bottom: 20px; }
.ob-card h2 {
  font-family: var(--font-voice); font-weight: 700; font-size: 24px; line-height: 1.35;
  letter-spacing: -0.01em; margin-bottom: 10px;
}
.ob-card p { font-size: 15.5px; line-height: 1.8; color: var(--ink-soft); word-break: keep-all; }
.ob-card label { display: block; margin-top: 14px; font-size: 13px; color: var(--ink-soft); }
.ob-list { list-style: none; margin-top: 4px; }
.ob-list li {
  position: relative; padding: 9px 0 9px 18px;
  font-size: 14.5px; line-height: 1.6; border-bottom: 1px solid var(--line); word-break: keep-all;
}
.ob-list li:last-child { border-bottom: 0; }
.ob-list li::before {
  content: ""; position: absolute; left: 2px; top: 18px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--rose);
}
.ob-next {
  margin-top: 26px; width: 100%; padding: 13px; border: 0; border-radius: var(--r-control);
  background: var(--rose); color: #fff; font-size: 16px;
}
.ob-next:hover { filter: brightness(.95); }
.ob-dots { margin-top: 18px; display: flex; gap: 6px; }
.ob-dots i { flex: 1; height: 3px; border-radius: 2px; background: var(--line); }
.ob-dots i.on { background: var(--rose); }

/* ---------- 입력 칸 공통 ---------- */
.modal-body input:not([type=checkbox]), .modal-body select, .modal-body textarea,
.ob-card input, .ob-card select, .notes-add input {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-control);
  font: inherit; font-size: 15px; background: var(--paper); color: var(--ink); outline: none;
}
.modal-body input:not([type=checkbox]):focus, .modal-body select:focus, .modal-body textarea:focus,
.ob-card input:focus, .ob-card select:focus, .notes-add input:focus, #input:focus {
  border-color: var(--rose);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rose) 16%, transparent);
}
.modal-body select, .ob-card select {
  appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23807180' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 20px;
}
::placeholder { color: var(--ink-faint); opacity: 1; }

/* ---------- 채팅 골격 ---------- */
#chat {
  height: 100%; max-width: 760px; margin: 0 auto;
  display: flex; flex-direction: column; background: var(--paper);
}
header {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 10px 11px 16px;
  background: var(--paper); border-bottom: 1px solid var(--line);
}
/* 스토리 링과 온라인 점 — 가만히 있는다 */
#headerAvatar {
  width: 40px; height: 40px; cursor: pointer;
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--rose);
}
#headerAvatar::after, .profile-avatar::after {
  content: ""; position: absolute; right: -2px; bottom: -2px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--leaf); border: 2px solid var(--paper);
}
.header-title { flex: 1; min-width: 0; margin-left: 2px; }
#headerTitle { cursor: pointer; }
.header-title .name {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-voice); font-weight: 700; font-size: 17.5px; letter-spacing: -0.01em;
}
.header-title .sub { margin-top: 1px; font-size: 12.5px; color: var(--ink-soft); }
.header-title .name, .header-title .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-badge {
  padding: 1px 8px; border-radius: 999px;
  background: var(--gold); color: #3A2A08;
  font-family: var(--font-ui); font-weight: 400; font-size: 11.5px; letter-spacing: 0;
}
.icon-btn {
  width: 40px; height: 40px; border: 0; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: transparent; color: var(--ink-soft);
}
.icon-btn:hover { background: var(--petal); color: var(--ink); }
.icon-btn:active { background: var(--petal-deep); }
header .icon-btn + .icon-btn { margin-left: -8px; }

#banner {
  margin: 10px 14px 0; padding: 10px 14px; border-radius: var(--r-control);
  background: color-mix(in srgb, var(--gold) 22%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--paper));
  font-size: 13.5px; text-align: center;
}

main#messages {
  flex: 1; overflow-y: auto; padding: 8px 14px 20px;
  display: flex; flex-direction: column; gap: 3px;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}

/* ---------- 말풍선 ---------- */
/* 날짜 — 하루가 바뀌는 자리의 가름선 */
.date-pill {
  display: flex; align-items: center; gap: 12px; margin: 18px 2px 10px;
  font-family: var(--font-voice); font-size: 12.5px; color: var(--ink-faint);
}
.date-pill::before, .date-pill::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.row { display: flex; align-items: flex-end; gap: 7px; margin-top: 3px; animation: pop .22s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } }
.row.user { justify-content: flex-end; }
.row .avatar { width: 30px; height: 30px; align-self: flex-start; }
.row .avatar.ghost { visibility: hidden; }
.col { display: flex; flex-direction: column; max-width: min(76%, 520px); }
.sender { display: none; }
.bubble {
  width: fit-content; max-width: 100%; padding: 9px 14px;
  border-radius: var(--r-bubble);
  font-size: 15.5px; line-height: 1.5;
  white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere;   /* 낱말 중간에서 끊지 않는다 */
}
.row.user > .bubble { max-width: min(76%, 520px); }
.row.ai .bubble { background: var(--petal); border-top-left-radius: 6px; }
.row.ai .avatar.ghost + .col .bubble { border-top-left-radius: var(--r-bubble); }
.row.user .bubble { background: var(--rose); color: #fff; border-bottom-right-radius: 6px; }
.bubble:has(img) { padding: 4px; }
/* 폭은 화면 기준(vw)으로 — 말풍선 폭(%)에 걸면 말풍선이 그림보다 넓게 남는다 */
.bubble img { display: block; width: auto; max-width: min(240px, 58vw); height: auto; border-radius: 16px; }
/* 봄이가 읽으면 내 말풍선 아래에 '읽음' */
.row.user.read { position: relative; margin-bottom: 17px; }
.row.user.read::after {
  content: "읽음"; position: absolute; right: 2px; bottom: -16px;
  font-size: 11px; color: var(--rose-ink);
}
.time { flex: none; padding-bottom: 2px; font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.row.user .time { order: -1; }

/* 안내 한 줄 */
.bubble.system {
  align-self: center; max-width: 86%; margin: 12px 0 6px; padding: 0;
  background: transparent; border-radius: 0;
  font-size: 12.5px; line-height: 1.6; color: var(--ink-faint); text-align: center; white-space: normal;
}
/* 에이전트 작업 칩 — 봄이가 방금 한 일 */
.action-chip {
  align-self: center; max-width: 92%; margin-top: 8px; padding: 6px 13px;
  border-radius: 16px; background: var(--petal);   /* 두 줄이 돼도 모양이 무너지지 않게 알약 대신 둥근 모서리 */
  font-size: 12.5px; line-height: 1.5; animation: pop .22s ease-out;
}
.action-chip.clickable { cursor: pointer; text-decoration: underline; text-decoration-color: var(--petal-deep); text-underline-offset: 3px; }
.action-chip.clickable:hover { text-decoration-color: var(--rose); }
.action-chip.busy { animation: chipPulse 1.2s ease-in-out infinite; }
@keyframes chipPulse { 50% { opacity: .45; } }
/* 작업대 같은 긴 출력 */
.result-block {
  align-self: stretch; flex: none; margin: 8px 0 2px; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-control); background: var(--paper);
  animation: pop .22s ease-out;
}
.rb-head { padding: 7px 12px 6px; background: var(--petal); font-size: 12.5px; color: var(--ink-soft); }
.result-block pre {
  margin: 0; padding: 10px 12px; max-height: 260px; overflow: auto;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12.5px; line-height: 1.6; white-space: pre;
}

/* 말풍선을 누르면 복사·삭제 */
.row.tappable { position: relative; cursor: pointer; }
.msg-menu {
  position: absolute; bottom: calc(100% + 2px); right: 0; z-index: 6;
  display: flex; padding: 4px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-control);
  box-shadow: 0 8px 24px rgba(30, 16, 28, .16);
}
.msg-menu button { border: 0; background: none; padding: 7px 13px; border-radius: 8px; font-size: 14px; }
.msg-menu button:hover { background: var(--petal); }
.msg-menu button[data-a="del"] { color: var(--danger); }

/* 입력 중 */
.typing .bubble { display: flex; gap: 4px; padding: 14px 15px; }
.typing .bubble i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint);
  animation: bounce 1.2s infinite;
}
.typing .bubble i:nth-child(2) { animation-delay: .15s; }
.typing .bubble i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%, 60%, 100% { transform: none; opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }

/* 첫 방문 빈 화면 */
.empty-state { margin: auto; max-width: 360px; padding: 28px 20px; text-align: center; }
.empty-state .big { width: 72px; height: 72px; margin: 0 auto 16px; }
.empty-state h3 { font-family: var(--font-voice); font-weight: 700; font-size: 20px; margin-bottom: 8px; }
.empty-state p { font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 20px; }
.chips button {
  padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--paper); font-size: 14px;
}
.chips button:hover { border-color: var(--rose); color: var(--rose-ink); }

/* ---------- 입력창 ---------- */
footer {
  display: flex; align-items: flex-end; gap: 4px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) 8px;
  background: var(--paper); border-top: 1px solid var(--line);
}
#input {
  flex: 1; min-width: 0; max-height: 110px; margin-left: 2px; padding: 8px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r-bubble); outline: none; resize: none;
  font: inherit; font-size: 15.5px; line-height: 1.45;
  background: var(--paper); color: var(--ink);
}
/* 안내 글자는 한 줄로 — 이름이 길거나 화면이 좁아도 입력 칸이 두 줄로 늘어나지 않게 */
#input::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 에이전트 ↔ 대화 — 켜져 있으면 초록 점 */
#btnMode {
  width: auto; margin-left: 4px; padding: 0 12px 0 11px; border: 1px solid var(--line-strong); border-radius: 999px;
  display: flex; align-items: center; gap: 7px;
  font-size: 13.5px; white-space: nowrap; color: var(--ink);
}
#btnMode::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--leaf); }
#btnMode.off { color: var(--ink-soft); }
#btnMode.off::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-faint); }
#btnSend {
  width: 40px; height: 40px; margin-left: 4px; border: 0; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--rose); color: #fff;
}
#btnSend .ic { stroke-width: 2; }
#btnSend:hover { filter: brightness(.95); }
#btnSend:disabled { opacity: .35; }

/* ---------- 모달 ---------- */
.modal {
  position: fixed; inset: 0; z-index: 10; padding: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--shade);
}
.modal-box {
  width: min(100%, 440px); max-height: min(86vh, 760px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); border-radius: var(--r-sheet);
  box-shadow: 0 24px 60px rgba(30, 16, 28, .3);
  animation: sheetIn .18s ease-out;
}
@keyframes sheetIn { from { opacity: 0; transform: translateY(10px); } }
.modal-box h2 {
  padding: 22px 22px 6px;
  font-family: var(--font-voice); font-weight: 700; font-size: 20px; letter-spacing: -0.01em;
}
.modal-body { padding: 8px 22px 20px; overflow-y: auto; font-size: 14.5px; line-height: 1.65; scrollbar-width: thin; }
.modal-body label { display: block; margin-top: 14px; font-size: 13px; color: var(--ink-soft); }
.modal-body textarea { resize: vertical; min-height: 76px; line-height: 1.55; }
.modal-body button {
  width: 100%; margin-top: 12px; padding: 11px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r-control);
  background: var(--paper); font-size: 15px;
}
.modal-body button:hover { border-color: var(--ink-faint); }
.modal-body button.primary { margin-top: 18px; border-color: var(--rose); background: var(--rose); color: #fff; }
.modal-body button.primary:hover { filter: brightness(.95); }
.modal-body button.danger { border-color: transparent; background: transparent; color: var(--danger); }
.modal-body button.danger:hover { background: color-mix(in srgb, var(--danger) 8%, transparent); }
.modal-body button:disabled { opacity: .5; }
.modal-body hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0 0; }
.modal-body a { color: var(--rose-ink); text-underline-offset: 3px; }
.modal-close {
  border: 0; border-top: 1px solid var(--line); padding: 14px;
  background: var(--paper); font-size: 15px; color: var(--ink-soft);
}
.modal-close:hover { background: var(--petal); color: var(--ink); }
.steps { margin: 6px 0 4px 18px; }
.steps li { margin-top: 8px; line-height: 1.7; }

/* 기억 */
.mem-section { margin: 20px 0 6px; font-family: var(--font-voice); font-weight: 700; font-size: 15.5px; }
.mem-section:first-child { margin-top: 6px; }
#memoryBody div:not(.mem-section) { white-space: pre-wrap; line-height: 1.85; color: var(--ink-soft); }

/* 일기장·메모 */
.tabs { display: flex; gap: 22px; padding: 6px 22px 0; border-bottom: 1px solid var(--line); }
.tabs .tab {
  margin-bottom: -1px; padding: 9px 0 10px; border: 0; border-bottom: 2px solid transparent;
  background: none; font-size: 14.5px; color: var(--ink-soft);
}
.tabs .tab:hover { color: var(--ink); }
.tabs .tab.on { color: var(--ink); border-bottom-color: var(--rose); }
#notesBody { min-height: 150px; padding-top: 4px; }
#notesBody:not(:has(*)) { padding-top: 18px; color: var(--ink-soft); }
.note-row {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 0;
  border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.5;
}
.note-row input[type=checkbox] {
  appearance: none; width: 20px; height: 20px; margin-top: 1px; flex: none; cursor: pointer;
  border: 1.5px solid var(--line-strong); border-radius: 6px; background: var(--paper) center/14px no-repeat;
}
.note-row input[type=checkbox]:checked {
  border-color: var(--rose); background-color: var(--rose);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.6 4.6L19 7.5'/%3E%3C/svg%3E");
}
.note-row.done span { color: var(--ink-faint); text-decoration: line-through; }
.modal-body .note-row .del {
  width: auto; margin: -2px -6px 0 auto; padding: 4px 8px;
  border: 0; background: none; font-size: 13px; color: var(--ink-faint);
}
.modal-body .note-row .del:hover { color: var(--danger); }
/* 봄이 일기 — 봄이가 쓴 글이라 목소리 서체로 */
.diary-entry { padding: 18px 0 20px; border-bottom: 1px solid var(--line); }
.diary-entry:last-child { border-bottom: 0; }
.diary-entry .date { margin-bottom: 6px; font-size: 13px; color: var(--rose-ink); }
.diary-entry .text { font-family: var(--font-voice); font-size: 16px; line-height: 1.95; white-space: pre-wrap; word-break: keep-all; }
.notes-add { display: flex; gap: 8px; padding: 12px 22px 14px; border-top: 1px solid var(--line); }
.notes-add input { flex: 1; min-width: 0; margin-top: 0; }
.notes-add button {
  flex: none; padding: 0 18px; border: 0; border-radius: var(--r-control);
  background: var(--rose); color: #fff; font-size: 14.5px;
}

/* 설정 */
.brain-box { margin-top: 24px; }
.brain-title { font-family: var(--font-voice); font-weight: 700; font-size: 16px; }
.brain-now { margin-top: 3px; font-size: 14px; color: var(--rose-ink); }
.brain-help { margin-top: 5px; font-size: 13px; line-height: 1.7; color: var(--ink-soft); }
.brain-help b, .howto b, .howto-safe b, .pc-steps b, .steps b { color: var(--ink); }
.plan-box { margin-top: 6px; padding: 16px 16px 18px; border-radius: 14px; background: var(--petal); }
#planHelp { white-space: pre-line; }
.modal-body .plan-link {
  display: inline-block; margin-top: 12px; padding: 9px 14px; border-radius: var(--r-control);
  background: var(--rose); color: #fff; font-size: 14px; text-decoration: none;
}
.switch-box { margin-top: 22px; }
.modal-body .switch { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; color: var(--ink); cursor: pointer; }
.switch input {
  appearance: none; order: 2; margin-left: auto; flex: none; position: relative; cursor: pointer;
  width: 40px; height: 24px; border-radius: 999px; background: var(--line-strong); transition: background .15s;
}
.switch input::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: transform .15s;
}
.switch input:checked { background: var(--rose); }
.switch input:checked::after { transform: translateX(16px); }
.switch em { font-style: normal; font-size: 12.5px; color: var(--ink-faint); }
.ap-card { margin-top: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-control); }
.ap-row { display: flex; gap: 12px; align-items: baseline; padding: 5px 0; font-size: 14.5px; }
.ap-row span { flex: none; width: 64px; font-size: 12.5px; color: var(--ink-soft); }
.ap-row b { font-family: inherit; word-break: break-word; }
.howto, .pc-steps { margin-top: 12px; padding: 14px 14px 12px; border: 1px solid var(--line); border-radius: var(--r-control); }
.howto-title { margin-bottom: 6px; font-family: var(--font-voice); font-weight: 700; font-size: 14px; }
.howto ol, .pc-steps ol { margin-left: 18px; font-size: 13.5px; line-height: 1.9; }
.howto ol span { font-size: 12.5px; color: var(--ink-soft); }
.howto-safe { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.75; color: var(--ink-soft); }
.legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-top: 14px; font-size: 13px; }
.modal-body .legal-links a { color: var(--ink-faint); }

/* ---------- 대화 검색 ---------- */
#searchScreen {
  position: fixed; inset: 0; z-index: 15; max-width: 760px; margin: 0 auto;
  display: flex; flex-direction: column; background: var(--paper);
}
.search-head { display: flex; align-items: center; gap: 4px; padding: 10px 14px 10px 8px; border-bottom: 1px solid var(--line); }
.search-bar {
  flex: 1; display: flex; align-items: center; gap: 8px; padding: 0 6px 0 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-control); color: var(--ink-faint);
}
.search-bar:focus-within { border-color: var(--rose); }
.search-bar .ic { width: 18px; height: 18px; }
.search-bar input {
  flex: 1; min-width: 0; padding: 9px 0; border: 0; outline: none;
  font: inherit; font-size: 15.5px; background: transparent; color: var(--ink);
}
.search-bar button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: var(--ink-faint); display: grid; place-items: center; }
.search-bar button:hover { background: var(--petal); color: var(--ink); }
.search-info { min-height: 22px; padding: 12px 18px 4px; font-size: 13px; color: var(--ink-soft); }
.search-results { flex: 1; overflow-y: auto; padding: 0 18px 24px; scrollbar-width: thin; }
.search-hint { padding: 64px 12px; text-align: center; font-size: 15px; line-height: 1.85; color: var(--ink-soft); word-break: keep-all; }
.sr-row { padding: 13px 0 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
.sr-row:hover .sr-text { color: var(--rose-ink); }
.sr-meta { display: flex; gap: 8px; align-items: baseline; margin-bottom: 3px; font-size: 12.5px; color: var(--ink-faint); }
.sr-meta b { font-size: 13.5px; color: var(--ink); }
.sr-text { font-size: 15px; line-height: 1.6; word-break: break-word; }
/* 찾은 말 — 형광펜 */
.sr-text mark { padding: 1px 1px; border-radius: 3px; background: color-mix(in srgb, var(--gold) 46%, transparent); color: inherit; }
.sr-more { padding: 12px 0 20px; text-align: center; font-size: 13px; color: var(--ink-soft); }
/* 검색 → 그때 대화 다시 보기 */
.sr-back {
  margin: 6px 0 10px; padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--paper); font-size: 13.5px;
}
.sr-back:hover { border-color: var(--rose); color: var(--rose-ink); }
.ctx-row { display: flex; align-items: flex-end; margin-top: 4px; }
.ctx-row.user { justify-content: flex-end; }
.ctx-bubble {
  max-width: 78%; padding: 9px 14px; border-radius: var(--r-bubble); border-top-left-radius: 6px;
  background: var(--petal); font-size: 15px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere;
}
.ctx-row.user .ctx-bubble { background: var(--rose); color: #fff; border-top-left-radius: var(--r-bubble); border-bottom-right-radius: 6px; }
.ctx-row.hit .ctx-bubble { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--gold); }
.ctx-time { flex: none; margin: 0 6px 2px; font-size: 11px; color: var(--ink-faint); }
.ctx-bubble:has(img) { padding: 4px; }
.ctx-bubble img { display: block; max-width: 180px; height: auto; border-radius: 16px; }
.ctx-date {
  display: flex; align-items: center; gap: 12px; margin: 18px 0 8px;
  font-family: var(--font-voice); font-size: 12.5px; color: var(--ink-faint);
}
.ctx-date::before, .ctx-date::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------- 봄이 프로필 카드 ---------- */
.profile-box { text-align: center; }
.profile-hero { padding: 32px 22px 2px; }
.profile-avatar {
  width: 96px; height: 96px; margin: 0 auto;
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--rose);
}
.profile-avatar::after { right: 1px; bottom: 1px; width: 16px; height: 16px; border-width: 3px; }
.photo-actions { display: flex; gap: 4px; justify-content: center; margin-top: 14px; }
.photo-actions button {
  padding: 4px 8px; border: 0; background: none; font-size: 13px; color: var(--ink-soft);
  text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px;
}
.photo-actions button:hover { color: var(--ink); }
.profile-hero h2 { padding: 6px 0 0; font-size: 26px; }
/* 관계 단계 — 여섯 단계 중 어디쯤인지 점으로 */
.profile-tag { display: inline-flex; align-items: center; gap: 9px; margin-top: 6px; font-size: 14px; color: var(--ink-soft); }
.stage-dots { display: inline-flex; gap: 4px; }
.stage-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.stage-dots i.on { background: var(--rose); }
.profile-stats { display: flex; margin: 20px 22px 0; border-block: 1px solid var(--line); }
.profile-stats div { flex: 1; padding: 13px 4px 12px; }
.profile-stats div + div { border-left: 1px solid var(--line); }
.profile-stats b { display: block; font-size: 20px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.profile-stats span { font-size: 12.5px; color: var(--ink-soft); }
.profile-mood { margin: 18px 26px 0; font-size: 14.5px; }
.profile-mood small { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-soft); }
.profile-bio { padding: 8px 28px 0; font-family: var(--font-voice); font-size: 15px; line-height: 1.75; color: var(--ink-soft); word-break: keep-all; }
.profile-actions { display: flex; gap: 8px; padding: 20px 22px 22px; }
.profile-actions button {
  flex: 1; padding: 11px 0; border: 1px solid var(--line-strong); border-radius: var(--r-control);
  background: var(--paper); font-size: 14.5px;
}
.profile-actions button:hover { border-color: var(--ink-faint); }

/* ---------- 아주 좁은 폰 (360px 이하) ---------- */
@media (max-width: 360px) {
  header { gap: 9px; padding-left: 12px; }
  header .icon-btn { width: 36px; height: 36px; }
  footer { padding-left: 6px; padding-right: 8px; }
  #btnMode { height: 36px; padding: 0 9px; gap: 5px; font-size: 12.5px; align-self: center; }
  #btnAttach { width: 34px; }
  #input { padding: 8px 11px; }
}

/* ---------- 넓은 화면 — 대화 기둥에 가는 테두리 ---------- */
@media (min-width: 800px) {
  #chat, #searchScreen { border-inline: 1px solid var(--line); }
}

/* ---------- 움직임을 줄여 달라는 설정 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .demo .s7 { display: none; }
}