:root{--bg: oklch(99.2% .003 240);--surface: oklch(96.7% .005 240);--surface-strong: oklch(94% .006 240);--border: oklch(91% .008 240);--border-strong: oklch(86% .01 240);--ink: oklch(20% .02 250);--ink-sub: oklch(42% .015 250);--ink-mute: oklch(62% .012 250);--blue: oklch(62% .19 256);--blue-press: oklch(54% .2 256);--blue-soft: oklch(93% .04 256);--blue-tint: oklch(97% .02 256);--c-1: oklch(70% .16 35);--c-1-soft: oklch(94% .04 35);--c-2: oklch(72% .15 145);--c-2-soft: oklch(94% .04 145);--c-3: oklch(68% .18 290);--c-3-soft: oklch(94% .04 290);--danger: oklch(56% .18 25);--danger-soft: oklch(94% .04 25);--font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Helvetica Neue", sans-serif;--r-sm: 10px;--r: 14px;--r-lg: 18px;--r-xl: 24px;--shadow-press: 0 1px 0 oklch(20% .02 250 / .04);--shadow-float: 0 8px 24px -12px oklch(20% .02 250 / .18);--pad-x: clamp(20px, 5vw, 32px);--pad-y: clamp(24px, 6vh, 48px);--col: 420px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{min-height:100%}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-weight:450;font-size:16px;line-height:1.5;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}button{font-family:inherit;letter-spacing:inherit}input{font-family:inherit}.loading{min-height:100vh;display:grid;place-items:center;color:var(--ink-mute);font-size:14px;font-weight:500}.auth{min-height:100vh;display:grid;grid-template-rows:auto 1fr auto;padding:var(--pad-y) var(--pad-x)}.auth .brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:17px;letter-spacing:-.02em;color:var(--ink)}.auth .brand .dot{width:8px;height:8px;border-radius:999px;background:var(--blue)}.auth .pad{width:100%;max-width:var(--col);justify-self:center;align-self:center;padding:clamp(16px,5vh,40px) 0}.auth h1{margin:0 0 12px;font-size:clamp(26px,4vw,32px);line-height:1.25;font-weight:700;letter-spacing:-.025em;color:var(--ink)}.auth h1 .accent{color:var(--blue)}.auth .sub{margin:0 0 32px;font-size:15px;color:var(--ink-sub);font-weight:450;line-height:1.55}.seg{display:grid;grid-template-columns:1fr 1fr;background:var(--surface);border-radius:999px;padding:4px;margin-bottom:28px;position:relative}.seg button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;padding:10px 0;font-size:14px;font-weight:600;color:var(--ink-mute);border-radius:999px;cursor:pointer;transition:color .2s;position:relative;z-index:1}.seg button.on{color:var(--ink)}.seg:before{content:"";position:absolute;top:4px;bottom:4px;width:calc(50% - 4px);left:4px;background:var(--bg);border-radius:999px;box-shadow:var(--shadow-press),0 2px 8px -4px #0f171f1f;transition:transform .32s cubic-bezier(.22,.61,.36,1)}.seg[data-mode=register]:before{transform:translate(100%)}.form{display:flex;flex-direction:column;gap:12px}.field{position:relative}.field input{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--surface);border:1.5px solid transparent;border-radius:var(--r-lg);padding:22px 16px 10px;font-size:16px;font-weight:500;color:var(--ink);outline:0;transition:border-color .18s,background .18s}.field input::placeholder{color:transparent}.field label{position:absolute;left:16px;top:18px;font-size:15px;font-weight:500;color:var(--ink-mute);pointer-events:none;transform-origin:left center;transition:transform .18s cubic-bezier(.22,.61,.36,1),color .18s}.field input:focus,.field input:not(:placeholder-shown){background:var(--bg);border-color:var(--blue)}.field input:focus+label,.field input:not(:placeholder-shown)+label{transform:translateY(-12px) scale(.78);color:var(--ink-mute)}.field input:focus+label{color:var(--blue)}.field.invite input{letter-spacing:.06em;font-variant-numeric:tabular-nums}.helper{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-mute);font-weight:500;margin:2px 4px -2px}.helper.err{color:var(--danger)}.helper .ico{display:inline-block;width:14px;height:14px;border-radius:999px;background:var(--danger-soft);color:var(--danger);font-size:10px;font-weight:700;text-align:center;line-height:14px}.primary{margin-top:16px;width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:var(--blue);color:#fff;height:54px;border-radius:var(--r-lg);font-size:16px;font-weight:700;letter-spacing:-.01em;cursor:pointer;transition:background .16s,transform 80ms}.primary:hover{background:var(--blue-press)}.primary:active{transform:scale(.985)}.primary:disabled{background:var(--surface-strong);color:var(--ink-mute);cursor:not-allowed}.auth .foot{text-align:center;font-size:13px;color:var(--ink-mute);font-weight:500}.auth .foot a{color:var(--blue);text-decoration:none;font-weight:600}.home{min-height:100vh;display:flex;flex-direction:column}.home>header{position:sticky;top:0;z-index:10;background:#fbfdfed9;backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--border);padding:14px var(--pad-x);display:flex;justify-content:space-between;align-items:center}.home>header .brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:16px;letter-spacing:-.02em}.home>header .brand .dot{width:7px;height:7px;border-radius:999px;background:var(--blue)}.home>header .right{display:flex;align-items:center;gap:10px;font-size:14px}.home>header .name{font-weight:600;color:var(--ink)}.home>header .keeper{background:var(--blue-soft);color:var(--blue-press);font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;letter-spacing:.02em}.home>header button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--surface);border:0;color:var(--ink-sub);font-size:13px;font-weight:600;padding:8px 14px;border-radius:999px;cursor:pointer;transition:background .16s,color .16s}.home>header button:hover{background:var(--surface-strong);color:var(--ink)}.home>main{flex:1;width:100%;max-width:720px;margin:0 auto;padding:clamp(24px,6vh,56px) var(--pad-x) 80px}.greet{margin:0 0 8px;font-size:clamp(24px,3.6vw,30px);line-height:1.3;font-weight:700;letter-spacing:-.025em}.greet em{font-style:normal;color:var(--blue)}.greet-sub{margin:0 0 28px;font-size:15px;color:var(--ink-sub);font-weight:500}.section-label{margin:0 0 10px;font-size:13px;font-weight:700;color:var(--ink-sub);letter-spacing:.02em}.list{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden}.row{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:18px 20px;text-decoration:none;color:inherit;border-bottom:1px solid var(--border);transition:background .16s}.row:last-child{border-bottom:0}.row:hover{background:var(--blue-tint)}.row .marker{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:18px;font-weight:800;letter-spacing:-.02em;flex-shrink:0}.row[data-tone="1"] .marker{background:var(--c-1-soft);color:var(--c-1)}.row[data-tone="2"] .marker{background:var(--c-2-soft);color:var(--c-2)}.row[data-tone="3"] .marker{background:var(--c-3-soft);color:var(--c-3)}.row[data-tone=b] .marker{background:var(--blue-soft);color:var(--blue-press)}.row .body{min-width:0}.row .body .title{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.015em}.row .body .tag{font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px;background:var(--surface);color:var(--ink-sub);letter-spacing:.02em}.row .body .desc{margin:2px 0 0;font-size:13px;color:var(--ink-sub);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.row .chev{color:var(--ink-mute);font-size:18px;font-weight:500;transition:transform .22s cubic-bezier(.22,.61,.36,1),color .16s}.row:hover .chev{color:var(--blue);transform:translate(3px)}.row.coming{pointer-events:none}.row.coming .marker{background:var(--surface);color:var(--ink-mute)}.row.coming .title{color:var(--ink-mute)}.tip{margin-top:24px;padding:16px 18px;background:var(--blue-soft);border-radius:var(--r-lg);display:flex;align-items:flex-start;gap:12px}.tip .ico{width:24px;height:24px;border-radius:8px;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800;flex-shrink:0}.tip .body{font-size:13px;color:var(--ink);font-weight:500;line-height:1.55}.tip .body b{font-weight:700}@media (prefers-reduced-motion: reduce){*,*:before,*:after{transition:none!important;animation-duration:.001ms!important}}
