:root { font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', system-ui, sans-serif; --brand-primary: #6C4DF6; --brand-lime: #D6F680; --brand-ink: #282238; --brand-paper: #FAF9F6; --brand-soft: #F1EDFF; color: var(--brand-ink); background: var(--brand-paper); font-synthesis: none; --green: var(--brand-primary); --line: #e9e5ef; --muted: #736d7e; }
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button, .button { border: 1px solid var(--line); padding: 11px 17px; background: white; color: var(--green); border-radius: 10px; font-weight: 600; text-decoration: none; }
button:hover { background: #edf4ee; }
button.primary { background: var(--green); color: white; border-color: var(--green); }
button.danger { color: #a33d32; }
button:disabled { opacity: .55; cursor: wait; }
:focus-visible { outline: 3px solid #bc7628; outline-offset: 3px; }
.demo-banner { background: #e7eee8; color: #415f51; padding: 11px 20px; text-align: center; font-size: 12px; line-height: 1.6; }
.header { max-width: 1180px; margin: auto; padding: 27px 30px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand { color: var(--green); font-weight: 800; font-size: 25px; text-decoration: none; letter-spacing: 2px; }
.brand span { font-size: 11px; display: block; font-weight: 400; letter-spacing: 0; margin-top: 4px; }
.account-label { display: flex; align-items: center; gap: 12px; font-size: 13px; }
input, select, textarea { border: 1px solid #c9d7ce; border-radius: 8px; background: white; padding: 12px; color: #172f2a; max-width: 100%; }
textarea { width: 100%; resize: vertical; min-height: 90px; }
nav { max-width: 1120px; margin: auto; display: flex; gap: 8px; padding: 0 0 18px; border-bottom: 1px solid var(--line); }
nav button { background: transparent; border-color: transparent; }
nav button.active { background: #e5eee7; }
main { max-width: 1120px; margin: 34px auto 60px; min-height: 55vh; }
.eyebrow { font-size: 11px; letter-spacing: 2px; font-weight: 700; color: #577b60; margin: 0 0 15px; }
h1 { font-size: clamp(26px, 4vw, 38px); font-weight: 700; letter-spacing: -1.4px; margin: 0 0 14px; line-height: 1.35; }
h2 { font-size: 21px; margin: 0 0 15px; letter-spacing: -.6px; }
h3 { margin: 13px 0; font-size: 18px; }
p { line-height: 1.7; }
.muted, small { color: var(--muted); }
.hero { background: #e9f0e9; border-radius: 20px; padding: 34px; margin-bottom: 26px; }
.hero p:last-child { margin-bottom: 0; }
.filters { display: grid; grid-template-columns: 130px 160px 1fr auto; gap: 12px; margin-bottom: 22px; align-items: end; }
label.field { display: flex; flex-direction: column; gap: 8px; font-size: 13px; margin-bottom: 16px; }
.filters .field { margin-bottom: 0; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.card { border: 1px solid var(--line); background: white; border-radius: 16px; padding: 23px; min-width: 0; overflow-wrap: anywhere; }
.card-visual { height: 100px; border-radius: 10px; background: #e8efe9; display: flex; align-items: center; justify-content: space-between; padding: 22px; margin-bottom: 18px; color: #4a6c58; }
.card-visual.jeju { background: #f3eee1; color: #847146; }
.card-visual strong { font-size: 24px; letter-spacing: 3px; }
.card-visual span { font-size: 11px; border: 1px solid currentColor; border-radius: 20px; padding: 5px 9px; }
.row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 19px; }
.actions > button { flex: 1; }
.pill { display: inline-block; padding: 5px 9px; background: #eef3ef; border-radius: 6px; color: #45634f; font-size: 11px; }
.price { font-size: 20px; font-weight: 700; margin-bottom: 0; }
.empty { padding: 42px 25px; text-align: center; border: 1px dashed #c9d7ce; border-radius: 15px; background: white; grid-column: 1 / -1; color: var(--muted); }
.stack { display: grid; gap: 16px; }
.notice { background: #f5f1e6; border: 1px solid #e6ddc6; padding: 14px 18px; border-radius: 10px; color: #78613a; font-size: 13px; line-height: 1.7; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0; }
.stats strong { display: block; font-size: 30px; margin-top: 10px; }
.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.service { padding: 16px 0; border-bottom: 1px solid var(--line); }
.review { padding: 15px 0; border-bottom: 1px solid var(--line); }
.review p { white-space: pre-wrap; overflow-wrap: anywhere; }
.reply { padding: 12px; background: #f2f5f2; border-radius: 8px; font-size: 13px; }
.check { display: flex; gap: 9px; align-items: center; margin: 16px 0; font-size: 13px; }
dialog { border: 1px solid var(--line); border-radius: 20px; width: min(740px, calc(100% - 24px)); padding: 28px; max-height: 90vh; color: inherit; }
dialog::backdrop { background: #172f2a88; }
dialog h2 { margin-top: 15px; }
dialog .section { margin-top: 28px; }
#toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); background: #173e32; color: white; padding: 16px 24px; border-radius: 12px; box-shadow: 0 6px 25px #0002; z-index: 5; max-width: calc(100% - 32px); width: max-content; }
#toast.error { background: #823d31; }
footer { padding: 26px; text-align: center; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.7; }
details { margin-top: 22px; }
summary { cursor: pointer; }
.audit { font-size: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
@media (max-width: 900px) { main, nav { margin-left: 24px; margin-right: 24px; } .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .two-column { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .header { padding: 20px; } .account-label { flex-direction: column; align-items: flex-start; gap: 5px; } .account-label select { padding: 8px; } main, nav { margin-left: 16px; margin-right: 16px; } main { margin-top: 24px; } .hero { padding: 24px; } .grid { grid-template-columns: 1fr; } .filters { grid-template-columns: 1fr 1fr; } .filters .search { grid-column: 1 / -1; } .filters button { grid-column: 1 / -1; } .stats { gap: 8px; } .stats .card { padding: 13px; font-size: 11px; } nav { overflow-x: auto; } nav button { white-space: nowrap; } dialog { padding: 22px; } }

/* Customer app: reference-led mobile home; staff tools retain their layout. */
[hidden] { display: none !important; }
svg { width: 24px; height: 24px; flex-shrink: 0; }
.customer { --green: var(--brand-primary); --line: #eeeaf6; --muted: #797280; background: var(--brand-paper); color: var(--brand-ink); }
.customer .demo-banner { display: none; }
.customer .header { max-width: 600px; padding: 6px 20px; background: #faf9fd; min-height: 31px; justify-content: flex-end; }
.customer .brand { display: none; }
.customer .account-label { font-size: 10px; color: #8c859e; flex-direction: row; align-items: center; gap: 8px; }
.customer .account-label::before { content: '시제품'; }
.customer .account-label select { border: 0; background: transparent; font-size: 10px; padding: 2px 4px; border-radius: 3px; color: #6e657d; }
#customer-search { max-width: 600px; margin: auto; display: flex; align-items: center; gap: 12px; padding: 12px 22px; background: white; }
#customer-search button { border: 0; padding: 0; background: transparent; display: grid; place-items: center; }
#customer-search .home-symbol { color: white; background: linear-gradient(155deg, #7350ff 15%, #9b6bff 50%, #6ee8e1); width: 25px; height: 32px; border-radius: 12px; flex-shrink: 0; }
.home-symbol svg { width: 21px; height: 21px; }
#quick-search { border: 1px solid #9375ff; border-radius: 28px; display: flex; align-items: center; flex: 1; min-width: 0; overflow: hidden; }
#quick-search input { border: 0; background: transparent; width: 100%; min-width: 0; padding: 14px 0 14px 19px; font-size: 14px; color: #302842; }
#quick-search input:focus { outline-offset: -4px; }
#quick-search input::placeholder { color: #99939f; }
#quick-search button { color: #8259ff; width: 44px; min-height: 44px; flex-shrink: 0; }
#customer-search .header-heart { color: #aa94f2; width: 28px; min-height: 44px; }
.customer main { max-width: 600px; padding: 0 24px 40px; margin: 0 auto; min-height: calc(100vh - 170px); background: white; }
.customer #nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%, 600px); max-width: 600px; background: #fffffff5; backdrop-filter: blur(12px); border: 0; border-top: 1px solid #f0edf5; margin: 0; padding: 9px 8px max(9px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; z-index: 4; }
.customer #nav button { color: #a4a5af; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 3px 0; font-size: 11px; font-weight: 400; border-radius: 8px; background: none; }
.customer #nav button svg { width: 23px; height: 23px; }
.customer #nav button.active { color: #714de4; font-weight: 700; }
.customer #nav button.active svg { fill: #ece6ff; }
.customer footer { background: #faf9fc; max-width: 600px; margin: auto; padding: 22px 20px 100px; font-size: 10px; color: #8d8796; }
.customer #toast { bottom: 92px; font-size: 13px; }
.promo { position: relative; isolation: isolate; margin: 0 -10px; background: linear-gradient(115deg, #f0edff 0%, #ddd9ff 46%, #c0ceff 100%); border-radius: 16px; min-height: 188px; padding: 30px 24px; overflow: hidden; display: flex; align-items: center; }
.promo-copy { position: relative; z-index: 1; width: 73%; }
.promo-kicker { color: #6550bd; font-weight: 700; font-size: 12px; }
.promo h1 { font-size: 24px; line-height: 1.5; letter-spacing: -.8px; margin: 10px 0 12px; color: #30284d; }
.promo-link { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; color: #62538e; font-size: 11px; padding: 0; }
.promo-link svg { width: 13px; height: 13px; }
.promo-type { position: absolute; right: 18px; top: 44px; transform: rotate(-9deg); color: #8061d9; text-align: center; opacity: .5; width: 160px; }
.promo-type span { display: block; font-size: 12px; letter-spacing: 3px; }
.promo-type strong { display: block; font-size: 52px; letter-spacing: -3px; line-height: 1.15; }
.promo-type small { font-size: 8px; color: inherit; letter-spacing: 3px; }
.promo-controls { display: flex; align-items: center; position: absolute; bottom: 13px; right: 13px; border-radius: 20px; background: #53477870; color: white; font-size: 10px; overflow: hidden; z-index: 2; }
.promo-controls button { border: 0; padding: 4px 9px; color: white; background: transparent; min-height: 28px; }
.shortcuts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 25px; column-gap: 7px; padding: 32px 0 34px; }
.shortcut { display: flex; flex-direction: column; align-items: center; gap: 9px; border: 0; background: none; padding: 0; color: #393245; font-size: 12px; font-weight: 400; white-space: nowrap; }
.shortcut:hover { background: transparent; color: #7351ef; }
.shortcut-icon { width: 62px; height: 62px; border-radius: 23px; display: grid; place-items: center; transition: transform .15s ease; }
.shortcut:hover .shortcut-icon { transform: translateY(-3px); }
.shortcut-icon svg { width: 29px; height: 29px; stroke-width: 2; filter: drop-shadow(0 3px 3px #9d79ff33); }
.violet { color: #8660f4; background: #f5f1ff; }
.blue { color: #6189fa; background: #eff4ff; }
.amber { color: #e5a323; background: #fff6e7; }
.pink { color: #af72dc; background: #faf0fb; }
.mint { color: #65a7a2; background: #edf7f3; }
.favorite-nudge { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #f6f3ff; border-radius: 17px; padding: 22px 23px; margin: 8px 0 36px; }
.favorite-nudge h2 { font-size: 15px; margin: 0 0 6px; letter-spacing: -.3px; }
.favorite-nudge p { font-size: 12px; margin: 0; color: #827394; line-height: 1.5; }
.favorite-nudge button { background: #7956f6; color: white; border: 0; border-radius: 30px; font-size: 12px; white-space: nowrap; padding: 11px 17px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 17px; }
.section-heading h2 { font-size: 18px; margin: 0; color: #292432; }
.section-heading h2 span { margin-left: 6px; font-weight: 400; }
.section-caption { font-size: 10px; color: #95909d; }
.article-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.article-card { text-align: left; border: 0; border-radius: 14px; min-width: 0; overflow: hidden; padding: 20px; min-height: 167px; display: flex; flex-direction: column; color: #4c4162; background: #f1edf8; }
.article-card.peach { background: #f7eee6; color: #7b6050; }
.article-tag { display: inline-block; align-self: flex-start; padding: 4px 7px; border-radius: 5px; background: #ffffffaa; font-size: 10px; margin-bottom: 14px; font-weight: 400; }
.article-card strong { font-size: 15px; line-height: 1.65; letter-spacing: -.4px; }
.article-bottom { display: flex; align-items: center; justify-content: space-between; font-size: 8px; letter-spacing: 2px; margin-top: auto; padding-top: 17px; opacity: .7; }
.article-bottom span { font-size: 18px; }
.home-shops { margin-top: 37px; }
.text-link { border: 0; padding: 0; background: none; display: flex; align-items: center; gap: 2px; color: #8d849b; font-size: 11px; font-weight: 400; }
.text-link svg { width: 14px; height: 14px; }
.sample-caption { color: #9b95a2; font-size: 10px; margin: -8px 0 16px; }
.customer .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.customer .card { border-color: #eeeaf5; padding: 17px; border-radius: 14px; }
.customer .card-visual { background: #f0ebfa; color: #8970af; height: 100px; padding: 15px; }
.customer .card-visual.jeju { background: #f4f0e9; color: #a98f64; }
.customer .card-visual strong { font-size: 19px; }
.customer .card-visual span { font-size: 9px; }
.customer .card h3 { font-size: 14px; line-height: 1.5; }
.customer .card .price { font-size: 18px; }
.customer .card .price small { font-size: 10px; }
.customer .card .muted { font-size: 11px; }
.customer .card .actions { gap: 5px; }
.customer .card .actions button { padding: 9px 7px; font-size: 11px; }
.customer .pill { background: #f4f0fc; color: #85709f; font-size: 10px; }
.customer main > h1, .browse-heading h1 { padding-top: 25px; font-size: 24px; letter-spacing: -.8px; }
.customer .filters { grid-template-columns: 1fr 1fr; }
.customer .filters .search, .customer .filters > button { grid-column: 1 / -1; }
.customer .filters label { font-size: 12px; }
.customer .filters input, .customer .filters select { min-width: 0; border-color: #e3ddec; }
.my-profile { text-align: center; padding: 30px 0; }
.profile-icon { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 20px; color: #916de9; background: #f4effd; border-radius: 24px; }
.my-profile h1 { font-size: 23px; }
.my-profile p { font-size: 13px; }
.my-links { display: grid; gap: 12px; margin-bottom: 30px; }
.my-links button { display: flex; align-items: center; gap: 15px; padding: 20px; color: #675381; border-color: #eee6f8; }
.my-links strong { margin-left: auto; }
@media (max-width: 430px) {
  #customer-search { padding: 10px 16px; gap: 10px; }
  #quick-search input { font-size: 12px; padding: 12px 0 12px 12px; }
  #customer-search .header-heart { width: 23px; }
  .customer main { padding: 0 16px 32px; }
  .promo { margin: 0 -6px; padding: 24px 19px; min-height: 169px; }
  .promo h1 { font-size: 20px; }
  .promo-kicker { font-size: 10px; }
  .promo-copy { width: 84%; }
  .promo-type { right: -11px; top: 43px; width: 120px; opacity: .16; }
  .promo-type strong { font-size: 43px; }
  .shortcut-icon { width: 51px; height: 51px; border-radius: 19px; }
  .shortcut-icon svg { width: 26px; height: 26px; }
  .shortcuts { padding: 26px 0 28px; row-gap: 22px; gap: 22px 3px; }
  .shortcut { font-size: 11px; }
  .favorite-nudge { padding: 18px 16px; margin-top: 4px; margin-bottom: 30px; }
  .favorite-nudge h2 { font-size: 13px; }
  .favorite-nudge p { font-size: 10px; }
  .favorite-nudge button { padding: 10px 12px; font-size: 11px; }
  .section-heading h2 { font-size: 17px; }
  .section-caption { font-size: 9px; }
  .article-card { padding: 15px; min-height: 158px; }
  .article-card strong { font-size: 13px; }
  .customer .home-shops .grid { grid-template-columns: 1fr; }
  .customer .grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .shortcut-icon { transition: none; } }
.customer .shortcuts { padding-bottom: 18px; }
.care-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 5px 10px 28px; }
.care-types .shortcut { min-width: 0; white-space: normal; overflow-wrap: anywhere; border-radius: 15px; padding: 14px 6px; background: #faf8ff; font-weight: 600; }
.care-types .shortcut > span { max-width: 100%; }
.care-types .shortcut-icon { background: transparent; height: 42px; }
.category-options { border: 1px solid var(--line); border-radius: 10px; padding: 10px 15px; margin: 0 0 20px; }
.category-options legend { padding: 0 5px; font-size: 13px; }
.category-options .check { display: inline-flex; margin: 10px 16px 10px 0; }
.program-editor { border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
.program-editor summary { font-size: 14px; line-height: 1.6; }
.program-editor form { margin-top: 20px; }

/* Carekok v0.1: pin + check, violet + lime. */
.brand { letter-spacing: 0; }
.brand img { display: block; width: 142px; height: 44px; }
.brand span { margin-left: 42px; font-size: 10px; }
#customer-search { display: grid; grid-template-columns: 1fr auto; gap: 11px 12px; padding-top: 10px; padding-bottom: 16px; }
#customer-search .home-symbol { width: 136px; height: 42px; background: transparent; border-radius: 0; display: block; }
#customer-search .home-symbol img { display: block; width: 136px; height: 42px; }
#customer-search .header-heart { grid-column: 2; grid-row: 1; color: var(--brand-primary); width: 34px; }
#quick-search { grid-column: 1 / -1; grid-row: 2; border-color: #ab97fb; background: #fdfcff; }
#quick-search button { color: var(--brand-primary); }
#quick-search input::placeholder { color: #807789; }
.customer #nav button.active, .shortcut:hover { color: var(--brand-primary); }
.customer #nav button.active svg { fill: var(--brand-soft); }
.customer #nav button { color: #797481; }
.customer #nav button::after { content: ''; width: 4px; height: 4px; border-radius: 50%; background: transparent; }
.customer #nav button.active::after { background: var(--brand-primary); }
.customer #nav { min-height: 74px; }
.promo { background: linear-gradient(115deg, #f2edff, #e7dfff); }
.promo h1 { color: var(--brand-ink); }
.promo-kicker { color: #6141c6; }
.promo-link { color: #655781; }
.promo-type { width: 126px; top: 25px; right: 12px; opacity: .95; transform: none; }
.promo-type img { width: 98px; height: 98px; display: block; margin: 0 auto 9px; }
.promo-type small { color: #6148a5; letter-spacing: 2px; font-size: 9px; font-weight: 700; }
.promo-copy { width: calc(100% - 105px); }
.promo-controls { background: #554572; }
.favorite-nudge { background: var(--brand-soft); }
.favorite-nudge button { background: var(--brand-primary); }
.favorite-nudge h2 { color: var(--brand-ink); }
.violet { color: var(--brand-primary); background: var(--brand-soft); }
.mint { color: #4f6840; background: #f0f6e2; }
.care-types .shortcut { background: #f8f6ff; }
.care-types .shortcut:first-child { background: #f4f8e9; }
.care-types .shortcut-icon.mint { color: #4f6840; }
.my-links button { color: #6143ac; }
.profile-icon { color: var(--brand-primary); background: var(--brand-soft); }
@media (max-width: 430px) {
  #customer-search { padding: 9px 16px 14px; }
  #customer-search .home-symbol, #customer-search .home-symbol img { width: 123px; height: 38px; }
  .promo-copy { width: calc(100% - 72px); }
  .promo h1 { font-size: 19px; }
  .promo-type { right: 8px; top: 40px; width: 80px; opacity: .95; }
  .promo-type img { width: 68px; height: 68px; }
  .promo-type small { font-size: 7px; letter-spacing: 1px; }
}
@media (max-width: 350px) { .promo h1 { font-size: 17px; } .promo-link { font-size: 10px; } .promo-type { width: 61px; } .promo-type img { width: 55px; height: 55px; } .promo-copy { width: calc(100% - 52px); } }

/* Startup: white canvas → logo reveal → violet logo zoom → ready screen. */
body:has(.splash:not([hidden])), body.is-starting { overflow: hidden; }
.splash { position: fixed; inset: 0; z-index: 100; background: #fff; color: var(--brand-ink); overflow: hidden; isolation: isolate; transition: opacity 420ms ease-in-out; }
.splash-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; width: min(280px, 80vw); }
.splash-mark { position: relative; width: 100px; height: 100px; margin: 0 auto; }
.splash-mark img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; animation: splash-arrive 620ms cubic-bezier(.2,.7,.2,1) both; }
.splash-mark::before { content: ''; position: absolute; left: 50%; top: 50%; width: 190vmax; height: 190vmax; border-radius: 50%; background: var(--brand-primary); transform: translate(-50%, -50%) scale(0); opacity: 0; }
.splash-name { font-family: 'Malgun Gothic', sans-serif; font-size: 35px; font-weight: 700; letter-spacing: -1.5px; line-height: 1.4; margin: 18px 0 9px; animation: splash-caption 500ms 150ms both; }
.splash-slogan { font-size: 16px; color: #756c86; letter-spacing: .4px; margin: 0; animation: splash-caption 500ms 280ms both; }
.splash-bottom { position: absolute; bottom: max(8vh, 35px); left: 20px; right: 20px; text-align: center; transition: opacity 160ms ease; }
#splash-status { margin: 16px auto 0; max-width: 330px; font-size: 12px; line-height: 1.8; color: #81778f; }
.splash-loader { display: inline-block; width: 20px; height: 20px; border: 2px solid #eee9fd; border-top-color: var(--brand-primary); border-radius: 50%; animation: splash-spin 1s linear infinite; }
#splash-retry { margin-top: 18px; min-height: 44px; }
.splash.has-error .splash-loader { display: none; }
.splash.is-zooming .splash-mark img { animation: splash-zoom 1250ms cubic-bezier(.45,0,.35,1) both; }
.splash.is-zooming .splash-mark::before { animation: splash-cover 1250ms cubic-bezier(.45,0,.35,1) both; }
.splash.is-zooming .splash-name, .splash.is-zooming .splash-slogan { animation: splash-copy-out 300ms ease both; }
.splash.is-zooming .splash-bottom, .splash.is-revealing .splash-bottom { opacity: 0; }
.splash.is-revealing { opacity: 0; }
noscript .notice { position: fixed; inset: auto 20px 20px; z-index: 101; text-align: center; }
@keyframes splash-arrive { from { opacity: 0; transform: translateY(12px) scale(.88); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes splash-caption { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes splash-spin { to { transform: rotate(360deg); } }
@keyframes splash-zoom { 0% { transform: scale(1); opacity: 1; } 18% { transform: scale(1.25); opacity: 1; } 75% { opacity: .4; } 100% { transform: scale(24); opacity: 0; } }
@keyframes splash-cover { 0% { transform: translate(-50%, -50%) scale(0); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes splash-copy-out { to { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .splash { transition-duration: 120ms; }
  .splash *, .splash *::before { animation: none !important; }
  .splash-mark img, .splash-name, .splash-slogan { opacity: 1; transform: none; }
  .splash-loader { border-color: #ddd3fc; }
}

/* First-visit guide: three short steps, no account or location permission gate. */
body:has(.onboarding[open]) { overflow: hidden; }
dialog.onboarding { padding: 0; border: 0; border-radius: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; color: var(--brand-ink); background: var(--brand-paper); overflow-y: auto; }
.onboarding::backdrop { background: transparent; }
.welcome-frame { width: min(100%, 600px); min-height: 100%; margin: 0 auto; background: white; display: flex; flex-direction: column; }
.welcome-top { padding: max(25px, env(safe-area-inset-top)) 28px 10px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.welcome-top img { width: 126px; height: 40px; }
.welcome-top button { color: #7d7489; background: none; border: 0; font-size: 12px; min-height: 44px; }
.welcome-progress { display: flex; gap: 7px; padding: 21px 32px 0; }
.welcome-progress span { width: 21px; height: 5px; border-radius: 5px; background: #e9e5f0; }
.welcome-progress span.active { width: 43px; background: var(--brand-primary); }
.welcome-content { padding: 42px 32px 24px; flex: 1; }
.welcome-eyebrow { color: #7656ca; font-size: 10px; font-weight: 700; letter-spacing: 1.8px; margin: 0 0 15px; }
.welcome-content h2 { margin: 0 0 21px; font-size: clamp(23px, 5vw, 30px); line-height: 1.5; letter-spacing: -1px; }
.welcome-description { color: #7d7488; font-size: 14px; line-height: 1.9; margin: 0; word-break: keep-all; }
.welcome-example { margin: 32px 0 22px; padding: 27px 23px; border-radius: 23px; background: #f5f1ff; }
.welcome-regions { display: flex; justify-content: center; gap: 14px; margin-bottom: 26px; }
.welcome-regions > span { display: flex; align-items: center; gap: 6px; background: white; border: 1px solid #e4dafb; padding: 10px 18px; border-radius: 25px; color: #6442bb; font-weight: 600; font-size: 13px; }
.welcome-regions svg { width: 18px; height: 18px; }
.welcome-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.welcome-types > span { display: flex; flex-direction: column; gap: 13px; align-items: center; background: white; border-radius: 16px; padding: 20px 4px; font-size: 12px; }
.welcome-types svg { width: 29px; height: 29px; color: var(--brand-primary); }
.welcome-types > span:first-child { background: #eff7d9; }
.welcome-types > span:first-child svg { color: #576d39; }
.welcome-checklist { display: grid; gap: 12px; }
.welcome-checklist > div { background: white; border-radius: 13px; padding: 17px 12px; display: flex; align-items: center; gap: 12px; font-size: 12px; }
.welcome-checklist svg { color: var(--brand-primary); width: 21px; }
.welcome-checklist b { margin-left: auto; font-size: 10px; font-weight: 500; color: #6d519f; }
.welcome-booking { display: flex; justify-content: center; align-items: center; gap: 15px; padding: 12px 0 23px; }
.welcome-booking > span:not(.welcome-arrow) { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 13px; padding: 22px 8px; border-radius: 15px; font-size: 13px; font-weight: 700; }
.welcome-request { color: #6d5787; background: white; }
.welcome-confirm { color: #413454; background: var(--brand-lime); }
.welcome-arrow { color: #957aac; }
.welcome-reminder { text-align: center; color: #655271; font-size: 11px; line-height: 1.8; word-break: keep-all; }
.welcome-note { color: #8b8296; font-size: 12px; line-height: 1.9; word-break: keep-all; }
.onboarding .welcome-bottom { padding: 18px 32px max(25px, env(safe-area-inset-bottom)); margin: 0; border: 0; background: white; max-width: none; }
.welcome-buttons { display: flex; gap: 10px; }
.welcome-buttons button { min-height: 52px; border-radius: 14px; font-size: 14px; }
.welcome-buttons .primary { flex: 1; background: var(--brand-primary); border-color: var(--brand-primary); }
.welcome-bottom p { margin: 15px 0 0; color: #948b9f; font-size: 11px; text-align: center; }
.welcome-replay { width: 100%; margin-top: 14px; color: var(--brand-primary); background: var(--brand-soft); border: 0; padding: 16px; font-size: 13px; }
@media (max-width: 390px) { .welcome-top { padding-left: 23px; padding-right: 20px; } .welcome-content { padding: 30px 23px 12px; } .welcome-progress { padding-left: 23px; } .welcome-description { font-size: 12px; } .welcome-example { padding: 22px 15px; margin-top: 27px; } .welcome-checklist > div { gap: 8px; font-size: 11px; } .onboarding .welcome-bottom { padding-left: 23px; padding-right: 23px; } }

/* Guide handoff: reveal the already-loaded home without a hard modal cut. */
dialog.onboarding { opacity: 1; transition: opacity 480ms cubic-bezier(.22,.61,.36,1); }
.onboarding .welcome-frame { transition: transform 480ms cubic-bezier(.22,.61,.36,1); }
.onboarding.is-leaving { opacity: 0; }
.onboarding.is-leaving .welcome-frame { transform: translateY(-10px); }
.welcome-map { height: 161px; position: relative; border: 1px solid #e8e5ee; border-radius: 16px; overflow: hidden; background-color: #eaf0e8; background-image: linear-gradient(90deg, transparent 48%, #f8faf6 48%, #f8faf6 52%, transparent 52%), linear-gradient(0deg, transparent 48%, #f8faf6 48%, #f8faf6 52%, transparent 52%); background-size: 65px 65px; margin: -5px 0 18px; }
.welcome-map-label { position: absolute; left: 10px; top: 9px; padding: 4px 7px; border-radius: 5px; background: #fffffff0; font-size: 9px; color: #7d7884; z-index: 1; }
.welcome-map-road { position: absolute; background: #fff; border: 1px solid #e3e6de; }
.road-horizontal { left: -10%; top: 53%; width: 120%; height: 18px; transform: rotate(-12deg); }
.road-vertical { top: -20%; left: 45%; width: 19px; height: 140%; transform: rotate(22deg); }
.welcome-map-shop { position: absolute; display: grid; place-items: center; width: 32px; height: 36px; color: var(--brand-primary); }
.welcome-map-shop svg { width: 30px; height: 30px; fill: #f4efff; stroke-width: 2.2; }
.shop-one { left: 21%; top: 29%; }
.shop-two { right: 18%; top: 24%; }
.shop-three { right: 22%; bottom: 10%; }
.welcome-map-location { position: absolute; left: 44%; top: 52%; display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 10px; color: #4c3878; font-weight: 700; }
.welcome-map-location > span { width: 15px; height: 15px; border: 3px solid white; border-radius: 50%; background: var(--brand-primary); box-shadow: 0 0 0 9px #6c4df626; }
@media (prefers-reduced-motion: reduce) { dialog.onboarding { transition-duration: 120ms; } .onboarding .welcome-frame { transition: none; } .onboarding.is-leaving .welcome-frame { transform: none; } }
/* Nearby: map above a rounded results sheet. */
.customer .shortcuts { grid-template-columns: repeat(3, 1fr); }
.customer.is-nearby #customer-search { display: none; }
.customer.is-nearby main { padding: 0 0 36px; }
.nearby-heading { display: flex; align-items: center; gap: 10px; padding: 10px 20px 0; }
.nearby-heading h1 { margin: 0; font-size: 20px; flex: 1; letter-spacing: -.6px; }
.nearby-heading button { border: 0; padding: 10px 0; background: transparent; font-size: 12px; }
.nearby-heading button:first-child { font-size: 25px; padding-right: 8px; color: var(--brand-ink); }
.nearby-search { display: flex; margin: 8px 20px 14px; border: 1px solid #e0daed; border-radius: 14px; overflow: hidden; }
.nearby-search input { width: 100%; min-width: 0; border: 0; padding: 16px; font-size: 14px; }
.nearby-search button { border: 0; background: transparent; }
.nearby-map-wrap { position: relative; }
.nearby-map { height: 280px; background: #eeedf5; }
.map-placeholder { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #807694; background: radial-gradient(ellipse at 25% 10%, #e0f0e8, transparent 55%), linear-gradient(145deg, #f3f0ff, #eeeaf5); }
.map-placeholder svg { width: 42px; height: 42px; color: var(--brand-primary); }
.map-placeholder strong { color: var(--brand-ink); font-size: 20px; }
.map-placeholder span { font-size: 12px; }
.map-locate { position: absolute; right: 18px; bottom: 26px; z-index: 2; width: 46px; height: 46px; padding: 10px; border-radius: 50%; box-shadow: 0 3px 14px #30244420; }
.map-retry { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 2; padding: 8px 15px; border-radius: 20px; font-size: 12px; }
.map-disclosure { margin: 0; padding: 8px 20px 18px; background: #f8f7fc; color: #797280; font-size: 10px; }
.nearby-sheet { position: relative; border-radius: 24px 24px 0 0; margin-top: -12px; padding: 12px 22px 20px; background: white; box-shadow: 0 -4px 18px #29203805; }
.sheet-handle { width: 32px; height: 4px; background: #dcd8e5; border-radius: 8px; margin: 0 auto 20px; }
.nearby-location-row { display: flex; align-items: flex-start; gap: 12px; }
.nearby-location-row > div { flex: 1; }
.nearby-location-row strong { font-size: 15px; }
.nearby-location-row p { font-size: 12px; color: var(--muted); margin: 7px 0 12px; }
.nearby-location-row button { white-space: nowrap; padding: 9px 12px; border-radius: 20px; font-size: 11px; }
.nearby-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 15px; }
.nearby-tools button { padding: 6px 9px; font-size: 11px; background: #f7f5fc; border: 0; }
.nearby-filters { display: flex; gap: 7px; overflow-x: auto; padding: 0 0 12px; scrollbar-width: thin; }
.nearby-filters button, .nearby-filters select { flex-shrink: 0; border: 1px solid #e4dfed; color: #51475f; border-radius: 22px; font-size: 12px; padding: 9px 13px; font-weight: 400; background: white; }
.nearby-filters button[aria-pressed=true] { background: var(--brand-soft); border-color: #c7bafa; color: var(--brand-primary); font-weight: 600; }
.nearby-result-heading { margin-top: 12px; }
.nearby-result-heading h2 { font-size: 16px; margin: 0; }
.nearby-result-heading small { font-size: 10px; }
.nearby-shop { border-bottom: 7px solid #f7f6fa; padding: 23px 0; }
.nearby-shop .shop-title { border: 0; color: var(--brand-ink); font-size: 20px; padding: 0; letter-spacing: -.7px; text-align: left; background: none; }
.nearby-heart { padding: 8px; border: 0; }
.nearby-heart[aria-pressed=true] svg { fill: var(--brand-primary); }
.nearby-meta { color: #817a8b; font-size: 12px; line-height: 1.8; margin: 5px 0 14px; }
.nearby-photo-placeholder { background: linear-gradient(115deg, #f0ecfa, #f9f6ef); border: 1px solid #f1edf6; border-radius: 14px; min-height: 125px; display: flex; align-items: center; justify-content: center; gap: 20px; color: #9687b7; margin-bottom: 14px; }
.nearby-photo-placeholder svg { width: 46px; height: 46px; stroke-width: 1.2; }
.nearby-photo-placeholder strong, .nearby-photo-placeholder span { display: block; font-size: 14px; font-weight: 500; }
.nearby-photo-placeholder span { font-size: 10px; color: #9b91ab; margin-top: 8px; }
.nearby-programs { display: grid; gap: 7px; }
.nearby-programs button { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; text-align: left; background: #f8f7fa; border: 0; color: #51495e; font-size: 12px; padding: 14px; }
.nearby-programs small { color: #9b93a7; white-space: nowrap; }
.nearby-programs strong { white-space: nowrap; }
.nearby-book { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; font-size: 12px; border: 0; background: #f3efff; }
.nearby-book svg { width: 16px; height: 16px; }
.care-map-pin { background: var(--brand-primary); color: white; border: 3px solid white; border-radius: 50% 50% 50% 6px; padding: 9px; box-shadow: 0 2px 8px #0002; font-size: 13px; }
.my-location-dot { display: block; width: 18px; height: 18px; background: #4388fb; border: 3px solid white; border-radius: 50%; box-shadow: 0 0 0 8px #4388fb26; }
.location-dialog { max-width: 520px; }
.location-dialog h2 { font-size: 21px; }
.location-dialog p, .location-notice { font-size: 13px; line-height: 1.8; }
.location-notice dt { margin-top: 14px; font-weight: 700; }
.location-notice dd { margin: 4px 0 0; color: var(--muted); }
#place-results { display: grid; gap: 8px; margin: 18px 0; }
#place-results button { display: grid; gap: 6px; text-align: left; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 380px) { .nearby-sheet { padding-left: 16px; padding-right: 16px; } .nearby-location-row { flex-wrap: wrap; } .nearby-map { height: 250px; } }