/* ============================================================
   screens.css — 화면별 스타일 (라이트 · 모바일 우선)
   ============================================================ */

/* ---------- 사주 기둥 ---------- */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pillar {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 14px; padding: 12px 6px; text-align: center;
}
.pillar .p-label { font-size: 10.5px; letter-spacing: .14em; color: var(--text-faint); font-weight:600; margin-bottom: 10px; }
.pillar .p-cell { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 0; }
.pillar .p-cell:first-of-type { border-bottom: 1px solid var(--line); }
.pillar .p-han { font-family: var(--serif); font-size: 26px; line-height: 1; font-weight:600; }
.pillar .p-ko { font-size: 10.5px; color: var(--text-dim); }

/* ---------- 타이핑 점 ---------- */
.typing { display: inline-flex; gap: 5px; padding: 3px 1px; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--primary-2); animation: bounce 1.2s infinite ease-in-out; }
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%,80%,100%{ transform: translateY(0); opacity:.4;} 40%{ transform: translateY(-5px); opacity:1;} }

/* ============================================================
   HOME
   ============================================================ */
.greet { margin-bottom: 16px; }
.greet .hi { font-family: var(--serif); font-size: 23px; font-weight: 700; }
.greet .hi em { font-style: normal; color: var(--primary); }
.greet .sub { font-size: 13px; color: var(--text-dim); margin-top: 3px; }

.hero {
  position: relative; overflow: hidden; color: #fff;
  background: var(--grad); border-radius: var(--r-xl);
  padding: 22px 22px 20px; box-shadow: 0 18px 40px -16px rgba(124,92,255,0.55);
}
.hero::after {
  content:""; position:absolute; right:-30px; top:-40px; width:160px; height:160px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,0.25), transparent 70%); pointer-events:none;
}
.hero-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.hero-eyebrow { font-size: 11px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; opacity:.92; }
.hero-date { font-size: 12.5px; opacity:.82; margin-top:4px; }
.hero-headline { font-family: var(--serif); font-size: 19px; line-height: 1.4; margin: 16px 0 0; text-wrap: pretty; font-weight:600; }
.hero-lucks { display:flex; gap: 10px; margin-top: 18px; }
.hl { flex:1; background: rgba(255,255,255,0.16); border-radius: 14px; padding: 10px 12px; backdrop-filter: blur(4px); }
.hl b { display:block; font-size: 10px; letter-spacing:.1em; opacity:.85; text-transform:uppercase; margin-bottom:4px; font-weight:600; }
.hl span { font-size: 14.5px; font-weight: 700; }

.stat-card { padding: 18px 20px; margin-top: 14px; display:flex; flex-direction:column; gap: 13px; }

.sec-label { font-size: 13px; font-weight: 700; color: var(--text-dim); margin: 26px 2px 12px; letter-spacing: .01em; }
.section-title { display:flex; align-items:center; justify-content:space-between; margin: 26px 2px 12px; }
.section-title h2 { font-size: 16px; font-weight: 700; }
.section-title a { font-size: 12.5px; color: var(--primary); cursor: pointer; font-weight:600; }

/* service tiles (vertical rich rows) */
.tiles { display:flex; flex-direction:column; gap: 11px; }
.tile {
  position: relative; cursor: pointer; display:flex; align-items:center; gap: 15px;
  padding: 16px 18px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card);
  transition: transform .2s ease, box-shadow .2s, border-color .2s;
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); border-color: var(--line-2); }
.tile .t-glyph {
  width: 50px; height: 50px; border-radius: 16px; flex:none; display:grid; place-items:center;
  font-family: var(--serif); font-size: 25px; color:#fff; font-weight:600;
}
.tile .t-txt { flex:1; min-width:0; }
.tile h3 { font-size: 16px; margin-bottom: 3px; }
.tile p { font-size: 12.5px; color: var(--text-dim); line-height: 1.45; }
.tile .arrow { color: var(--text-faint); flex:none; transition: transform .2s, color .2s; }
.tile:hover .arrow { transform: translateX(3px); color: var(--primary); }

/* recent diary rows */
.recent { display:flex; flex-direction:column; gap: 9px; }
.recent-row {
  display:flex; align-items:center; gap: 13px; padding: 14px 15px;
  border:1px solid var(--line); border-radius: var(--r); background: var(--surface);
  cursor:pointer; transition: border-color .2s, box-shadow .2s; box-shadow: var(--shadow-card);
}
.recent-row:hover { border-color: var(--line-2); box-shadow: var(--shadow-soft); }
.recent-row .rdot { width: 40px; height: 40px; border-radius: 13px; flex:none; display:grid; place-items:center; font-family: var(--serif); font-size: 18px; color:#fff; font-weight:600; }
.recent-row .rmid { flex: 1; min-width: 0; }
.recent-row .rmid b { font-size: 14px; display:block; font-weight:600; }
.recent-row .rmid span { font-size: 12px; color: var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; margin-top:2px; }
.recent-row .rtime { font-size: 11.5px; color: var(--text-faint); flex:none; }

.empty-state { text-align:center; padding: 40px 20px; color: var(--text-faint); }
.empty-state .eglyph { font-family: var(--serif); font-size: 38px; color: var(--primary-2); opacity:.6; margin-bottom: 12px; }
.empty-state p { font-size: 13.5px; line-height:1.6; }

/* ============================================================
   FORM
   ============================================================ */
.form-card { padding: 22px; }
.form-grid { display:grid; gap: 16px; }
.dob-grid { display:grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 8px; }
.gender-row { display:flex; gap: 10px; }
.gender-row .chip { flex:1; justify-content:center; padding: 13px; }

/* ============================================================
   RESULT (사주 / 궁합)
   ============================================================ */
.result-head { display:flex; align-items:center; gap: 16px; padding: 20px; }
.result-head .animal-orb {
  width: 64px; height: 64px; border-radius: 20px; flex:none; display:grid; place-items:center;
  font-size: 32px; background: var(--grad-soft); border:1px solid var(--line);
}
.result-head .rh-txt { flex:1; min-width:0; }
.result-head .rh-txt h1 { font-family: var(--serif); font-size: 21px; }
.result-head .rh-txt .sub { color: var(--text-dim); font-size: 12.5px; margin-top: 5px; }
.tag-pill { display:inline-flex; align-items:center; gap:5px; padding: 5px 11px; border-radius:99px; font-size:11.5px; font-weight:600; background: var(--surface-3); color: var(--primary); margin-right:5px; margin-top:8px; }

.panel { padding: 20px; }
.panel h3 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); margin-bottom: 13px; font-weight:700; }
.panel .body-txt { font-size: 14.5px; line-height: 1.72; color: var(--text); text-wrap: pretty; white-space: pre-wrap; }
.stack { display:flex; flex-direction:column; gap: 14px; }
.aura-line { display:flex; align-items:center; gap: 10px; margin-bottom: 12px; }
.aura-line .swatch { width: 13px; height: 13px; border-radius: 50%; flex:none; }
.aura-line b { font-family: var(--serif); font-size: 17px; font-weight:600; }
.aura-line span { color: var(--text-dim); font-size: 13px; }

.ai-reading .ai-badge { display:inline-flex; align-items:center; gap:7px; font-size:11px; letter-spacing:.06em; color: var(--primary); margin-bottom: 12px; font-weight:600; }
.ai-reading .ai-badge .dot { width:6px;height:6px;border-radius:50%;background:var(--primary); box-shadow:0 0 8px var(--primary-2); }

/* compat hero variant (white card, not gradient) */
.compat-hero { padding: 22px; display:flex; align-items:center; gap: 18px; }
.compat-hero .ch-info { flex:1; min-width:0; }
.compat-free-card {
  background:
    radial-gradient(circle at 92% 8%, rgba(245,111,167,.13), transparent 34%),
    var(--surface);
}
.crisis-lock {
  position: relative;
  min-height: 168px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, #fff7fb, #f4efff);
  display: grid;
  place-items: center;
}
.crisis-bars {
  position: absolute;
  inset: 18px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 7px;
  filter: blur(6px);
  opacity: .78;
  user-select: none;
}
.crisis-bars span {
  flex: 1;
  min-width: 10px;
  border-radius: 999px 999px 8px 8px;
  background: linear-gradient(180deg, var(--pink), var(--primary));
  box-shadow: 0 10px 24px -14px rgba(245,111,167,.85);
}
.lock-badge {
  position: relative;
  z-index: 1;
  padding: 12px 15px;
  border-radius: 999px;
  color: var(--text);
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(245,111,167,.28);
  box-shadow: var(--shadow-card);
  font-size: 13px;
  font-weight: 800;
}
.premium-index {
  background: linear-gradient(135deg, rgba(255,240,246,.95), rgba(242,236,255,.95));
  border-color: rgba(245,111,167,.24);
}
.premium-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  border-top: 1px solid rgba(124,92,255,.11);
}
.premium-check:first-of-type { border-top: none; }
.premium-check span {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  color: #fff;
  background: linear-gradient(135deg, var(--pink), var(--primary));
  font-size: 13px;
  box-shadow: 0 8px 18px -10px rgba(124,92,255,.75);
}

/* ============================================================
   CHAT
   ============================================================ */
.persona-grid { display:flex; flex-direction:column; gap: 12px; }
.persona-card {
  cursor:pointer; padding: 18px; border-radius: var(--r-lg); position: relative;
  background: var(--surface); border:1px solid var(--line); box-shadow: var(--shadow-card);
  transition: transform .2s, box-shadow .2s, border-color .2s; display:flex; gap: 15px; align-items:flex-start;
}
.persona-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); border-color: var(--line-2); }
.persona-card .pc-orb {
  width: 54px; height: 54px; border-radius: 17px; display:grid; place-items:center; flex:none;
  font-family: var(--serif); font-size: 24px; color:#fff; font-weight:600; box-shadow: var(--shadow-card);
}
.persona-card .pc-body { flex:1; min-width:0; }
.persona-card .pc-role { font-size: 11px; letter-spacing:.06em; color: var(--text-faint); text-transform: uppercase; font-weight:600; }
.persona-card h3 { font-family: var(--serif); font-size: 19px; margin: 2px 0 7px; }
.persona-card .pc-intro { font-size: 13px; line-height: 1.55; color: var(--text-dim); }
.persona-card .pc-tag { display:inline-flex; margin-top:10px; font-size:11.5px; font-weight:600; color: var(--primary); align-items:center; gap:4px; white-space:nowrap; }

/* chat view — document-flow with sticky composer */
.chat-head {
  display:flex; align-items:center; gap: 12px; padding: 4px 0 14px; margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.chat-head .ch-orb { width: 42px; height: 42px; border-radius: 14px; display:grid; place-items:center; font-family: var(--serif); font-size:19px; color:#fff; flex:none; font-weight:600; }
.chat-head .ch-txt { flex:1; }
.chat-head .ch-txt b { font-family: var(--serif); font-size: 17px; font-weight:700; }
.chat-head .ch-txt span { font-size: 11.5px; color: var(--text-faint); display:block; margin-top:1px; }
.icon-btn { width: 38px; height: 38px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--surface); color: var(--text-dim); display:grid; place-items:center; cursor:pointer; transition: all .2s; flex:none; }
.icon-btn:hover { color: var(--primary); border-color: var(--primary-2); }

.msgs { display:flex; flex-direction:column; gap: 12px; padding: 6px 0 14px; }
.msg { display:flex; gap: 9px; max-width: 86%; animation: rise .35s ease both; }
.msg .m-orb { width: 32px; height: 32px; border-radius: 11px; flex:none; display:grid; place-items:center; font-family: var(--serif); font-size:14px; color:#fff; font-weight:600; align-self:flex-end; }
.msg .bubble { padding: 12px 15px; border-radius: 18px; font-size: 14.5px; line-height: 1.6; text-wrap: pretty; white-space: pre-wrap; }
.msg.ai { align-self: flex-start; }
.msg.ai .bubble { background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 6px; color: var(--text); box-shadow: var(--shadow-card); }
.msg.me { align-self: flex-end; flex-direction: row-reverse; }
.msg.me .bubble { background: var(--grad); color:#fff; border-bottom-right-radius: 6px; box-shadow: 0 6px 16px -8px rgba(124,92,255,0.5); }
.msg.me .m-orb { background: linear-gradient(135deg,var(--primary-2),var(--pink)); }

.quick-row { display:flex; gap: 8px; flex-wrap: wrap; padding: 4px 0 10px; }

.composer {
  position: sticky; bottom: calc(var(--bar-h) + 6px); z-index: 20;
  display:flex; gap: 9px; align-items:flex-end; padding: 10px 0 8px;
  background: linear-gradient(0deg, var(--bg) 72%, transparent);
}
.composer textarea {
  flex:1; resize: none; font-family: var(--sans); font-size: 15px; color: var(--text);
  background: var(--surface); border: 1.5px solid var(--line-2); border-radius: 18px;
  padding: 13px 16px; max-height: 130px; line-height: 1.5; box-shadow: var(--shadow-card);
}
.composer textarea:focus { outline:none; border-color: var(--primary-2); }
.composer .send-btn { width: 48px; height: 48px; border-radius: 16px; flex:none; border:none; cursor:pointer;
  background: var(--grad); color:#fff; display:grid; place-items:center;
  transition: transform .15s, filter .2s; box-shadow: 0 8px 18px -8px rgba(124,92,255,0.6); }
.composer .send-btn:hover { transform: scale(1.04); }
.composer .send-btn:disabled { opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }