/* ============================================================
   AI-Men · 신규 기능 스타일 (성도 앱 · 다크 톤)
   홈 AI코칭/인생구절 카드 · AICoachingScreen · LifeVerseScreen
   ============================================================ */

/* ---------- 홈: AI 코칭 카드 ---------- */
.hn-coach-card {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  margin: 0 0 12px;
  padding: 16px 16px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(123,91,214,0.28) 0%, rgba(240,207,106,0.16) 100%);
  border: 1px solid rgba(240,207,106,0.34);
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  transition: transform .12s, border-color .15s;
}
.hn-coach-card:active { transform: scale(0.985); }
.hcc-glow {
  position: absolute; right: -30px; top: -30px;
  width: 140px; height: 140px; border-radius: 50%;
  background: radial-gradient(circle, rgba(240,207,106,0.4), transparent 70%);
  pointer-events: none;
}
.hcc-orb {
  flex: 0 0 auto;
  width: 50px; height: 50px; border-radius: 16px;
  display: grid; place-items: center; font-size: 26px;
  background: linear-gradient(160deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 0 22px rgba(240,207,106,0.3);
}
.hcc-text { flex: 1; min-width: 0; position: relative; z-index: 1; }
.hcc-eyebrow {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.4px;
  color: #FFE6A8; text-transform: uppercase;
}
.hcc-dot { color: #7CE0A0; font-size: 8px; animation: hccPulse 1.4s infinite; }
@keyframes hccPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.hcc-title { font-size: 15px; font-weight: 800; color: #fff; line-height: 1.32; margin-top: 3px; letter-spacing: -0.3px; }
.hcc-sub { font-size: 11.5px; color: #C6CEE6; margin-top: 5px; letter-spacing: -0.2px; }
.hcc-go { flex: 0 0 auto; color: rgba(255,230,168,0.8); position: relative; z-index: 1; }

/* ---------- 홈: 나의 인생 구절 카드 ---------- */
.hn-lifeverse {
  display: block; width: 100%; text-align: left;
  margin: 0 0 12px; padding: 15px 17px;
  border-radius: 18px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  cursor: pointer; transition: background .15s, transform .12s;
}
.hn-lifeverse:active { transform: scale(0.985); }
.hlv-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.hlv-eyebrow { font-size: 11px; font-weight: 800; color: #FFE6A8; letter-spacing: -0.1px; }
.hlv-edit { font-size: 11px; color: #9AA5C4; font-weight: 700; }
.hlv-quote { font-size: 14.5px; font-weight: 700; color: #EAEFFA; line-height: 1.5; letter-spacing: -0.3px; word-break: keep-all; }
.hlv-ref { font-size: 11.5px; color: #C0A968; font-weight: 700; margin-top: 7px; }

/* ============================================================
   AI 코칭 화면
   ============================================================ */
/* 상단바·콘텐츠가 전체 너비를 받도록 홈 화면과 동일한 레이아웃 */
.welcome-shell.coach-screen,
.welcome-shell.lifeverse-screen {
  min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  align-items: stretch; text-align: left;
  padding: 16px 18px 40px;
}
.welcome-shell.coach-screen::-webkit-scrollbar,
.welcome-shell.lifeverse-screen::-webkit-scrollbar { display: none; }
.welcome-shell.coach-screen > *,
.welcome-shell.lifeverse-screen > * { flex-shrink: 0; }

/* analyzing */
.coach-analyzing {
  display: flex; flex-direction: column; align-items: center;
  padding: 40px 10px; text-align: center;
}
.ca-orb { position: relative; width: 140px; height: 140px; display: grid; place-items: center; margin-bottom: 26px; }
.ca-orb-core {
  width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-items: center; font-size: 38px;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.25), rgba(123,91,214,0.4));
  box-shadow: 0 0 40px rgba(240,207,106,0.45);
  z-index: 2;
}
.ca-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(240,207,106,0.4); animation: caRing 2.4s ease-out infinite; }
.ca-ring.r2 { animation-delay: 0.8s; } .ca-ring.r3 { animation-delay: 1.6s; }
@keyframes caRing { 0% { transform: scale(0.55); opacity: 0.9; } 100% { transform: scale(1.15); opacity: 0; } }
.ca-title { font-size: 22px; font-weight: 900; color: #fff; line-height: 1.35; letter-spacing: -0.6px; }
.ca-steps { display: flex; flex-direction: column; gap: 9px; margin: 26px 0 18px; width: 100%; max-width: 280px; }
.ca-step {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: #8E9BBF; font-weight: 600;
  padding: 10px 14px; border-radius: 12px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
  transition: all .3s;
}
.ca-step .cas-dot {
  width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid rgba(255,255,255,0.2); display: grid; place-items: center;
  font-size: 10px; color: #0E1424;
}
.ca-step.active { color: #EAEFFA; border-color: rgba(240,207,106,0.4); background: rgba(240,207,106,0.08); }
.ca-step.active .cas-dot { border-color: #F0CF6A; }
.ca-step.done { color: #B6C2E2; }
.ca-step.done .cas-dot { background: #7CE0A0; border-color: #7CE0A0; }
.ca-note { font-size: 12px; color: #6B7798; letter-spacing: -0.2px; }

/* result */
.coach-result { padding: 4px 2px 0; }
.cr-intro {
  background: linear-gradient(150deg, rgba(240,207,106,0.14), rgba(123,91,214,0.12));
  border: 1px solid rgba(240,207,106,0.28);
  border-radius: 18px; padding: 18px; margin-bottom: 18px;
}
.cri-badge { display: inline-block; font-size: 11px; font-weight: 800; color: #FFE6A8; background: rgba(240,207,106,0.16); padding: 4px 11px; border-radius: 999px; margin-bottom: 11px; white-space: nowrap; }
.cri-summary { font-size: 14px; color: #E5EAF6; line-height: 1.65; letter-spacing: -0.3px; word-break: keep-all; }

.cr-sections { display: flex; flex-direction: column; gap: 12px; }
.cr-card { border-radius: 18px; padding: 16px 17px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); }
.cr-card.tone-blue { background: linear-gradient(135deg, rgba(110,160,224,0.14), rgba(255,255,255,0.03)); border-color: rgba(110,160,224,0.3); }
.cr-card.tone-gold { background: linear-gradient(135deg, rgba(240,207,106,0.14), rgba(255,255,255,0.03)); border-color: rgba(240,207,106,0.3); }
.cr-card.tone-purple { background: linear-gradient(135deg, rgba(150,120,224,0.16), rgba(255,255,255,0.03)); border-color: rgba(150,120,224,0.32); }
.crc-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.crc-emoji { font-size: 20px; }
.crc-title { font-size: 15.5px; font-weight: 800; color: #fff; letter-spacing: -0.3px; white-space: nowrap; }
.crc-insight { font-size: 13.5px; color: #D7DEEE; line-height: 1.6; letter-spacing: -0.3px; word-break: keep-all; }
.crc-action {
  margin-top: 11px; padding: 10px 12px; border-radius: 12px;
  background: rgba(0,0,0,0.18); font-size: 12.5px; color: #E5EAF6; line-height: 1.5;
}
.crca-label { display: block; font-size: 10px; font-weight: 800; color: #FFE6A8; letter-spacing: 0.4px; text-transform: uppercase; margin-bottom: 4px; }

.cr-verses { margin-top: 22px; }
.crv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.crv-head-title { font-size: 16px; font-weight: 900; color: #fff; letter-spacing: -0.5px; line-height: 1.35; word-break: keep-all; }
.crv-head-count { flex: 0 0 auto; font-size: 11.5px; font-weight: 800; color: #2A2208; background: linear-gradient(160deg, #FFE08A, #E0B84E); padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.crv-card { display: flex; gap: 12px; padding: 15px; border-radius: 16px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.11); margin-bottom: 10px; }
.crv-num { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 900; color: #2A2208; background: linear-gradient(160deg, #FFE08A, #E0B84E); }
.crv-quote { font-size: 14px; font-weight: 700; color: #EFF3FB; line-height: 1.55; letter-spacing: -0.3px; word-break: keep-all; }
.crv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.crv-ref { font-size: 11.5px; font-weight: 800; color: #C0A968; }
.crv-why { font-size: 11.5px; color: #8E9BBF; letter-spacing: -0.2px; }

.cr-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.cr-foot { font-size: 11px; color: #6B7798; line-height: 1.6; text-align: center; margin-top: 16px; letter-spacing: -0.2px; word-break: keep-all; }

/* ============================================================
   나의 인생 구절 (락인 타임라인)
   ============================================================ */
.lv-current {
  margin: 4px 2px 0; padding: 20px; border-radius: 20px;
  background: linear-gradient(150deg, rgba(240,207,106,0.16), rgba(255,255,255,0.04));
  border: 1px solid rgba(240,207,106,0.3); text-align: center;
}
.lvc-eyebrow { font-size: 11.5px; font-weight: 800; color: #FFE6A8; letter-spacing: 0.2px; }
.lvc-quote { font-size: 18px; font-weight: 800; color: #fff; line-height: 1.5; margin-top: 12px; letter-spacing: -0.4px; word-break: keep-all; }
.lvc-ref { font-size: 13px; font-weight: 700; color: #D9C290; margin-top: 10px; }
.lvc-note { font-size: 12px; color: #A9B3D0; margin-top: 8px; font-style: italic; }
.lvc-empty { font-size: 14px; color: #8E9BBF; padding: 16px 0; }
.lvc-add {
  margin-top: 16px; width: 100%; height: 44px; border-radius: 13px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
  color: #FFE6A8; font-size: 13.5px; font-weight: 800; cursor: pointer; font-family: inherit;
  transition: background .14s;
}
.lvc-add:active { background: rgba(255,255,255,0.16); }

.lv-form { margin: 14px 2px 0; padding: 18px; border-radius: 18px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); }
.lvf-title { font-size: 14px; font-weight: 800; color: #fff; margin-bottom: 13px; letter-spacing: -0.3px; }
.lvf-input {
  width: 100%; padding: 12px 14px; margin-bottom: 9px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px; color: #fff; font-family: inherit; font-size: 14px; outline: none;
  letter-spacing: -0.2px; transition: border-color .14s;
}
.lvf-input::placeholder { color: rgba(255,255,255,0.32); }
.lvf-input:focus { border-color: rgba(240,207,106,0.5); }
.lvf-input.area { min-height: 70px; resize: none; line-height: 1.5; }
.lvf-actions { display: flex; gap: 9px; margin-top: 4px; }
.lvf-cancel { flex: 0 0 auto; padding: 0 18px; height: 44px; border-radius: 12px; background: transparent; border: 1px solid rgba(255,255,255,0.2); color: #B6C2E2; font-weight: 700; font-family: inherit; font-size: 13.5px; cursor: pointer; }
.lvf-save { flex: 1; height: 44px; border-radius: 12px; background: linear-gradient(160deg, #FFE08A, #E0B84E); border: none; color: #2A2208; font-weight: 900; font-family: inherit; font-size: 14px; cursor: pointer; }
.lvf-save.disabled { opacity: 0.45; pointer-events: none; }
.lvf-hint { font-size: 11px; color: #8E9BBF; margin-top: 11px; line-height: 1.5; letter-spacing: -0.2px; }

.lv-timeline { margin: 22px 2px 0; }
.lvt-head { font-size: 14px; font-weight: 800; color: #fff; margin-bottom: 14px; letter-spacing: -0.3px; }
.lvt-head span { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: rgba(240,207,106,0.2); color: #FFE6A8; font-size: 11px; margin-left: 5px; }
.lvt-track { position: relative; padding-left: 6px; }
.lvt-node { position: relative; padding-left: 26px; padding-bottom: 16px; }
.lvt-node:not(:last-child)::before { content: ''; position: absolute; left: 6px; top: 18px; bottom: 0; width: 2px; background: rgba(255,255,255,0.12); }
.lvt-dot { position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,0.1); border: 2px solid rgba(255,255,255,0.25); display: grid; place-items: center; }
.lvt-node.now .lvt-dot { background: #F0CF6A; border-color: #F0CF6A; box-shadow: 0 0 12px rgba(240,207,106,0.6); }
.lvt-card { position: relative; padding: 14px 15px; border-radius: 15px; background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.1); }
.lvt-node.now .lvt-card { background: rgba(240,207,106,0.09); border-color: rgba(240,207,106,0.3); }
.lvt-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.lvt-stage { font-size: 10.5px; font-weight: 800; color: #2A2208; background: linear-gradient(160deg, #FFE08A, #E0B84E); padding: 2px 9px; border-radius: 999px; }
.lvt-date { font-size: 11px; color: #8E9BBF; font-weight: 600; }
.lvt-quote { font-size: 14px; font-weight: 700; color: #EAEFFA; line-height: 1.5; letter-spacing: -0.3px; word-break: keep-all; }
.lvt-ref { font-size: 11.5px; font-weight: 700; color: #C0A968; margin-top: 6px; }
.lvt-note { font-size: 11.5px; color: #9AA5C4; margin-top: 6px; font-style: italic; }
.lvt-now-badge { position: absolute; top: 13px; right: 13px; font-size: 10px; font-weight: 800; color: #FFE6A8; }
.lv-foot { font-size: 11.5px; color: #6B7798; text-align: center; margin: 18px 6px 0; line-height: 1.6; letter-spacing: -0.2px; word-break: keep-all; }

/* ============================================================
   교회 소식 게시판 (다크 톤) — 목록 + 상세
   ============================================================ */
.welcome-shell.board-screen {
  min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  align-items: stretch; text-align: left;
  padding: 16px 18px 40px;
}
.welcome-shell.board-screen::-webkit-scrollbar { display: none; }
.welcome-shell.board-screen > * { flex-shrink: 0; }

/* category chips */
.nb-cats { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.nb-cat-chip {
  padding: 7px 14px; border-radius: 999px; cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 700; color: #B6C2E2;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  transition: all .13s;
}
.nb-cat-chip.on { background: #F0CF6A; border-color: #F0CF6A; color: #2A2208; font-weight: 800; }

/* list */
.nb-list { display: flex; flex-direction: column; gap: 10px; }
.nb-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 2px 0; }
.nb-row {
  display: block; width: 100%; text-align: left; cursor: pointer; font-family: inherit;
  padding: 15px 16px; border-radius: 16px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.11);
  transition: background .14s, transform .12s, border-color .14s;
}
.nb-row:active { transform: scale(0.99); }
.nb-row:hover { border-color: rgba(240,207,106,0.3); }
.nb-row-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.nb-cat {
  font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; letter-spacing: -0.1px;
}
.nb-cat.tone-blue { color: #BBD7FA; background: rgba(110,160,224,0.22); }
.nb-cat.tone-gold { color: #FFE6A8; background: rgba(240,207,106,0.2); }
.nb-cat.tone-purple { color: #D8C7F5; background: rgba(150,120,224,0.24); }
.nb-cat.tone-green { color: #B6E6B0; background: rgba(90,190,120,0.22); }
.nb-pin { font-size: 10.5px; font-weight: 800; color: #FFD873; }
.nb-date { margin-left: auto; font-size: 11.5px; color: #8E9BBF; font-weight: 600; }
.nb-row-title { font-size: 15px; font-weight: 800; color: #EFF3FB; line-height: 1.4; letter-spacing: -0.3px; word-break: keep-all; }
.nb-row-sub { font-size: 12.5px; color: #A9B3D0; line-height: 1.5; margin-top: 6px; word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nb-row-foot { display: flex; align-items: center; gap: 6px; margin-top: 11px; font-size: 11px; color: #8E9BBF; font-weight: 600; }
.nb-dot { color: #56627F; }
.nb-push { color: #7CB0E0; }
.nb-empty { text-align: center; padding: 40px 0; color: #8E9BBF; font-size: 13.5px; }
.nb-foot { font-size: 11px; color: #6B7798; text-align: center; margin: 18px 6px 0; line-height: 1.6; word-break: keep-all; }

/* detail */
.nd-head { padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 16px; }
.nd-cat-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.nd-title { font-size: 21px; font-weight: 900; color: #fff; line-height: 1.4; letter-spacing: -0.6px; word-break: keep-all; }
.nd-meta { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 12px; color: #9AA5C4; font-weight: 600; }
.nd-target { margin-top: 10px; display: inline-block; font-size: 11.5px; font-weight: 700; color: #C0A968; background: rgba(240,207,106,0.1); border: 1px solid rgba(240,207,106,0.22); padding: 5px 11px; border-radius: 999px; }
.nd-body { display: flex; flex-direction: column; gap: 16px; }
.nd-para { font-size: 14.5px; color: #DDE4F2; line-height: 1.75; letter-spacing: -0.3px; word-break: keep-all; white-space: pre-wrap; }
.nd-card-foot { display: flex; align-items: center; gap: 9px; margin-top: 26px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); }
.ndcf-ic { font-size: 20px; }
.ndcf-text { font-size: 12.5px; font-weight: 700; color: #B6C2E2; }

/* ============================================================
   멘토의 편지 (다크 톤) — 봉투 + 편지지
   ============================================================ */
.welcome-shell.letter-screen {
  min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  align-items: stretch; text-align: left;
  padding: 16px 18px 40px;
}
.welcome-shell.letter-screen::-webkit-scrollbar { display: none; }
.welcome-shell.letter-screen > * { flex-shrink: 0; }

/* envelope stage */
.letter-envelope-stage { display: flex; flex-direction: column; align-items: center; padding: 34px 10px 20px; text-align: center; }
.letter-envelope {
  position: relative; width: 240px; height: 158px; cursor: pointer; border: none;
  background: linear-gradient(165deg, #F3E9D2, #E6D6B4);
  border-radius: 12px; box-shadow: 0 18px 40px rgba(0,0,0,0.4);
  transition: transform .2s;
}
.letter-envelope:hover { transform: translateY(-4px); }
.letter-envelope:active { transform: scale(0.98); }
.le-flap {
  position: absolute; top: 0; left: 0; right: 0; height: 92px;
  background: linear-gradient(165deg, #E9DCC0, #D8C49C);
  clip-path: polygon(0 0, 100% 0, 50% 78%);
  border-radius: 12px 12px 0 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
.le-pocket {
  position: absolute; inset: 0; border-radius: 12px;
  background:
    linear-gradient(45deg, transparent 49.4%, rgba(150,120,70,0.35) 49.6%, rgba(150,120,70,0.35) 50.4%, transparent 50.6%) bottom left / 50% 100% no-repeat,
    linear-gradient(-45deg, transparent 49.4%, rgba(150,120,70,0.35) 49.6%, rgba(150,120,70,0.35) 50.4%, transparent 50.6%) bottom right / 50% 100% no-repeat;
}
.le-seal {
  position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
  width: 58px; height: 58px; border-radius: 50%; z-index: 3;
  background: radial-gradient(circle at 38% 32%, #C9433A, #9E2A22);
  border: 3px solid #B23A30; box-shadow: 0 4px 12px rgba(120,20,10,0.5);
  display: grid; place-items: center; overflow: hidden;
}
.le-seal-img { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: sepia(0.4) saturate(0.7) brightness(0.92); mix-blend-mode: multiply; }
.le-stamp {
  position: absolute; top: 11px; right: 13px; z-index: 4;
  width: 34px; height: 40px; border-radius: 4px; transform: rotate(6deg);
  background: rgba(255,255,255,0.55); border: 1.5px dashed #A9821B;
  display: grid; place-items: center; font-size: 9px; font-weight: 800; color: #8A6A12; line-height: 1.15; text-align: center;
}
.le-from { font-size: 12.5px; font-weight: 700; color: #C0A968; margin-top: 26px; }
.le-title { font-size: 21px; font-weight: 900; color: #fff; letter-spacing: -0.5px; margin-top: 10px; }
.le-hint {
  font-size: 12.5px; color: #9AA5C4; margin-top: 16px;
  padding: 9px 16px; border-radius: 999px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  animation: leHint 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: no-preference){
  @keyframes leHint { 0%,100% { transform: translateY(0); opacity: 0.85; } 50% { transform: translateY(-3px); opacity: 1; } }
}

/* paper */
.letter-paper {
  background: linear-gradient(180deg, #FBF6EA, #F4ECD8);
  border-radius: 18px; padding: 22px 22px 24px;
  box-shadow: 0 18px 44px rgba(0,0,0,0.35);
  position: relative; overflow: hidden;
}
@media (prefers-reduced-motion: no-preference){
  .letter-paper { animation: lpIn .42s cubic-bezier(.2,.8,.3,1); }
  @keyframes lpIn { from { transform: translateY(14px) scale(0.98); opacity: 0.5; } to { transform: none; opacity: 1; } }
}
.letter-paper::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: linear-gradient(90deg, #E0B84E, #C99A2E, #E0B84E);
}
.lp-head { padding-bottom: 16px; border-bottom: 1px dashed #D8C9A6; margin-bottom: 18px; }
.lp-mentor { display: flex; align-items: center; gap: 13px; }
.lp-mentor-img {
  width: 52px; height: 52px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; object-position: top;
  background: #ECE0C6; border: 2px solid #E0B84E;
}
.lp-mentor-name { font-size: 17px; font-weight: 900; color: #3A2D12; letter-spacing: -0.4px; }
.lp-mentor-name span { font-size: 12px; font-weight: 700; color: #9A7B3A; margin-left: 6px; }
.lp-mentor-week { font-size: 12px; color: #8A7448; margin-top: 3px; font-weight: 600; }
.lp-body { }
.lp-para { font-size: 14.5px; color: #4A3D24; line-height: 1.85; letter-spacing: -0.3px; word-break: keep-all; margin-bottom: 15px; }
.lp-para.greeting { font-size: 15px; font-weight: 800; color: #3A2D12; }
.lp-verse {
  margin: 20px 0; padding: 16px 18px; border-radius: 13px;
  background: rgba(224,184,78,0.16); border: 1px solid rgba(201,154,46,0.4);
  border-left: 4px solid #C99A2E;
}
.lp-verse-text { font-size: 14.5px; font-weight: 700; color: #5A4A24; line-height: 1.65; letter-spacing: -0.3px; word-break: keep-all; }
.lp-verse-ref { font-size: 12.5px; font-weight: 800; color: #A9821B; margin-top: 9px; }
.lp-closing { font-size: 14.5px; font-weight: 700; color: #3A2D12; line-height: 1.7; margin-top: 20px; white-space: pre-wrap; text-align: right; letter-spacing: -0.3px; }
.lp-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.lp-foot { font-size: 11px; color: #6B7798; text-align: center; margin-top: 18px; line-height: 1.6; word-break: keep-all; }

/* ============================================================
   커뮤니티 (라이트/sky 테마) — 3-서브탭 · 추천 액션 · 추천 시트 · 이달의 랭킹
   ============================================================ */
.cm-subtabs.three .cm-subtab { font-size: 13.5px; }

/* 추천 액션 버튼 (글 상세) */
.pd-action.rec { background: #EAF7E0; border-color: #BFE6A0; color: #3A7A1A; }

/* ---------- 추천(전달) 바텀시트 ---------- */
.rec-scrim {
  position: absolute; inset: 0; z-index: 60;
  background: rgba(12,18,38,0.42);
  display: flex; align-items: flex-end;
}
.rec-sheet {
  width: 100%; max-height: 88%; overflow-y: auto;
  background: var(--surface, #fff);
  border-radius: 24px 24px 0 0;
  padding: 10px 18px 22px;
  animation: recUp .28s cubic-bezier(.2,.9,.3,1);
  box-shadow: 0 -10px 40px rgba(0,0,0,0.2);
}
@keyframes recUp { from { transform: translateY(40px); } to { transform: translateY(0); } }
.rec-grip { width: 40px; height: 4px; border-radius: 999px; background: var(--hairline-2, #CDD8E7); margin: 4px auto 14px; }
.rec-title { font-size: 19px; font-weight: 900; color: var(--text, #14202F); letter-spacing: -0.5px; }
.rec-sub { font-size: 13px; color: var(--text-2, #54627A); margin-top: 4px; letter-spacing: -0.2px; }
.rec-item {
  margin: 14px 0 16px; padding: 14px 15px; border-radius: 14px;
  background: var(--surface-2, #F1F6FD); border: 1px solid var(--hairline, #E2EAF4);
}
.rec-item-kind { display: inline-block; font-size: 10.5px; font-weight: 800; color: #154A78; background: var(--blue-soft, #D2EAFB); padding: 3px 9px; border-radius: 999px; }
.rec-item-text { font-size: 14px; font-weight: 700; color: var(--text, #14202F); line-height: 1.5; margin-top: 9px; letter-spacing: -0.3px; word-break: keep-all; }
.rec-item-ref { font-size: 11.5px; color: var(--text-3, #93A0B2); margin-top: 6px; font-weight: 700; }
.rec-label { font-size: 12.5px; font-weight: 800; color: var(--text-2, #54627A); margin-bottom: 9px; }
.rec-people { display: flex; flex-direction: column; gap: 8px; }
.rec-person {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border-radius: 14px;
  background: var(--surface, #fff); border: 1.5px solid var(--hairline-2, #CDD8E7);
  cursor: pointer; text-align: left; font-family: inherit;
  transition: border-color .13s, background .13s;
}
.rec-person.on { border-color: var(--accent, #58CC02); background: #F0FBE8; }
.rec-ava { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; font-size: 21px; background: var(--surface-2, #F1F6FD); }
.rec-person-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rec-person-name { font-size: 14.5px; font-weight: 800; color: var(--text, #14202F); }
.rec-person-dept { font-size: 11.5px; color: var(--text-3, #93A0B2); }
.rec-check { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 900; background: transparent; }
.rec-person.on .rec-check { background: var(--accent, #58CC02); }
.rec-msg {
  width: 100%; margin: 14px 0 0; padding: 12px 14px;
  border-radius: 13px; border: 1.5px solid var(--hairline-2, #CDD8E7);
  background: var(--surface-2, #F1F6FD); font-family: inherit; font-size: 14px;
  color: var(--text, #14202F); outline: none;
}
.rec-msg:focus { border-color: var(--accent, #58CC02); }
.rec-send {
  width: 100%; height: 52px; margin-top: 16px; border-radius: 16px;
  background: var(--accent, #58CC02); color: #fff; font-family: inherit;
  font-size: 16px; font-weight: 900; border: none; cursor: pointer;
  box-shadow: 0 4px 0 var(--accent-dark, #46A302);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.rec-send:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--accent-dark, #46A302); }
.rec-send.disabled { background: var(--hairline-2, #CDD8E7); box-shadow: none; color: var(--text-3, #93A0B2); pointer-events: none; }
.rec-send-pts { font-size: 12px; background: rgba(255,255,255,0.25); padding: 2px 9px; border-radius: 999px; }
.rec-foot { font-size: 11px; color: var(--text-3, #93A0B2); text-align: center; margin-top: 12px; line-height: 1.5; }

/* 추천 성공 */
.rec-sheet.success { text-align: center; }
.rec-success { padding: 14px 6px 6px; }
.rec-burst { font-size: 56px; animation: recPop .5s cubic-bezier(.2,1.4,.4,1); }
@keyframes recPop { from { transform: scale(0.3); } to { transform: scale(1); } }
.rec-big { font-size: 23px; font-weight: 900; color: var(--text, #14202F); letter-spacing: -0.6px; margin-top: 8px; }
.rec-success-sub { font-size: 14px; color: var(--text-2, #54627A); margin-top: 8px; line-height: 1.6; word-break: keep-all; }
.rec-success-sub b { color: var(--accent-dark, #46A302); }
.rec-award { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; }
.rec-award-plus { font-size: 18px; font-weight: 900; color: #fff; background: linear-gradient(160deg, #FFD24D, #E0A82E); padding: 6px 16px; border-radius: 999px; box-shadow: 0 3px 0 #C2901F; }
.rec-award-total { font-size: 13px; font-weight: 700; color: var(--text-2, #54627A); }
.rec-progress { margin: 18px 8px 0; }
.rec-progress-bar { height: 10px; border-radius: 999px; background: var(--hairline, #E2EAF4); overflow: hidden; }
.rec-progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #FFD24D, #E0A82E); transition: width .6s cubic-bezier(.2,.8,.3,1); }
.rec-progress-label { font-size: 11.5px; color: var(--text-3, #93A0B2); margin-top: 7px; font-weight: 700; }
.rec-done { width: 100%; height: 48px; margin-top: 20px; border-radius: 15px; background: var(--surface-2, #F1F6FD); border: 1.5px solid var(--hairline-2, #CDD8E7); color: var(--text, #14202F); font-family: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }

/* ============================================================
   이달의 랭킹 (라이트/sky)
   ============================================================ */
.rank-content { padding-bottom: 110px !important; }
.rank-hero {
  text-align: center; padding: 14px 16px 16px;
  background: linear-gradient(160deg, #FFF6D8, #FFFDF6);
  border: 1.5px solid #F0CF6A; border-radius: 18px; margin-bottom: 14px;
}
.rank-hero-eyebrow { font-size: 11.5px; font-weight: 800; color: #B07F12; }
.rank-hero-title { font-size: 21px; font-weight: 900; color: #14202F; letter-spacing: -0.6px; margin-top: 4px; }
.rank-hero-sub { font-size: 12.5px; color: #54627A; margin-top: 5px; }

.rank-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.rank-cat {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 11px 4px; border-radius: 14px; cursor: pointer; font-family: inherit;
  background: var(--surface, #fff); border: 1.5px solid var(--hairline-2, #CDD8E7);
  transition: all .13s;
}
.rank-cat.on { border-color: var(--gold, #FFC529); background: #FFF8E2; box-shadow: 0 3px 0 #F0CF6A; }
.rank-cat-ic { font-size: 20px; }
.rank-cat-label { font-size: 12px; font-weight: 800; color: var(--text, #14202F); }
.rank-cat-desc { text-align: center; font-size: 12px; color: var(--text-2, #54627A); margin: 12px 0 4px; font-weight: 600; }

/* podium */
.rank-podium { display: flex; align-items: flex-end; justify-content: center; gap: 8px; margin: 8px 0 18px; }
.podium-col { flex: 1; max-width: 100px; display: flex; flex-direction: column; align-items: center; }
.podium-ava { position: relative; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; background: var(--surface-2, #F1F6FD); border: 2px solid var(--hairline-2, #CDD8E7); }
.podium-col.p1 .podium-ava { width: 62px; height: 62px; font-size: 32px; border-color: var(--gold, #FFC529); box-shadow: 0 0 0 4px #FFF0BF; }
.podium-medal { position: absolute; bottom: -6px; right: -8px; font-size: 18px; }
.podium-name { font-size: 13px; font-weight: 800; color: var(--text, #14202F); margin-top: 9px; white-space: nowrap; }
.podium-value { font-size: 11.5px; font-weight: 800; color: var(--accent-dark, #46A302); margin-top: 2px; white-space: nowrap; }
.podium-bar {
  width: 100%; margin-top: 10px; border-radius: 10px 10px 0 0;
  display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 16px;
  background: linear-gradient(180deg, #9DB6D8, #6F93BC);
}
.podium-col.p1 .podium-bar { background: linear-gradient(180deg, #FFD24D, #E0A82E); }
.podium-col.p2 .podium-bar { background: linear-gradient(180deg, #C2CEDE, #9AAAC0); }
.podium-col.p3 .podium-bar { background: linear-gradient(180deg, #E6C09A, #CC9A6E); }

.rank-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 22px; }
.rank-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 14px;
  background: var(--surface, #fff); border: 1px solid var(--hairline, #E2EAF4);
}
.rank-row.top { border-color: #F0CF6A; background: #FFFDF4; }
.rank-num { width: 22px; text-align: center; font-size: 14px; font-weight: 900; color: var(--text-3, #93A0B2); }
.rank-row.top .rank-num { color: #B07F12; }
.rank-ava { width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; font-size: 19px; background: var(--surface-2, #F1F6FD); }
.rank-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rank-name { font-size: 14.5px; font-weight: 800; color: var(--text, #14202F); }
.rank-dept { font-size: 11.5px; color: var(--text-3, #93A0B2); }
.rank-value { font-size: 16px; font-weight: 900; color: var(--text, #14202F); }
.rank-value i { font-size: 11px; font-weight: 700; color: var(--text-3, #93A0B2); font-style: normal; margin-left: 1px; }

/* stage roster */
.stage-roster { margin-top: 6px; }
.stage-roster-title { font-size: 16px; font-weight: 900; color: var(--text, #14202F); letter-spacing: -0.4px; }
.stage-roster-sub { font-size: 12px; color: var(--text-2, #54627A); margin: 4px 0 14px; line-height: 1.5; }
.stage-group { padding: 13px 14px; border-radius: 15px; border: 1.5px solid var(--hairline-2, #CDD8E7); background: var(--surface, #fff); margin-bottom: 9px; }
.stage-group.lv5 { border-color: #F0CF6A; background: linear-gradient(150deg, #FFF8E2, #FFFDF6); }
.stage-group.lv4 { border-color: #D8C7F0; background: #FAF7FE; }
.stage-group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.stage-group-emoji { font-size: 19px; }
.stage-group-name { font-size: 14px; font-weight: 900; color: var(--text, #14202F); }
.stage-group-count { margin-left: auto; font-size: 11.5px; font-weight: 800; color: var(--text-3, #93A0B2); background: var(--surface-2, #F1F6FD); padding: 2px 9px; border-radius: 999px; }
.stage-group-members { display: flex; flex-wrap: wrap; gap: 6px; }
.stage-member-chip { font-size: 12.5px; font-weight: 700; color: var(--text-2, #54627A); background: var(--surface-2, #F1F6FD); border: 1px solid var(--hairline, #E2EAF4); padding: 4px 11px; border-radius: 999px; }
.stage-group.lv5 .stage-member-chip { background: #FFF0BF; border-color: #F0CF6A; color: #8A6A12; }