/* Shared look of every page on here-31e61.web.app (invite, loc, join, privacy, delete-account): the landing site's colours and shapes (site/site.css).
   Motion is CSS only (privacy has no scripts at all), gentle, and switched off for prefers-reduced-motion. Content never waits for an animation to be readable. */
:root{color-scheme:light dark;--bg:#fff;--bg2:#f4f8f8;--surface:#fff;--glass:rgba(255,255,255,.78);--text:#0f1719;--muted:#56656b;--line:#e3e9ea;--primary:#0f766e;--primary-d:#0b5a54;--primary-l:#14b8a6;--tint:#e8f5f3;--warm:#ff8f6b;--warm-50:#fff1ea;--ink:#0f1719;--on-ink:#fff;
  --blob1:#c9f3ea;--blob2:#ffe3d6;--blob3:#dcf2ff;--shadow:0 22px 44px -28px rgba(12,60,60,.42);--ease:cubic-bezier(.2,.7,.2,1);--spring:cubic-bezier(.34,1.56,.64,1)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font:17px/1.68 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;overflow-x:clip;isolation:isolate}
/* Soft moving light behind the page */
body::before,body::after{content:"";position:fixed;z-index:-1;border-radius:50%;filter:blur(80px);pointer-events:none;opacity:.7}
body::before{width:520px;height:520px;right:-160px;top:-160px;background:var(--blob1);animation:drift 20s ease-in-out infinite alternate}
body::after{width:440px;height:440px;left:-180px;top:40vh;background:var(--blob2);opacity:.55;animation:drift 26s ease-in-out infinite alternate-reverse}
img{max-width:100%;height:auto}
a{color:var(--primary-d)}
:focus-visible{outline:3px solid var(--primary-l);outline-offset:4px;border-radius:8px}
[hidden]{display:none!important}

/* Top bar */
.bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:16px;height:64px;padding:0 max(20px,calc(50% - 300px));background:var(--glass);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);box-shadow:0 1px 0 var(--line)}
.bar.wide{padding:0 max(20px,calc(50% - 440px))}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;color:var(--text);text-decoration:none;letter-spacing:-.01em}
.logo img{width:32px;height:32px;border-radius:9px}
.bar-link{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;background:var(--tint);color:var(--primary-d);font-size:14px;font-weight:600;text-decoration:none;transition:transform .3s var(--spring),background .3s}
.bar-link:hover{transform:translateY(-1px);background:var(--primary);color:#fff}

main{max-width:640px;margin:0 auto;padding:28px 20px 8px}
main.wide{max-width:920px}

/* Page head: a felt illustration floating over a soft circle, then the title */
.hero{position:relative;text-align:center;padding:8px 0 4px}
.hero .art{position:relative;width:200px;height:200px;margin:0 auto 4px;display:grid;place-items:center}
.hero .art::before{content:"";position:absolute;inset:18px;border-radius:50%;background:radial-gradient(circle,var(--tint) 0%,transparent 70%)}
.hero .art::after{content:"";position:absolute;inset:6px;border-radius:50%;border:1.5px solid rgba(20,184,166,.28);animation:wave 4s var(--ease) infinite}
.hero .art img{position:relative;width:190px;height:190px;animation:bob 5.5s ease-in-out infinite;filter:drop-shadow(0 14px 14px rgba(20,60,60,.18))}
.hero.left{text-align:left}
.chip{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:6px 13px 6px 11px;border-radius:999px;background:var(--glass);box-shadow:0 0 0 1px rgba(15,118,110,.16);font-size:13.5px;font-weight:600;color:var(--primary-d)}
.chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--primary-l);box-shadow:0 0 0 0 rgba(20,184,166,.6);animation:pulse 2.2s var(--ease) infinite}
h1{font-size:34px;line-height:1.25;letter-spacing:-.03em;font-weight:800;margin:0 0 12px}
h1 em{font-style:normal;background:linear-gradient(100deg,var(--primary),var(--primary-l) 55%,var(--warm));-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-size:21px;line-height:1.35;letter-spacing:-.02em;font-weight:800;margin:0 0 8px}
h3{font-weight:700}
p{margin:8px 0 16px}
.hero p{color:var(--muted);font-size:17px}

/* Cards */
.install,.card,.step,.panel{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:24px;margin:20px 0;box-shadow:var(--shadow)}
.install{background:linear-gradient(150deg,var(--surface) 40%,var(--tint));overflow:hidden}
.install::after{content:"";position:absolute;right:-40px;bottom:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(255,143,107,.2),transparent 70%);pointer-events:none}
.install p{margin:0;color:var(--muted)}
#invitation,#place{text-align:center}
.code-label{font-size:14px;font-weight:600;color:var(--muted);margin:12px 0 2px}
.code{display:inline-block;font:800 26px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:2px;overflow-wrap:anywhere;margin:4px 0 6px;padding:8px 18px;border-radius:16px;background:var(--tint);color:var(--primary-d)}
#place .code{font:700 18px/1.55 inherit;letter-spacing:0;font-family:inherit}

/* Buttons */
.primary,.secondary,button{position:relative;display:flex;align-items:center;justify-content:center;width:100%;text-align:center;border-radius:999px;min-height:54px;padding:12px 22px;font:inherit;font-weight:650;cursor:pointer;text-decoration:none;overflow:hidden;transition:transform .3s var(--spring),box-shadow .3s,background .3s,border-color .3s,color .3s}
.primary{background:var(--ink);color:var(--on-ink);margin:16px 0 10px;box-shadow:0 14px 28px -14px rgba(15,23,25,.55);border:0}
.primary::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s var(--ease)}
.primary:hover{background:var(--primary);transform:translateY(-2px);box-shadow:0 18px 32px -14px rgba(15,118,110,.7)}
.primary:hover::before{transform:translateX(120%)}
button,.secondary{background:var(--glass);color:var(--primary-d);border:1.5px solid var(--line)}
.secondary{margin-top:14px}
button:hover,.secondary:hover{border-color:var(--primary);transform:translateY(-1px)}
.primary:active,.secondary:active,button:active{transform:scale(.98)}
.note,footer{color:var(--muted);font-size:15px}
#feedback{min-height:1.6em;font-size:14px;color:var(--primary-d);font-weight:600}

/* Questions */
details{border-radius:18px;background:var(--bg2);border:1px solid var(--line);margin:10px 0;transition:background .3s,box-shadow .3s,border-color .3s}
details[open]{background:var(--surface);border-color:rgba(15,118,110,.25);box-shadow:var(--shadow)}
summary{position:relative;list-style:none;cursor:pointer;min-height:56px;padding:15px 56px 15px 20px;font-weight:700}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:16px;top:50%;width:28px;height:28px;margin-top:-14px;display:grid;place-items:center;border-radius:50%;background:var(--tint);color:var(--primary);font-size:19px;font-weight:600;line-height:1;transition:transform .35s var(--spring),background .3s,color .3s}
details[open] summary::after{transform:rotate(45deg);background:var(--primary);color:#fff}
details p{margin:0;padding:0 20px 18px;font-size:15.5px;color:var(--muted)}
details[open] p{animation:open .4s var(--ease)}

/* Footer */
footer{margin:36px auto 0;padding:26px 20px 48px;max-width:640px;border-top:1px solid var(--line);line-height:1.8}
footer a{font-weight:600}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px}
.foot-links a{text-decoration:none;color:var(--muted);font-weight:600}
.foot-links a:hover{color:var(--primary-d)}
main.wide+footer{max-width:920px}

/* Entrance: each block rises in turn. Movement only, never opacity, so a page whose animations never run (capture tools, paused webviews) still shows every word. */
main>*{animation:rise .7s var(--ease) both}
main>*:nth-child(2){animation-delay:.06s} main>*:nth-child(3){animation-delay:.12s} main>*:nth-child(4){animation-delay:.18s}
main>*:nth-child(5){animation-delay:.24s} main>*:nth-child(6){animation-delay:.3s} main>*:nth-child(n+7){animation-delay:.36s}

@keyframes rise{from{transform:translateY(22px)}}
@keyframes drift{to{transform:translate(-70px,60px) scale(1.12)}}
@keyframes bob{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -8px;rotate:-1.5deg}}
@keyframes wave{0%{transform:scale(.7);opacity:0}30%{opacity:1}100%{transform:scale(1.15);opacity:0}}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(20,184,166,0)}100%{box-shadow:0 0 0 0 rgba(20,184,166,0)}}
@keyframes open{from{opacity:0;transform:translateY(-6px)}}

@media(min-width:800px){main{padding-top:44px}h1{font-size:40px}}
@media(max-width:360px){main{padding:20px 16px}h1{font-size:28px}.install,.card,.step,.panel{padding:20px}}
@media(prefers-color-scheme:dark){
  :root{--bg:#0d1716;--bg2:#13211f;--surface:#152523;--glass:rgba(16,30,28,.78);--text:#e6f1ee;--muted:#a9bdb8;--line:#28403c;--primary:#5eead4;--primary-d:#8ff0de;--primary-l:#2dd4bf;--tint:#173a35;--ink:#5eead4;--on-ink:#06201c;--warm-50:#3a2219;
    --blob1:#0f3b35;--blob2:#3a2219;--blob3:#102a3a;--shadow:0 22px 44px -28px rgba(0,0,0,.7)}
  .primary:hover{background:#99f6e4;color:#06201c}
  .bar-link:hover{color:#06201c}
  details[open] summary::after{color:#06201c}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}