@font-face{font-family:"Pretendard Omph";src:url(/assets/pretendard.woff) format("woff");font-weight:45 920;font-display:swap}
:root{--f:"Pretendard Omph",-apple-system,"Apple SD Gothic Neo",system-ui,sans-serif;--r-xl:28px;--r-lg:20px;--out:cubic-bezier(.23,1,.32,1)}
:root[data-skin="myc"][data-mode="dark"]{--background:#070b08;--foreground:#e4f2e6;--card:#0e1510;--muted:#152018;--muted-foreground:#93ad99;--border:rgba(170,240,150,.12);
  --primary:#a6f08a;--primary-foreground:#08140a;--primary-soft:rgba(166,240,138,.13);--ring:#a6f08a;--sh:0 1px 2px rgba(0,0,0,.5),0 10px 30px rgba(0,0,0,.45);color-scheme:dark}
:root[data-skin="myc"][data-mode="light"]{--background:#f2ede1;--foreground:#1f2a1f;--card:#fbf8f0;--muted:#e9e3d3;--muted-foreground:#5b6355;--border:rgba(31,42,31,.16);
  --primary:#3f6b2f;--primary-foreground:#fbf8f0;--primary-soft:rgba(63,107,47,.1);--ring:#3f6b2f;--sh:0 0 0 .5px rgba(31,42,31,.22);color-scheme:light}
:root[data-skin="doodle"][data-mode="light"]{--background:#fbf6ea;--foreground:#2a2620;--card:#fffdf7;--muted:#f2ead8;--muted-foreground:#6f6553;--border:rgba(42,38,32,.16);
  --primary:#c4471c;--primary-foreground:#fffdf7;--primary-soft:rgba(224,89,42,.12);--ring:#c4471c;--r-xl:22px;--r-lg:18px;--sh:0 0 0 1.5px #2a2620,3px 4px 0 #2a2620;color-scheme:light}
:root[data-skin="doodle"][data-mode="dark"]{--background:#1d2622;--foreground:#eceadf;--card:#232e29;--muted:#2c3833;--muted-foreground:#b9c2b8;--border:rgba(236,234,223,.22);
  --primary:#f5d27a;--primary-foreground:#1d2622;--primary-soft:rgba(245,210,122,.14);--ring:#f5d27a;--r-xl:22px;--r-lg:18px;--sh:0 0 0 1.5px rgba(236,234,223,.75);color-scheme:dark}
*{box-sizing:border-box} html,body{overflow-x:clip}
body{margin:0;background:var(--background);color:var(--foreground);font-family:var(--f);font-size:16px;line-height:1.55;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
a{color:inherit}
.wrap{width:min(1120px,100% - 80px);margin-inline:auto}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;height:72px;font-weight:700}
.mark{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.mark i{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle,var(--primary) 0 3px,transparent 3.5px),radial-gradient(circle,transparent 0 6px,var(--border) 6.5px 7px,transparent 7.5px);box-shadow:inset 0 0 0 1px var(--border)}
.btn{height:52px;padding:0 24px;border:0;border-radius:999px;font:inherit;font-size:16px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;background:var(--primary);color:var(--primary-foreground);text-decoration:none;transition:transform 100ms var(--out)}
.btn:active{transform:scale(.97)}
:root[data-skin="doodle"][data-mode="light"] .btn{background:#2a2620;color:#fbf6ea;box-shadow:3px 3px 0 #e0592a}
:root[data-skin="doodle"][data-mode="dark"] .btn{background:transparent;color:#eceadf;box-shadow:0 0 0 2px #eceadf}
.btn:focus-visible,.langbtn:focus-visible,.modebtn:focus-visible,.motionbtn:focus-visible,.foot a:focus-visible,.mark:focus-visible,.banner a:focus-visible,.banner button:focus-visible{outline:2px solid var(--ring);outline-offset:3px}
.hint{font-size:13px;color:var(--muted-foreground)}
.tools{display:flex;align-items:center;gap:8px}
.modebtn,.langbtn{height:44px;min-width:44px;padding:0 14px;border-radius:999px;border:0;background:var(--muted);color:var(--foreground);font:600 13px var(--f);box-shadow:0 0 0 .5px var(--border);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none}
.langbtn svg{width:16px;height:16px}

section+section{box-shadow:inset 0 .5px 0 var(--border)}
.sec{padding:88px 0}
.sec h2{font-size:clamp(28px,3vw,40px);letter-spacing:-.02em;line-height:1.15;margin-bottom:32px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.card{border-radius:var(--r-lg);background:var(--card);box-shadow:var(--sh),0 0 0 .5px var(--border);padding:28px;display:flex;flex-direction:column;gap:10px}
.card h3{font-size:20px;letter-spacing:-.01em;line-height:1.3}
.card p,.own p{color:var(--muted-foreground)}
.step b{font-variant-numeric:tabular-nums;font-size:13px;color:var(--primary);font-weight:700}
.own{display:flex;flex-direction:column;gap:12px;max-width:60ch;font-size:18px}
.cta{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.foot{display:flex;flex-direction:column;gap:12px;padding:28px 0 40px;font-size:14px;color:var(--muted-foreground)}
.foot .row{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center}
.banner{display:flex;align-items:center;gap:8px;padding:4px 4px 4px 16px;background:var(--muted);font-size:14px}
.banner>span{flex:1;min-width:0}.banner a{margin-left:8px;white-space:nowrap}
.banner[hidden]{display:none}
.banner button{flex:none;width:44px;height:44px;border:0;background:none;color:inherit;font-size:20px;cursor:pointer}

.login{position:relative;min-height:100dvh;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto;isolation:isolate}
.login .poster,.login .hero3d{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.login .poster{background:var(--poster,none) center/cover no-repeat,var(--background);transition:opacity 600ms var(--out)}
.login .hero3d{opacity:0;transition:opacity 600ms var(--out);display:block}
.login.live .hero3d{opacity:1}.login.live .poster{opacity:0}
.lg-top{padding:20px 24px 20px 40px;display:flex;justify-content:space-between;align-items:center;font-weight:700}
.lg-copy{grid-row:3;padding:0 40px 48px;display:flex;flex-direction:column;gap:16px;max-width:640px}

.lg-copy{position:relative}.lg-copy::before{content:"";position:absolute;inset:-96px -160px -48px -40px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 25% 75%,color-mix(in oklab,var(--background) 88%,transparent) 30%,transparent 72%)}
.lg-copy h1{font-size:clamp(36px,4vw,56px);line-height:1;letter-spacing:-.03em}
.lg-sub{font-size:17px;line-height:1.5;color:var(--muted-foreground);max-width:46ch}
.lg-copy .btn{width:min(360px,100%)}
.lg-hint{font-size:13px;color:var(--muted-foreground)}
.lg-hint.say{color:var(--foreground);font-weight:600}
.motionbtn{width:44px;height:44px;border-radius:999px;border:0;display:grid;place-items:center;background:color-mix(in oklab,var(--card) 70%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--foreground);box-shadow:0 0 0 .5px var(--border),0 2px 8px rgba(0,0,0,.08);cursor:pointer}
.motionbtn svg{width:16px;height:16px;fill:currentColor}.motionbtn[aria-pressed="false"] .i-play,.motionbtn[aria-pressed="true"] .i-pause{display:none}

.valley{position:relative;isolation:isolate;min-height:min(calc(100svh - 72px),920px);display:grid;align-content:start;justify-items:center;overflow:hidden;
  --v-bg:#f1dccb;--v-veil:248 238 228;--v-ink:#1b1d33;--v-ink-soft:#4a4c66;--v-btn:#1e2140;--v-btn-ink:#fff3e6;--v-chip:rgb(248 238 228/.82);
  --v-poster:radial-gradient(40% 18% at 38% 58%,rgb(255 214 170/.9),transparent 70%),linear-gradient(180deg,#8fa6c8 0%,#e9c9b4 46%,#f6d2b0 56%,#6c7a6a 60%,#2f3a3c 100%);
  background:var(--v-bg);color:var(--v-ink)}
:root[data-mode="dark"] .valley{--v-bg:#070914;--v-veil:8 10 22;--v-ink:#f4ecdc;--v-ink-soft:#c8c0b2;--v-btn:#ffcf7a;--v-btn-ink:#1a1305;--v-chip:rgb(8 10 22/.74);
  --v-poster:radial-gradient(3% 3% at 66% 22%,#e8eeff,transparent 70%),radial-gradient(30% 10% at 50% 74%,rgb(255 190 100/.28),transparent 70%),linear-gradient(180deg,#03040b 0%,#141b33 54%,#0c1222 58%,#05070d 100%)}
.valley canvas,.valley .still{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.valley canvas{display:block;touch-action:pan-y;outline:none}
.valley .still{display:none;background:var(--v-poster)}.valley .still img{width:100%;height:100%;object-fit:cover;display:block}
.valley[data-tier="still"] .still{display:block}.valley[data-tier="still"] canvas{display:none}
.valley .hero-copy{width:100%;display:grid;justify-items:center;text-align:center;gap:18px;padding:clamp(40px,8vh,96px) 24px clamp(64px,9vh,96px);pointer-events:none;
  background:radial-gradient(70% 100% at 50% 0,rgb(var(--v-veil)/.94) 0%,rgb(var(--v-veil)/.9) 62%,rgb(var(--v-veil)/0) 100%)}
.valley h1{font-size:clamp(36px,4.6vw,64px);line-height:1.05;letter-spacing:-.03em;max-width:18ch;text-wrap:balance}
.valley .sub{font-size:18px;color:var(--v-ink-soft);max-width:40ch}
.valley .hint{color:var(--v-ink-soft)}
:root[data-mode] .valley .hero-copy .btn{pointer-events:auto;background:var(--v-btn);color:var(--v-btn-ink);box-shadow:0 12px 34px -16px rgb(0 0 0/.5)}
.valley .motionbtn{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:16px;background:var(--v-chip);color:var(--v-ink)}
.valley .btn:focus-visible,.valley .motionbtn:focus-visible{outline-color:var(--v-ink)}

.nf{min-height:70dvh;display:flex;flex-direction:column;justify-content:center;gap:16px}
.nf h1{font-size:clamp(32px,4vw,48px);letter-spacing:-.02em}
@media (max-width:760px){
  .wrap{width:calc(100% - 32px)}
  .top{height:64px}
  .valley{min-height:min(calc(100svh - 64px),760px)}
  .valley h1{font-size:34px}
  .valley .sub{font-size:16px}
  .valley .hero-copy .btn{width:min(360px,100%)}
  .sec{padding:64px 0}
  .lg-top{padding:12px 12px 12px 20px}
  .lg-copy{padding:0 20px calc(24px + env(safe-area-inset-bottom,0px))}.lg-copy h1{font-size:36px}
}
@media (prefers-reduced-motion:reduce){.btn:active{transform:none}.login .poster,.login .hero3d{transition:none}}