/* QuantumTronix Home — design/index.src.html 에서 tools/build_home.py 로 만든 파일. 직접 고치지 말 것 */
body.qth{margin:0;padding:0;background:#030409;color:#eef3f6}
body.qth .ch h2,body.qth .hero h1{color:#eef3f6}
/* 스크립트가 늦게 실행돼도 영상이 보이도록 */
@keyframes qthFilmIn{from{opacity:0}to{opacity:1}}
body.qth .hero video{animation:qthFilmIn .8s ease 2.4s forwards}
@media (prefers-reduced-motion:reduce){body.qth .hero video{animation:none;opacity:1}}
html,body{background:#030409;color:#eef3f6}
html{overflow-x:clip}
/* Layout: film hero (copy bottom-left over a right-side orbital) → sticky WebGL field with 4 chapters → particle wordmark outro. Single dark look by design. */
:root{
  --bg:#030409;
  --fg:#eef3f6;
  --fg80:rgba(238,243,246,.8);
  --fg60:rgba(238,243,246,.6);
  --fg40:rgba(238,243,246,.4);
  --line:rgba(238,243,246,.12);
  --accent:#5ef2d6;
  --warm:#ffb45e;
  --f-display:"Nanum Myeongjo","AppleMyungjo",serif;
  --f-body:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --gx:max(24px,6vw);
  color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--f-body);font-weight:300;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
::selection{background:rgba(94,242,214,.3)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1px solid var(--accent);outline-offset:4px;border-radius:4px}

/* grain */
.grain{position:fixed;inset:-100px;z-index:90;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-30px,18px)}40%{transform:translate(22px,-26px)}60%{transform:translate(-14px,30px)}80%{transform:translate(26px,8px)}100%{transform:translate(0,0)}}

.pill{display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;font:500 14px/1 var(--f-body);color:var(--bg);background:var(--fg);border-radius:999px;padding:12px 20px;transition:background .25s,transform .2s}
.pill:hover{background:var(--accent)}
.pill:active{transform:scale(.97)}
.pill svg{width:14px;height:14px}

html[lang^="en"]{--f-display:"Cormorant Garamond","Nanum Myeongjo",serif}
html[lang^="en"] h1{font-size:clamp(42px,5.9vw,94px);line-height:1.02;letter-spacing:-.015em;font-weight:500}
html[lang^="en"] h2{font-size:clamp(32px,3.7vw,56px);line-height:1.04;letter-spacing:-.01em;font-weight:500}
html[lang^="en"] .slogan{font-style:italic;font-size:clamp(19px,1.8vw,24px) !important;letter-spacing:.02em}
html[lang^="en"] .ft-brand p{font-size:17px}
html[lang^="en"] .ft-brand .ft-slogan{font-style:italic;font-size:15px}
html[lang^="en"] .k{letter-spacing:.2em}
main,footer{transition:opacity .4s}

/* hero overlay: electrons · ring burst · probability flow */
.hero-fx{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;mix-blend-mode:screen}
.fx-labels{position:absolute;inset:0;z-index:2;pointer-events:none}
.fx-l{position:absolute;display:flex;flex-direction:column;align-items:flex-end;gap:3px;transform:translate(-100%,-50%);padding-right:14px;font:400 11px/1.2 var(--f-mono);letter-spacing:.08em;color:var(--fg80);white-space:nowrap;opacity:0;transition:opacity .8s var(--ease)}
.fx-l small{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg40)}
.fx-l i{position:absolute;right:-1px;top:50%;width:var(--lw,60px);height:1px;transform:translateX(100%);background:linear-gradient(90deg,rgba(238,243,246,.35),rgba(94,242,214,.0))}
.fx-l i::before{content:"";position:absolute;right:0;top:-2px;width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);transform:translateX(var(--lw,60px))}
.fx-on .fx-l{opacity:1}
.fx-l[data-f="ring"]{color:var(--warm)}
.fx-l[data-f="ring"] i::before{background:var(--warm);box-shadow:0 0 8px var(--warm)}
@media (max-width:1040px){.fx-labels{display:none}}

/* hero */
.hero{position:relative;height:100vh;height:100dvh;min-height:620px;overflow:hidden}
.hero video{position:absolute;top:0;right:-9%;width:112%;height:100%;object-fit:cover;object-position:70% center;opacity:0;transform:scale(1.06);will-change:transform}
.hero-fade{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(to bottom,rgba(3,4,9,0) 62%,rgba(3,4,9,.55) 80%,#030409 100%),
  linear-gradient(to right,rgba(3,4,9,.5) 0%,rgba(3,4,9,0) 38%)}
.hero-copy{position:absolute;z-index:10;left:var(--gx);bottom:max(15vh,96px);max-width:44rem}
.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 26px;font:400 11px/1.2 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--fg60)}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--warm);box-shadow:0 0 10px rgba(255,180,94,.7)}
h1{font:400 clamp(38px,5.3vw,84px)/1.1 var(--f-display);letter-spacing:-.03em;margin:0 0 26px;text-shadow:0 16px 38px rgba(0,0,0,.32);word-break:keep-all}
h1 .ln{display:block;white-space:nowrap}
h1 .w{display:inline-block;margin-right:.24em}
h1 .dim{color:var(--fg60)}
.sub{font-size:17px;line-height:1.65;color:var(--fg60);max-width:36rem;margin:0 0 32px;word-break:keep-all;text-shadow:0 2px 18px rgba(0,0,0,.42)}
.ctas{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.ctas .pill{font-size:15px;padding:15px 26px}
.ghost{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:400;color:var(--fg80);transition:color .25s}
.ghost:hover{color:var(--fg)}
.ghost svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.ghost:hover svg{transform:translate(2px,-2px)}
.hero-strip{position:absolute;z-index:10;left:var(--gx);right:var(--gx);bottom:calc(28px + env(safe-area-inset-bottom,0px));display:flex;justify-content:space-between;align-items:center;font:400 12px/1 var(--f-mono);color:var(--fg40);letter-spacing:.06em}
.scroll{display:flex;align-items:center;gap:12px;letter-spacing:.24em;text-transform:uppercase;font-size:11px}
.scroll::before{content:"";width:1px;height:28px;background:linear-gradient(var(--fg60),transparent);animation:drip 2.2s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* entrance */
.in{animation:rise .9s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(24px)}}
.w{animation:word .9s var(--ease) both}
@keyframes word{0%{opacity:0;filter:blur(10px);transform:translateY(40px)}50%{opacity:.5;filter:blur(5px);transform:translateY(-4px)}100%{opacity:1;filter:none;transform:none}}

/* field */
.field{position:relative;background:var(--bg)}
.stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.no-gl .stage{background:radial-gradient(ellipse 50% 45% at 68% 48%,rgba(94,242,214,.08),transparent 70%)}
.index{position:absolute;z-index:5;right:var(--gx);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px;align-items:flex-end}
.index button{all:unset;cursor:pointer;display:flex;align-items:center;gap:12px;font:400 11px var(--f-mono);letter-spacing:.16em;color:var(--fg40);text-transform:uppercase}
.index button span{opacity:0;transform:translateX(6px);transition:opacity .3s,transform .3s var(--ease)}
.index button i{display:block;width:16px;height:1px;background:currentColor;transition:width .4s var(--ease),background .4s}
.index button:hover span,.index button.on span{opacity:1;transform:none}
.index button.on{color:var(--fg)}
.index button.on i{width:40px;background:var(--accent)}
.index button:focus-visible{outline:1px solid var(--accent);outline-offset:6px}
.readout{position:absolute;z-index:5;left:var(--gx);bottom:calc(28px + env(safe-area-inset-bottom,0px));display:flex;gap:16px;align-items:baseline;font:400 12px var(--f-mono);color:var(--fg40)}
.readout b{font-weight:400;color:var(--warm)}
.readout em{font-style:normal;color:var(--fg80);transition:opacity .35s}
.chapters{position:relative;z-index:6;margin-top:-100vh;margin-top:-100dvh;pointer-events:none}
.ch{min-height:100vh;min-height:100dvh;display:flex;align-items:center;padding-block:14vh;padding-left:var(--gx);padding-right:var(--gx)}
.ch .panel{max-width:36rem;pointer-events:auto}
.k{display:flex;gap:14px;align-items:baseline;white-space:nowrap;margin:0 0 22px;font:400 11px var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--fg40)}
.k b{font-weight:400;color:var(--warm)}
h2{font:400 clamp(30px,3.5vw,52px)/1.16 var(--f-display);letter-spacing:-.025em;margin:0 0 22px;word-break:keep-all;text-wrap:balance;text-shadow:0 16px 38px rgba(0,0,0,.4)}
h2 .dim{color:var(--fg60)}
.ch p{color:var(--fg60);font-size:16.5px;line-height:1.7;margin:0 0 14px;max-width:38ch;word-break:keep-all}
.note{font:400 12px/1.6 var(--f-mono) !important;color:var(--fg40) !important;margin-top:20px !important;max-width:38ch !important}
.try{display:inline-flex;align-items:center;gap:10px;margin-top:12px;font:400 12px var(--f-mono);letter-spacing:.12em;color:var(--accent)}
.try::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);animation:blink 1.8s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.outro{justify-content:center;align-items:flex-end;text-align:center;padding-bottom:6vh}
.outro .panel{max-width:46rem;margin:0 auto}
html[lang^="en"] .outro h2{font-size:clamp(27px,3.3vw,52px)}
.outro p{margin-left:auto;margin-right:auto}
.outro .ctas{justify-content:center;margin-top:28px}
.mail{font:400 15px var(--f-mono) !important;color:var(--fg) !important;user-select:all;margin-top:20px !important;letter-spacing:.04em}
.mail[hidden]{display:none}

.slogan{display:inline-flex;align-items:center;gap:14px;margin:-6px 0 22px !important;font:400 clamp(17px,1.6vw,21px)/1.4 var(--f-display) !important;letter-spacing:.06em;color:var(--warm) !important;max-width:none !important}
.slogan::before,.slogan::after{content:"";width:28px;height:1px;background:rgba(255,180,94,.5)}
.ft-brand .ft-slogan{margin-top:8px;font:400 13px/1.5 var(--f-display);letter-spacing:.06em;color:var(--warm)}

/* partners */
.partners{margin-top:52px;padding-top:28px;border-top:1px solid var(--line)}
.partners .k{margin-bottom:18px}
.partners ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 34px}
.partners li{font:500 13px/1 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--fg60);white-space:nowrap}
@media (max-width:760px){.partners{margin-top:36px}.partners ul{gap:12px 22px}.partners li{font-size:12px;letter-spacing:.14em}}


/* observer cursor */
.obs{position:fixed;left:0;top:0;z-index:30;pointer-events:none;opacity:0;transition:opacity .3s}
.obs.on{opacity:1}
.obs .ring{position:absolute;left:-22px;top:-22px;width:44px;height:44px;border:1px solid rgba(94,242,214,.55);border-radius:50%;transition:transform .25s var(--ease)}
.obs .lab{position:absolute;left:30px;top:-7px;white-space:nowrap;font:400 10px/1.4 var(--f-mono);letter-spacing:.14em;color:var(--accent)}
.obs .lab small{display:block;color:var(--fg40);letter-spacing:.06em;font-size:10px}
.obs.hit .ring{transform:scale(.5)}

footer{position:relative;z-index:6;border-top:1px solid var(--line);background:var(--bg);color:var(--fg60);
  padding-block:64px calc(28px + env(safe-area-inset-bottom,0px));padding-left:var(--gx);padding-right:var(--gx)}
.ft{max-width:1240px;margin:0 auto}
.ft-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.8fr);gap:40px;padding-bottom:48px}
.ft-brand img{display:block;height:26px;width:auto;margin-bottom:18px;filter:drop-shadow(0 0 12px rgba(255,190,110,.18))}
.ft-brand p{margin:0;font:400 15px/1.6 var(--f-display);color:var(--fg80);max-width:16em;word-break:keep-all}
.ft h3{margin:0 0 14px;font:400 11px/1 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--warm)}
.ft address{font-style:normal;font-size:14px;line-height:1.75;color:var(--fg60);word-break:keep-all}
.ft address b{display:block;font-weight:500;color:var(--fg80);margin-bottom:4px}
.ft-mail{font:400 14px var(--f-mono);color:var(--fg80);user-select:all}
.ft-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:24px;border-top:1px solid var(--line);font:400 11px var(--f-mono);letter-spacing:.08em;color:var(--fg40)}
@media (max-width:1040px){.ft-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px 28px}}
@media (max-width:560px){.ft-top{grid-template-columns:minmax(0,1fr);gap:30px}footer{padding-block:48px calc(24px + env(safe-area-inset-bottom,0px))}}

@media (max-width:760px){
  :root{--gx:20px}
  .hero video{right:0;width:100%;object-position:76% 34%}
  .ey-city{display:none}
  .hero-fade{background:linear-gradient(to bottom,rgba(3,4,9,0) 30%,rgba(3,4,9,.7) 62%,#030409 92%)}
  .hero-copy{bottom:96px;right:var(--gx)}
  h1 .ln{white-space:normal}
  .sub{font-size:15.5px}
  .ctas{gap:20px}
  .ctas .pill{padding:14px 22px}
  .hero-strip .eq{display:none}
  .index{display:none}
  .ch{align-items:flex-end;padding-block:0 13vh}
  .ch .panel{position:relative}
  .ch .panel::before{content:"";position:absolute;inset:-48px -40px -64px;z-index:-1;background:radial-gradient(ellipse at 50% 70%,rgba(3,4,9,.92),rgba(3,4,9,.6) 55%,transparent 76%)}
  .note{display:none}
  .readout{font-size:11px}
  .outro{padding-bottom:9vh}
  html[lang] .outro h2{font-size:25px;margin-bottom:14px}
  .outro .slogan{margin-bottom:12px !important}
  .outro p{font-size:14.5px;line-height:1.6}
  .outro .ctas{margin-top:18px}
  .partners{margin-top:24px;padding-top:20px}
}
@media (max-height:700px) and (min-width:761px){.hero-copy{bottom:88px}.eyebrow{margin-bottom:18px}h1{margin-bottom:18px}.sub{margin-bottom:22px}}
@media (pointer:coarse){.obs{display:none}}
@media (prefers-reduced-motion:reduce){
  .grain,.scroll::before,.try::before{animation:none}
  .in,.w{animation:none}
}