/* ============================================================
   MINDD Village — 와이브레인(Ybrain) 멘탈케어 플랫폼
   디자인 시스템 v2 — 순백(Pure White) + 포인트 블랙(Point Black)
   미니멀 / 넉넉한 여백 / 실제 사진 카드 중심 / 신뢰
   ============================================================ */
:root {
  /* ── 잉크(포인트 블랙) ─────────────── */
  --ink:#0a0a0b;          /* 메인 포인트 블랙 (제목·강조·주요 버튼) */
  --ink-2:#1d1d1f;        /* 본문 딥 */
  --muted:#5b5f66;        /* 서브 텍스트 */
  --subtle:#8e939b;       /* 보조 메타(시간·조회) */
  --faint:#b8bcc2;        /* 아주 옅은 텍스트 */
  /* ── 면/배경 (순백) ─────────────────── */
  --bg:#ffffff;           /* 앱 배경 — 순백 */
  --bg-soft:#f6f6f7;      /* 아주 옅은 뉴트럴 필 */
  --bg-soft2:#efeff1;     /* 살짝 진한 필 */
  --card:#ffffff;
  --line:#ededef;         /* 헤어라인 */
  --line-2:#e2e2e5;       /* 또렷한 헤어라인 */
  --pad:20px;
  /* ── 포인트 (블랙 중심, 컬러 최소화) ── */
  --accent:#0a0a0b;       /* = ink, 주요 CTA */
  --accent-soft:#f1f1f2;
  /* 기능색 (아주 절제해서만 사용) */
  --live:#12b76a;         /* 진료중/온라인 도트 */
  --warn:#e8a13a;         /* 별점 */
  --like:#ef4444;         /* 공감 */
  --danger:#d92d20;
  /* ── 비비드 포인트 (그라데이션 — 일부 강조 전용) ── */
  --pt-1:#6d5efc;         /* 바이올렛 */
  --pt-2:#4f8bff;         /* 블루 */
  --pt-3:#00c2b8;         /* 틸 */
  --grad-vivid:linear-gradient(120deg,#6d5efc 0%,#4f8bff 52%,#00c2b8 100%);
  --grad-vivid-soft:linear-gradient(120deg,#efeaff 0%,#e6f0ff 55%,#e0faf7 100%);
}

/* ── 비비드 포인트 유틸 ─────────────────── */
.grad-vivid { background:var(--grad-vivid); }
.grad-text {
  background:var(--grad-vivid);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.grad-ring { position:relative; }
.grad-ring::before {
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background:var(--grad-vivid);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.eyebrow-grad { font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.dot-grad { background:var(--grad-vivid); }
.btn-grad { background:var(--grad-vivid); color:#fff; border:none; }
.chip.on.chip-grad { background:var(--grad-vivid); border-color:transparent; }
.dots i.on.dot-grad { background:var(--grad-vivid); }

* { -webkit-tap-highlight-color: transparent; box-sizing:border-box; }
html, body { background:var(--bg); color:var(--ink); overflow-x:clip; margin:0; }
html { height:auto; }
body {
  min-height:100%;
  font-family:'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,system-ui,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  letter-spacing:-0.014em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
}
.no-scrollbar { overscroll-behavior-x:contain; scrollbar-width:none; -ms-overflow-style:none; }
.no-scrollbar::-webkit-scrollbar { display:none; }
img { display:block; }

/* ===== 앱 셸 (모바일 폭 고정, 중앙 정렬) ===== */
#app-shell {
  max-width:480px; margin:0 auto; min-height:100vh;
  background:var(--bg); position:relative;
  box-shadow:0 0 0 1px rgba(10,10,11,.04);
}
@media (min-width:481px){ body { background:#e9e9eb; } }

/* ===== 스플래시 ===== */
#splash {
  position:fixed; inset:0; z-index:9999; background:#ffffff;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .5s ease, visibility .5s ease;
}
#splash.hide { opacity:0; visibility:hidden; pointer-events:none; }
.splash-inner { display:flex; flex-direction:column; align-items:center; gap:14px; }
.splash-logo { animation:splashLogo .9s cubic-bezier(.22,1,.36,1) both; }
.splash-name { font-size:23px; font-weight:800; letter-spacing:-0.045em; color:var(--ink); opacity:0; animation:splashName .5s ease .35s both; }
.splash-tag { font-size:13px; font-weight:600; color:var(--subtle); opacity:0; animation:splashName .5s ease .5s both; }
@keyframes splashLogo { 0%{opacity:0;transform:scale(.7) translateY(6px)} 60%{opacity:1;transform:scale(1.05)} 100%{opacity:1;transform:scale(1)} }
@keyframes splashName { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

/* ===== 타이포 시스템 ===== */
.page-head { padding:28px 20px 16px; }
.page-eyebrow { font-size:12px; font-weight:800; letter-spacing:0.02em; text-transform:uppercase;
  background:var(--grad-vivid); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; }
.page-title { font-size:28px; font-weight:800; line-height:1.22; letter-spacing:-0.045em; color:var(--ink); }
.page-sub { font-size:14.5px; line-height:1.6; color:var(--muted); margin-top:9px; letter-spacing:-0.01em; font-weight:500; }
.sec-title { font-size:19px; font-weight:800; letter-spacing:-0.04em; color:var(--ink); }
.sec-link { font-size:13px; font-weight:700; color:var(--ink); display:inline-flex; align-items:center; gap:4px; }
.px-page { padding-left:20px; padding-right:20px; }
.eyebrow { font-size:11.5px; font-weight:800; letter-spacing:0.04em; text-transform:uppercase; color:var(--subtle); }

/* ===== 라운드 통일 ===== */
.rounded-xl  { border-radius:14px !important; }
.rounded-2xl { border-radius:18px !important; }
.rounded-3xl { border-radius:24px !important; }

/* 흰 카드 + 헤어라인 (그림자 없음, 완전 플랫) */
.card-flat { background:var(--card); border:1px solid var(--line); border-radius:18px; }

/* ===== 버튼 ===== */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:700; letter-spacing:-0.015em; border-radius:14px; transition:transform .12s ease, background .16s ease, opacity .16s; cursor:pointer; border:none; }
.btn:active { transform:scale(.975); }
.btn-primary { background:var(--ink); color:#fff; }
.btn-primary:active { background:#26262a; }
.btn-line { background:#fff; color:var(--ink); border:1px solid var(--line-2); }
.btn-soft { background:var(--bg-soft); color:var(--ink); }
.btn-ghost { background:transparent; color:var(--muted); }

/* ===== 하단 탭바 ===== */
#tabbar {
  position:sticky; bottom:0; z-index:60;
  background:rgba(255,255,255,.94); backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid var(--line);
  display:flex; padding:7px 4px calc(7px + env(safe-area-inset-bottom));
}
.tab-item { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 2px; color:var(--faint); cursor:pointer; transition:color .15s ease; }
.tab-item .ti-ic { font-size:19px; line-height:1; }
.tab-item .ti-lb { font-size:10.5px; font-weight:700; letter-spacing:-0.02em; }
.tab-item.active { color:var(--ink); }

/* ===== 플로팅 액션 버튼 (마음 적기) — 하단 탭바 위 우측 고정 ===== */
.compose-fab {
  position:fixed;
  /* 앱 셸(최대 480px) 중앙 정렬 기준, 셸 우측 안쪽 20px */
  left:50%;
  transform:translateX(calc(240px - 100% - 20px));
  /* 탭바(약 65px) 위 16px + safe-area */
  bottom:calc(81px + env(safe-area-inset-bottom));
  transition:transform .12s ease, opacity .16s ease;
}
.compose-fab:active { transform:translateX(calc(240px - 100% - 20px)) scale(.96); }
/* 앱 셸보다 좁은 화면: 화면 우측 20px 기준 */
@media (max-width:480px){
  .compose-fab { left:auto; right:20px; transform:none; }
  .compose-fab:active { transform:scale(.96); }
}

/* ===== 칩 / 배지 ===== */
.chip { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:700; padding:7px 13px; border-radius:999px; background:#fff; color:var(--muted); white-space:nowrap; cursor:pointer; transition:all .15s ease; border:1px solid var(--line-2); }
.chip.on { background:var(--ink); color:#fff; border-color:var(--ink); }
.chip-soft { background:var(--bg-soft); color:var(--ink-2); border:none; }
.tag { display:inline-flex; align-items:center; font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:7px; background:var(--bg-soft); color:var(--muted); }
.badge-verify { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:800; padding:3px 8px; border-radius:7px; background:var(--ink); color:#fff; }
.badge-line { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; padding:3px 8px; border-radius:7px; background:#fff; color:var(--ink); border:1px solid var(--line-2); }

/* 라이브 도트 */
.dot-live { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--live); }

/* ===== 이미지 카드 시스템 (대형·여백) ===== */
.img-cover { width:100%; height:100%; object-fit:cover; display:block; }
.ratio { position:relative; width:100%; overflow:hidden; background:var(--bg-soft); }
.ratio > img, .ratio > .ratio-in { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.r-32 { aspect-ratio:3/2; }
.r-11 { aspect-ratio:1/1; }
.r-43 { aspect-ratio:4/3; }
.r-169{ aspect-ratio:16/9; }
.r-45 { aspect-ratio:4/5; }
.r-34 { aspect-ratio:3/4; }
.r-21 { aspect-ratio:2/1; }
/* 히어로 고정 높이 (뷰포트 비례, 과도하게 크지 않게) */
.hero-compact { height:clamp(300px,52vh,420px); }
/* 이미지 위 어둠 오버레이 (텍스트 대비) */
.ov-b { position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,10,11,0) 32%,rgba(10,10,11,.72) 100%); }
.ov-b-strong { position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,10,11,.15) 0%,rgba(10,10,11,.30) 45%,rgba(10,10,11,.82) 100%); }

/* 배너 도트 인디케이터 */
.dots { display:flex; gap:5px; justify-content:center; }
.dots i { width:6px; height:6px; border-radius:99px; background:var(--line-2); transition:all .25s; }
.dots i.on { width:18px; background:var(--ink); }

/* ===== 텍스트 클램프 ===== */
.line-clamp-1 { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* ===== 애니메이션 (은은하게만) ===== */
@keyframes fadeUp { from{opacity:0;transform:translateY(9px)} to{opacity:1;transform:translateY(0)} }
.fade-up { animation:fadeUp .4s cubic-bezier(.22,1,.36,1) both; }
.view-enter { animation:fadeUp .3s cubic-bezier(.22,1,.36,1) both; }

/* 바텀시트 */
#sheet-scrim { position:fixed; inset:0; z-index:200; background:rgba(10,10,11,.45); opacity:0; transition:opacity .28s ease; }
#sheet-scrim.on { opacity:1; }
.sheet {
  position:fixed; left:50%; transform:translateX(-50%) translateY(100%); bottom:0; z-index:201;
  width:100%; max-width:480px; background:#fff; border-radius:22px 22px 0 0;
  transition:transform .34s cubic-bezier(.22,1,.36,1); max-height:90vh; overflow-y:auto;
}
.sheet.on { transform:translateX(-50%) translateY(0); }
.sheet-grip { width:38px; height:4px; border-radius:99px; background:#dcdce0; margin:10px auto 4px; }

/* 진행 바 (블랙) */
.progress-track { height:6px; border-radius:99px; background:var(--bg-soft2); overflow:hidden; }
.progress-fill { height:100%; border-radius:99px; background:var(--grad-vivid); transition:width .35s cubic-bezier(.22,1,.36,1); }

/* 통계 숫자 강조 */
.stat-num { font-variant-numeric:tabular-nums; font-weight:800; letter-spacing:-0.05em; }

/* 아바타 링 */
.avatar { border-radius:50%; object-fit:cover; background:var(--bg-soft); }