:root {
  --bg: #F8F7F4;
  --card: rgba(255,255,255,0.75);
  --text-1: #1C1C1E;
  --text-2: #636366;
  --text-3: #AEAEB2;
  --purple: #8B6CC1;
  --purple-light: #C4B0E8;
  --purple-deep: #6B4FA0;
  --gold: #D4A853;
  --rose: #D4738B;
  --sage: #7BA68C;
  --border: rgba(0,0,0,0.04);
  --shadow-sm: 0 2px 16px rgba(0,0,0,0.04);
  --shadow-md: 0 8px 32px rgba(0,0,0,0.06);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.08);
  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-full: 100px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Pretendard Variable',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  background:var(--bg);
  color:var(--text-1);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.5;
}
::selection{background:rgba(139,108,193,0.12)}
::-webkit-scrollbar{width:0;background:transparent}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer}

/* ===== ANIMATIONS ===== */
@keyframes up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes orb{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(25px,-18px) scale(1.03)}66%{transform:translate(-18px,12px) scale(0.97)}}
@keyframes twinkle{0%,100%{opacity:.15}50%{opacity:.8}}
@keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}

/* ===== LAYOUT ===== */
.page{display:none;min-height:100vh;min-height:100dvh;position:relative;padding-bottom:max(70px,calc(60px + env(safe-area-inset-bottom)))}
.page.active{display:block;animation:fade .35s ease}

/* ===== AMBIENT ===== */
.ambient{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;max-width:100vw}
.orb{position:absolute;border-radius:50%;filter:blur(80px);animation:orb 22s ease-in-out infinite}
.orb:nth-child(1){width:360px;height:360px;background:radial-gradient(circle,rgba(139,108,193,.08) 0%,transparent 70%);top:-100px;right:-80px}
.orb:nth-child(2){width:300px;height:300px;background:radial-gradient(circle,rgba(212,168,83,.06) 0%,transparent 70%);bottom:-60px;left:-80px;animation-delay:-8s}
.orb:nth-child(3){width:240px;height:240px;background:radial-gradient(circle,rgba(212,115,139,.04) 0%,transparent 70%);top:45%;left:40%;animation-delay:-15s}
.stars{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;max-width:100vw}
.star{position:absolute;background:var(--gold);border-radius:50%;animation:twinkle 3s ease-in-out infinite}

/* ===== LOGO COLORS ===== */
.logo .m{color:#4CAF7D}.logo .b{color:#5B8FD4}.logo .t{color:#E05A5A}.logo .s{color:#E8B84B}

/* ===== PAGE 1: LANDING ===== */
.landing{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:100vh;min-height:100dvh;padding:40px 24px;position:relative;z-index:1;
}
.landing-logo{
  font-size:64px;font-weight:800;letter-spacing:-2.5px;
  animation:up .35s ease-out;
}
.landing-sub{
  font-size:13px;color:var(--text-3);letter-spacing:3px;font-weight:400;
  margin-top:2px;margin-bottom:44px;text-transform:uppercase;
  animation:up .35s ease-out both;
}
.landing-line{
  width:40px;height:1px;background:var(--purple-light);margin-bottom:32px;
  animation:up .35s ease-out both;
}
.landing-copy{
  font-size:17px;color:var(--text-2);text-align:center;font-weight:300;
  letter-spacing:-.1px;line-height:1.7;margin-bottom:48px;
  animation:up .35s ease-out both;
}
.landing-copy strong{font-weight:600;color:var(--text-1)}
.landing-dots{
  display:flex;gap:20px;margin-bottom:52px;
  animation:up .35s ease-out both;
}
.dot-group{display:flex;flex-direction:column;align-items:center;gap:8px}
.dot{
  width:8px;height:8px;border-radius:50%;
  box-shadow:0 0 0 3px rgba(0,0,0,.03);
}
.dot-label{font-size:10px;color:var(--text-3);letter-spacing:1.5px;font-weight:500}
.dot-group:nth-child(1) .dot{background:#B0B0C8}
.dot-group:nth-child(2) .dot{background:#7EB8D8}
.dot-group:nth-child(3) .dot{background:#7DAF8E}
.dot-group:nth-child(4) .dot{background:#E8C85A}

.cta{
  background:linear-gradient(135deg,var(--purple),var(--purple-deep));
  color:#fff;border:none;padding:16px 44px;border-radius:var(--r-full);
  font-size:16px;font-weight:600;letter-spacing:-.2px;
  transition:all .35s cubic-bezier(.4,0,.2,1);
  position:relative;overflow:hidden;
  animation:up .35s ease-out both;
}
.cta::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);
  background-size:200% 100%;animation:shimmer 4s ease-in-out infinite;
}
.cta:hover{transform:translateY(-2px);box-shadow:0 12px 36px rgba(107,79,160,.3)}
.cta:active{transform:translateY(0)}

.landing-note{
  margin-top:20px;font-size:12px;color:var(--text-3);letter-spacing:.2px;
  animation:up .35s ease-out both;
}
.landing-note em{font-style:normal;opacity:.4;margin:0 6px}

/* ===== PAGE 2: LOGIN ===== */
.login-page{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:100vh;min-height:100dvh;padding:40px 24px;position:relative;z-index:1;
}
.login-card{
  background:var(--card);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid var(--border);border-radius:var(--r-lg);
  padding:52px 36px 44px;max-width:380px;width:100%;
  box-shadow:var(--shadow-md);animation:up .35s ease-out;
}
.login-dalto{
  width:120px;height:120px;margin:0 auto 32px;
  animation:up .35s ease-out both;
}
.login-dalto img{
  width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 6px 16px rgba(91,143,212,.12));
}
.login-copy{
  font-size:24px;font-weight:700;text-align:center;
  line-height:1.5;letter-spacing:-.5px;color:var(--text-1);
  margin-bottom:8px;animation:up .35s ease-out both;
}
.login-brand{
  text-align:center;font-size:13px;font-weight:800;letter-spacing:-.3px;
  margin-bottom:40px;animation:up .35s ease-out both;
}
.btn-kakao{
  width:100%;padding:15px;background:#FEE500;border:none;
  border-radius:var(--r-sm);font-size:15px;font-weight:600;color:#1A1A1A;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:all .25s ease;margin-bottom:10px;
  animation:up .35s ease-out both;
}
.btn-kakao:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(254,229,0,.25)}
.btn-kakao:active{transform:translateY(0)}
.btn-kakao svg{width:20px;height:20px}
.btn-guest{
  width:100%;padding:14px;background:transparent;
  border:1.5px solid rgba(0,0,0,.06);border-radius:var(--r-sm);
  font-size:14px;font-weight:500;color:var(--text-2);
  transition:all .25s ease;animation:up .35s ease-out both;
}
.btn-guest:hover{border-color:var(--purple);color:var(--purple)}

/* ===== PAGE 3: DASHBOARD ===== */
.dash{position:relative;z-index:1;padding-bottom:90px}

/* Top bar */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 29px 2px;position:sticky;top:0;z-index:100;
  background:rgba(248,247,244,.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:none;
}
.topbar-logo{font-size:26px;font-weight:800;letter-spacing:-1px;cursor:pointer}
.topbar-profile{
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,var(--purple-light),var(--purple));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:12px;font-weight:600;cursor:pointer;
  transition:transform .2s;
}
.topbar-profile:hover{transform:scale(1.06)}

/* Tabs */
.tabs{padding:2px 24px 10px;margin-top:0}
.tab-bar{
  display:flex;background:rgba(0,0,0,.03);border-radius:var(--r-md);
  padding:3px;position:relative;
}
.tab{
  flex:1;padding:12px 0;text-align:center;font-size:14px;font-weight:500;
  color:var(--text-3);cursor:pointer;border-radius:calc(var(--r-md) - 3px);
  position:relative;z-index:1;transition:color .25s;
  -webkit-tap-highlight-color:transparent;user-select:none;
}
.tab.active{color:var(--text-1);font-weight:600}
.clover-charge-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(45,157,120,0.35)!important}
.clover-charge-btn:active{transform:translateY(0)}
.tab-pill{
  position:absolute;top:3px;left:3px;
  width:calc(33.333% - 2px);height:calc(100% - 6px);
  background:#fff;border-radius:calc(var(--r-md) - 3px);
  box-shadow:0 1px 8px rgba(0,0,0,.04);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}

/* Greeting */
.greeting{text-align:center;padding:36px 24px 16px;animation:up .35s ease-out}
.greeting h2{font-size:22px;font-weight:700;letter-spacing:-.3px}
.greeting p{font-size:14px;color:var(--text-2);margin-top:6px}

/* Content */
.content{padding:0 24px;animation:up .35s ease-out both}

/* Premium */
.premium{
  background:linear-gradient(150deg,#1C1C2E 0%,#2E2B54 55%,#3D2F6E 100%);
  border-radius:var(--r-lg);padding:24px 24px;margin-bottom:28px;
  cursor:pointer;transition:all .35s cubic-bezier(.4,0,.2,1);
  position:relative;overflow:hidden;
}
.premium:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.premium:active{transform:translateY(0)}
.premium::before{
  content:'';position:absolute;top:-40%;right:-20%;width:280px;height:280px;
  background:radial-gradient(circle,rgba(212,168,83,.1) 0%,transparent 70%);border-radius:50%;
}
.premium-badge{
  display:inline-block;padding:4px 12px;border-radius:20px;font-size:11px;
  font-weight:600;letter-spacing:.8px;color:var(--gold);
  background:rgba(212,168,83,.12);border:1px solid rgba(212,168,83,.18);
  margin-bottom:16px;position:relative;
}
.premium h3{font-size:20px;font-weight:700;color:#fff;margin-bottom:12px;position:relative}
.premium .sub{font-size:13px;color:rgba(255,255,255,.4);margin-bottom:16px;position:relative}
.premium .desc{font-size:14px;color:rgba(255,255,255,.65);line-height:1.7;margin-bottom:18px;position:relative}
.premium-footer{display:flex;align-items:center;justify-content:space-between;position:relative}
.tags{display:flex;gap:8px}
.tag{font-size:11px;padding:4px 11px;border-radius:14px;font-weight:500}
.tag-t{background:rgba(123,166,140,.1);color:#8ECBA0}
.tag-p{background:rgba(212,168,83,.1);color:var(--gold)}
.premium-go{color:#fff;font-size:13px;font-weight:600;opacity:.6;transition:all .25s}
.premium:hover .premium-go{opacity:1;transform:translateX(3px)}

/* Section */
.section-title{font-size:16px;font-weight:700;margin:24px 0 12px}

/* Service list items */
.svc-item{
  display:flex;align-items:center;gap:14px;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-md);padding:16px;cursor:pointer;
  transition:all .25s ease;margin-bottom:8px;
}
.svc-item:hover{transform:translateX(3px);box-shadow:var(--shadow-sm)}
.svc-icon{
  width:42px;height:42px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:20px;
}
.si-1{background:#F0E6FF}
.si-2{background:#FFE6EC}
.si-3{background:#E6F5ED}
.si-4{background:#FFF3E0}
.svc-text h4{font-size:15px;font-weight:600;margin-bottom:2px}
.svc-text p{font-size:12px;color:var(--text-2)}
.svc-arrow{margin-left:auto;color:var(--text-3);font-size:14px}

/* Service grid */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.card{
  background:var(--card);backdrop-filter:blur(8px);
  border:1px solid var(--border);border-radius:var(--r-md);
  padding:20px 16px;cursor:pointer;
  transition:all .3s cubic-bezier(.4,0,.2,1);
}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:rgba(0,0,0,.06)}
.card:active{transform:translateY(0)}
.card-icon{
  width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:12px;
}
.card:nth-child(1) .card-icon{background:#F0E6FF}
.card:nth-child(2) .card-icon{background:#FFE6EC}
.card:nth-child(3) .card-icon{background:#E6F5ED}
.card:nth-child(4) .card-icon{background:#FFF3E0}
.card h4{font-size:15px;font-weight:600;margin-bottom:4px}
.card p{font-size:12px;color:var(--text-2);line-height:1.4}

/* ===== Compat Tab ===== */
.compat{padding:0 24px;padding-top:20px}
.compat-hero{
  background:rgba(255,220,230,0.45);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.5);
  border-radius:var(--r-lg);padding:24px 24px;
  margin-bottom:28px;position:relative;overflow:hidden;
  cursor:pointer;transition:all .35s cubic-bezier(.4,0,.2,1);
}
.compat-hero:hover{transform:translateY(-2px)}
.compat-hero:active{transform:translateY(0)}
.compat-hero::before{
  content:'';position:absolute;top:-50px;right:-50px;width:180px;height:180px;
  background:radial-gradient(circle,rgba(212,115,139,.06) 0%,transparent 70%);border-radius:50%;
}
.compat-hero h3{font-size:20px;font-weight:700;margin-bottom:12px;position:relative;color:#8B3A5C}
.compat-hero p{font-size:14px;color:#7A4D63;line-height:1.7;margin-bottom:0;position:relative}
.compat-hero .desc{font-size:14px;color:#7A4D63;line-height:1.7;margin-bottom:18px;position:relative}
.compat-footer{display:flex;align-items:center;justify-content:space-between;position:relative}
.compat-go{color:var(--rose);font-size:13px;font-weight:600;opacity:.6;transition:all .25s}
.compat-hero:hover .compat-go{opacity:1;transform:translateX(3px)}
.btn-rose{
  background:linear-gradient(135deg,var(--rose),#C05875);
  color:#fff;border:none;padding:13px 32px;border-radius:var(--r-full);
  font-size:15px;font-weight:600;transition:all .3s ease;
  position:relative;
}
.btn-rose:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(212,115,139,.25)}

/* List item */
.list-item{
  display:flex;align-items:center;gap:14px;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-md);padding:16px;cursor:pointer;
  transition:all .25s ease;margin-bottom:8px;
}
.list-item:hover{transform:translateX(3px);box-shadow:var(--shadow-sm)}
.list-icon{
  width:40px;height:40px;border-radius:11px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.list-item:nth-child(1) .list-icon{background:#FFF0F5}
.list-item:nth-child(2) .list-icon{background:#F0F5FF}
.list-item:nth-child(3) .list-icon{background:#F0FFF5}
.list-text h4{font-size:15px;font-weight:600;margin-bottom:2px}
.list-text p{font-size:12px;color:var(--text-2)}
.list-arrow{margin-left:auto;color:var(--text-3);font-size:14px}

/* ===== Counselor Tab ===== */
.counselor{padding:0 24px}
.counselor-hero{
  background:linear-gradient(145deg,#F0F4FF,#E8EEFF,#F2EEFF);
  border-radius:var(--r-lg);padding:24px 24px;
  margin-bottom:28px;position:relative;overflow:hidden;
  cursor:pointer;transition:all .35s cubic-bezier(.4,0,.2,1);
}
.counselor-hero:hover{transform:translateY(-2px)}
.counselor-hero:active{transform:translateY(0)}
.counselor-hero::before{
  content:'';position:absolute;bottom:-40px;right:-30px;width:140px;height:140px;
  background:radial-gradient(circle,rgba(107,163,199,.06) 0%,transparent 70%);border-radius:50%;
}
.counselor-badge{
  display:inline-block;padding:4px 12px;border-radius:20px;font-size:11px;
  font-weight:600;background:rgba(91,143,212,.12);color:#5B8FD4;
  margin-bottom:14px;position:relative;
}
.counselor-body{display:flex;align-items:center;justify-content:space-between;position:relative}
.counselor-hero-left{flex:1}
.counselor-avatar{
  width:110px;height:110px;flex-shrink:0;margin-left:8px;margin-top:-25px;margin-right:-15px;
  animation:float 4s ease-in-out .5s infinite;
}
.counselor-avatar img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(91,143,212,.1))}
.counselor-hero h3{font-size:20px;font-weight:700;margin-bottom:8px;position:relative}
.counselor-hero p{font-size:14px;color:var(--text-2);line-height:1.6;position:relative;margin-bottom:0}
.counselor-footer{display:flex;align-items:center;justify-content:space-between;margin-top:14px;position:relative}
.counselor-go{color:#5B8FD4;font-size:13px;font-weight:600;opacity:.6;transition:all .25s}
.counselor-hero:hover .counselor-go{opacity:1;transform:translateX(3px)}

.topic{
  display:flex;align-items:center;gap:14px;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-md);padding:18px 16px;cursor:pointer;
  transition:all .3s cubic-bezier(.4,0,.2,1);margin-bottom:8px;
}
.topic:hover{transform:translateY(-1px);box-shadow:var(--shadow-md);border-color:rgba(0,0,0,.06)}
.topic:active{transform:translateY(0)}
.topic-icon{
  width:46px;height:46px;border-radius:13px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:22px;
}
.topic:nth-child(1) .topic-icon{background:linear-gradient(135deg,#FFF5E6,#FFE8CC)}
.topic:nth-child(2) .topic-icon{background:linear-gradient(135deg,#E6FFF0,#CCF5DC)}
.topic:nth-child(3) .topic-icon{background:linear-gradient(135deg,#FFE6F0,#F5CCDC)}
.topic:nth-child(4) .topic-icon{background:linear-gradient(135deg,#E6F0FF,#CCE0F5)}
.topic-text h4{font-size:15px;font-weight:600;margin-bottom:2px}
.topic-text p{font-size:12px;color:var(--text-2)}
.topic-arrow{margin-left:auto;color:var(--text-3);font-size:14px;transition:transform .2s}
.topic:hover .topic-arrow{transform:translateX(2px)}

/* Tab content */
.tab-content{display:none}
.tab-content.active{display:block}

@keyframes prefillFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.prefill-float{transition:transform 0.2s ease}
.prefill-float:hover{animation:prefillFloat 1.5s ease-in-out infinite}
/* Bottom nav */
.bottomnav{
  position:fixed;bottom:0;left:0;width:100%;z-index:100;
  background:rgba(248,247,244,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--border);
  padding:6px 0 max(6px,env(safe-area-inset-bottom));
  display:flex;
}
.bnav{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:7px 0;color:var(--text-3);font-size:10px;font-weight:500;
  cursor:pointer;transition:color .2s;
  -webkit-tap-highlight-color:transparent;
}
.bnav.active{color:var(--purple)}
.bnav-icon{font-size:20px}
.bnav-more{font-size:16px;letter-spacing:2px;line-height:20px}

/* Responsive */
@media(min-width:768px){
  .dash,.login-page,.landing,.save-page,.chat-page,.gh-page{max-width:460px;margin:0 auto}
  .topbar{max-width:460px;margin:0 auto;left:0;right:0}
  .bottomnav{max-width:460px;left:50%;transform:translateX(-50%);border-radius:18px 18px 0 0}
}

/* ===== ADDITIONAL ANIMATIONS ===== */
@keyframes checkPop{0%{transform:scale(0)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes typing{0%{opacity:.2}20%{opacity:1}100%{opacity:.2}}
@keyframes firePulse{0%,100%{box-shadow:0 0 0 0 rgba(232,69,60,0.3)}50%{box-shadow:0 0 0 8px rgba(232,69,60,0)}}

/* ===== PAGE 4: 저장 탭 ===== */
.save-page{position:relative;z-index:1;padding-bottom:90px}
.save-header{padding:20px 20px 16px}
.save-title{font-size:22px;font-weight:800;letter-spacing:-.3px}
.save-sub{font-size:13px;color:var(--text-3);margin-top:4px}
.save-clover{
  display:inline-flex;align-items:center;gap:4px;
  padding:6px 14px;border-radius:100px;font-size:13px;font-weight:700;
  background:linear-gradient(135deg,#E8F5E9,#C8E6C9);color:#2E7D32;
  float:right;margin-top:-32px;
}
.animal-card{
  margin:0 16px 12px;border-radius:var(--r-lg);
  background:var(--card);border:1px solid var(--border);
  box-shadow:var(--shadow-sm);transition:all .3s cubic-bezier(.4,0,.2,1);cursor:pointer;
  animation:up .35s ease-out both;backdrop-filter:blur(20px);
  --card-glow:rgba(0,0,0,0.06);
}
.animal-card:hover{transform:translateY(-3px);box-shadow:0 8px 28px var(--card-glow)}
.animal-card:active{transform:translateY(-1px);box-shadow:0 4px 16px var(--card-glow)}
.animal-card:nth-child(2){animation-delay:0s}
.animal-card:nth-child(3){animation-delay:0s}
.animal-card:nth-child(4){animation-delay:0s}
.animal-card-top{display:flex;align-items:center;gap:14px;padding:18px 18px 14px}
.animal-emoji-box{
  width:52px;height:52px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;font-size:28px;
  flex-shrink:0;position:relative;
}
.animal-emoji-box::after{
  content:'';position:absolute;inset:0;border-radius:16px;
  box-shadow:inset 0 -2px 6px rgba(0,0,0,0.06);
}
.animal-info{flex:1;min-width:0}
.animal-name{font-size:16px;font-weight:700;margin-bottom:1px}
.animal-tag{
  display:inline-block;padding:2px 10px;border-radius:100px;
  font-size:11px;font-weight:600;margin-right:4px;
}
.animal-meta{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-3);margin-top:4px}
.animal-meta span{display:flex;align-items:center;gap:3px}
.animal-card-bottom{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 18px 14px;
}
.animal-ilju{font-size:13px;font-weight:600;color:var(--text-2)}
.animal-date{font-size:11px;color:var(--text-3)}
.animal-check{
  width:24px;height:24px;border-radius:50%;border:2px solid var(--border);
  display:none;align-items:center;justify-content:center;
  transition:all .2s;flex-shrink:0;
}
.animal-check.visible{display:flex}
.animal-check.checked{border-color:var(--purple);background:var(--purple);animation:checkPop .3s ease}
.animal-check.checked::after{content:'✓';color:#fff;font-size:13px;font-weight:700}
.select-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:300;
  max-width:460px;margin:0 auto;
  background:#fff;border-top:1px solid var(--border);
  padding:16px 20px max(16px,env(safe-area-inset-bottom));
  transform:translateY(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);
  box-shadow:0 -4px 24px rgba(0,0,0,0.08);
}
.select-bar.show{transform:translateY(0)}
.select-bar-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.select-count{font-size:14px;font-weight:700;color:var(--purple)}
.select-cancel{font-size:13px;color:var(--text-3);background:none;border:none;font-weight:600}
.btn-gunghap{
  width:100%;padding:15px;font-size:15px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--rose),#C05875);
  border:none;border-radius:var(--r-sm);transition:all .25s;opacity:0.4;pointer-events:none;
}
.btn-gunghap.ready{opacity:1;pointer-events:auto}
.btn-gunghap.ready:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(212,115,139,0.3)}
.empty-state{text-align:center;padding:80px 40px}
.empty-emoji{font-size:48px;margin-bottom:16px;animation:float 3s ease-in-out infinite}
.empty-title{font-size:17px;font-weight:700;margin-bottom:6px}
.empty-desc{font-size:14px;color:var(--text-2);line-height:1.6}

/* ===== PAGE 5: 달토 채팅 ===== */
.chat-page{display:flex;flex-direction:column;height:100vh;height:100dvh;max-width:460px;margin:0 auto}
.chat-top{
  background:rgba(248,247,244,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);padding:14px 16px;flex-shrink:0;
}
.chat-top-row{display:flex;align-items:center;gap:12px}
.chat-back{background:none;border:none;font-size:14px;color:var(--purple);font-weight:600;padding:4px 0}
.chat-profile{display:flex;align-items:center;gap:10px;flex:1}
.chat-avatar{
  width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,#E8DEFF,#F0E6FF);
  display:flex;align-items:center;justify-content:center;font-size:22px;
}
.chat-name-area{flex:1}
.chat-name{font-size:15px;font-weight:700}
.chat-status{font-size:11px;color:var(--sage)}
.mode-toggle{
  display:flex;background:rgba(0,0,0,0.04);border-radius:100px;padding:3px;margin-top:10px;
}
.mode-btn{
  flex:1;padding:8px 0;text-align:center;font-size:13px;font-weight:600;
  border:none;border-radius:100px;background:transparent;color:var(--text-3);
  transition:all .25s;position:relative;
}
.mode-btn.active-sweet{background:#fff;color:var(--purple);box-shadow:0 1px 6px rgba(0,0,0,0.06)}
.mode-btn.active-fire{background:#E8453C;color:#fff;box-shadow:0 2px 10px rgba(232,69,60,0.2)}
.mode-btn.active-fire::before{content:'';position:absolute;inset:-2px;border-radius:100px;animation:firePulse 2s ease infinite}
.mode-desc{text-align:center;font-size:11px;color:var(--text-3);margin-top:6px;min-height:16px;transition:all .2s}
.chat-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.bubble-row{display:flex;gap:8px;max-width:85%}
.bubble-row.user{align-self:flex-end;flex-direction:row-reverse}
.bubble-ai-avatar{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#E8DEFF,#F0E6FF);
  display:flex;align-items:center;justify-content:center;font-size:16px;margin-top:2px;
}
.bubble-fire .bubble-ai-avatar{background:linear-gradient(135deg,#FFE0E0,#FFC4C4)}
.bubble{padding:12px 16px;border-radius:18px;font-size:14px;line-height:1.65;word-break:keep-all}
.bubble-ai{background:#fff;border:1px solid var(--border);border-bottom-left-radius:4px;color:var(--text-1)}
.bubble-fire .bubble-ai{background:linear-gradient(135deg,#FFF5F5,#FFECEC);border-color:rgba(232,69,60,0.1)}
.bubble-user{background:var(--purple);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.bubble-time{font-size:10px;color:var(--text-3);align-self:flex-end;flex-shrink:0}
.typing-dot{width:7px;height:7px;border-radius:50%;background:var(--text-3);display:inline-block;animation:typing 1.4s ease-in-out infinite}
.typing-dot:nth-child(2){animation-delay:.2s}
.typing-dot:nth-child(3){animation-delay:.4s}
.quick-btns{display:flex;gap:8px;flex-wrap:wrap;padding:4px 0}
.quick-btn{
  padding:8px 16px;font-size:13px;font-weight:500;
  border:1.5px solid var(--border);border-radius:100px;
  background:#fff;color:var(--text-2);transition:all .2s;
}
.quick-btn:hover{border-color:var(--purple);color:var(--purple)}
.chat-input-area{
  padding:10px 16px max(10px,env(safe-area-inset-bottom));
  background:rgba(248,247,244,.95);backdrop-filter:blur(20px);
  border-top:1px solid var(--border);flex-shrink:0;
  display:flex;gap:8px;align-items:flex-end;
}
.chat-input{
  flex:1;padding:12px 16px;font-size:15px;font-family:inherit;
  border:1.5px solid var(--border);border-radius:22px;
  background:#fff;outline:none;resize:none;max-height:100px;line-height:1.4;transition:border-color .2s;
}
.chat-input:focus{border-color:var(--purple)}
.chat-input::placeholder{color:var(--text-3)}
.chat-send{
  width:40px;height:40px;border-radius:50%;border:none;
  background:var(--purple);color:#fff;font-size:16px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;
}
.chat-send:hover{background:var(--purple-deep)}
.chat-send.fire-mode{background:#E8453C}
.clover-banner{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:8px;font-size:12px;color:var(--sage);font-weight:600;
  background:rgba(123,166,140,0.06);border-radius:12px;margin-bottom:4px;
}

/* ===== 달토 상담 목록 ===== */
.chat-list-header {
  padding: 14px 16px;
  background: rgba(248,247,244,.95);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
}
.chat-list-back {
  background: none; border: none;
  font-size: 14px; color: var(--purple); font-weight: 600; padding: 4px 0;
}
.chat-list-title {
  font-size: 17px; font-weight: 700; flex: 1;
}
.chat-list-body {
  flex: 1; overflow-y: auto;
  padding: 16px; padding-bottom: max(100px, calc(80px + env(safe-area-inset-bottom)));
}

/* 나에 대해 상담하기 카드 */
.chat-me-card {
  background: linear-gradient(135deg, rgba(139,108,193,0.08), rgba(139,108,193,0.03));
  border: 1.5px solid rgba(139,108,193,0.15);
  border-radius: var(--r-md); padding: 18px 16px;
  margin-bottom: 20px; cursor: pointer;
  display: flex; align-items: center; gap: 14px;
  transition: all .25s ease;
}
.chat-me-card:hover { transform: translateX(3px); border-color: var(--purple); }
.chat-me-card .chat-me-emoji {
  width: 48px; height: 48px; border-radius: 14px;
  background: linear-gradient(135deg, var(--purple-light), var(--purple));
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: #fff; flex-shrink: 0;
}
.chat-me-card .chat-me-info { flex: 1; }
.chat-me-card .chat-me-name { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.chat-me-card .chat-me-sub { font-size: 12px; color: var(--text-2); }
.chat-me-card .chat-me-arrow { color: var(--purple); font-size: 14px; }
.chat-me-card.disabled { opacity: 0.4; pointer-events: none; }

/* 사람 목록 */
.chat-person-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; background: #fff;
  border: 1.5px solid var(--border); border-radius: var(--r-md);
  margin-bottom: 8px; cursor: pointer; transition: all .2s;
}
.chat-person-item:hover { border-color: var(--purple); background: rgba(139,108,193,0.03); transform: translateX(3px); }
.chat-person-emoji { font-size: 24px; width: 40px; text-align: center; }
.chat-person-info { flex: 1; }
.chat-person-name { font-size: 14px; font-weight: 600; }
.chat-person-tag { font-size: 11px; color: var(--text-3); }
.chat-person-arrow { color: var(--text-3); font-size: 14px; }

/* 궁합 서브 항목 */
.chat-gh-sub {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 52px;
  background: rgba(212,115,139,0.03);
  border: 1px solid rgba(212,115,139,0.1); border-radius: 12px;
  margin: -4px 0 8px 0; cursor: pointer; transition: all .2s;
}
.chat-gh-sub:hover { border-color: var(--rose); background: rgba(212,115,139,0.06); }
.chat-gh-sub-icon { font-size: 14px; }
.chat-gh-sub-text { font-size: 12px; font-weight: 600; color: var(--rose); flex: 1; }
.chat-gh-sub-arrow { color: var(--rose); font-size: 12px; }

/* 채팅방 맥락 바 */
.chat-context-bar {
  font-size: 13px; color: var(--text-2); font-weight: 500;
  padding: 6px 0 0; display: flex; align-items: center; gap: 6px;
}
.chat-context-name { font-weight: 700; color: var(--text-1); }

/* 빈 상태 */
.chat-empty {
  text-align: center; padding: 60px 40px;
}
.chat-empty-emoji { font-size: 48px; margin-bottom: 16px; animation: float 3s ease-in-out infinite; }
.chat-empty-text { font-size: 14px; color: var(--text-2); line-height: 1.6; }

/* ===== PAGE 6: 궁합 플로우 ===== */
.gh-page{position:relative;z-index:1}
.gh-flow{padding:20px 16px;padding-bottom:max(100px,calc(80px + env(safe-area-inset-bottom)))}
.gh-step{font-size:12px;font-weight:700;color:var(--purple);letter-spacing:1px;margin-bottom:8px}
.gh-title{font-size:22px;font-weight:800;margin-bottom:4px;letter-spacing:-.3px}
.gh-desc{font-size:14px;color:var(--text-2);margin-bottom:24px}
.gh-slots{display:flex;gap:12px;margin-bottom:24px}
.gh-slot{
  flex:1;padding:20px 12px;border-radius:var(--r-md);text-align:center;
  border:2px dashed rgba(0,0,0,0.08);background:rgba(0,0,0,0.01);
  transition:all .3s;height:130px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
}
.gh-slot.filled{border-style:solid;border-color:var(--purple);background:rgba(139,108,193,0.05)}
.gh-slot.filled-b{border-style:solid;border-color:var(--rose);background:rgba(212,115,139,0.05)}
.gh-slot-emoji{font-size:32px}
.gh-slot-name{font-size:14px;font-weight:700}
.gh-slot-tag{font-size:11px;color:var(--text-3)}
.gh-slot-empty{font-size:13px;color:var(--text-3)}
.gh-slot-empty-icon{font-size:32px;color:var(--text-3);margin-bottom:4px}
@keyframes slotPulse{
  0%,100%{box-shadow:0 0 0 3px rgba(139,108,193,0.1)}
  50%{box-shadow:0 0 0 6px rgba(139,108,193,0.25)}
}
@keyframes slotPulseB{
  0%,100%{box-shadow:0 0 0 3px rgba(212,115,139,0.1)}
  50%{box-shadow:0 0 0 6px rgba(212,115,139,0.25)}
}
.gh-slot.waiting{border-color:var(--purple);border-style:dashed;animation:slotPulse 1.5s ease-in-out infinite}
.gh-slot.waiting .gh-slot-empty{color:var(--purple);font-size:12px}
.gh-slot.waiting-b{border-color:var(--rose);border-style:dashed;animation:slotPulseB 1.5s ease-in-out infinite}
.gh-slot.waiting-b .gh-slot-empty{color:var(--rose);font-size:12px}
.gh-vs{font-size:18px;font-weight:900;color:var(--rose);align-self:center;margin-top:20px}
.gh-people-title{font-size:14px;font-weight:700;margin-bottom:10px;color:var(--text-2)}
.gh-people-list{max-height:270px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,0.1) transparent}
.gh-people-list::-webkit-scrollbar{width:4px}
.gh-people-list::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.1);border-radius:100px}
.mini-person{
  display:flex;align-items:center;gap:12px;padding:14px 16px;
  background:#fff;border:1.5px solid var(--border);
  border-radius:var(--r-md);margin-bottom:8px;cursor:pointer;transition:all .2s;
}
.mini-person:hover{border-color:var(--purple);background:rgba(139,108,193,0.03)}
.picking-b .mini-person:not(.selected-a):not(.selected-b):hover{border-color:var(--rose);background:rgba(212,115,139,0.03)}
.mini-person.selected-b{border-color:var(--rose);background:rgba(212,115,139,0.05)}
.mini-person.selected-a{border-color:var(--purple);background:rgba(139,108,193,0.05)}
.mini-emoji{font-size:24px;width:40px;text-align:center}
.mini-info{flex:1}
.mini-name{font-size:14px;font-weight:600}
.mini-sub{font-size:11px;color:var(--text-3)}
.gh-rel-title{font-size:14px;font-weight:700;margin:24px 0 10px;color:var(--text-2)}
.rel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.rel-btn{
  padding:12px 4px;text-align:center;
  border:2px solid var(--border);border-radius:var(--r-md);
  background:#fff;cursor:pointer;transition:all .2s;
}
.rel-btn:hover{border-color:var(--purple)}
.rel-btn.active{border-color:var(--purple);background:rgba(139,108,193,0.05)}
.rel-emoji{font-size:24px;margin-bottom:3px}
.rel-label{font-size:12px;font-weight:600;color:var(--text-2)}
.gh-start{
  width:100%;padding:16px;font-size:16px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--rose),#C05875);
  border:none;border-radius:var(--r-sm);margin-top:24px;
  transition:all .3s;opacity:0.3;pointer-events:none;
}
.gh-start.ready{opacity:1;pointer-events:auto}
.gh-start.ready:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(212,115,139,0.25)}
.gh-cost{text-align:center;font-size:12px;color:var(--text-3);margin-top:10px}

.gh-add-new:hover{border-color:var(--purple)!important;background:rgba(139,108,193,0.05)!important}
.gh-add-new:active{transform:scale(0.97)}

/* 새 사람 입력 독립 섹션 */
.gh-add-section{
  margin:20px 0;padding:14px 16px;
  display:flex;align-items:center;gap:12px;
  border:1.5px solid var(--border);border-radius:var(--r-md);
  background:#fff;cursor:pointer;transition:all .3s;
}
.gh-add-section:hover{border-color:var(--purple);background:rgba(139,108,193,0.03)}
.gh-add-section.theme-a{border-color:var(--purple);border-style:dashed;background:rgba(139,108,193,0.05)}
.gh-add-section.theme-a .gh-add-title{color:var(--purple)}
.gh-add-section.theme-a .gh-add-fab{background:linear-gradient(135deg,var(--purple),var(--purple-deep))}
.gh-add-section.theme-a .gh-add-btn{background:linear-gradient(135deg,var(--purple),var(--purple-deep))}
.gh-add-section.theme-b{border-color:var(--rose);border-style:dashed;background:rgba(212,115,139,0.05)}
.gh-add-section.theme-b .gh-add-title{color:var(--rose)}
.gh-add-section.theme-b .gh-add-fab{background:linear-gradient(135deg,var(--rose),#C05875)}
.gh-add-section.theme-b .gh-add-btn{background:linear-gradient(135deg,var(--rose),#C05875)}
.gh-add-section.theme-done{opacity:0.4;pointer-events:none}
.gh-add-title{font-size:14px;font-weight:700;color:var(--purple);flex:1;display:flex;align-items:center;gap:8px}
.gh-add-fab{
  width:24px;height:24px;border-radius:50%;
  background:linear-gradient(135deg,var(--purple),var(--purple-deep));
  color:#fff;font-size:16px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;line-height:1;
}
.gh-add-btn{
  padding:6px 16px;font-size:12px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--purple),var(--purple-deep));
  border:none;border-radius:var(--r-full);cursor:pointer;
  transition:all .2s;font-family:inherit;white-space:nowrap;
}
.gh-add-btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(139,108,193,0.3)}
.gh-add-btn:active{transform:scale(0.97)}

/* 직접 입력 바텀시트 */
.add-person-overlay{
  display:none;position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,0.4);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  z-index:9999;justify-content:center;align-items:flex-end;
}
.add-person-overlay.show{display:flex}
.add-person-sheet{
  width:100%;max-width:480px;background:var(--bg);
  border-radius:24px 24px 0 0;padding:24px 20px 36px;
  animation:slideUpSheet .35s cubic-bezier(.4,0,.2,1);
  max-height:90vh;overflow-y:auto;
}
@keyframes slideUpSheet{from{transform:translateY(100%)}to{transform:translateY(0)}}
.add-person-sheet .ap-header{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;
}
.ap-title{font-size:18px;font-weight:800;color:var(--text-1)}
.ap-close{
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  font-size:18px;color:var(--text-3);cursor:pointer;border-radius:50%;
  background:rgba(0,0,0,0.04);border:none;transition:all .2s;
}
.ap-close:hover{background:rgba(0,0,0,0.08)}

.ap-select{padding:10px 10px;font-size:13px;appearance:auto;-webkit-appearance:auto}
.ap-gender{
  flex:1;padding:11px;border:1.5px solid var(--border);border-radius:12px;
  background:#fff;font-size:13px;font-weight:600;color:var(--text-2);
  cursor:pointer;transition:all .2s;text-align:center;font-family:inherit;
}
.ap-gender:hover{border-color:var(--purple-light)}
.ap-gender.active{border-color:var(--purple);background:rgba(139,108,193,0.05);color:var(--purple)}
.ap-skip{
  background:none;border:1.5px solid var(--purple-light);font-size:12px;color:var(--purple);
  cursor:pointer;padding:10px 20px;border-radius:var(--r-full);
  transition:all .2s;font-family:inherit;font-weight:600;
}
.ap-skip:hover{background:rgba(139,108,193,0.05);border-color:var(--purple)}

/* 카드1 pgBirth 스타일 */
.ap-birth-style{
  background:var(--bg)!important;
  border:1px solid var(--border)!important;
  box-shadow:var(--shadow-md)!important;
}
.ap-birth-title{font-size:22px;font-weight:800;color:var(--text-1);margin-bottom:4px}
.ap-birth-title span{color:var(--purple)}
.ap-birth-sub{font-size:13px;color:var(--text-2);margin-bottom:24px;line-height:1.5;font-weight:400}
.ap-birth-row{display:flex;gap:10px;margin-bottom:14px;position:relative}
.ap-birth-field{flex:1;position:relative}
.ap-b-label{font-size:11px;font-weight:700;color:var(--text-2);display:block;margin-bottom:6px;letter-spacing:0.5px}
.ap-b-combo{position:relative;display:flex;align-items:center}
.ap-b-combo .ap-b-input{padding-right:32px}
.ap-b-arrow{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  font-size:10px;color:var(--text-3);cursor:pointer;padding:4px;transition:transform .2s;z-index:2;
}
.ap-b-arrow.open{transform:translateY(-50%) rotate(180deg)}
.ap-b-input{
  width:100%;padding:14px 16px;font-size:15px;font-weight:500;
  background:#fff;border:1.5px solid var(--border);
  border-radius:14px;outline:none;color:var(--text-1);font-family:inherit;
  transition:all .25s;-webkit-appearance:none;appearance:none;
}
.ap-b-input::placeholder{color:var(--text-3);font-weight:400}
.ap-b-input:focus{border-color:rgba(139,108,193,0.4);box-shadow:0 0 0 4px rgba(139,108,193,0.1)}
.ap-b-input:not(:placeholder-shown){border-color:rgba(139,108,193,0.3)}
.ap-b-input[type=number]::-webkit-inner-spin-button,
.ap-b-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.ap-b-input[type=number]{-moz-appearance:textfield}
.ap-b-dropdown{
  position:absolute;top:calc(100% + 4px);left:0;right:0;
  background:#fff;border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--shadow-md);max-height:180px;overflow-y:auto;
  z-index:20;opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:all .2s;
}
.ap-b-dropdown.show{opacity:1;transform:translateY(0);pointer-events:auto}
.ap-b-dropdown::-webkit-scrollbar{width:4px}
.ap-b-dropdown::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.08);border-radius:2px}
.ap-b-drop-item{
  padding:10px 16px;font-size:14px;color:var(--text-1);cursor:pointer;
  transition:background .15s;
}
.ap-b-drop-item:hover{background:rgba(139,108,193,0.06);color:var(--purple)}
.ap-b-drop-item.selected{background:rgba(139,108,193,0.1);color:var(--purple);font-weight:700}
.ap-b-gender-row{display:flex;gap:10px;margin-bottom:20px}
.ap-b-gender{
  flex:1;padding:14px;font-size:15px;font-weight:600;
  background:#fff;border:1.5px solid var(--border);
  border-radius:14px;color:var(--text-3);display:flex;align-items:center;
  justify-content:center;gap:6px;transition:all .25s;cursor:pointer;font-family:inherit;
}
.ap-b-gender:hover{border-color:var(--purple-light);transform:translateY(-2px)}
.ap-b-gender:active{transform:scale(0.97)}
.ap-b-gender.active{border-color:var(--purple);background:rgba(139,108,193,0.05);color:var(--purple)}
.ap-b-next{
  width:100%;padding:16px;font-size:16px;font-weight:700;
  border:none;border-radius:14px;font-family:inherit;
  color:var(--text-3);background:rgba(0,0,0,0.06);cursor:not-allowed;
  transition:all .3s;
}
.ap-b-next.ready{
  color:#fff;background:linear-gradient(135deg,var(--purple),var(--purple-deep));
  cursor:pointer;box-shadow:0 4px 20px rgba(139,108,193,0.25);
}
.ap-b-next.ready:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(139,108,193,0.3)}
.ap-b-next.ready:active{transform:scale(0.97)}

/* MBTI 카드 내부 */
.ap-mbti-step{font-size:11px;color:var(--text-3);text-align:center;letter-spacing:1px;margin-bottom:4px}
.ap-mbti-q{font-size:17px;font-weight:800;text-align:center;margin-bottom:16px;color:var(--text-1)}
.ap-mbti-opts{display:flex;gap:8px;margin-bottom:14px}
.ap-mbti-opt-btn{
  flex:1;padding:16px 8px;border:1.5px solid var(--border);border-radius:14px;
  background:#fff;cursor:pointer;text-align:center;transition:all .25s;font-family:inherit;
  position:relative;overflow:hidden;
}
.ap-mbti-opt-btn:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,0.08)}
.ap-mbti-opt-btn:active{transform:scale(0.97)}
.ap-mbti-opt-btn.sel{box-shadow:0 4px 20px rgba(0,0,0,0.08)}
.ap-mbti-opt-btn .lt{font-size:28px;font-weight:900;margin-bottom:4px}
.ap-mbti-opt-btn .lb{font-size:11px;font-weight:700;margin-bottom:2px}
.ap-mbti-opt-btn .ds{font-size:10px;color:var(--text-3);line-height:1.4}
.ap-mbti-int-label{font-size:12px;color:var(--text-2);text-align:center;margin-bottom:8px}
.ap-mbti-ints{display:flex;gap:6px;margin-bottom:14px}
.ap-mbti-int{
  flex:1;padding:10px 4px;border:1.5px solid var(--border);border-radius:10px;
  background:#fff;cursor:pointer;text-align:center;transition:all .2s;font-family:inherit;
}
.ap-mbti-int:hover{transform:translateY(-1px)}
.ap-mbti-int:active{transform:scale(0.97)}
.ap-mbti-int.sel{box-shadow:0 3px 12px rgba(0,0,0,0.06)}
.ap-mbti-int .ir{font-size:12px;font-weight:700;margin-bottom:1px}
.ap-mbti-int .id{font-size:10px;color:var(--text-3)}
.ap-mbti-next{
  width:100%;padding:13px;font-size:14px;font-weight:700;color:var(--text-3);
  background:rgba(0,0,0,0.06);border:none;border-radius:12px;
  cursor:not-allowed;transition:all .2s;font-family:inherit;
}
.ap-mbti-next.ok{color:#fff;cursor:pointer}
.ap-mbti-next.ok:hover{transform:translateY(-1px)}
.ap-mbti-next.ok:active{transform:scale(0.97)}
.ap-field{margin-bottom:16px}
.ap-label{
  font-size:12px;font-weight:700;color:var(--text-2);
  margin-bottom:6px;display:flex;align-items:center;gap:4px;
}
.ap-label .req{color:var(--rose);font-size:10px}
.ap-label .opt{color:var(--text-3);font-size:10px;font-weight:500}
.ap-input{
  width:100%;padding:12px 14px;font-size:14px;font-weight:500;
  border:1.5px solid var(--border);border-radius:12px;
  background:#fff;color:var(--text-1);outline:none;
  font-family:inherit;transition:border-color .2s;
}
.ap-input:focus{border-color:var(--purple-light)}
.ap-input::placeholder{color:var(--text-3)}
.ap-submit{
  width:100%;padding:14px;font-size:15px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--purple),var(--purple-deep));
  border:none;border-radius:var(--r-sm);margin-top:8px;
  cursor:pointer;transition:all .2s;opacity:0.4;pointer-events:none;
}
.ap-submit.ready{opacity:1;pointer-events:auto}
.ap-submit.ready:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(139,108,193,0.3)}
.ap-submit.ready:active{transform:scale(0.97)}

/* 추가된 사람 뱃지 */
.mini-person .new-badge{
  font-size:9px;font-weight:700;color:var(--purple);
  background:rgba(139,108,193,0.1);border-radius:var(--r-full);
  padding:1px 6px;margin-left:6px;vertical-align:middle;
}

/* ===== SUB TABS (분석결과 내부) ===== */
.sub-tabs{display:flex;gap:0;padding:0 16px;margin-bottom:16px}
.sub-tab{
  flex:1;padding:12px 0;text-align:center;font-size:14px;font-weight:600;
  color:var(--text-3);border-bottom:2px solid transparent;
  cursor:pointer;transition:all .2s;
}
.sub-tab.active{color:var(--purple);border-bottom-color:var(--purple)}
.sub-tab.active-rose{color:var(--rose);border-bottom-color:var(--rose)}
.sub-content{display:none}
.sub-content.active{display:block}

/* Gunghap history card */
.gh-history{margin:0 16px 12px;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:18px;cursor:pointer;transition:all .25s}
.gh-history:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.gh-pair{display:flex;align-items:flex-start;gap:8px;margin-bottom:12px}
.gh-pair-animal{
  width:42px;height:42px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;
}
.gh-pair-vs{font-size:12px;font-weight:800;color:var(--rose)}
.gh-pair-info{flex:1;min-width:0}
.gh-pair-names{font-size:15px;font-weight:700}
.gh-pair-rel{font-size:12px;color:var(--text-3);margin-top:1px}
.gh-pair-unit{display:flex;flex-direction:column;align-items:center;gap:4px}
.gh-pair-name{font-size:11px;font-weight:600;color:var(--text-2);text-align:center;max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gh-pair-heart{font-size:14px;display:flex;align-items:center;padding-bottom:16px}
.gh-pair-rel-badge{font-size:12px;color:var(--text-3);margin-left:auto;align-self:center;padding-bottom:16px}
.gh-score-bar{display:flex;align-items:center;gap:10px}
.gh-score-num{font-size:24px;font-weight:900;color:#D4738B;flex-shrink:0}
.gh-score-track{flex:1;height:6px;background:rgba(0,0,0,0.04);border-radius:100px;overflow:hidden}
.gh-score-fill{height:100%;border-radius:100px;background:rgba(244,184,200,0.7)}
.gh-score-date{font-size:11px;color:var(--text-3);text-align:right;margin-top:6px}

/* ===== BOTTOM SHEET ===== */
.sheet-overlay{
  position:fixed;inset:0;z-index:400;background:rgba(0,0,0,0);
  pointer-events:none;transition:background .3s;
}
.sheet-overlay.show{background:rgba(0,0,0,0.35);pointer-events:auto}
.sheet{
  position:fixed;bottom:0;left:0;right:0;z-index:401;
  max-width:460px;margin:0 auto;
  background:#fff;border-radius:20px 20px 0 0;
  padding:12px 20px max(24px,env(safe-area-inset-bottom));
  transform:translateY(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);
  box-shadow:0 -8px 32px rgba(0,0,0,0.1);
}
.sheet-overlay.show .sheet{transform:translateY(0)}
.sheet-handle{width:36px;height:4px;background:rgba(0,0,0,0.1);border-radius:100px;margin:0 auto 16px}
.sheet-profile{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--border);margin-bottom:8px}
.sheet-emoji{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px}
.sheet-name{font-size:16px;font-weight:700}
.sheet-tag{font-size:12px;color:var(--text-3)}
.sheet-action{
  display:flex;align-items:center;gap:14px;padding:16px 0;
  cursor:pointer;transition:background .15s;border-radius:12px;margin:0 -8px;padding-left:8px;padding-right:8px;
}
.sheet-action:hover{background:rgba(0,0,0,0.02)}
.sheet-action-icon{
  width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;
}
.sheet-action-text{flex:1}
.sheet-action-title{font-size:15px;font-weight:600}
.sheet-action-desc{font-size:12px;color:var(--text-3);margin-top:1px}
.sheet-cancel{
  width:100%;padding:14px;text-align:center;font-size:14px;font-weight:600;
  color:var(--text-3);background:none;border:none;margin-top:4px;
}

/* ===== EDIT MODE ===== */
@keyframes wiggle{
  0%{transform:rotate(0deg)}
  25%{transform:rotate(-1.2deg)}
  50%{transform:rotate(1.2deg)}
  75%{transform:rotate(-0.8deg)}
  100%{transform:rotate(0deg)}
}
.edit-mode .animal-card{cursor:default}
.edit-mode .gh-circle{display:none !important}
.edit-btn{
  font-size:13px;font-weight:600;color:var(--purple);
  background:none;border:none;cursor:pointer;padding:4px 0;
}
.del-btn{
  display:none;font-size:12px;font-weight:700;color:#fff;
  background:rgba(232,69,60,0.85);
  padding:6px 12px;border-radius:20px;flex-shrink:0;cursor:pointer;
  transition:all .2s;border:none;
  box-shadow:0 2px 8px rgba(232,69,60,0.2);
}
.del-btn:hover{background:rgba(232,69,60,1);transform:scale(1.05)}
.edit-mode .del-btn{display:block}
.edit-mode .animal-card{cursor:default}
.my-saju-check{
  display:none;
  align-items:center;gap:4px;
  font-size:11px;font-weight:600;color:var(--purple);
  cursor:pointer;
  padding:2px 8px;
  border-radius:12px;
  background:rgba(139,108,193,0.08);
  border:1.5px solid transparent;
  transition:all .2s;
  margin-left:6px;
  vertical-align:middle;
}
.my-saju-check.checked{
  background:rgba(139,108,193,0.15);
  border-color:var(--purple);
}
.my-saju-check .check-icon{
  width:16px;height:16px;
  border-radius:50%;
  border:2px solid var(--purple-light);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;
  transition:all .2s;
}
.my-saju-check.checked .check-icon{
  background:var(--purple);
  border-color:var(--purple);
  color:#fff;
}
.edit-mode .my-saju-check{display:inline-flex}
.edit-mode .saju-star{display:none}

/* GH edit mode */
.gh-edit-btn{background:none;border:none;font-size:13px;font-weight:600;color:var(--rose);cursor:pointer}
.gh-del-btn{display:none;position:absolute;top:8px;right:8px;background:rgba(212,115,139,0.9);color:#fff;border:none;border-radius:8px;padding:4px 10px;font-size:11px;font-weight:600;cursor:pointer;z-index:2}
.gh-edit-mode .gh-del-btn{display:block}
.gh-edit-mode .gh-history{cursor:default;position:relative}
.gh-name-edit-input{width:60px;padding:2px 6px;border:1.5px solid var(--rose);border-radius:6px;font-size:11px;font-weight:600;text-align:center;outline:none;background:rgba(212,115,139,0.05)}

/* Name edit inline */
.name-edit-input{
  font-size:16px;font-weight:700;font-family:inherit;
  border:none;border-bottom:2px solid var(--purple);
  background:transparent;outline:none;width:80px;
  padding:0 0 2px;color:var(--text-1);
}
.gh-circle{
  width:32px;height:32px;border-radius:50%;
  border:2px solid rgba(0,0,0,0.08);background:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;flex-shrink:0;cursor:pointer;
  transition:all .25s;position:relative;z-index:2;
}
.gh-circle:hover{border-color:var(--rose);background:rgba(212,115,139,0.05)}
.gh-circle::after{content:'💕';font-size:12px}
.gh-circle.checked{border-color:var(--rose);background:var(--rose)}
.gh-circle.checked::after{content:'✓';color:#fff;font-size:14px;font-weight:700}

/* Select bar */
.select-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:300;
  max-width:460px;margin:0 auto;
  background:#fff;border-top:1px solid var(--border);
  padding:16px 20px max(16px,env(safe-area-inset-bottom));
  transform:translateY(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);
  box-shadow:0 -4px 24px rgba(0,0,0,0.08);
}
.select-bar.show{transform:translateY(0)}
.select-bar-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.select-count{font-size:14px;font-weight:700;color:var(--rose)}
.select-cancel{font-size:13px;color:var(--text-3);background:none;border:none;font-weight:600}
.btn-gunghap{
  width:100%;padding:15px;font-size:15px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--rose),#C05875);
  border:none;border-radius:var(--r-sm);transition:all .25s;opacity:0.4;pointer-events:none;
}
.btn-gunghap.ready{opacity:1;pointer-events:auto}

/* ===== BIRTH INPUT PAGE ===== */
/* ── Birth Page — SNS Vibe ── */
.birth-wrap{max-width:420px;width:100%;margin:0 auto}
@keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes orbDrift{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(18px,-12px) scale(1.03)}50%{transform:translate(-8px,16px) scale(0.97)}75%{transform:translate(12px,6px) scale(1.01)}}
@keyframes twinkle{0%,100%{opacity:0.15}50%{opacity:0.7}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
#pgBirth input::placeholder{color:#B0A0C8!important;font-weight:400!important}
#pgBirth *{-webkit-tap-highlight-color:transparent}

/* Glassy Card */
.birth-glass-card{background:rgba(255,255,255,0.45);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.6);border-radius:24px;padding:20px 20px 24px;box-shadow:0 4px 16px rgba(139,108,193,0.05),0 12px 48px rgba(100,70,150,0.07),0 0 0 1px rgba(139,108,193,0.03)}

/* Input Groups */
.birth-row{display:flex;gap:8px;margin-bottom:0;position:relative}
.birth-field{flex:1;position:relative}
.birth-field.wide{flex:1.5}
.birth-label{font-size:12px;font-weight:700;color:#5A4580;display:block;margin-bottom:6px;letter-spacing:0.3px}

/* Combo: input + ▼ */
.birth-combo{position:relative;display:flex;align-items:center}
.birth-combo .birth-input{padding:12px 36px 12px 14px}
.birth-combo-arrow{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:9px;color:#B0A0C8;cursor:pointer;padding:8px;transition:transform .25s ease;z-index:2}
.birth-combo-arrow.open{transform:translateY(-50%) rotate(180deg)}

.birth-input{width:100%;padding:12px 14px;font-size:15px;font-weight:500;background:rgba(255,255,255,0.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1.5px solid rgba(255,255,255,0.6);border-radius:14px;outline:none;color:#3D2E5C;font-family:inherit;transition:all .3s;-webkit-appearance:none;appearance:none;box-sizing:border-box}
.birth-input:focus{border-color:rgba(139,108,193,0.3);background:rgba(255,255,255,0.55);box-shadow:0 0 0 3px rgba(139,108,193,0.06),0 4px 20px rgba(139,108,193,0.06)}
.birth-input:not(:placeholder-shown){font-weight:600;border-color:rgba(139,108,193,0.25);box-shadow:0 2px 12px rgba(139,108,193,0.04)}
/* Hide number spinner */
.birth-input[type=number]::-webkit-inner-spin-button,
.birth-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.birth-input[type=number]{-moz-appearance:textfield}

/* Inline Dropdown */
.birth-dropdown{
  position:absolute;top:calc(100% + 6px);left:0;right:0;
  background:#ffffff;border:1px solid rgba(139,108,193,0.1);
  border-radius:16px;box-shadow:0 16px 48px rgba(80,50,120,0.12),0 4px 12px rgba(80,50,120,0.06);
  z-index:9999;max-height:200px;overflow-y:auto;
  opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:all .2s cubic-bezier(.4,0,.2,1);
  padding:6px;
}
.birth-dropdown.show{opacity:1;transform:translateY(0);pointer-events:auto}
.birth-dropdown::-webkit-scrollbar{width:4px}
.birth-dropdown::-webkit-scrollbar-thumb{background:rgba(139,108,193,0.2);border-radius:2px}
.birth-drop-item{
  padding:11px 14px;font-size:14px;font-weight:500;color:#4a4050;
  border-radius:11px;cursor:pointer;transition:background .12s;font-family:inherit;
}
.birth-drop-item:hover{background:rgba(139,108,193,0.03)}
.birth-drop-item.selected{background:rgba(139,108,193,0.07);color:#7B5DAF;font-weight:700}

/* Gender Buttons */
.birth-gender-row{display:flex;gap:10px;margin-bottom:0}
.birth-gender-sel{flex:1;padding:12px 10px;font-size:15px;font-weight:700;background:rgba(255,255,255,0.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1.5px solid rgba(255,255,255,0.6);border-radius:14px;color:#9B8CB8;display:flex;align-items:center;justify-content:center;transition:all .3s;cursor:pointer;font-family:inherit}
.birth-gender-sel:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,0.08)}
.birth-gender-sel:active{transform:scale(0.97)}

/* CTA Button */
.birth-next{width:100%;padding:16px;font-size:16px;font-weight:700;border:none;border-radius:18px;color:#C4B0E8;background:rgba(139,108,193,0.08);cursor:default;transition:all .5s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;font-family:inherit;letter-spacing:-0.3px}
.birth-next.ready{color:#fff;background:linear-gradient(135deg,#8B6CC1 0%,#7B5DAF 50%,#6B4FA0 100%);cursor:pointer;box-shadow:0 8px 36px rgba(107,79,160,0.3)}
.birth-next.ready:hover{transform:translateY(-2px);box-shadow:0 14px 44px rgba(107,79,160,0.35)}
.birth-next.ready:active{transform:translateY(0) scale(0.98)}
.birth-next .shimmer{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.12),transparent);background-size:200% 100%;animation:shimmer 3s ease-in-out infinite}

/* ===== MBTI PAGE ===== */
.mbti-wrap{max-width:500px;width:100%;margin:0 auto;animation:up .5s ease both}
.mbti-progress{display:flex;gap:4px;margin-bottom:20px}
.mbti-progress-seg{flex:1;height:4px;border-radius:2px;transition:background .3s}
.mbti-letters{display:flex;justify-content:center;gap:8px;margin-bottom:24px}
.mbti-letter{width:44px;height:52px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900;border-radius:12px;border:2.5px solid transparent;transition:all .3s}
.mbti-card{
  background:rgba(225,215,245,0.45);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.5);
  border-radius:var(--r-lg);padding:28px 22px;
  position:relative;overflow:hidden;
  box-shadow:0 8px 32px rgba(139,108,193,0.08);
}
.mbti-card::before{
  content:'';position:absolute;top:-50px;left:-50px;width:180px;height:180px;
  background:radial-gradient(circle,rgba(139,108,193,.06) 0%,transparent 70%);border-radius:50%;
}
.mbti-step-label{font-size:12px;color:#7A6B8A;letter-spacing:2px;text-align:center;margin-bottom:6px;position:relative}
.mbti-question{font-size:20px;font-weight:800;text-align:center;margin-bottom:22px;color:#3D2E5C;position:relative}
.mbti-choices{display:flex;gap:10px;margin-bottom:18px;position:relative}
.mbti-choice{
  flex:1;padding:20px 12px;background:rgba(255,255,255,0.5);
  border:2.5px solid rgba(255,255,255,0.6);border-radius:16px;
  cursor:pointer;text-align:center;transition:all .25s;font-family:inherit;
}
.mbti-choice:hover{border-color:rgba(139,108,193,0.3)}
.mbti-choice.selected{background:rgba(255,255,255,0.75);box-shadow:0 2px 16px rgba(0,0,0,0.06)}
.mbti-choice-letter{font-size:34px;font-weight:900;margin-bottom:6px;color:#8A7BA0;transition:color .25s}
.mbti-choice.selected .mbti-choice-letter{color:currentColor}
.mbti-choice-label{font-size:12.5px;font-weight:700;margin-bottom:4px;color:#6B5A80;transition:color .25s}
.mbti-choice.selected .mbti-choice-label{color:currentColor}
.mbti-choice-desc{font-size:11px;color:#8A7BA0;line-height:1.5}

.mbti-intensity{display:none;animation:up .3s ease;position:relative}
.mbti-intensity.show{display:block}
.mbti-intensity-label{font-size:13px;color:#5A4580;text-align:center;margin-bottom:12px}
.mbti-intensity-row{display:flex;gap:7px}
.mbti-int-btn{
  flex:1;padding:12px 6px;background:rgba(255,255,255,0.5);
  border:2px solid rgba(255,255,255,0.6);border-radius:11px;
  cursor:pointer;text-align:center;transition:all .25s;font-family:inherit;
}
.mbti-int-btn:hover{border-color:rgba(139,108,193,0.3)}
.mbti-int-btn.selected{background:rgba(255,255,255,0.75)}
.mbti-int-range{font-size:13px;font-weight:700;color:#8A7BA0;margin-bottom:2px;transition:color .25s}
.mbti-int-btn.selected .mbti-int-range{color:currentColor}
.mbti-int-desc{font-size:10.5px;color:#8A7BA0}

.mbti-next{
  width:100%;padding:15px;font-size:16px;font-weight:700;
  border:none;border-radius:16px;margin-top:18px;
  color:#8A7BA0;background:rgba(255,255,255,0.4);
  cursor:not-allowed;transition:all .3s;position:relative;
}
.mbti-next.ready{color:#fff;cursor:pointer;box-shadow:0 4px 20px rgba(0,0,0,0.15)}
.mbti-next.ready:active{transform:scale(0.98)}
.mbti-choice-btn:hover{transform:translateY(-3px)!important;box-shadow:0 6px 20px rgba(0,0,0,0.1)!important}
.mbti-choice-btn:active{transform:scale(0.97)!important}
.mbti-int-btn-dyn:hover{transform:translateY(-2px)!important;box-shadow:0 4px 14px rgba(0,0,0,0.08)!important}
.mbti-int-btn-dyn:active{transform:scale(0.97)!important}

/* ===== 개인 분석 로딩 (pgLoad) ===== */
@keyframes logoPulse{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.06);filter:brightness(1.1)}}
@keyframes loadShimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes loadFadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes loadDot{0%,80%,100%{opacity:.2}40%{opacity:1}}
@keyframes loadFinish{0%{transform:scale(1)}50%{transform:scale(1.2);filter:brightness(1.4)}100%{transform:scale(1);filter:brightness(1)}}
.load-phase-msg{font-size:17px;color:var(--text-2);font-weight:300;text-align:center;line-height:1.8;min-height:28px;transition:all .4s ease;letter-spacing:1.5px;font-family:'Noto Serif KR',Georgia,serif}
.load-hint{font-size:13px;color:var(--purple);font-weight:400;text-align:center;padding:12px 20px;background:rgba(139,108,193,0.03);border-radius:100px;border:none;margin-top:16px;animation:loadFadeIn .6s ease both;line-height:1.5;letter-spacing:-.1px;opacity:.7}
.load-dots{display:inline-flex;gap:3px;margin-left:2px}
.load-dots span{width:4px;height:4px;border-radius:50%;background:var(--text-3);animation:loadDot 1.4s ease-in-out infinite}
.load-dots span:nth-child(2){animation-delay:.2s}
.load-dots span:nth-child(3){animation-delay:.4s}

/* ===== 결과 페이지 CSS (pgRes) ===== */
#pgRes{overflow-x:hidden;max-width:100vw;width:100%}
.res-wrap{max-width:640px;margin:0 auto;padding:0 0 80px;position:relative;overflow-x:hidden;width:100%;box-sizing:border-box}
.res-wrap *{max-width:100%;box-sizing:border-box}
.res-header{text-align:center;padding:36px 20px 16px}
.res-header .logo-sm{display:flex;justify-content:center;gap:0;margin-bottom:8px}
.res-header .logo-sm span{font-family:var(--font-main);font-weight:800;font-size:28px;line-height:1}
.el-fire{color:#E8453C}.el-earth{color:#C49A2A}.el-wood{color:#22A469}.el-water{color:#2D7EB5}.el-metal{color:#6B7B8D}
.r-animal{margin:0 16px 16px;border-radius:20px;padding:32px 24px;text-align:center;position:relative;overflow:hidden;max-width:100%;box-sizing:border-box}
.r-animal-emoji{font-size:72px;display:flex;align-items:center;justify-content:center;width:90px;height:90px;margin:0 auto 10px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.15))}
.r-animal-tag{display:inline-block;padding:4px 14px;border-radius:100px;font-size:12px;font-weight:700;margin-bottom:8px;background:rgba(255,255,255,.22);color:#fff;backdrop-filter:blur(4px)}
.r-animal-title{font-size:17px;font-weight:800;color:#fff;line-height:1.5;margin-bottom:6px}
.r-animal-desc{font-size:13px;line-height:1.7;color:rgba(255,255,255,.85);margin-bottom:14px;word-break:keep-all}
.r-animal-traits{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.r-animal-trait{padding:4px 12px;border-radius:100px;font-size:11px;font-weight:600;background:rgba(255,255,255,.18);color:#fff}
.r-share-row{display:flex;gap:10px;justify-content:center;margin:0 16px 20px;max-width:100%;box-sizing:border-box}
.r-share-btn{padding:10px 20px;font-size:13px;font-weight:600;border:1.5px solid var(--border);border-radius:100px;background:#fff;color:var(--text-2);cursor:pointer}
.r-share-btn:active{background:var(--bg-2)}
.r-profile{margin:0 16px 20px;background:#fff;border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.04);max-width:100%;box-sizing:border-box}
.r-profile-title{font-size:12px;font-weight:700;color:var(--text-3);text-align:center;padding:16px 16px 12px;letter-spacing:2px}
.r-pil-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:0 14px 14px}
.r-pil-box{text-align:center;background:rgba(0,0,0,.02);border-radius:14px;padding:10px 4px;border:1px solid var(--border)}
.r-pil-box.r-pil-day{border-color:var(--purple);box-shadow:0 2px 10px rgba(139,108,193,0.15)}
.r-pil-label{font-size:10px;color:var(--text-3);margin-bottom:5px;font-weight:600}
.r-pil-stem{font-size:22px;font-weight:900;line-height:1.3}
.r-pil-info{font-size:9px;color:var(--text-3);margin-bottom:1px}
.r-pil-ss{font-size:9px;font-weight:600;color:var(--purple);margin-bottom:2px}
.r-pil-un{font-size:8px;color:var(--text-3)}
.r-pil-div{height:1px;background:var(--border);margin:4px 0}
.r-pil-branch{font-size:22px;font-weight:900;line-height:1.3}
.r-pil-jiji{font-size:9px;color:var(--text-3);margin-top:3px}
.r-oh-bar{display:flex;gap:12px;padding:12px 16px;justify-content:center;border-top:1px solid var(--border)}
.r-oh-item{text-align:center}
.r-oh-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;margin:0 auto 3px}
.r-oh-lbl{font-size:9px;font-weight:600}
.r-sal-tags{display:flex;justify-content:center;gap:5px;flex-wrap:wrap;padding:8px 16px 14px}
.r-sal-tag{font-size:10px;padding:3px 10px;border-radius:100px;border:1px solid rgba(136,97,154,.15);color:var(--purple);background:rgba(139,108,193,0.05)}
.r-divider{height:1px;background:var(--border);margin:0 16px}
.r-mbti-area{padding:16px;text-align:center}
.r-mbti-letters{display:flex;justify-content:center;gap:6px;margin-bottom:6px}
.r-mbti-letters span{font-size:28px;font-weight:900;font-family:var(--font-main)}
.r-mbti-name{font-size:14px;font-weight:700;color:var(--purple)}
.r-mbti-cf{font-size:11px;color:var(--text-3);margin-top:3px}
.r-mbti-tags{display:flex;justify-content:center;gap:5px;margin-top:8px;flex-wrap:wrap}
.r-mbti-tag{font-size:10px;color:var(--text-2);background:rgba(0,0,0,.03);padding:4px 10px;border-radius:20px;border:1px solid var(--border)}
.r-cat-nav{position:sticky;top:0;z-index:100;background:rgba(248,247,244,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:10px 0;margin-bottom:16px}
.r-cat-nav-inner{display:flex;gap:8px;overflow-x:auto;padding:0 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.r-cat-nav-inner::-webkit-scrollbar{display:none}
.r-cat-pill{flex-shrink:0;padding:8px 16px;border-radius:100px;font-size:13px;font-weight:600;cursor:pointer;border:1.5px solid var(--border);color:var(--text-3);background:#fff;white-space:nowrap;transition:all .2s}
.r-cat-pill.active{background:var(--purple);color:#fff;border-color:var(--purple)}
.r-cat-sec{padding:0 16px 24px}
.r-cat-head{margin-bottom:16px}
.r-cat-num{font-size:11px;font-weight:800;color:var(--text-3);margin-bottom:4px}
.r-cat-title-row{display:flex;align-items:center;gap:8px}
.r-cat-icon{font-size:24px}
.r-cat-title{font-size:20px;font-weight:800;color:var(--text-1)}
.r-cat-sub{font-size:13px;color:var(--text-3);margin-top:2px}
.r-sub{background:#fff;border:1px solid var(--border);border-radius:16px;padding:20px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,.03)}
.r-sub-h{font-size:15px;font-weight:700;color:var(--text-1);margin-bottom:12px;line-height:1.5}
.r-sub-b{font-size:14px;line-height:2;color:var(--text-2);word-break:keep-all}
.r-sub-b p{margin-bottom:14px}
.r-sub-b p:last-child{margin-bottom:0}
.r-tip{border-radius:12px;padding:14px 16px;margin:12px 0;font-size:13px;line-height:1.85;background:rgba(136,97,154,.06);border-left:3px solid var(--purple);color:var(--text-2)}
.r-oneline{margin:8px 16px 24px;background:linear-gradient(135deg,#1E1B2E,#16132A);border-radius:20px;padding:32px 24px;text-align:center}
.r-oneline-label{font-size:10px;letter-spacing:3px;color:rgba(255,255,255,.4);font-weight:700;margin-bottom:12px;text-transform:uppercase}
.r-oneline-text{font-family:'Noto Serif KR',Georgia,serif;font-size:18px;line-height:1.8;color:rgba(255,255,255,.85);font-weight:500}
.r-animal-rx{font-size:12px;color:rgba(255,255,255,.7);font-style:italic}
.r-cta{text-align:center;padding:20px 16px 40px}
.r-cta-row{display:flex;gap:10px;justify-content:center;margin-bottom:16px}
.r-cta-btn{padding:14px 24px;font-size:14px;font-weight:700;border:none;border-radius:14px;cursor:pointer}
@media(max-width:600px){.r-pil-grid{padding:0 10px 10px}.r-pil-stem,.r-pil-branch{font-size:18px}.r-cat-sec{padding:0 12px 20px}.r-sub{padding:16px}.r-sub-b{font-size:13px}.r-animal{margin:0 10px 14px;padding:28px 18px}}

/* ===== 궁합 로딩 (pgGhLoad) ===== */
@keyframes logoPulseGh{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes ghLoadFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.ghload-wrap{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:100vh;min-height:100dvh;background:var(--bg);padding:40px 24px;
  position:relative;overflow:hidden;
}

/* ===== 궁합 결과 (pgGhRes) ===== */
@keyframes scorePop{0%{transform:scale(0.6);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes heartBeat{0%,100%{transform:scale(1)}15%{transform:scale(1.25)}30%{transform:scale(1)}45%{transform:scale(1.15)}60%{transform:scale(1)}}
@keyframes barGrow{from{width:0}to{width:var(--target)}}
@keyframes ringFill{from{stroke-dashoffset:314}to{stroke-dashoffset:var(--target-offset)}}
@keyframes sparkleAnim{0%,100%{opacity:0;transform:scale(0) rotate(0deg)}50%{opacity:1;transform:scale(1) rotate(180deg)}}
@keyframes daltoWiggle{0%,100%{transform:rotate(0deg)}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
@keyframes slideUpGh{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

.gh-result{max-width:420px;margin:0 auto;padding:0 0 120px;overflow-x:hidden;width:100%;box-sizing:border-box}
.gh-result *{max-width:100%;box-sizing:border-box}
.gh-res-header{
  text-align:center;padding:40px 20px 28px;
  background:linear-gradient(180deg,rgba(139,108,193,0.04) 0%,transparent 100%);
}
.gh-res-logo{display:flex;justify-content:center;gap:1px;margin-bottom:6px;cursor:pointer}
.gh-res-logo span{font-family:'Pretendard Variable',sans-serif;font-weight:800;font-size:26px}
.gh-res-badge{
  display:inline-block;font-size:11px;color:var(--purple);
  background:rgba(139,108,193,0.08);border-radius:var(--r-full);
  padding:3px 12px;font-weight:600;letter-spacing:0.5px;margin-bottom:12px;
}
.gh-res-title{
  font-family:'Noto Serif KR',serif;font-size:20px;font-weight:700;
  color:var(--text-1);line-height:1.5;letter-spacing:-0.5px;
}
.gh-pair-sec{
  display:flex;align-items:center;gap:0;padding:20px;justify-content:center;
}
.gh-p-card{
  background:var(--card);backdrop-filter:blur(20px);
  border:1px solid var(--border);border-radius:var(--r-md);
  padding:20px 16px;text-align:center;width:140px;
  box-shadow:var(--shadow-sm);transition:transform .3s;
}
.gh-p-card:hover{transform:translateY(-2px)}
.gh-p-emoji{font-size:44px;margin-bottom:8px;animation:float 3s ease-in-out infinite}
.gh-p-card:last-child .gh-p-emoji{animation-delay:-.5s}
.gh-p-name{font-size:15px;font-weight:700;color:var(--text-1);margin-bottom:2px}
.gh-p-info{font-size:11px;color:var(--text-3);line-height:1.4}
.gh-p-mbti{
  display:inline-block;font-size:11px;font-weight:700;
  padding:2px 8px;border-radius:var(--r-full);margin-top:6px;
}
.gh-vs-heart{
  font-size:28px;margin:0 8px;z-index:1;
  animation:heartBeat 2s ease-in-out infinite;
  filter:drop-shadow(0 2px 8px rgba(212,115,139,0.3));
}
.gh-rel-pill{display:flex;justify-content:center;margin-bottom:4px}
.gh-rel-pill span{
  font-size:12px;color:var(--rose);background:rgba(212,115,139,0.08);
  border-radius:var(--r-full);padding:4px 14px;font-weight:600;
}
.gh-score-sec{text-align:center;padding:8px 20px 24px}
.gh-score-ring{position:relative;width:160px;height:160px;margin:0 auto 12px}
.gh-score-ring svg{transform:rotate(-90deg)}
.gh-score-ring circle.bg{fill:none;stroke:rgba(0,0,0,0.04);stroke-width:8}
.gh-score-ring circle.fill{
  fill:none;stroke:url(#scoreGrad);stroke-width:8;
  stroke-linecap:round;stroke-dasharray:314;
  stroke-dashoffset:var(--target-offset);
  animation:ringFill 1.5s ease-out .5s both;
}
.gh-score-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}
.gh-score-big{
  font-size:52px;font-weight:800;color:var(--text-1);
  letter-spacing:-2px;line-height:1;
  animation:scorePop .6s ease-out .8s both;
}
.gh-score-lbl{font-size:11px;color:var(--text-3);margin-top:2px}
.gh-score-comment{
  font-family:'Noto Serif KR',serif;font-size:14px;color:var(--text-2);
  font-weight:300;letter-spacing:0.3px;
}
.gh-sparkle-wrap{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.gh-sparkle{
  position:absolute;width:6px;height:6px;border-radius:50%;
  animation:sparkleAnim 2s ease-in-out infinite;
}
.gh-cats-sec{padding:0 20px;margin-bottom:24px}
.gh-cats-head{font-size:13px;font-weight:700;color:var(--text-1);margin-bottom:14px;display:flex;align-items:center;gap:6px}
.gh-cat-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.gh-cat-ic{font-size:16px;width:24px;text-align:center}
.gh-cat-lb{width:44px;font-size:12px;font-weight:600;color:var(--text-2)}
.gh-cat-track{flex:1;height:8px;background:rgba(0,0,0,0.04);border-radius:4px;overflow:hidden}
.gh-cat-fill{height:100%;border-radius:4px;width:0;animation:barGrow 1s ease-out .7s forwards}
.gh-cat-vl{width:32px;text-align:right;font-size:12px;font-weight:700;color:var(--text-2)}
.gh-chem-sec{margin:0 20px 24px}
.gh-chem-head{font-size:13px;font-weight:700;color:var(--text-1);margin-bottom:10px}
.gh-chem-tags{display:flex;flex-wrap:wrap;gap:8px}
.gh-chem-tag{
  font-size:12px;font-weight:600;padding:6px 14px;border-radius:var(--r-full);
  background:rgba(139,108,193,0.06);color:var(--purple);
  border:1px solid rgba(139,108,193,0.1);animation:float 3s ease-in-out infinite;
}
.gh-chem-tag:nth-child(2){animation-delay:-.5s}
.gh-chem-tag:nth-child(3){animation-delay:-1s}
.gh-chem-tag:nth-child(4){animation-delay:-1.5s}
.gh-chem-tag.good{background:rgba(123,166,140,0.08);color:var(--sage);border-color:rgba(123,166,140,0.15)}
.gh-chem-tag.warn{background:rgba(212,168,83,0.08);color:#B8860B;border-color:rgba(212,168,83,0.15)}
.gh-quote-card{
  margin:0 20px 24px;padding:20px;background:var(--card);backdrop-filter:blur(20px);
  border:1px solid var(--border);border-radius:var(--r-md);
  border-left:3px solid var(--purple);box-shadow:var(--shadow-sm);
}
.gh-quote-mark{font-family:'Noto Serif KR',serif;font-size:32px;color:var(--purple-light);line-height:1;margin-bottom:4px}
.gh-quote-txt{
  font-family:'Noto Serif KR',serif;font-size:14px;color:var(--text-2);
  font-weight:300;line-height:1.8;letter-spacing:0.2px;
}
.gh-anal-sec{padding:0 20px}
.gh-anal-card{
  background:var(--card);backdrop-filter:blur(20px);
  border:1px solid var(--border);border-radius:var(--r-md);
  padding:24px 20px;margin-bottom:14px;box-shadow:var(--shadow-sm);transition:transform .2s;
}
.gh-anal-card:hover{transform:translateY(-1px)}
.gh-anal-hd{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.gh-anal-em{font-size:24px}
.gh-anal-ti{font-size:15px;font-weight:700;color:var(--text-1)}
.gh-anal-ct{font-size:11px;color:var(--purple);font-weight:600}
.gh-anal-bd{font-size:13.5px;color:var(--text-2);line-height:1.8;word-break:keep-all}
.gh-anal-bd strong{font-weight:700;color:var(--text-1)}
.gh-insight{
  margin-top:14px;padding:12px 14px;border-radius:12px;
  display:flex;align-items:flex-start;gap:8px;
}
.gh-insight-ic{font-size:14px;flex-shrink:0;margin-top:1px}
.gh-insight-tx{font-size:12px;line-height:1.6;font-weight:500}
.ins-gold{background:rgba(212,168,83,0.08);border:1px solid rgba(212,168,83,0.15)}
.ins-gold .gh-insight-tx{color:#B8860B}
.ins-rose{background:rgba(212,115,139,0.08);border:1px solid rgba(212,115,139,0.15)}
.ins-rose .gh-insight-tx{color:#C2506A}
.ins-purple{background:rgba(139,108,193,0.08);border:1px solid rgba(139,108,193,0.15)}
.ins-purple .gh-insight-tx{color:#7B5EA7}
.ins-sage{background:rgba(123,166,140,0.08);border:1px solid rgba(123,166,140,0.15)}
.ins-sage .gh-insight-tx{color:#5A8A6C}

/* 달토 CTA */
.dalto-cta{
  margin:32px 20px 0;position:relative;overflow:hidden;
  background:linear-gradient(135deg,rgba(139,108,193,0.06) 0%,rgba(212,168,83,0.04) 100%);
  border:1px solid rgba(139,108,193,0.12);border-radius:var(--r-lg);padding:28px 22px;
}
.dalto-cta::before{
  content:'';position:absolute;top:-40px;right:-40px;
  width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,rgba(139,108,193,0.06) 0%,transparent 70%);
}
.dalto-cta-top{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.dalto-emoji{font-size:36px;animation:daltoWiggle 2s ease-in-out infinite}
.dalto-label{font-size:11px;font-weight:700;color:var(--purple);letter-spacing:0.5px;margin-bottom:2px}
.dalto-question{
  font-family:'Noto Serif KR',serif;font-size:16px;font-weight:700;
  color:var(--text-1);line-height:1.5;letter-spacing:-0.3px;
}
.dalto-desc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:18px;word-break:keep-all}
.dalto-examples{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.dalto-ex{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,0.7);backdrop-filter:blur(10px);
  border:1px solid rgba(139,108,193,0.08);border-radius:12px;
  padding:10px 14px;cursor:pointer;transition:all .2s;
}
.dalto-ex:hover{transform:translateY(-2px);border-color:var(--purple-light);box-shadow:0 4px 16px rgba(139,108,193,0.1)}
.dalto-ex:active{transform:scale(0.97)}
.dalto-ex-ic{font-size:14px}
.dalto-ex-tx{font-size:12.5px;color:var(--text-2);font-weight:500}
.dalto-btn{
  width:100%;padding:14px;border:none;border-radius:var(--r-sm);
  font-size:14px;font-weight:700;color:white;
  background:linear-gradient(135deg,var(--purple) 0%,var(--purple-deep) 100%);
  box-shadow:0 4px 20px rgba(139,108,193,0.3);cursor:pointer;transition:all .25s;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.dalto-btn:hover{transform:translateY(-2px);box-shadow:0 6px 28px rgba(139,108,193,0.4)}
.dalto-btn:active{transform:scale(0.97)}
.dalto-btn-sub{font-size:11px;color:var(--text-3);text-align:center;margin-top:8px}

.gh-act-sec{padding:24px 20px 0}
.gh-share-btn{
  width:100%;padding:14px;border:none;border-radius:var(--r-sm);
  font-size:14px;font-weight:700;color:#191919;background:#FEE500;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;
  transition:all .2s;margin-bottom:10px;
}
.gh-share-btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(254,229,0,0.4)}
.gh-share-btn:active{transform:scale(0.97)}
.gh-img-btn{
  width:100%;padding:13px;border:1.5px solid var(--border);border-radius:var(--r-sm);
  font-size:13px;font-weight:600;color:var(--text-2);background:var(--card);
  cursor:pointer;transition:all .2s;
}
.gh-img-btn:hover{border-color:var(--purple-light);color:var(--purple)}
.gh-foot{text-align:center;padding:24px 20px 16px}
.gh-disclaim{font-size:10.5px;color:var(--text-3);line-height:1.6}
.gh-retry-btn{
  display:inline-block;margin-top:12px;font-size:12px;color:var(--purple);
  font-weight:600;cursor:pointer;border:none;background:none;
  padding:6px 14px;border-radius:var(--r-full);
  border:1px solid rgba(139,108,193,0.15);transition:all .2s;
}
.gh-retry-btn:hover{background:rgba(139,108,193,0.06)}

.stagger-gh{opacity:0;animation:slideUpGh .5s ease-out forwards}
.sg1{animation-delay:.1s}.sg2{animation-delay:.2s}.sg3{animation-delay:.3s}
.sg4{animation-delay:.35s}.sg5{animation-delay:.4s}.sg6{animation-delay:.45s}
.sg7{animation-delay:.5s}.sg8{animation-delay:.55s}.sg9{animation-delay:.6s}
.sg10{animation-delay:.65s}.sg11{animation-delay:.7s}

/* ===== 궁합 결과 v2 디자인 업그레이드 ===== */
.gh-hero{margin:0 16px 16px;border-radius:20px;padding:32px 20px 24px;text-align:center;position:relative;overflow:hidden;background:linear-gradient(135deg,#8B6CC1,#D4738B)}
.gh-hero-badge{display:inline-block;padding:4px 14px;border-radius:100px;font-size:12px;font-weight:700;background:rgba(255,255,255,.22);color:#fff;backdrop-filter:blur(4px);margin-bottom:14px}
.gh-hero-pair{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:16px}
.gh-hero-person{text-align:center;width:120px}
.gh-hero-emoji{font-size:56px;display:block;margin-bottom:6px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.15));animation:float 3s ease-in-out infinite}
.gh-hero-person:last-child .gh-hero-emoji{animation-delay:-.5s}
.gh-hero-name{font-size:15px;font-weight:700;color:#fff;margin-bottom:2px}
.gh-hero-sub{font-size:11px;color:rgba(255,255,255,.75)}
.gh-hero-vs{font-size:28px;margin:0 12px;animation:heartBeat 2s ease-in-out infinite;filter:drop-shadow(0 2px 8px rgba(255,255,255,.3))}
.gh-hero-title{font-family:'Noto Serif KR',serif;font-size:17px;font-weight:700;color:#fff;line-height:1.6;margin-bottom:6px}
.gh-hero-desc{font-size:12px;color:rgba(255,255,255,.7);font-style:italic}

.gh-cat-nav{position:sticky;top:0;z-index:100;background:rgba(248,247,244,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:10px 0;margin-bottom:16px}
.gh-cat-nav-inner{display:flex;gap:8px;overflow-x:auto;padding:0 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gh-cat-nav-inner::-webkit-scrollbar{display:none}
.gh-cat-pill{flex-shrink:0;padding:8px 16px;border-radius:100px;font-size:13px;font-weight:600;cursor:pointer;border:1.5px solid var(--border);color:var(--text-3);background:#fff;white-space:nowrap;transition:all .2s}
.gh-cat-pill.active{background:var(--rose);color:#fff;border-color:var(--rose)}

.gh-sec-head{margin-bottom:16px}
.gh-sec-num{font-size:11px;font-weight:800;color:var(--text-3);margin-bottom:4px}
.gh-sec-title-row{display:flex;align-items:center;gap:8px}
.gh-sec-icon{font-size:24px}
.gh-sec-title{font-size:20px;font-weight:800;color:var(--text-1)}
.gh-sec-sub{font-size:13px;color:var(--text-3);margin-top:2px}

.gh-sub{background:#fff;border:1px solid var(--border);border-radius:16px;padding:20px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,.03)}
.gh-sub-h{font-size:15px;font-weight:700;color:var(--text-1);margin-bottom:12px;line-height:1.5}
.gh-sub-b{font-size:14px;line-height:2;color:var(--text-2);word-break:keep-all}
.gh-sub-b p{margin-bottom:14px}
.gh-sub-b p:last-child{margin-bottom:0}
.gh-sub-b strong{font-weight:700;color:var(--text-1)}

.gh-tip{border-radius:12px;padding:14px 16px;margin:12px 0 0;font-size:13px;line-height:1.85;background:rgba(212,115,139,.06);border-left:3px solid var(--rose);color:var(--text-2)}

.gh-oneline{margin:8px 16px 24px;background:linear-gradient(135deg,#1E1B2E,#16132A);border-radius:20px;padding:32px 24px;text-align:center}
.gh-oneline-label{font-size:10px;letter-spacing:3px;color:rgba(255,255,255,.4);font-weight:700;margin-bottom:12px;text-transform:uppercase}
.gh-oneline-text{font-family:'Noto Serif KR',Georgia,serif;font-size:18px;line-height:1.8;color:rgba(255,255,255,.85);font-weight:500}

.gh-cat-sec{padding:0 16px 24px}

@media(max-width:600px){
  .gh-hero{margin:0 10px 14px;padding:28px 16px 20px}
  .gh-hero-emoji{font-size:48px}
  .gh-cat-sec{padding:0 12px 20px}
  .gh-sub{padding:16px}
  .gh-sub-b{font-size:13px}
}

/* ===== Popup Notice ===== */
.popup-notice-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:9999;align-items:center;justify-content:center;padding:20px}
.popup-notice-overlay.open{display:flex}
.popup-notice{background:#fff;border-radius:20px;width:100%;max-width:380px;overflow:hidden;box-shadow:0 16px 48px rgba(0,0,0,0.2);animation:popupSlideUp .35s cubic-bezier(.4,0,.2,1)}
@keyframes popupSlideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.popup-notice-header{padding:20px 20px 0;display:flex;align-items:center;justify-content:space-between}
.popup-notice-badge{font-size:10px;font-weight:700;color:#fff;background:linear-gradient(135deg,#8B6CC1,#6B4FA0);padding:3px 10px;border-radius:10px}
.popup-notice-close{width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,0.05);border:none;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.popup-notice-title{font-size:17px;font-weight:800;color:#1C1C1E;padding:12px 20px 6px;line-height:1.4}
.popup-notice-content{font-size:14px;color:#636366;padding:0 20px 20px;line-height:1.7;max-height:300px;overflow-y:auto;white-space:pre-wrap}
.popup-notice-footer{padding:0 20px 20px;display:flex;align-items:center;justify-content:space-between}
.popup-notice-today{font-size:12px;color:#AEAEB2;cursor:pointer;display:flex;align-items:center;gap:4px}
.popup-notice-today input{margin:0}
.popup-notice-ok{padding:8px 20px;background:#8B6CC1;color:#fff;border:none;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
/* ===== 프로필 편집 바텀시트 ===== */
.profile-sheet-overlay{
  position:fixed;inset:0;z-index:300;background:rgba(0,0,0,0.4);
  display:none;align-items:flex-end;justify-content:center;
  animation:fade .2s ease-out;
}
.profile-sheet-overlay.open{display:flex}
.profile-sheet{
  background:#fff;border-radius:24px 24px 0 0;
  width:100%;max-width:460px;max-height:85vh;overflow-y:auto;
  padding:20px 20px max(20px,env(safe-area-inset-bottom));
  animation:slideUp .3s cubic-bezier(.4,0,.2,1);
  box-shadow:0 -8px 32px rgba(0,0,0,0.1);
}
.profile-sheet-handle{
  width:36px;height:4px;background:rgba(0,0,0,0.1);border-radius:2px;
  margin:0 auto 16px;
}
.profile-sheet-title{font-size:18px;font-weight:700;margin-bottom:16px;text-align:center}
.profile-sheet .field-label{font-size:12px;font-weight:600;color:var(--text-2);margin-bottom:6px}
.profile-sheet .field-row{margin-bottom:14px}
.profile-sheet input,.profile-sheet select{
  width:100%;padding:12px 14px;font-size:15px;font-family:inherit;
  border:1.5px solid var(--border);border-radius:var(--r-sm);
  background:#fff;outline:none;box-sizing:border-box;
  transition:border-color .2s;
}
.profile-sheet input:focus,.profile-sheet select:focus{border-color:var(--purple)}
.profile-sheet .gender-row{display:flex;gap:8px}
.profile-sheet .gender-btn{
  flex:1;padding:12px;text-align:center;border-radius:var(--r-sm);
  border:1.5px solid var(--border);background:#fff;
  font-size:14px;font-weight:600;color:var(--text-2);cursor:pointer;
  transition:all .2s;
}
.profile-sheet .gender-btn.selected{
  border-color:var(--purple);background:rgba(139,108,193,0.06);color:var(--purple);
}
.profile-sheet .save-btn{
  width:100%;padding:15px;font-size:16px;font-weight:700;color:#fff;
  background:var(--purple);border:none;border-radius:var(--r-sm);
  margin-top:8px;cursor:pointer;transition:opacity .2s;
}
.profile-sheet .save-btn:active{opacity:0.8}
/* 프로필 모바일 최적화 */
#pgProfile .save-page { padding-top:4px !important; }
#profileEditContent { padding:0 4px; }
/* 채팅 전체 화면 */
#pgChat { position:relative; }
#pgChat .chat-page { max-width:100%; }
/* pgAnimal 모바일 */
#pgAnimal { padding-bottom:80px; }
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.charge-pkg:hover{transform:translateY(-1px)}
.charge-pkg:active{transform:translateY(0)}
/* ── 프로그레시브 렌더링 ── */
.prog-sub-card {
  opacity: 0;
  transform: translateY(40px);
}
.prog-sub-card.revealed {
  animation: progSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes progSlideUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
.prog-skeleton {
  background: #fff;
  border-radius: 20px;
  border: 1px solid rgba(136,97,154,0.1);
  padding: 20px;
  margin-bottom: 12px;
}
.prog-skel-line {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(136,97,154,0.06) 0%, rgba(136,97,154,0.12) 50%, rgba(136,97,154,0.06) 100%);
  background-size: 400px 12px;
  animation: progShimmer 1.5s linear infinite;
  margin-bottom: 10px;
}
.prog-skel-line:nth-child(1) { width: 40%; height: 14px; margin-bottom: 16px; }
.prog-skel-line:nth-child(2) { width: 100%; }
.prog-skel-line:nth-child(3) { width: 92%; }
.prog-skel-line:nth-child(4) { width: 85%; }
.prog-skel-line:nth-child(5) { width: 70%; margin-bottom: 0; }
@keyframes progShimmer {
  0% { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}
.prog-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  justify-content: center;
  padding: 0 16px 14px;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.prog-bottom-bar.show { transform: translateY(0); }
.prog-bottom-pill {
  background: rgba(255,248,240,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 100px;
  padding: 8px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  border: 1px solid rgba(136,97,154,0.1);
}
.prog-dots {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-right: 10px;
}
.prog-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #B8A9E8;
  opacity: 0.25;
  transition: opacity 0.4s, background 0.4s;
}
.prog-dots span.filled {
  opacity: 1;
  background: #88619A;
}
.prog-bottom-text {
  font-size: 12px;
  font-weight: 500;
  color: #8a8a9a;
  white-space: nowrap;
}
.prog-bottom-pill.done { border-color: rgba(76,175,125,0.2); }
.prog-bottom-pill.done .prog-bottom-text { color: #4CAF7D; font-weight: 600; }
.prog-bottom-pill.done .prog-dots span.filled { background: #4CAF7D; }

@keyframes spin{to{transform:rotate(360deg)}}

/* ===== LOGIN INTRO ANIMATION ===== */
.login-intro{
  display:flex;flex-direction:column;align-items:center;
  width:100%;max-width:380px;
}
.login-intro-label{
  font-size:16px;font-weight:500;letter-spacing:2.5px;color:#B0A3C8;
  margin-bottom:12px;opacity:0;
}
.login-intro-line{
  font-size:20px;font-weight:400;color:#6B5B8A;text-align:center;
  line-height:1.8;letter-spacing:-.3px;opacity:0;
}
.login-intro-turn{
  font-size:18px;font-weight:400;color:var(--purple);text-align:center;
  margin-top:24px;opacity:0;
}
.login-intro-punch{
  font-size:13px;font-weight:400;color:var(--text-3);text-align:center;
  margin-top:16px;letter-spacing:.8px;opacity:0;
}
.login-intro-brand{
  font-size:52px;font-weight:800;letter-spacing:-1px;margin-top:6px;opacity:0;
}
.login-intro-brand span{display:inline-block;min-width:0.6em;text-align:center}
.login-intro-sub{
  font-size:13px;color:var(--text-3);letter-spacing:1.5px;margin-top:6px;
  font-weight:400;opacity:0;
}
.login-intro-sub em{margin:0 3px;color:var(--purple-light);font-style:normal}
.login-intro-divider{
  width:32px;height:1px;background:var(--purple-light);margin:28px 0;opacity:0;
}
.login-intro .btn-kakao{margin-top:32px;opacity:0;transform:translateY(12px)}
.login-intro .btn-guest{margin-top:8px;opacity:0;transform:translateY(12px)}
.li-char{
  display:inline-block;opacity:0;transform:translateY(8px);
  transition:opacity .35s ease,transform .35s ease;
}
.li-char.visible{opacity:1;transform:translateY(0)}
.li-visible{opacity:1!important}
.li-cursor{
  display:inline-block;width:2px;height:20px;background:var(--purple);
  margin-left:2px;vertical-align:middle;animation:blink .8s ease infinite;
}
.login-intro .intro-up{animation:up .5s ease-out forwards}