/* ══════════════════════════════════════════════════
   BeInside — Base
   변수, 리셋, 레이아웃, 헤더, 히어로, 카드, 프로필, 푸터
══════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   BEINSIDE 4.0 — Calm · Warm · Safe
   "편안하고 따뜻한, 판단받지 않는 공간"
═══════════════════════════════════════════════ */

/* ── 8px 기반 간격 시스템 ── */
/* --sp-1:8px  --sp-2:16px  --sp-3:24px  --sp-4:32px  --sp-6:48px  --sp-8:64px */

/* ── 시맨틱 버튼 리셋 — div role="button"에서 전환된 요소 ── */
button.sit-card,
button.pill,
button.theme-toggle,
button.emergency-quiet{
  border:none;font:inherit;color:inherit;
  background:none;padding:0;margin:0;
  text-align:left;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}
button.logo{
  border:none;
  background:none;padding:0;margin:0;
  text-align:left;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}

:root{
  /* ── Calm Design Tokens ── */
  --calm-bg-deep:#F8F6F3;
  --calm-bg-surface:#FFFFFF;
  --calm-bg-elevated:#FDFBF9;
  --calm-warm:#D4A07A;
  --calm-warm-soft:#E8C8A8;
  --calm-text-1:#3A3A3A;
  --calm-text-2:rgba(58,58,58,.58);
  --calm-text-3:rgba(58,58,58,.35);
  --calm-border:rgba(0,0,0,.05);
  --calm-shadow:0 1px 8px rgba(0,0,0,.04);
  --calm-shadow-hover:0 4px 20px rgba(0,0,0,.07);
  --calm-glow:0 0 24px rgba(123,174,203,.06);
  --calm-r:20px;
  --calm-ease:cubic-bezier(0.25,0.1,0.25,1.0);
  --calm-ease-out:cubic-bezier(0.22,1,0.36,1);
  --calm-dur:400ms;
  --calm-dur-slow:500ms;

  /* ── 배경 & 서피스 ── */
  --cream:#F7F3EE;           /* Warm Neutral Beige — 기본 배경 */
  --warm:#EEE9E3;            /* 약간 깊은 베이지 */
  --white:#FFFFFF;           /* 카드·콘텐츠 박스 */
  --section-alt:#F2EEE8;

  /* ── Primary: Soft Calm Blue ── */
  --peach:#7BAECB;           /* 인터랙티브 블루 */
  --peach-l:#A8CADF;         /* 밝은 블루 (hover) */
  --peach-p:#DCEBFF;         /* 페일 블루 (버튼 bg, 하이라이트) */
  --peach-d:#4A8CAA;         /* 다크 블루 (텍스트 강조) */
  --peach-glow:rgba(123,174,203,.18);

  /* ── Alias ── */
  --sage:var(--peach);
  --primary:#7BAECB;
  --primary-d:#4A8CAA;
  --primary-p:#DCEBFF;

  /* ── Accent: Healing Green ── */
  --amber:#6BA885;           /* Soft Healing Green (인터랙티브) */
  --rust:#3D7A5C;            /* 다크 힐링 그린 */

  /* ── Muted tertiary ── */
  --plum:#8A7A6A;
  --plum-p:#EFE8E0;

  /* ── Sky ── */
  --sky:#6CA0C8;

  /* ── 텍스트 ── */
  --ink:#3A3A3A;             /* Primary Text */
  --ink-m:#6B6B6B;           /* Secondary Text */
  --ink-l:#9A9A9A;           /* Muted Text */

  /* ── 라인 ── */
  --line:rgba(123,174,203,.15);

  /* ── 서피스 (글래스모피즘) ── */
  --glass-bg:rgba(255,255,255,0.82);
  --glass-border:rgba(0,0,0,0.04);
  --glass-shadow:0 1px 4px rgba(0,0,0,.03), inset 0 1px 0 rgba(255,255,255,.8);

  /* 타임라인 너비 */
  --tl-w:200px;

  /* ── 나 자신 영역 (Healing Green) ── */
  --lavender:#6BA885;
  --lavender-d:#3D7A5C;
  --lavender-p:#DFF3E9;
  --lavender-bg:#EBF7F0;

  /* ── 번아웃 (앰버 — 따뜻한 경고) ── */
  --burnout:#C0892A;
  --burnout-d:#8A6018;
  --burnout-p:#FBF0D8;

  /* ── 관계 (Soft Terracotta) ── */
  --relation:#B05A42;
  --relation-d:#8A3E28;
  --relation-p:#F5E4DC;

  /* ── 전환기 (Soft Teal) ── */
  --transition-c:#4A8888;
  --transition-d:#2E6060;
  --transition-p:#DFF0EE;

  /* ── 연령 단계 색상 (pill color dots) ── */
  --age-newborn:#A8D5BA;
  --age-3m:#7FC49A;
  --age-6m:#5BBF82;
  --age-12m:#3A8A55;
  --age-24m:#2A6A42;
  --age-preschool:#5C7A6B;
  --age-school:#C8924A;
  --age-teen:#A07840;
  --age-young:#7A5A30;
  --age-adult:#9E4F2A;
  --age-middle:#6B4E7A;
  --age-senior:#3A6A9A;
  --age-late-senior:#2A3A5A;

  /* ── 긴급 버튼 색상 ── */
  --emer-119:#C8302A;
  --emer-112:#A02020;
  --emer-109:#6A3A9A;
  --emer-1388:#2A7A4A;
  --emer-1366:#C84A8A;
  --emer-1577:#2A5A9A;

  /* ── 의학적 면책 ── */
  --disclaimer-bg:#F3F7FF;
  --disclaimer-border:#D1E1FF;
  --disclaimer-ink:#304880;

  /* ── 긴급 배너 ── */
  --emer-bg:#FFF0F0;
  --emer-bg-deep:#FFE8E8;
  --emer-border:rgba(200,60,60,.25);

  /* ── 상황별 카드 색상 ── */
  --sit-rose:#E09090;
  --sit-rose-bg:#FFF5F3;
  --sit-rose-active:#FFEBEA;
  --sit-rose-ink:#A03030;
  --sit-blue:#90A8D0;
  --sit-blue-bg:#F3F6FF;
  --sit-blue-active:#E8EEFF;
  --sit-blue-ink:#304880;
  --sit-gold:#D4A054;
  --sit-gold-bg:#FEF6E4;
  --sit-gold-active:#FEF0D0;
  --sit-gold-ink:#7A5010;
  --sit-plum:#B090C0;
  --sit-plum-bg:#F6F0FA;
  --sit-plum-active:#EDE0F8;
  --sit-plum-ink:#503068;

  /* ── 시맨틱 태그 색상 ── */
  --tag-rose:rgba(200,80,80,.11);
  --tag-rose-ink:#A02828;
  --tag-blue:rgba(60,100,200,.11);
  --tag-blue-ink:#2848A8;
  --tag-green:rgba(60,140,90,.11);
  --tag-green-ink:#226B38;
  --tag-gold:rgba(200,150,50,.11);
  --tag-gold-ink:#7A5010;

  /* ── 청소년 테마 ── */
  --teen-bg:#1A1F3A;
  --teen-bg-deep:#12172E;
  --teen-card-bg:linear-gradient(135deg,#F0F2FF,#EAF0FF);
  --teen-accent:#5B7CFA;

  /* ── 긴급 버튼 그라데이션 ── */
  --emer-red-grad:linear-gradient(135deg,#E84040,#C82020);
  --emer-purple-grad:linear-gradient(135deg,#7A40C8,#5A28A0);
  --emer-green-grad:linear-gradient(135deg,#2A9060,#1A7050);
  --emer-blue-grad:linear-gradient(135deg,#2060B8,#1848A0);

  /* ── SP 카드 불릿 ── */
  --sp-bullet-blue:#4068C8;
  --sp-bullet-gold:#A07020;
  --sp-bullet-green:#3A8A50;

  /* ── 정신건강 카드 인라인 ── */
  --mental-risk-bg:rgba(200,80,110,.08);
  --mental-risk-ink:#A03050;
  --mental-label:#6A3A90;
  --mental-bullet:#8A5AB4;
  --mental-tip:#3A9A60;

  /* ── 응급처치 카드 인라인 ── */
  --fa-risk-bg:rgba(200,60,60,.08);
  --fa-risk-ink:#A02020;
  --fa-tip-bg:rgba(60,140,90,.07);
  --fa-tip-ink:#2A6A40;

  /* ── 청소년 카드 인라인 ── */
  --teen-text:#8090C0;

  /* ── SOS 버튼 ── */
  --sos:#2A6A60;
  --sos-shadow:rgba(42,106,96,0.3);

  /* ── 8px 간격 시스템 ── */
  --sp-1:8px;
  --sp-2:16px;
  --sp-3:24px;
  --sp-4:32px;
  --sp-6:48px;
  --sp-8:64px;

  /* ── Semantic 표면/텍스트 변수 ── */
  --bg-primary:#F7F3EE;
  --bg-elevated:#FFFFFF;
  --bg-sunken:#EEE9E3;
  --text-primary:#3A3A3A;
  --text-secondary:#6B6B6B;
  --text-tertiary:#9A9A9A;

  /* ── 푸터 ── */
  --footer-bg:#2C2C2C;
  --footer-bg-end:#3A3A3A;

  /* ── 체크 결과 ── */
  --result-high:#C05050;
  --result-high-ink:#7A1818;
  --result-mid:#C89040;
  --result-mid-ink:#7A5010;
  --result-low:#3A8A50;
  --result-low-ink:#1E5A30;

  /* ── 정신건강 ── */
  --mental-label:#6A3A90;
  --mental-bullet:#8A5AB4;
  --mental-tip:#3A9A60;
  --mental-risk-bg:rgba(200,80,110,.08);
  --mental-risk-ink:#A03050;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Noto Sans KR',sans-serif;
  background:var(--cream);
  min-height:100vh;
  color:var(--ink);
  line-height:1.72;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* ── 스크롤 진행 바 — 미니멀 ── */
#scroll-bar{
  position:fixed;top:0;left:0;height:2px;width:0%;
  background:var(--primary);
  opacity:.4;
  z-index:9999;transition:width .12s linear;border-radius:0 1px 1px 0;
}
/* grain 제거 — clean minimal */

/* ── HEADER — Calm Glassmorphism ── */
header{
  position:sticky;top:0;z-index:200;
  background:rgba(247,243,238,.85);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid rgba(0,0,0,0.04);
  height:56px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 16px;
  transition:background var(--calm-dur) var(--calm-ease);
}
button.logo,
.logo{
  font-family:'Gowun Batang',serif;font-size:18px;font-weight:700;
  color:var(--ink);
  display:flex;align-items:center;gap:5px;
  letter-spacing:-.3px;
  justify-content:center;
  white-space:nowrap;
  transition:opacity var(--calm-dur) var(--calm-ease);
}
.logo:hover{opacity:.7;}
.logo-dot{width:7px;height:7px;background:var(--amber);border-radius:50%;}
nav{display:flex;gap:4px;justify-content:flex-end;}
nav button{
  background:none;border:none;
  font-family:'Noto Sans KR',sans-serif;font-size:13px;
  color:var(--ink-m);cursor:pointer;
  padding:6px 16px;border-radius:24px;
  transition:all var(--calm-dur) var(--calm-ease);font-weight:600;
  letter-spacing:-.2px;
}
nav button:hover:not(.on){background:rgba(123,174,203,.08);color:var(--peach-d);}
nav button.on{
  background:var(--peach-d);color:#fff;
  box-shadow:0 2px 8px rgba(123,174,203,.20);
}

/* ── PAGE LAYOUT ── */
.page-wrap{display:flex;align-items:flex-start;position:relative;}
.main-col{flex:1;min-width:0;}

/* ── RIGHT TIMELINE SIDEBAR ── */
.tl-sidebar{
  width:var(--tl-w);flex-shrink:0;
  position:sticky;top:56px;
  height:calc(100vh - 64px);
  overflow-y:auto;
  background:rgba(255,250,245,.96);
  backdrop-filter:blur(16px);
  border-left:1px solid rgba(123,174,203,.09);
  padding:24px 0 40px;
  z-index:100;
  scrollbar-width:thin;
  scrollbar-color:rgba(123,174,203,.3) transparent;
}
.tl-sidebar::-webkit-scrollbar{width:3px;}
.tl-sidebar::-webkit-scrollbar-thumb{background:var(--peach-l);border-radius:2px;}

.tl-title{
  font-size:10px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-l);
  padding:0 16px 14px;
  border-bottom:1px solid rgba(123,174,203,.12);
  margin-bottom:6px;
  font-family:'Noto Sans KR',sans-serif;
}

.tl-track{position:relative;padding:8px 0;}
.tl-track::before{
  content:'';position:absolute;
  left:28px;top:0;bottom:0;width:2px;
  background:linear-gradient(to bottom,
    #F5C8B0 0%,#E8896A 28%,#D4A054 52%,#D4849A 72%,#B090B4 87%,#8AAAC4 100%);
}

.tnode{
  display:flex;align-items:center;gap:9px;
  padding:7px 14px 7px 16px;
  cursor:pointer;position:relative;
  transition:all .2s cubic-bezier(.4,0,.2,1);
  border-radius:8px;margin:1px 6px;
}
.tnode:hover{background:rgba(123,174,203,.08);}
.tnode.on{background:rgba(123,174,203,.12);}

.tdot{
  width:14px;height:14px;border-radius:50%;
  border:3px solid var(--cream);
  box-shadow:0 0 0 2px var(--peach-l);
  background:var(--cream);
  flex-shrink:0;position:relative;z-index:1;
  transition:all .2s;margin-left:3px;
}
.tnode:hover .tdot,.tnode.on .tdot{
  background:var(--peach);
  box-shadow:0 0 0 2px var(--peach);
  transform:scale(1.2);
  border-color:var(--white);
}

.tlbl{font-size:11.5px;font-weight:700;color:var(--ink-l);line-height:1.3;transition:color .2s;}
.tlbl .sub{display:block;font-size:10px;font-weight:400;color:var(--ink-l);margin-top:1px;opacity:.75;}
.tnode:hover .tlbl,.tnode.on .tlbl{color:var(--peach-d);}
.tnode.on .tlbl .sub{color:var(--peach);}

/* ── HERO — Calm breathing space ── */
.hero{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:var(--sp-6) var(--sp-6) var(--sp-4);
  position:relative;overflow:hidden;
  border-bottom:none;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%,rgba(123,174,203,.06) 0%,transparent 70%);
  pointer-events:none;
}
.hero-glow{display:none;}
.badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(123,174,203,.06);
  color:var(--peach-d);
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 12px;border-radius:20px;
  border:1px solid rgba(123,174,203,.12);
  margin-bottom:14px;
  animation:up .6s .05s var(--calm-ease-out) both;
}
.hero h1{
  font-family:'Gowun Batang',serif;
  font-size:clamp(20px,2.2vw,30px);font-weight:700;
  line-height:1.3;letter-spacing:-.3px;
  max-width:480px;
  margin-bottom:var(--sp-2);
  animation:up .6s .1s var(--calm-ease-out) both;
  word-break:keep-all;
}
.hero h1 .hl{color:var(--peach-d);position:relative;display:inline-block;}
.hero h1 .hl::after{
  content:'';position:absolute;bottom:3px;left:0;right:0;
  height:1.5px;
  background:var(--peach);
  border-radius:1px;opacity:.35;
}
.hero p{font-size:13.5px;color:var(--ink-m);max-width:420px;line-height:1.72;margin-bottom:24px;animation:up .6s .18s var(--calm-ease-out) both;word-break:keep-all;font-weight:400;}

/* ── SEARCH BOX ── */
.sbox{width:100%;max-width:560px;animation:up .48s .20s cubic-bezier(.22,1,.36,1) both;}
.slabel{display:none;}
.srow{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;}
.mtoggle{
  display:flex;background:rgba(123,174,203,.07);
  border-radius:12px;padding:2px;
  border:1px solid rgba(123,174,203,.13);
}
.mtoggle button{
  background:none;border:none;
  font-family:'Noto Sans KR',sans-serif;font-size:11.5px;font-weight:700;
  color:var(--ink-m);cursor:pointer;
  padding:10px 16px;border-radius:10px;
  transition:all .2s cubic-bezier(.4,0,.2,1);line-height:1.4;
  letter-spacing:-.2px;
}
.mtoggle button.on{background:var(--white);color:var(--peach-d);box-shadow:0 2px 8px rgba(123,174,203,.18);}
.mtoggle button small{display:block;font-size:10px;font-weight:400;opacity:.55;margin-top:1px;}
.ninput{
  display:flex;align-items:center;gap:6px;
  background:var(--white);
  border:1.5px solid rgba(123,174,203,.20);
  border-radius:12px;padding:9px 16px;
  transition:all .2s cubic-bezier(.4,0,.2,1);
  box-shadow:0 1px 4px rgba(40,40,40,.04);
}
.ninput:focus-within{
  border-color:var(--peach);
  box-shadow:0 0 0 3px rgba(123,174,203,.14), 0 2px 8px rgba(40,40,40,.06);
}
.ninput input{width:72px;border:none;outline:none;font-family:'Gowun Batang',serif;font-size:26px;font-weight:700;color:var(--ink);text-align:center;background:transparent;}
.ninput span{font-size:13px;color:var(--ink-m);font-weight:600;}
.gobtn{
  background:var(--peach-d);
  color:#fff;border:none;border-radius:12px;
  font-family:'Noto Sans KR',sans-serif;font-size:13px;font-weight:700;
  padding:12px 22px;min-height:44px;cursor:pointer;
  transition:all var(--calm-dur) var(--calm-ease);
  box-shadow:0 2px 8px rgba(123,174,203,.18);
  letter-spacing:-.2px;
  white-space:nowrap;
}
.gobtn:hover{
  background:var(--peach);
  transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(123,174,203,.25);
}
.hint{font-size:11.5px;color:var(--ink-l);margin-top:6px;text-align:center;transition:opacity .3s;}
.hint b{background:var(--peach-p);color:var(--peach-d);padding:2px 8px;border-radius:8px;font-size:11px;}

/* ── QUICK PILLS ── */
/* ── 생애 여정 시기 선택 ── */
.life-journey{
  padding:28px 24px 20px;
}
.life-journey-intro{
  font-family:'Gowun Batang',serif;
  font-size:15px;
  color:var(--ink-m);
  text-align:center;
  margin:0 0 24px;
  line-height:1.6;
  letter-spacing:-.2px;
}
.life-stage{
  margin-bottom:20px;
}
.life-stage-label{
  font-size:12px;
  font-weight:600;
  color:var(--ink-l);
  letter-spacing:.04em;
  margin-bottom:10px;
  padding-left:4px;
}
.life-stage-pills{
  display:flex;gap:8px;
  flex-wrap:wrap;
}

/* ── 기본 pill ── */
.pills{
  display:flex;gap:10px;
  padding:20px 24px;
  background:var(--section-alt);
  flex-wrap:wrap;
  justify-content:center;
}
.pill{
  background:none;
  border:none;
  border-radius:0;
  padding:10px 6px;
  font-size:14px;font-weight:500;color:var(--ink);
  cursor:pointer;
  transition:all .25s var(--calm-ease);
  display:flex;align-items:center;gap:8px;
  font-family:'Noto Sans KR',sans-serif;
  letter-spacing:-.2px;
  white-space:nowrap;
  min-height:44px;
  position:relative;
}
.pill:hover,.pill:focus-visible{
  color:var(--peach-d);
}
.pill:active{
  opacity:.7;
}

/* ── 생애 단계별 텍스트 색상 ── */
.pill--baby{ color:var(--amber); }
.pill--baby:hover{ color:var(--rust); }
.pill--child{ color:#B8864A; }
.pill--child:hover{ color:#8A6020; }
.pill--adult{ color:var(--peach); }
.pill--adult:hover{ color:var(--peach-d); }
.pill--senior{ color:#8A6A9A; }
.pill--senior:hover{ color:#6B4E7A; }

/* ── 색상 도트 ── */
.cd{width:10px;height:10px;border-radius:50%;flex-shrink:0;box-shadow:0 0 6px currentColor;}

/* ── 의학적 면책 조항 ── */
.medical-disclaimer{
  margin:0 24px 16px;
  background:var(--disclaimer-bg);
  border:1px solid var(--disclaimer-border);
  border-radius:14px;
  padding:12px 16px;
  font-size:12px;
  color:var(--disclaimer-ink);
  line-height:1.6;
}

/* ── RESULT ── */
#result{padding:0 24px 60px;max-width:720px;margin:0 auto;display:none;}
#result.on{display:block;animation:up .4s ease both;}
.rhead{
  border-radius:18px;padding:24px 30px;
  color:var(--white);
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  margin-bottom:20px;position:relative;overflow:hidden;
  box-shadow:0 8px 32px rgba(40,40,40,.12);
}
.rhead::before{content:'';position:absolute;right:-40px;top:-40px;width:220px;height:220px;background:rgba(255,255,255,.08);border-radius:50%;}
.rhead::after{content:'';position:absolute;right:60px;bottom:-50px;width:150px;height:150px;background:rgba(255,255,255,.05);border-radius:50%;}
.r-age{font-family:'Gowun Batang',serif;font-size:clamp(36px,8vw,56px);font-weight:700;line-height:1;margin-bottom:8px;letter-spacing:-.5px;}
.r-age sub{font-size:clamp(13px,2.5vw,16px);font-family:'Noto Sans KR',sans-serif;font-weight:400;opacity:.75;vertical-align:baseline;}
.r-stg{font-size:13px;font-weight:700;letter-spacing:.06em;opacity:.8;}
.r-qt{font-family:'Gowun Batang',serif;font-size:15px;line-height:1.8;opacity:.9;max-width:340px;text-align:right;font-style:italic;position:relative;z-index:1;}

/* ── CARD GRID ── */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);}
.card{
  background:var(--white);
  border-radius:16px;padding:var(--sp-3);
  border:1px solid var(--calm-border);
  transition:transform var(--calm-dur) var(--calm-ease),
             box-shadow var(--calm-dur) var(--calm-ease),
             border-color var(--calm-dur) var(--calm-ease);
  box-shadow:var(--calm-shadow);
  position:relative;
  border-top:2px solid transparent;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:var(--calm-shadow-hover);
  border-top-color:rgba(123,174,203,.30);
}
.card.full{grid-column:span 2;}

/* card color variants */
.card.cbg-a{background:linear-gradient(145deg,#FFFAF2,#FFF2E4);border-color:rgba(200,144,64,.10);}
.card.cbg-a:hover{border-top-color:rgba(200,144,64,.30);}
.card.cbg-s{background:linear-gradient(145deg,#F0FAF5,#E4F5EC);border-color:rgba(107,168,133,.10);}
.card.cbg-s:hover{border-top-color:rgba(107,168,133,.30);}
.card.cbg-p{background:linear-gradient(145deg,#F0F6FB,#E4EDFA);border-color:rgba(123,174,203,.10);}
.card.cbg-p:hover{border-top-color:rgba(123,174,203,.30);}
.card.cbg-sky{background:linear-gradient(145deg,#F2F6FA,#E8F0F8);border-color:rgba(108,160,200,.10);}
.card.cbg-sky:hover{border-top-color:rgba(108,160,200,.30);}
.card.cbg-lavender{background:linear-gradient(145deg,#F0FAF5,#E4F5EC);border-color:rgba(107,168,133,.10);}
.card.cbg-lavender:hover{border-top-color:rgba(107,168,133,.30);}
.card.cbg-alone{background:linear-gradient(135deg,#FFF8F2,#FEF2F8);border:1px solid rgba(220,140,160,.18);}
.card.cbg-emergency{background:linear-gradient(135deg,#FFF5F2,#FFF0EE);border:1px solid rgba(220,80,60,.15);}

/* icon badges */


.card h3{
  font-size:14.5px;font-weight:800;color:var(--peach-d);
  margin-bottom:13px;letter-spacing:-.3px;
  display:flex;align-items:center;gap:7px;
  line-height:1.3;
  font-family:'Noto Sans KR',sans-serif;
}
.card ul{list-style:none;display:flex;flex-direction:column;gap:7px;}
.card ul li{font-size:13.5px;color:var(--ink-m);line-height:1.7;padding-left:16px;position:relative;letter-spacing:-.15px;}
.card ul li::before{content:'·';position:absolute;left:3px;color:var(--peach);font-size:20px;line-height:1.28;font-weight:700;}
.card ul li strong{color:var(--ink);font-weight:700;}
.card.cbg-a ul li::before{color:var(--amber);}
.card.cbg-a ul li strong{color:var(--rust);}

/* activity list */
.plist{display:flex;flex-direction:column;gap:9px;}
.pitem{display:flex;gap:9px;align-items:flex-start;}
.ptag{
  flex-shrink:0;font-size:10.5px;font-weight:700;
  padding:3px 11px;border-radius:20px;
  background:linear-gradient(135deg,var(--peach-p),rgba(123,174,203,.12));
  color:var(--peach-d);
  letter-spacing:.02em;margin-top:2px;white-space:nowrap;
  font-family:'Noto Sans KR',sans-serif;
  border:1px solid rgba(123,174,203,.20);
}
.pitem p{font-size:13px;color:var(--ink-m);line-height:1.6;}

/* parent tips */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.tip{
  background:linear-gradient(145deg,var(--peach-p),rgba(123,174,203,.08));
  border-radius:16px;padding:15px 12px;text-align:center;
  border:1px solid rgba(123,174,203,.12);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1);
}
.tip:hover{transform:translateY(-2px);}
.tip .te{font-size:21px;margin-bottom:5px;display:block;}
.tip p{font-size:12px;color:var(--ink-m);line-height:1.55;font-weight:600;}

/* family/elder cards */
.fgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;}
.fitem{
  background:rgba(123,174,203,.07);
  border-radius:12px;padding:13px 14px;
  border-left:3px solid var(--peach);
}
.ftitle{font-size:12px;font-weight:700;color:var(--amber);margin-bottom:4px;}
.fitem p{font-size:12.5px;color:var(--ink-m);line-height:1.65;}

/* health cards */
.hgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;}
.hitem{
  background:rgba(122,154,184,.07);
  border-radius:12px;padding:14px 15px;
  border-left:3px solid var(--sky);
  transition:all .2s;
}
.hitem:hover{background:rgba(122,154,184,.12);}
.htitle{font-size:12px;font-weight:700;color:var(--sky);margin-bottom:4px;}
.hitem p{font-size:12.5px;color:var(--ink-m);line-height:1.65;}

/* checkpoint */
.stone{
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 15px;
  background:rgba(123,174,203,.06);
  border-radius:11px;border-left:3px solid var(--peach);
  margin-bottom:8px;
}
.stone .ck{font-size:14px;flex-shrink:0;margin-top:1px;}
.stone p{font-size:12.5px;color:var(--ink-m);line-height:1.55;}
.stone p strong{display:block;color:var(--ink);font-weight:700;font-size:12.5px;margin-bottom:2px;}

/* ── VIEW TOGGLE ── */
.view-toggle{
  display:flex;gap:0;padding:0 48px;flex-wrap:nowrap;
  border-bottom:1px solid rgba(123,174,203,.12);
  margin-bottom:0;
  background:var(--white);
  position:sticky;top:56px;z-index:90;
}
.view-btn{
  display:flex;align-items:center;gap:6px;
  padding:12px 20px;border-radius:0;
  border:none;border-bottom:2px solid transparent;
  background:transparent;
  font-family:'Noto Sans KR',sans-serif;font-size:13px;font-weight:600;
  color:var(--ink-m);cursor:pointer;transition:all .2s;
}
.view-btn:hover{border-color:var(--peach);color:var(--peach-d);background:var(--peach-p);}
.view-btn.on{
  border-bottom-color:var(--peach-d);color:var(--peach-d);
  background:transparent;
  margin-bottom:-2px;
}
.view-btn .vb-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}

/* ── SITUATION BAR ── */
.sit-bar{display:flex;gap:8px;flex-wrap:wrap;padding:20px 48px 0;}
.sit-btn{
  display:flex;align-items:center;gap:7px;
  padding:10px 20px;border-radius:26px;
  border:1.5px solid rgba(123,174,203,.16);
  background:var(--white);
  font-family:'Noto Sans KR',sans-serif;font-size:12.5px;font-weight:700;
  color:var(--ink-m);cursor:pointer;
  transition:all .22s cubic-bezier(.34,1.56,.64,1);
  letter-spacing:-.2px;
}
.sit-btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(123,174,203,.12);}
.sit-btn.s0{border-color:var(--sit-rose);color:var(--sit-rose-ink);background:var(--sit-rose-bg);}
.sit-btn.s0.on,.sit-btn.s0:hover{background:var(--sit-rose-active);border-color:var(--sit-rose);}
.sit-btn.s1{border-color:var(--sit-blue);color:var(--sit-blue-ink);background:var(--sit-blue-bg);}
.sit-btn.s1.on,.sit-btn.s1:hover{background:var(--sit-blue-active);border-color:var(--sit-blue);}
.sit-btn.s2{border-color:var(--sit-gold);color:var(--sit-gold-ink);background:var(--sit-gold-bg);}
.sit-btn.s2.on,.sit-btn.s2:hover{background:var(--sit-gold-active);border-color:var(--sit-gold);}
.sit-btn.s3{border-color:var(--sit-plum);color:var(--sit-plum-ink);background:var(--sit-plum-bg);}
.sit-btn.s3.on,.sit-btn.s3:hover{background:var(--sit-plum-active);border-color:var(--sit-plum);}

/* ── SP RESULT PANEL ── */
#sp-result{padding:16px 24px 60px;max-width:720px;margin:0 auto;}
#sp-result.on{display:block;animation:up .4s ease both;}

.sp-header{
  border-radius:20px;padding:24px 30px;
  color:var(--white);
  display:flex;align-items:center;gap:16px;
  margin-bottom:16px;
  position:relative;overflow:hidden;
}
.sp-header::after{content:'';position:absolute;right:-30px;top:-30px;width:180px;height:180px;background:rgba(255,255,255,.08);border-radius:50%;}
.sp-hicon{font-size:36px;position:relative;z-index:1;}
.sp-htitle{position:relative;z-index:1;}
.sp-htitle h2{font-family:'Gowun Batang',serif;font-size:20px;font-weight:700;margin-bottom:4px;}
.sp-htitle p{font-size:13px;opacity:.85;line-height:1.65;}

.sp-age-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px;}
.sp-age-tab{
  padding:8px 16px;min-height:44px;border-radius:20px;
  border:1.5px solid var(--line);background:var(--white);
  font-family:'Noto Sans KR',sans-serif;font-size:12px;font-weight:700;
  color:var(--ink-m);cursor:pointer;transition:all .2s;
}
.sp-age-tab:hover{border-color:var(--peach);color:var(--peach-d);background:var(--peach-p);}
.sp-age-tab.on{border-color:var(--peach-d);color:var(--peach-d);background:var(--peach-p);}

.sp-stage{display:none;}
.sp-stage.on{display:block;animation:up .3s ease both;}

.sp-section-title{
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-l);margin-bottom:12px;padding-bottom:7px;
  border-bottom:1px solid var(--line);
}
.sp-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px;}
.sp-card{border-radius:16px;padding:18px 20px;border:1px solid transparent;}
.sp-card.rose{background:linear-gradient(135deg,#F5EDE4,#ECDDD0);border-color:rgba(184,92,66,.13);}
.sp-card.blue{background:linear-gradient(135deg,#F3F7FF,#EBF1FF);border-color:rgba(60,100,200,.13);}
.sp-card.gold{background:linear-gradient(135deg,#FFFAF0,#FFF4DC);border-color:rgba(200,150,50,.13);}
.sp-card.green{background:linear-gradient(135deg,#F3FAF5,#E7F5EC);border-color:rgba(60,140,90,.13);}
.sp-card.plum{background:var(--plum-p);border-color:rgba(154,123,90,.13);}
.sp-card.full{grid-column:span 2;}
.sp-card h4{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:9px;display:flex;align-items:center;gap:7px;}
.sp-card h4 em{font-size:10.5px;font-style:normal;font-weight:700;padding:2px 8px;border-radius:12px;letter-spacing:.04em;white-space:nowrap;}
.em-r{background:var(--tag-rose);color:var(--tag-rose-ink);}
.em-b{background:var(--tag-blue);color:var(--tag-blue-ink);}
.em-g{background:var(--tag-green);color:var(--tag-green-ink);}
.em-gold{background:var(--tag-gold);color:var(--tag-gold-ink);}
.em-p{background:rgba(184,144,80,.14);color:#8B6B3A;}
.sp-card ul{list-style:none;display:flex;flex-direction:column;gap:6px;}
.sp-card ul li{font-size:12.5px;color:var(--ink-m);line-height:1.7;padding-left:14px;position:relative;}
.sp-card ul li::before{content:'·';position:absolute;left:2px;font-size:18px;line-height:1.3;font-weight:700;}
.sp-card.rose ul li::before{color:var(--rust);}
.sp-card.blue ul li::before{color:var(--sp-bullet-blue);}
.sp-card.gold ul li::before{color:var(--sp-bullet-gold);}
.sp-card.green ul li::before{color:var(--sp-bullet-green);}
.sp-card.plum ul li::before{color:var(--plum);}
.sp-card ul li strong{color:var(--ink);font-weight:700;}

.sp-scripts{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;}
.sp-script{
  background:rgba(123,174,203,.07);
  border-left:3px solid var(--peach);
  border-radius:0 11px 11px 0;
  padding:13px 16px;
}
.sp-script .sc-tag{font-size:10px;font-weight:700;letter-spacing:.07em;color:var(--peach-d);text-transform:uppercase;margin-bottom:5px;}
.sp-script p{font-size:13px;color:var(--ink-m);line-height:1.75;font-style:italic;}
.sp-script p strong{color:var(--ink);font-style:normal;font-weight:700;}

.sp-warn{
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 15px;
  background:linear-gradient(135deg,#FFF9F3,#FFF3E8);
  border:1px solid rgba(212,160,84,.22);
  border-radius:11px;
  font-size:12.5px;color:var(--ink-m);line-height:1.65;
  margin-bottom:10px;
}
.sp-warn .wi{font-size:16px;flex-shrink:0;margin-top:1px;}

/* ── PROFILE CHIP ── */
.prof-chip{
  display:flex;align-items:center;gap:7px;
  padding:4px 12px 4px 5px;
  border-radius:24px;
  border:1.5px solid rgba(123,174,203,.14);
  background:rgba(255,255,255,.80);
  cursor:pointer;
  transition:all var(--calm-dur) var(--calm-ease);
  flex-shrink:0;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
  justify-self:start;
}
.prof-chip:hover{border-color:rgba(123,174,203,.30);background:rgba(255,255,255,.95);}
.prof-avatar{
  width:34px;height:34px;border-radius:50%;
  background:var(--peach-p);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;
  border:2px solid rgba(123,174,203,.20);
  overflow:hidden;position:relative;
}
.prof-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.prof-info{display:flex;flex-direction:column;line-height:1.3;}
.prof-name{font-size:13px;font-weight:700;color:var(--ink);}
.prof-age{font-size:11px;color:var(--peach-d);font-weight:600;}
.prof-add{font-size:12px;color:var(--ink-l);font-weight:600;}

/* ── PROFILE MODAL ── */
.modal-overlay{
  position:fixed;inset:0;z-index:900;
  background:rgba(40,40,40,.25);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  display:none;align-items:center;justify-content:center;
}
.modal-overlay#modal-overlay.on{display:flex;animation:fadeIn .3s var(--calm-ease) both;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.modal{
  background:rgba(255,255,255,.90);
  backdrop-filter:blur(40px) saturate(1.6);
  -webkit-backdrop-filter:blur(40px) saturate(1.6);
  border:1px solid rgba(255,255,255,0.60);
  border-radius:24px;
  padding:24px 24px 22px;
  width:min(400px,94vw);
  max-height:90vh;
  overflow-y:auto;
  box-shadow:0 16px 48px rgba(0,0,0,.08),
             0 4px 12px rgba(0,0,0,.04),
             inset 0 1px 0 rgba(255,255,255,0.80);
  animation:slideUp .4s var(--calm-ease-out) both;
  position:relative;
}
@keyframes slideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

.modal-close{
  position:absolute;top:18px;right:20px;
  width:32px;height:32px;border-radius:50%;
  border:none;background:rgba(0,0,0,.04);
  font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-l);transition:all var(--calm-dur) var(--calm-ease);
}
.modal-close:hover{background:rgba(0,0,0,.08);color:var(--ink-m);}

.modal h2{font-family:'Gowun Batang',serif;font-size:17px;font-weight:700;color:var(--peach-d);margin-bottom:4px;}
.modal .modal-sub{font-size:12px;color:var(--ink-l);margin-bottom:18px;}

.prof-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.prof-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:14px;
  border:1.5px solid rgba(123,174,203,.16);
  background:var(--white);cursor:pointer;transition:all .2s;
}
.prof-item:hover{border-color:var(--peach);background:var(--peach-p);}
.prof-item.active{border-color:var(--peach-d);background:var(--peach-p);}
.prof-item-avatar{
  width:42px;height:42px;border-radius:50%;
  background:var(--peach-p);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;flex-shrink:0;
  border:2px solid rgba(123,174,203,.20);
  overflow:hidden;
}
.prof-item-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.prof-item-info{flex:1;}
.prof-item-name{font-size:14px;font-weight:700;color:var(--ink);}
.prof-item-age{font-size:12px;color:var(--peach-d);font-weight:600;margin-top:2px;}
.prof-item-actions{display:flex;gap:6px;}
.pi-btn{
  width:28px;height:28px;border-radius:8px;
  border:none;background:var(--warm);
  font-size:13px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-m);transition:all .2s;
}
.pi-btn:hover{background:rgba(123,174,203,.15);}
.pi-btn.del:hover{background:#FFECEC;color:#C04040;}

.add-prof-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:11px;
  border-radius:12px;border:1.5px dashed rgba(123,174,203,.30);
  background:rgba(123,174,203,.04);
  font-family:'Noto Sans KR',sans-serif;font-size:13px;font-weight:700;
  color:var(--peach-d);cursor:pointer;transition:all .2s;
}
.add-prof-btn:hover{background:var(--peach-p);border-color:var(--peach);}

.edit-form{display:none;}
.edit-form.on{display:block;animation:up .25s ease both;}
.form-back{
  display:flex;align-items:center;gap:6px;
  background:none;border:none;
  font-family:'Noto Sans KR',sans-serif;font-size:13px;font-weight:700;
  color:var(--ink-l);cursor:pointer;margin-bottom:14px;padding:4px 0;
}
.form-back:hover{color:var(--peach-d);}

.avatar-section{margin-bottom:14px;}
.avatar-top-row{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.avatar-preview{
  width:52px;height:52px;border-radius:50%;
  background:var(--peach-p);
  display:flex;align-items:center;justify-content:center;
  font-size:26px;
  border:2px solid rgba(123,174,203,.22);
  overflow:hidden;flex-shrink:0;
}
.avatar-preview img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.avatar-upload-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:7px 12px;border-radius:9px;
  border:1.5px solid rgba(123,174,203,.22);background:var(--white);
  font-family:'Noto Sans KR',sans-serif;font-size:12px;font-weight:700;
  color:var(--ink-m);cursor:pointer;transition:all .2s;
}
.avatar-upload-btn:hover{border-color:var(--peach);color:var(--peach-d);background:var(--peach-p);}
.avatar-upload-btn input[type=file]{display:none;}

.emoji-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:5px;}
.emoji-opt{
  width:100%;aspect-ratio:1;border-radius:8px;
  border:2px solid transparent;background:var(--warm);
  font-size:17px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.emoji-opt:hover{background:var(--peach-p);border-color:var(--peach-l);}
.emoji-opt.on{background:var(--peach-p);border-color:var(--peach-d);}

.form-row-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.form-field{margin-bottom:12px;}
.form-label{font-size:11px;font-weight:700;color:var(--ink-l);letter-spacing:.05em;text-transform:uppercase;margin-bottom:5px;display:block;}
.form-input{
  width:100%;padding:9px 12px;border-radius:10px;
  border:1.5px solid rgba(123,174,203,.22);
  background:var(--white);
  font-family:'Noto Sans KR',sans-serif;font-size:13px;
  color:var(--ink);outline:none;transition:border-color .2s;box-sizing:border-box;
}
.form-input:focus{border-color:var(--peach);box-shadow:0 0 0 3px rgba(123,174,203,.10);}

.type-toggle{display:flex;gap:7px;margin-bottom:0;}
.type-btn{
  flex:1;padding:8px;border-radius:10px;
  border:1.5px solid rgba(123,174,203,.18);background:var(--white);
  font-family:'Noto Sans KR',sans-serif;font-size:12px;font-weight:700;
  color:var(--ink-m);cursor:pointer;transition:all .2s;text-align:center;
}
.type-btn.on{background:var(--peach-p);border-color:var(--peach-d);color:var(--peach-d);}

.form-save-btn{
  width:100%;padding:11px;border-radius:12px;
  border:none;
  background:var(--peach-d);
  font-family:'Noto Sans KR',sans-serif;font-size:13.5px;font-weight:700;
  color:var(--white);cursor:pointer;transition:all var(--calm-dur) var(--calm-ease);margin-top:10px;
  box-shadow:0 2px 8px rgba(123,174,203,.18);
}
.form-save-btn:hover{
  background:var(--peach);
  box-shadow:0 4px 14px rgba(123,174,203,.25);
  transform:translateY(-1px);
}

/* ── PROFILE PANEL (Bottom Sheet) ── */
.prof-panel-overlay{
  position:fixed;inset:0;z-index:850;
  background:rgba(40,40,40,.20);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  display:none;
}
.prof-panel-overlay.on{display:block;animation:fadeIn .3s var(--calm-ease) both;}

.prof-panel{
  position:fixed;bottom:-100%;left:0;right:0;
  z-index:860;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(40px) saturate(1.5);
  -webkit-backdrop-filter:blur(40px) saturate(1.5);
  border:1px solid rgba(255,255,255,0.50);
  border-bottom:none;
  border-radius:24px 24px 0 0;
  padding:0 20px 20px;
  padding-bottom:calc(20px + env(safe-area-inset-bottom));
  box-shadow:0 -4px 24px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,0.80);
  transition:bottom var(--calm-dur-slow) var(--calm-ease-out);
  max-height:85vh;overflow-y:auto;
}
.prof-panel.on{bottom:60px;}

.prof-panel-handle{
  width:36px;height:4px;border-radius:2px;
  background:rgba(123,174,203,.20);
  margin:12px auto 16px;
}

/* 활성 프로필 영역 */
.pp-active-row{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;
  background:linear-gradient(135deg,rgba(123,174,203,.08),rgba(184,144,80,.06));
  border:1px solid rgba(123,174,203,.14);
  border-radius:16px;
  margin-bottom:12px;
}
.pp-active-avatar{
  width:52px;height:52px;border-radius:50%;
  background:var(--peach-p);
  display:flex;align-items:center;justify-content:center;
  font-size:26px;flex-shrink:0;
  border:2px solid rgba(123,174,203,.20);overflow:hidden;
}
.pp-active-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.pp-active-info{flex:1;}
.pp-active-name{font-size:15px;font-weight:700;color:var(--ink);}
.pp-active-age{font-size:12px;color:var(--peach-d);font-weight:600;margin-top:2px;}
.pp-active-btns{display:flex;flex-direction:column;gap:6px;flex-shrink:0;}

.pp-goto-btn{
  padding:7px 14px;border-radius:12px;border:none;
  background:linear-gradient(135deg,var(--primary-d),var(--primary));
  font-family:'Noto Sans KR',sans-serif;font-size:12px;font-weight:700;
  color:#fff;cursor:pointer;transition:all .2s;white-space:nowrap;
  box-shadow:0 2px 10px rgba(123,174,203,.28);
}
.pp-goto-btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(123,174,203,.35);}
.pp-edit-btn{
  padding:7px 14px;border-radius:12px;
  border:1px solid rgba(123,174,203,.20);
  background:rgba(255,255,255,.70);
  font-family:'Noto Sans KR',sans-serif;font-size:12px;font-weight:600;
  color:var(--ink-m);cursor:pointer;transition:all .2s;white-space:nowrap;
}
.pp-edit-btn:hover{border-color:var(--primary);color:var(--primary);}

/* 다른 프로필 목록 */
.pp-list-label{
  font-size:11px;font-weight:700;color:var(--ink-l);
  letter-spacing:.5px;text-transform:uppercase;
  padding:0 4px;margin-bottom:8px;margin-top:4px;
}
.pp-list-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:14px;
  background:rgba(255,255,255,.50);
  border:1px solid rgba(123,174,203,.10);
  cursor:pointer;transition:all .2s;
  margin-bottom:6px;
}
.pp-list-item:hover{background:var(--peach-p);border-color:rgba(123,174,203,.25);}
.pp-list-avatar{
  width:36px;height:36px;border-radius:50%;
  background:var(--peach-p);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;overflow:hidden;
}
.pp-list-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.pp-list-info{flex:1;display:flex;flex-direction:column;}
.pp-list-name{font-size:13px;font-weight:700;color:var(--ink);}
.pp-list-age{font-size:11px;color:var(--ink-m);margin-top:1px;}
.pp-list-actions{display:flex;gap:5px;}

/* 패널 하단 액션 */
.prof-panel-actions{
  margin-top:12px;padding-top:12px;
  border-top:1px solid rgba(123,174,203,.10);
}
.pp-action-btn{
  width:100%;padding:12px;border-radius:14px;
  border:1.5px dashed rgba(123,174,203,.25);
  background:rgba(123,174,203,.04);
  font-family:'Noto Sans KR',sans-serif;font-size:13px;font-weight:700;
  color:var(--primary);cursor:pointer;transition:all .2s;
}
.pp-action-btn:hover{background:var(--peach-p);border-color:var(--primary);}

.pp-empty{
  text-align:center;padding:20px;
  font-size:13px;color:var(--ink-l);line-height:1.8;
}

/* ── FOOTER ── */
/* ── 홈 위로 문구 ── */
.home-quote{
  text-align:center;
  padding:24px 24px 8px;
}
.home-quote p{
  font-family:'Gowun Batang',serif;
  font-size:13.5px;
  font-style:italic;
  color:var(--ink-l);
  line-height:1.8;
  word-break:keep-all;
}

/* ── 푸터 ── */
footer{
  background:var(--footer-bg);
  color:rgba(255,238,226,.40);
  text-align:center;
  padding:48px 24px 36px;
  font-size:12px;line-height:1.7;
  border-top:none;
}
.footer-logo{
  font-family:'Gowun Batang',serif;
  font-size:18px;font-weight:700;
  color:rgba(255,238,226,.75);
  margin-bottom:6px;
}
.footer-tagline{
  font-size:12.5px;
  color:rgba(255,238,226,.40);
  margin-bottom:20px;
}
.footer-divider{
  width:40px;height:1px;
  background:rgba(255,238,226,.12);
  margin:0 auto 20px;
}
.footer-disclaimer{
  font-size:11.5px;
  color:rgba(255,238,226,.35);
  line-height:1.7;
  margin-bottom:16px;
  word-break:keep-all;
}
.footer-contact{
  font-size:11.5px;
  color:rgba(255,238,226,.40);
  margin-bottom:10px;
}
.footer-copy{
  font-size:10.5px;
  color:rgba(255,238,226,.25);
  letter-spacing:.03em;
}

/* ── ANIMATIONS — Calm breathing ── */
@keyframes up{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@keyframes calmFade{from{opacity:0;}to{opacity:1;}}
.card{animation:up .45s var(--calm-ease-out) both;}
.card:nth-child(1){animation-delay:.04s}.card:nth-child(2){animation-delay:.08s}
.card:nth-child(3){animation-delay:.12s}.card:nth-child(4){animation-delay:.16s}
.card:nth-child(5){animation-delay:.20s}.card:nth-child(6){animation-delay:.24s}
.card:nth-child(7){animation-delay:.28s}.card:nth-child(8){animation-delay:.32s}

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

/* ── RESPONSIVE ── */
@media(max-width:900px){
  :root{--tl-w:160px;}
  .hero,#page-growth .pills,#result{padding-left:24px;padding-right:24px;}
  .sit-bar,#sp-result{padding-left:24px;padding-right:24px;}
}
@media(max-width:640px){
  :root{--tl-w:0px;}
  header{padding:0 16px;}nav{display:none;}
  .hero{padding:40px 18px 28px;}
  .life-journey{padding:24px 18px 16px;}
  .life-journey-intro{font-size:14px;margin-bottom:20px;}
  .life-stage-pills{gap:7px;}
  #result{padding-left:18px;padding-right:18px;}
  .sit-bar,#sp-result{padding-left:18px;padding-right:18px;}
  .grid{grid-template-columns:1fr;}.card.full{grid-column:span 1;}
  .tgrid{grid-template-columns:1fr 1fr;}.fgrid,.hgrid{grid-column:1fr;}
  .rhead{flex-direction:column;gap:12px;padding:20px 22px;}.r-qt{text-align:left;font-size:14px;}
  .medical-disclaimer{margin:0 18px 14px;padding:10px 14px;font-size:11px;}
  .tl-sidebar{display:none;}
  .sp-grid{grid-template-columns:1fr;}.sp-card.full{grid-column:span 1;}
  .sp-header{flex-direction:column;align-items:flex-start;gap:10px;}
}

/* ── 검색 버튼 (헤더) ── */
.hdr-search-btn{
  background:none;border:none;font-size:18px;cursor:pointer;
  padding:8px;line-height:1;opacity:.7;transition:opacity .2s;
}
.hdr-search-btn:hover{opacity:1;}

/* ── 검색 모달 ── */
.search-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:960;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .35s var(--calm-ease);
}
.search-overlay.show{opacity:1;pointer-events:auto;}

.search-modal{
  position:fixed;top:0;left:50%;transform:translateX(-50%) translateY(-10px);
  width:min(520px,92vw);z-index:961;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-radius:0 0 var(--calm-r) var(--calm-r);
  box-shadow:0 8px 32px rgba(0,0,0,.08);
  opacity:0;pointer-events:none;transition:opacity .35s var(--calm-ease),transform .4s var(--calm-ease-out);
}
.search-modal.show{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);}

.search-modal-inner{
  display:flex;align-items:center;gap:8px;padding:16px 20px;
  border-bottom:1px solid var(--line);
}
.search-modal-input{
  flex:1;border:none;outline:none;font-size:17px;
  font-family:'Noto Sans KR',sans-serif;color:var(--ink);
  background:transparent;
}
.search-modal-input::placeholder{color:var(--ink-l);}
.search-modal-close{
  background:none;border:none;font-size:20px;cursor:pointer;
  color:var(--ink-l);padding:4px 8px;line-height:1;
}
.search-results{
  max-height:60vh;overflow-y:auto;padding:8px 0;
}
.search-result-item{
  display:flex;align-items:center;gap:14px;width:100%;
  padding:14px 20px;border:none;background:none;cursor:pointer;
  font-family:'Noto Sans KR',sans-serif;color:var(--ink);
  text-align:left;transition:background .15s;
}
.search-result-item:hover{background:var(--warm);}
.search-result-icon{font-size:24px;flex-shrink:0;}
.search-result-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.search-result-text strong{font-size:15px;font-weight:600;}
.search-result-text span{font-size:13px;color:var(--ink-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.search-empty,.search-hint{
  padding:24px 20px;text-align:center;color:var(--ink-l);font-size:14px;
}