/*
 STARPOINT V87 — REFERENCE SKIN ONLY
 ------------------------------------------------------------
 This file is visual-only. It does not add event handlers, observers,
 validation, API calls, payment logic, navigation logic, or data mutations.
 The V87 application JavaScript is kept byte-for-byte identical to the
 verified pre-UI V87 base.
*/
:root{
  --sp-ink:#34363c;
  --sp-ink2:#50535a;
  --sp-muted:#999ca4;
  --sp-line:#e6e8eb;
  --sp-line2:#dfe2e6;
  --sp-paper:#ffffff;
  --sp-bg:#fbfcfd;
  --sp-mint:#72d7cf;
  --sp-mint-soft:#eefbf9;
  --sp-blue:#91d6e2;
  --sp-lilac:#ae93e9;
  --sp-lilac-soft:#f5f0fd;
  --sp-shadow:0 10px 30px rgba(63,67,78,.06);
  --star-nav-h:72px;
}
html,body{background:var(--sp-bg)!important;color:var(--sp-ink)!important}
body.sp-ref-ui{font-family:Pretendard,"Noto Sans KR","Apple SD Gothic Neo",system-ui,-apple-system,sans-serif!important;letter-spacing:-.018em}
body.sp-ref-ui *{box-sizing:border-box}

/* Top app bar: light, quiet, phone-app style. No blur/filter for performance. */
body.sp-ref-ui #app>header{
  position:sticky!important;top:0!important;z-index:9000!important;
  height:68px!important;min-height:68px!important;padding:0 14px!important;
  display:grid!important;grid-template-columns:42px minmax(0,1fr) 76px!important;align-items:center!important;gap:0!important;
  background:#fff!important;color:var(--sp-ink)!important;border:0!important;border-bottom:1px solid #f0f1f3!important;box-shadow:none!important;
}
body.sp-ref-ui #app>header .seal{
  width:32px!important;height:32px!important;margin:0!important;display:grid!important;place-items:center!important;
  border:1px solid #dce8eb!important;border-radius:10px!important;background:linear-gradient(145deg,#f3fffd,#f8f3ff)!important;
  color:#8e8ba2!important;font:700 15px/1 serif!important;
}
body.sp-ref-ui #app>header>div:nth-of-type(2){text-align:center!important;min-width:0!important}
body.sp-ref-ui #app>header b{display:block!important;color:#303238!important;font-size:15px!important;font-weight:850!important;line-height:1.22!important;letter-spacing:-.04em!important}
body.sp-ref-ui #app>header>div:nth-of-type(2)>span{display:block!important;margin-top:3px!important;color:#9b9da4!important;font-size:8.5px!important;font-weight:600!important;line-height:1.2!important}
body.sp-ref-ui #app>header>nav{display:none!important}

/* Star balance pill */
body.sp-ref-ui #v81WalletChip{
  position:fixed!important;z-index:9200!important;top:17px!important;right:12px!important;bottom:auto!important;
  min-width:66px!important;height:34px!important;padding:0 10px!important;gap:5px!important;display:flex!important;align-items:center!important;justify-content:center!important;
  border:1px solid #e6e8ec!important;border-radius:999px!important;background:#fff!important;color:#62656d!important;box-shadow:0 3px 10px rgba(58,62,75,.04)!important;
  font-size:11px!important;font-weight:850!important;
}
body.sp-ref-ui #v81WalletChip i{color:#a99be5!important;font-size:12px!important}
body.sp-ref-ui #v81WalletChip small{display:none!important}

/* Existing V87 swipe/navigation remains the controller. CSS only changes its skin. */
body.sp-ref-ui .star-swipe-shell{height:calc(100dvh - 68px - var(--star-nav-h))!important;background:var(--sp-bg)!important}
body.sp-ref-ui .star-page{background:var(--sp-bg)!important}
@supports selector(body:has(*)){
  body.sp-ref-ui:has(.star-bottom-nav button[data-go="0"].active) .star-bottom-nav{display:none!important}
  body.sp-ref-ui:has(.star-bottom-nav button[data-go="0"].active) .star-swipe-shell{height:calc(100dvh - 68px)!important}
}

/* ------------------------------------------------------------
   PROFILE / INFORMATION INPUT
   ------------------------------------------------------------ */
body.sp-ref-ui .profile-page main{display:block!important;width:100%!important;max-width:none!important;min-height:100%!important;margin:0!important;padding:0 0 44px!important;background:#fff!important}
body.sp-ref-ui .profile-page aside{width:min(430px,100%)!important;max-width:430px!important;margin:0 auto!important;padding:30px 28px 38px!important;background:#fff!important;border:0!important;color:var(--sp-ink)!important}

/* Small step/trust messages are visually quiet; underlying elements are untouched. */
body.sp-ref-ui .profile-page .star-step{display:none!important}
body.sp-ref-ui .profile-page .v87-first-trust{display:none!important}
body.sp-ref-ui .profile-page .v87-start-note{color:#a2a4aa!important;font-size:9px!important;text-align:center!important}

/* Reference hero with a CSS-only pastel planet. */
body.sp-ref-ui .profile-page aside>.v76-page-hero{
  position:relative!important;display:block!important;min-height:108px!important;margin:0 0 22px!important;padding:5px 106px 10px 0!important;
  border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:var(--sp-ink)!important;overflow:visible!important;
}
body.sp-ref-ui .profile-page aside>.v76-page-hero .eyebrow,
body.sp-ref-ui .profile-page aside>.v76-page-hero .v87-hero-kicker,
body.sp-ref-ui .profile-page aside>.v76-page-hero .v76-hero-mark{display:none!important}
body.sp-ref-ui .profile-page aside>.v76-page-hero h1{margin:0 0 8px!important;color:#34363c!important;font-family:inherit!important;font-size:20px!important;font-weight:850!important;line-height:1.3!important;letter-spacing:-.045em!important}
body.sp-ref-ui .profile-page aside>.v76-page-hero p{max-width:260px!important;margin:0!important;padding:0!important;color:#9ea1a8!important;font-size:10px!important;font-weight:500!important;line-height:1.55!important}
body.sp-ref-ui .profile-page aside>.v76-page-hero:before{
  content:""!important;position:absolute!important;right:10px!important;top:9px!important;width:74px!important;height:74px!important;border-radius:50%!important;
  background:linear-gradient(145deg,#b9eee7 0%,#a8dbe8 48%,#c3a7ec 100%)!important;
  box-shadow:inset 10px 8px 18px rgba(255,255,255,.42),0 7px 18px rgba(143,166,214,.11)!important;
}
body.sp-ref-ui .profile-page aside>.v76-page-hero:after{
  content:"✦   ✧"!important;display:block!important;position:absolute!important;right:2px!important;top:14px!important;width:98px!important;height:70px!important;
  color:#a895df!important;font-size:11px!important;letter-spacing:61px!important;line-height:70px!important;border:0!important;background:transparent!important;transform:none!important;opacity:.9!important;
}

/* Field rhythm and line-input language */
body.sp-ref-ui .profile-page aside>label,
body.sp-ref-ui .profile-page aside>.row{margin:0 0 22px!important}
body.sp-ref-ui .profile-page aside>.row{display:grid!important;grid-template-columns:1fr!important;gap:20px!important}
body.sp-ref-ui .profile-page aside label{position:relative!important;color:#474a51!important;font-size:12px!important;font-weight:800!important;line-height:1.25!important;letter-spacing:-.02em!important}
body.sp-ref-ui .profile-page aside label>input:not([type=radio]):not([type=checkbox]),
body.sp-ref-ui .profile-page aside label>select,
body.sp-ref-ui .profile-page aside label>textarea{
  width:100%!important;min-height:46px!important;margin:4px 0 0!important;padding:14px 2px 9px!important;
  border:0!important;border-bottom:1px solid var(--sp-line2)!important;border-radius:0!important;background:transparent!important;color:#3f4249!important;
  font:600 14px/1.35 inherit!important;box-shadow:none!important;outline:0!important;
}
body.sp-ref-ui .profile-page aside label>input:not([type=radio]):not([type=checkbox])::placeholder,
body.sp-ref-ui .profile-page aside label>textarea::placeholder{color:#c3c6ca!important;opacity:1!important;font-weight:450!important}
body.sp-ref-ui .profile-page aside label>input:not([type=radio]):not([type=checkbox]):focus,
body.sp-ref-ui .profile-page aside label>select:focus,
body.sp-ref-ui .profile-page aside label>textarea:focus{border-bottom-color:#8fd9d2!important;box-shadow:0 1px 0 #8fd9d2!important}
body.sp-ref-ui .profile-page aside label>select{color:#666a72!important;padding-right:28px!important}
body.sp-ref-ui .profile-page aside>small{color:#a8aab0!important;font-size:9px!important;line-height:1.45!important}
body.sp-ref-ui .profile-page aside .v72-birth-note,
body.sp-ref-ui .profile-page aside .v72-region-help{display:block!important;margin-top:5px!important;color:#a5a8ae!important;font-size:9px!important;line-height:1.45!important;font-weight:500!important}

/* Segmented calendar / gender controls */
body.sp-ref-ui .profile-page aside .seg{position:relative!important;display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important;min-height:42px!important;margin:9px 0 0!important;gap:0!important;border:1px solid #e3e6e9!important;border-radius:9px!important;background:#fff!important;overflow:hidden!important}
body.sp-ref-ui .profile-page aside .seg i{display:flex!important;align-items:center!important;justify-content:center!important;min-height:42px!important;padding:0 8px!important;margin:0!important;border:0!important;border-radius:0!important;background:#fff!important;color:#7d8087!important;font-size:12px!important;font-weight:700!important;box-shadow:none!important;transition:background .12s ease,color .12s ease!important}
body.sp-ref-ui .profile-page aside .seg i+input+i{margin-left:0!important;border-left:1px solid #eceef0!important}
body.sp-ref-ui .profile-page aside .seg input:checked+i{background:linear-gradient(180deg,#f8ffff,#edfafa)!important;color:#62bbb5!important;box-shadow:inset 0 0 0 1px rgba(116,211,203,.45)!important;border:0!important}
body.sp-ref-ui .profile-page aside .row>label:nth-child(2) .seg input:checked+i{background:linear-gradient(180deg,#fdfbff,#f5f0fd)!important;color:#9782d4!important;box-shadow:inset 0 0 0 1px rgba(184,154,234,.40)!important}

/* Original convenience controls are preserved, just made quieter. */
body.sp-ref-ui .profile-page aside .yearStep{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:5px!important;margin-top:7px!important}
body.sp-ref-ui .profile-page aside .yearStep button{min-height:30px!important;border:1px solid #eceef0!important;border-radius:7px!important;background:#fbfcfd!important;color:#9a9da4!important;font-size:10px!important;font-weight:700!important;box-shadow:none!important}
body.sp-ref-ui #leapWrap,
body.sp-ref-ui #timeUnknownWrap{display:flex!important;align-items:center!important;gap:7px!important;width:max-content!important;max-width:100%!important;margin:-12px 0 18px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;color:#8f9298!important;font-size:10px!important;font-weight:700!important}
body.sp-ref-ui #leapWrap[hidden]{display:none!important}
body.sp-ref-ui #leapWrap input,
body.sp-ref-ui #timeUnknownWrap input{width:16px!important;height:16px!important;min-height:16px!important;margin:0!important;accent-color:#86d7d0!important}
body.sp-ref-ui #v72LunarHelp{margin:-10px 0 19px!important;padding:11px 12px!important;border:1px solid #e6eeef!important;border-radius:12px!important;background:linear-gradient(145deg,#f7fffd,#faf7ff)!important;color:#777a82!important;box-shadow:none!important}
body.sp-ref-ui #v72LunarHelp b{color:#565960!important}
body.sp-ref-ui #v72LunarHelp>label{background:#fff!important;border-color:#e8e9ee!important}

/* Main CTA */
body.sp-ref-ui .profile-page aside .primary{position:relative!important;bottom:auto!important;width:100%!important;min-height:54px!important;margin:7px 0 0!important;padding:0 18px!important;border:0!important;border-radius:10px!important;background:linear-gradient(100deg,#63d7d0 0%,#88d7e1 46%,#b596eb 100%)!important;color:#fff!important;font-size:15px!important;font-weight:850!important;letter-spacing:-.025em!important;text-shadow:0 1px 1px rgba(84,112,155,.06)!important;box-shadow:0 8px 20px rgba(143,157,212,.14)!important}
body.sp-ref-ui .profile-page aside .primary:after{content:"  ✦"!important;font-weight:800!important}
body.sp-ref-ui .profile-page aside .primary:active{transform:translateY(1px)!important}
body.sp-ref-ui .profile-page aside>.notice{border:1px solid #eceef0!important;border-radius:12px!important;background:#fafbfc!important;color:#989ba2!important;font-size:9px!important;line-height:1.5!important}

/* ------------------------------------------------------------
   BOTTOM NAV
   ------------------------------------------------------------ */
body.sp-ref-ui .star-bottom-nav{height:var(--star-nav-h)!important;padding:7px 12px calc(7px + env(safe-area-inset-bottom))!important;background:#fff!important;border-top:1px solid #eceef0!important;box-shadow:0 -5px 20px rgba(53,58,71,.035)!important}
body.sp-ref-ui .star-bottom-nav button{border:0!important;border-radius:14px!important;background:transparent!important;color:#a0a2a8!important;font-size:10px!important;font-weight:750!important}
body.sp-ref-ui .star-bottom-nav button span{font-size:17px!important;margin-bottom:2px!important}
body.sp-ref-ui .star-bottom-nav button.active{background:linear-gradient(145deg,#effbf9,#f5f0fd)!important;color:#6f6d82!important;border:0!important}

/* ------------------------------------------------------------
   FREE / PREMIUM / ROMANCE / ALTERNATE FORTUNES
   ------------------------------------------------------------ */
body.sp-ref-ui .free-page .page-wrap,
body.sp-ref-ui .paid-page .page-wrap,
body.sp-ref-ui .romance-page .page-wrap{width:min(720px,100%)!important;padding:22px 18px 44px!important}
body.sp-ref-ui .page-kicker{color:#7fc9c3!important;font-size:10px!important;letter-spacing:.14em!important}
body.sp-ref-ui .page-wrap>h1{color:#383b42!important;font-family:inherit!important;font-size:24px!important;letter-spacing:-.045em!important}
body.sp-ref-ui .page-lead{color:#92959d!important;font-size:12px!important;line-height:1.62!important}

body.sp-ref-ui .free-hero,
body.sp-ref-ui .v61-menu-hero,
body.sp-ref-ui header.v63-topic-head,
body.sp-ref-ui header.v63-more-head,
body.sp-ref-ui .v73-romance-hero,
body.sp-ref-ui .v79-panel>header{position:relative!important;min-height:0!important;margin:0 0 16px!important;padding:20px!important;border:1px solid #e9ecef!important;border-radius:18px!important;background:linear-gradient(145deg,#fff 0%,#fbffff 58%,#faf7ff 100%)!important;color:var(--sp-ink)!important;box-shadow:none!important;overflow:hidden!important}
body.sp-ref-ui .free-hero:after,
body.sp-ref-ui .v61-menu-hero:before,
body.sp-ref-ui header.v63-topic-head:before,
body.sp-ref-ui header.v63-more-head:before,
body.sp-ref-ui .v73-romance-hero:before{content:""!important;position:absolute!important;right:-24px!important;top:-30px!important;width:108px!important;height:108px!important;border-radius:50%!important;background:linear-gradient(145deg,rgba(121,217,208,.23),rgba(184,154,234,.19))!important}
body.sp-ref-ui .free-hero small{color:#78c6c0!important}
body.sp-ref-ui .free-hero h2,
body.sp-ref-ui .v61-menu-hero h1,
body.sp-ref-ui header.v63-topic-head h1,
body.sp-ref-ui header.v63-more-head h1,
body.sp-ref-ui .v73-romance-hero h1{position:relative!important;color:#373a41!important;font-family:inherit!important;font-size:22px!important;font-weight:850!important;letter-spacing:-.045em!important}
body.sp-ref-ui .free-hero p,
body.sp-ref-ui .v61-menu-hero p,
body.sp-ref-ui header.v63-topic-head p,
body.sp-ref-ui header.v63-more-head p,
body.sp-ref-ui .v73-romance-hero p{position:relative!important;color:#9699a0!important;font-size:11px!important;line-height:1.58!important}

body.sp-ref-ui .free-choice-grid,
body.sp-ref-ui .v61-menu-grid,
body.sp-ref-ui .v63-topic-grid,
body.sp-ref-ui .v73-romance-grid{gap:10px!important}
body.sp-ref-ui .free-choice,
body.sp-ref-ui .v61-menu-card,
body.sp-ref-ui .v63-topic-card,
body.sp-ref-ui .v73-romance-grid button,
body.sp-ref-ui .paid-page .paid-product,
body.sp-ref-ui .v61-result,
body.sp-ref-ui .premium-result,
body.sp-ref-ui .v73-romance-answer,
body.sp-ref-ui .v73-chem-answer,
body.sp-ref-ui .v79-panel{border:1px solid #e7eaed!important;border-radius:16px!important;background:#fff!important;box-shadow:none!important;color:var(--sp-ink)!important}
body.sp-ref-ui .free-choice{color:#4d5058!important}
body.sp-ref-ui .free-choice small,
body.sp-ref-ui .v61-menu-card small,
body.sp-ref-ui .v63-topic-card small,
body.sp-ref-ui .v73-romance-grid small{color:#9a9da4!important}
body.sp-ref-ui .v61-menu-card i,
body.sp-ref-ui .v63-topic-icon,
body.sp-ref-ui .v73-romance-grid button i{background:linear-gradient(145deg,#edfafa,#f3eefc)!important;color:#73717f!important;border:1px solid #e9e8f0!important;box-shadow:none!important}

body.sp-ref-ui .paid-page .paid-highlight,
body.sp-ref-ui #v62Continuity,
body.sp-ref-ui .premium-open-question{border:1px solid #e6e9ed!important;border-radius:18px!important;background:linear-gradient(135deg,#effbf9,#f5effc)!important;box-shadow:none!important;color:#42454d!important}
body.sp-ref-ui .paid-page .paid-product{padding:17px!important}
body.sp-ref-ui .paid-page .paid-product .product-type{color:#79bdb8!important}
body.sp-ref-ui .paid-page .paid-product button{border:1px solid #e7e9ee!important;background:linear-gradient(145deg,#f4fbfa,#f7f3fc)!important;color:#6d6a7c!important;box-shadow:none!important}
body.sp-ref-ui .paid-page .paid-product.pass{border:0!important;background:linear-gradient(105deg,#6ed8d1,#8bd6e1 47%,#ae94e7)!important;color:#fff!important}
body.sp-ref-ui .paid-page .paid-product.pass .product-type,
body.sp-ref-ui .paid-page .paid-product.pass h3,
body.sp-ref-ui .paid-page .paid-product.pass p{color:#fff!important}
body.sp-ref-ui .paid-page .paid-product.pass button{border:1px solid rgba(255,255,255,.5)!important;background:rgba(255,255,255,.16)!important;color:#fff!important}
body.sp-ref-ui .paid-page .paid-product.pass button span,
body.sp-ref-ui .paid-page .paid-product.pass button small{color:#fff!important}

/* Result/reading surfaces */
body.sp-ref-ui .v61-result,
body.sp-ref-ui .premium-result,
body.sp-ref-ui .v73-romance-answer,
body.sp-ref-ui .v73-chem-answer{padding:19px 17px!important}
body.sp-ref-ui .v87-result-summary{border:1px solid #e6e9ed!important;border-radius:15px!important;background:linear-gradient(145deg,#f3fcfa,#f7f3fc)!important}
body.sp-ref-ui .v87-result-summary>span{color:#70bbb5!important}
body.sp-ref-ui .v61-result p,
body.sp-ref-ui .premium-result p,
body.sp-ref-ui .v73-romance-answer p,
body.sp-ref-ui .v73-chem-answer p{color:#555961!important;font-size:14px!important;line-height:1.8!important}
body.sp-ref-ui .v61-result h3,
body.sp-ref-ui .v61-result h4,
body.sp-ref-ui .premium-result h3,
body.sp-ref-ui .premium-result h4{color:#363a43!important}
body.sp-ref-ui .v61-next{border:0!important;border-radius:15px!important;background:linear-gradient(105deg,#70d8d2,#86d8e1 45%,#ae94e7)!important;color:#fff!important;box-shadow:none!important}
body.sp-ref-ui .v61-next:before,
body.sp-ref-ui .v61-next b,
body.sp-ref-ui .v61-next span{color:#fff!important}
body.sp-ref-ui .v61-next button{border:0!important;background:#fff!important;color:#686679!important}

/* Wallet and purchase sheets */
body.sp-ref-ui .v81-sheet{background:rgba(72,75,88,.16)!important}
body.sp-ref-ui .v81-panel{border:1px solid #eef0f2!important;border-radius:24px!important;box-shadow:0 20px 58px rgba(64,67,81,.12)!important}
body.sp-ref-ui .v81-balance{background:linear-gradient(145deg,#effaf9,#f5f0fb)!important;border-color:#e9eaf0!important}
body.sp-ref-ui .v81-actions .primary{background:linear-gradient(100deg,#6bd8d1,#aa93e8)!important}
body.sp-ref-ui .v33-purchase-sheet{background:rgba(62,65,76,.20)!important}
body.sp-ref-ui .v33-purchase-panel{border:1px solid #edf0f2!important;background:#fff!important;box-shadow:0 20px 58px rgba(55,58,73,.14)!important}
body.sp-ref-ui .v33-price{background:linear-gradient(145deg,#effbf9,#f5effc)!important;color:#67647b!important}
body.sp-ref-ui .v33-buy{background:linear-gradient(100deg,#6bd8d1,#aa93e8)!important;color:#fff!important}

@media(min-width:760px){
  body.sp-ref-ui .profile-page{background:#f8fafb!important}
  body.sp-ref-ui .profile-page main{width:430px!important;min-height:calc(100% - 28px)!important;margin:14px auto!important;border-radius:28px!important;box-shadow:var(--sp-shadow)!important;overflow:hidden!important}
  body.sp-ref-ui .profile-page aside{padding-top:36px!important;padding-bottom:42px!important}
  body.sp-ref-ui #v81WalletChip{right:max(calc((100vw - 720px)/2 + 18px),18px)!important}
}
@media(max-width:640px){
  body.sp-ref-ui .profile-page aside{width:100%!important;max-width:none!important;padding:30px 28px 34px!important}
  body.sp-ref-ui .profile-page aside>.v76-page-hero{min-height:102px!important;padding-right:102px!important;margin-bottom:20px!important}
  body.sp-ref-ui .profile-page aside>label,
  body.sp-ref-ui .profile-page aside>.row{margin-bottom:21px!important}
  body.sp-ref-ui .profile-page aside label>input:not([type=radio]):not([type=checkbox]),
  body.sp-ref-ui .profile-page aside label>select{min-height:46px!important;font-size:14px!important;padding-top:14px!important}
  body.sp-ref-ui .profile-page aside .primary{min-height:54px!important;font-size:14px!important}
  body.sp-ref-ui .free-choice-grid{grid-template-columns:1fr!important}
}
@media(max-width:390px){
  body.sp-ref-ui .profile-page aside{padding-left:22px!important;padding-right:22px!important}
  body.sp-ref-ui .profile-page aside>.v76-page-hero{padding-right:94px!important}
  body.sp-ref-ui .profile-page aside>.v76-page-hero:before{width:68px!important;height:68px!important;right:7px!important;top:11px!important}
}