/* show⁺X 공통 — 스타일 전체. index.html 에서 뽑아냄, 로직 변경 없음. */ :root{--font-lang:sans-serif} html[lang="ko"]{--font-lang:'Noto Sans KR'} html[lang="ja"]{--font-lang:'Noto Sans JP'} html[lang="zh-CN"]{--font-lang:'Noto Sans SC'} html[lang="zh-TW"]{--font-lang:'Noto Sans TC'} html[lang="th"]{--font-lang:'Noto Sans Thai'} html[lang="vi"]{--font-lang:'Be Vietnam Pro'} html[lang="ar"]{--font-lang:'Noto Sans Arabic'} html[lang="hi"]{--font-lang:'Noto Sans Devanagari'} html[lang="ru"]{--font-lang:'Noto Sans'} html[lang^="zh"] h1,html[lang^="zh"] h2,html[lang^="zh"] h3{font-weight:700} html{scroll-behavior:smooth} html{overflow-x:hidden} /* overflow-x:hidden would make a scroll container and that kills position:sticky for the hero. `clip` cuts the overflow without creating one. */ body{background:#0f0f13;color:#f4f4f8;font-family:'Hanken Grotesk',var(--font-lang),sans-serif;overflow-x:clip} /* Lower sections - flat neutral backgrounds, alternating stripes only for rhythm (purple is reserved for accents) */ #equation,#stages{background:#141419} section,header,footer{overflow:hidden} /* the hero pins itself - an overflow:hidden ancestor would kill position:sticky */ #top{overflow:visible} a{color:#f4f4f8;text-decoration:none} a:hover{color:#9446ff} .font-display{font-family:'Plus Jakarta Sans',var(--font-lang),sans-serif} .grad-text{background:linear-gradient(92deg,#d8baff 10%,#9446ff 90%);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:gradShift 6s ease-in-out infinite} @keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} .glass{background:rgba(255,255,255,.045);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.10);transition:border-color .35s,box-shadow .35s,transform .35s} .glass-hover:hover{border-color:rgba(148,70,255,.45);box-shadow:0 0 40px rgba(148,70,255,.18);transform:translateY(-4px)} .blob{position:absolute;border-radius:50%;filter:blur(120px);pointer-events:none;animation:blobDrift 18s ease-in-out infinite} section:nth-of-type(even) .blob{animation-duration:24s;animation-delay:-10s} .reveal{opacity:0;transform:translateY(28px);filter:blur(6px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1),filter .8s cubic-bezier(.16,1,.3,1)} .reveal.in{opacity:1;transform:none;filter:blur(0)} .aperture-spin{animation:apspin 40s linear infinite} @keyframes apspin{to{transform:rotate(360deg)}} .floaty{animation:floaty 7s ease-in-out infinite} .floaty2{animation:floaty 9s ease-in-out -3s infinite} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} ::selection{background:#9446ff;color:#fff} .lang-panel{max-height:min(420px,60vh);overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(148,70,255,.4) transparent} /* HERO - one cinematic plate behind the brand aperture. Both are driven by --sy (scroll through the first viewport) and --mx/--my (pointer), set once per frame in JS below. */ #top{--sy:0;--mx:0;--my:0} /* The hero is a track, not a screen. The stage sticks while the page scrolls past it, and that scroll distance is what the video is scrubbed against. */ .hero-track{height:420vh} .hero-sticky{position:sticky;top:0;height:100vh;overflow:hidden; display:flex;flex-direction:column;justify-content:center} @media(max-width:900px){.hero-track{height:300vh}} @media(prefers-reduced-motion:reduce){.hero-track{height:100vh}} .hero-stage{position:absolute;inset:0;overflow:hidden} /* The plate is a centred stage. Scale it up and push it right so the stage itself lands in the right column and the left 40% falls off into black - that empty side is the type area. The trailing translateX runs inside the scaled space. */ /* The plate already contains the aperture - show it at its own framing, no crop-and-shove. Only a hair of scale so the parallax never exposes an edge. */ .hero-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block; opacity:1; transform:translate3d(calc(var(--mx) * -10px),calc(var(--my) * -7px + var(--sy) * 5vh),0) scale(calc(1.04 + var(--sy) * .16)); will-change:transform,opacity} /* The plate itself is only ~10% violet - measured. `color` blending keeps its luminosity and takes the hue from the brand, so any backdrop lands on tone. */ /* Left half carries the copy, so the plate gets a scrim on that side only - the right half stays bright enough for the mark to sit in. */ /* Only the type side gets pressed down. The right half of the plate stays untouched. */ .hero-scrim{position:absolute;inset:0; background:linear-gradient(95deg,rgba(15,15,19,.92) 0%,rgba(15,15,19,.74) 26%, rgba(15,15,19,.34) 46%,transparent 64%)} /* split layout - copy left, mark right */ .hero-grid{position:relative;z-index:10;width:100%;max-width:1240px;margin:0 auto; padding:96px 20px 72px;display:grid;align-items:center; grid-template-columns:minmax(0,46fr) minmax(0,54fr);gap:clamp(20px,4vw,56px)} .hero-copy{text-align:left; opacity:calc(1 - max(0, var(--sy) - .84) * 6.2); transform:translateY(calc(max(0, var(--sy) - .84) * -80px))} .hero-copy .daily{margin-left:0;margin-right:auto;text-align:left} .hero-copy .hero-rule{margin-left:0} .hero-copy .hero-title{text-wrap:balance;font-size:clamp(40px,5.4vw,78px)} html[lang="ko"] .hero-copy .hero-title{font-size:clamp(38px,5.2vw,74px)} html[lang="ja"] .hero-copy .hero-title{font-size:clamp(36px,5vw,70px)} html[lang="zh-CN"] .hero-copy .hero-title,html[lang="es"] .hero-copy .hero-title, html[lang="pt"] .hero-copy .hero-title,html[lang="fr"] .hero-copy .hero-title{font-size:clamp(36px,4.8vw,68px)} /* 세로 화면에서는 좌우로 가를 폭이 없다 — 로고·글·밑줄을 모두 가운데로 모은다. 왼쪽 정렬을 남기면 세로 영상의 중앙 구도와 축이 어긋나 보인다. */ @media(max-width:900px){ .hero-grid{grid-template-columns:1fr;gap:8px;padding:104px 22px 76px;justify-items:center} .hero-copy{order:2;text-align:center;width:100%;max-width:34rem; display:flex;flex-direction:column;align-items:center} .hero-copy .daily{margin-left:auto;margin-right:auto;text-align:center} .hero-copy .hero-logo{margin-left:auto;margin-right:auto} .hero-copy .hero-rule{margin-left:auto;margin-right:auto} .hero-copy .hero-title{text-align:center;margin-left:auto;margin-right:auto} .hero-scrim{background:linear-gradient(180deg,rgba(15,15,19,.52),rgba(15,15,19,.30) 42%,rgba(15,15,19,.86))} } /* full-bleed image band - used once, to break the longest section in half */ .band{margin:clamp(56px,8vw,88px) 0 0;position:relative;overflow:hidden;border-radius:18px} .band img{display:block;width:100%;height:clamp(200px,30vw,340px);object-fit:cover;opacity:.62} .band::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(15,15,19,.55),rgba(15,15,19,.12) 45%,rgba(15,15,19,.75))} .hero-overlay{position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,transparent 0%,transparent 62%,rgba(15,15,19,.55) 84%,#0f0f13 100%)} .hero-logo{height:clamp(62px,13vw,82px);width:auto;filter:drop-shadow(0 6px 30px rgba(148,70,255,.45))} /* Quote of the day - sits above the wordmark, must stay quieter than it */ .daily{margin:0 0 clamp(40px,6vw,72px);max-width:44ch;text-align:center} .daily-q{font-family:'Bodoni Moda',Georgia,serif;font-style:italic;font-weight:600; font-size:clamp(15px,1.9vw,21px);line-height:1.6;color:rgba(244,244,248,.72);margin:0} .daily-q::before{content:"\201C"} .daily-q::after{content:"\201D"} .daily-a{margin-top:.9rem;font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:500; letter-spacing:.28em;text-indent:.28em;text-transform:uppercase;color:rgba(244,244,248,.38)} .daily-a::before{content:"— "} /* The one line the whole page is built on. A high-contrast didone italic - the thick/thin stroke is what makes it read as couture rather than as a heavy geometric sans. */ .hero-title{margin-top:1.6rem;font-family:'Bodoni Moda',Georgia,serif;font-style:italic;font-weight:700; font-size:clamp(46px,8.6vw,112px);line-height:1.04;letter-spacing:-.005em;text-wrap:nowrap} /* the longer Romance translations cannot hold one line at that size - let them wrap */ html[lang="es"] .hero-title,html[lang="pt"] .hero-title,html[lang="fr"] .hero-title{font-size:clamp(40px,6.4vw,84px);text-wrap:balance} .hero-title span{display:inline-block;padding-bottom:.06em; background:linear-gradient(103deg,#ffffff 0%,#f0e4ff 22%,#c9a6ff 46%,#9446ff 70%,#e9d8ff 100%); background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent; animation:heroSheen 11s ease-in-out infinite;filter:drop-shadow(0 10px 44px rgba(148,70,255,.5))} @keyframes heroSheen{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} .hero-rule{width:clamp(56px,9vw,110px);height:1px;margin:1.9rem auto 0; background:linear-gradient(90deg,transparent,rgba(216,186,255,.65),transparent)} /* CJK has no italic didone - the equivalent register is Myeongjo / Mincho */ html[lang="ko"] .hero-title{font-family:'Nanum Myeongjo',serif;font-style:normal;font-weight:800;font-size:clamp(44px,9.5vw,104px);letter-spacing:-.02em;line-height:1.16} html[lang="ja"] .hero-title{font-family:'Shippori Mincho',serif;font-style:normal;font-weight:800;font-size:clamp(42px,9vw,98px);letter-spacing:-.02em;line-height:1.2} html[lang="zh-CN"] .hero-title{font-family:'Noto Serif SC',serif;font-style:normal;font-weight:700;font-size:clamp(44px,9.5vw,104px);letter-spacing:-.01em;line-height:1.18} /* HERO motion - staggered entrance with blur, drifting blobs, logo glow pulse (Supanova signature easing) */ @keyframes heroIn{from{opacity:0;transform:translateY(2rem);filter:blur(6px)}to{opacity:1;transform:translateY(0);filter:blur(0)}} .hero-enter{opacity:0} html.i18n-ready .hero-enter{animation:heroIn 1.2s cubic-bezier(.16,1,.3,1) both} @keyframes blobDrift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(34px,-22px) scale(1.07)}66%{transform:translate(-24px,18px) scale(.96)}} .blob-anim{animation:blobDrift 16s ease-in-out infinite} .blob-anim2{animation:blobDrift 20s ease-in-out -8s infinite} @keyframes logoPulse{0%,100%{filter:drop-shadow(0 6px 30px rgba(148,70,255,.45))}50%{filter:drop-shadow(0 8px 46px rgba(90,22,201,.6))}} html.i18n-ready .hero-logo.hero-enter{animation:heroIn 1.2s cubic-bezier(.16,1,.3,1) both,logoPulse 5.5s ease-in-out 1.4s infinite} /* Hero flourishes - halo pulse, sparkles, scroll cue */ @keyframes haloPulse{0%,100%{opacity:.7;transform:translate(-50%,-58%) scale(1)}50%{opacity:1;transform:translate(-50%,-58%) scale(1.12)}} .hero-sparkles{position:absolute;inset:0;pointer-events:none;overflow:hidden} .sparkle{position:absolute;border-radius:50%;background:#d8baff;box-shadow:0 0 8px 2px rgba(216,186,255,.8);opacity:0;animation:twinkle var(--d,4s) ease-in-out var(--dl,0s) infinite} @keyframes twinkle{0%,100%{opacity:0;transform:translateY(0) scale(.5)}20%{opacity:.9;transform:translateY(-6px) scale(1)}45%{opacity:.25;transform:translateY(-14px) scale(.7)}70%{opacity:.8;transform:translateY(-22px) scale(1.05)}} .hero-scroll{position:absolute;left:50%;bottom:26px;z-index:10;color:rgba(255,255,255,.55);transform:translateX(-50%);animation:scrollBob 2.2s ease-in-out infinite} @keyframes scrollBob{0%,100%{transform:translateX(-50%) translateY(0);opacity:.55}50%{transform:translateX(-50%) translateY(8px);opacity:1}} /* Statement panel - the one line in the philosophy section that must land alone */ .statement{position:relative;background:#0b0b0e;border:1px solid rgba(148,70,255,.18);overflow:hidden} .statement::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 0%,rgba(148,70,255,.16),transparent 62%);pointer-events:none} .statement>*{position:relative} /* Lineage rail - the platform succession, show+X as the next slot */ .rail{position:relative} .rail::before{content:"";position:absolute;left:0;right:0;top:11px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.10),rgba(148,70,255,.55))} .node{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22)} .node.is-now{width:15px;height:15px;background:linear-gradient(140deg,#d8baff,#9446ff);box-shadow:0 0 0 5px rgba(148,70,255,.16),0 0 22px rgba(148,70,255,.7);animation:nowPulse 3.4s ease-in-out infinite} @keyframes nowPulse{0%,100%{box-shadow:0 0 0 5px rgba(148,70,255,.16),0 0 22px rgba(148,70,255,.7)}50%{box-shadow:0 0 0 11px rgba(148,70,255,0),0 0 34px rgba(148,70,255,.9)}} /* The quotation - the one borrowed line on the page, so it is given a stage of its own */ .quote{position:relative;margin:0;padding:3.5rem 1rem 0;text-align:center;isolation:isolate} .quote-halo{position:absolute;left:50%;top:44%;width:min(760px,92%);height:300px;transform:translate(-50%,-50%);pointer-events:none;z-index:-1;background:radial-gradient(closest-side,rgba(148,70,255,.22),rgba(148,70,255,.06) 55%,transparent 78%);animation:haloPulse 9s ease-in-out infinite} .quote-mark{position:absolute;font-family:'Plus Jakarta Sans',serif;font-weight:800;font-size:clamp(120px,17vw,210px);line-height:1;pointer-events:none;z-index:-1;background:linear-gradient(160deg,#d8baff,#9446ff 55%,transparent);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.22} .quote-mark-open{left:2%;top:0} .quote-mark-close{right:2%;bottom:-.35em} /* Handwritten, as if signed by the person quoted - one script face per writing system */ .quote-line{margin:0 auto;max-width:20ch;font-family:'Great Vibes','Nanum Brush Script',cursive;font-weight:400; font-size:clamp(40px,8.5vw,86px);line-height:1.28;letter-spacing:.005em;padding-bottom:.12em; background:linear-gradient(96deg,#ffffff 4%,#e9d8ff 26%,#b78bff 58%,#9446ff 92%);-webkit-background-clip:text;background-clip:text;color:transparent; background-size:220% 100%;animation:quoteShine 9s ease-in-out infinite;filter:drop-shadow(0 6px 34px rgba(148,70,255,.42))} html[lang="ko"] .quote-line{font-family:'Nanum Brush Script',cursive;font-size:clamp(34px,7.2vw,70px);line-height:1.34;max-width:16ch} html[lang="ja"] .quote-line{font-family:'Yuji Syuku',serif;font-size:clamp(28px,5.6vw,54px);line-height:1.5;max-width:18ch} html[lang="zh-CN"] .quote-line{font-family:'Zhi Mang Xing',cursive;font-size:clamp(34px,7vw,68px);line-height:1.4;max-width:16ch} /* Latin scripts share Great Vibes; it has a small x-height so it needs the extra size */ html[lang="es"] .quote-line,html[lang="pt"] .quote-line,html[lang="fr"] .quote-line{font-size:clamp(38px,8vw,80px);max-width:22ch} @keyframes quoteShine{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} .quote-rule{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:2.5rem} .quote-rule i{display:block;height:1px;width:min(120px,18vw);background:linear-gradient(90deg,transparent,rgba(216,186,255,.55))} .quote-rule i:last-child{background:linear-gradient(90deg,rgba(216,186,255,.55),transparent)} .quote-rule span{width:7px;height:7px;transform:rotate(45deg);background:linear-gradient(140deg,#d8baff,#9446ff);box-shadow:0 0 14px rgba(148,70,255,.85)} .quote-by{margin-top:1.5rem;font-size:.72rem;font-weight:600;letter-spacing:.42em;text-indent:.42em;color:rgba(244,244,248,.5)} @media(min-width:640px){.quote-by{font-size:.82rem}} /* show x X = infinity - set as a display equation, with the real glossy X standing in for the letter */ .formula{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:clamp(14px,3vw,30px);margin-top:clamp(48px,7vw,84px)} .formula-word{font-family:'Plus Jakarta Sans',var(--font-lang),sans-serif;font-weight:800;letter-spacing:-.03em; font-size:clamp(40px,7vw,84px);line-height:1; background:linear-gradient(155deg,#f6f6f9,#a7a9b6 52%,#ededf3);-webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 6px 26px rgba(255,255,255,.14))} .formula-show{display:flex;align-items:center;gap:.02em;font-size:clamp(40px,7vw,84px)} .formula-o{width:.86em;height:.86em;overflow:visible;filter:drop-shadow(0 6px 20px rgba(140,70,255,.5))} .formula-mul{width:clamp(17px,2.6vw,30px);height:auto;transform:rotate(45deg);filter:drop-shadow(0 0 14px rgba(150,90,255,.7))} .formula-op{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:clamp(22px,3.4vw,40px);line-height:1;color:rgba(244,244,248,.34)} .formula-x{width:clamp(38px,6vw,70px);height:auto;overflow:visible;filter:drop-shadow(0 10px 26px rgba(120,50,200,.55))} .formula-inf{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:clamp(52px,9vw,108px);line-height:.8; background:linear-gradient(120deg,#d8baff,#9446ff 60%,#5a16c9);-webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 0 30px rgba(148,70,255,.6));animation:infPulse 5s ease-in-out infinite} @keyframes infPulse{0%,100%{filter:drop-shadow(0 0 22px rgba(148,70,255,.45))}50%{filter:drop-shadow(0 0 46px rgba(148,70,255,.85))}} /* The three marks - real logo geometry, given room to breathe */ .mark-card{border-radius:1.5rem;padding:3rem 2rem 2.75rem;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:280px} .mark{width:clamp(76px,9vw,104px);height:auto;margin-bottom:2.25rem;overflow:visible} /* Typesetting - headings break into even lines, body avoids orphan words, CJK/Thai never split mid-word */ h1,h2,h3,p,blockquote,figcaption{text-wrap:balance} html[lang="ko"],html[lang="ja"],html[lang^="zh"],html[lang="th"]{word-break:keep-all;overflow-wrap:break-word;line-break:strict} .copy{max-width:62ch;margin-left:auto;margin-right:auto} .chip{border:1px solid rgba(255,255,255,.09);background:transparent;border-radius:99px;padding:.5rem 1.05rem; font-size:.8rem;letter-spacing:.01em;color:rgba(244,244,248,.5);transition:border-color .35s,color .35s} .chip:hover{border-color:rgba(148,70,255,.4);color:#f4f4f8} .chip-x{border-color:rgba(148,70,255,.4);color:rgba(244,244,248,.9)} /* Horizon - ruled milestones, the last one carrying the accent */ .milestone{position:relative;padding-top:1.6rem;text-align:left} .milestone::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.13)} .milestone .year{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:clamp(1.1rem,2vw,1.5rem);letter-spacing:-.01em;color:rgba(244,244,248,.62)} .milestone .label{margin-top:.7rem;font-size:.85rem;line-height:1.7;color:rgba(244,244,248,.44)} .milestone-end::before{background:linear-gradient(90deg,rgba(148,70,255,.75),rgba(148,70,255,.1))} .milestone-end .year{font-size:clamp(1.5rem,2.6vw,2rem);background:linear-gradient(120deg,#d8baff,#9446ff);-webkit-background-clip:text;background-clip:text;color:transparent} .milestone-end .label{color:rgba(244,244,248,.72)} /* Ladder rungs - ruled rows, not boxes; the crowd behind each step grows with the number */ .rung{position:relative;overflow:hidden;min-height:84px;border:0;background:transparent;border-radius:0; border-top:1px solid rgba(255,255,255,.10);transition:none} .rung:last-child{border-bottom:1px solid rgba(255,255,255,.10)} .rung:hover{transform:none;box-shadow:none;border-color:rgba(255,255,255,.10)} .rung-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.16,1,.3,1),opacity .6s} .rung:hover .rung-bg{transform:scale(1.05)} .rung-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,15,19,.96) 0%,rgba(15,15,19,.80) 38%,rgba(15,15,19,.62) 66%,rgba(15,15,19,.92) 100%)} .rung .idx{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.3em;color:rgba(244,244,248,.32)} .rung .name{font-size:clamp(1.15rem,2.2vw,1.6rem);font-weight:700;letter-spacing:-.015em} .rung .qty{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:clamp(1rem,2.4vw,1.75rem);letter-spacing:-.01em; background:linear-gradient(100deg,#e9d8ff,#9446ff);-webkit-background-clip:text;background-clip:text;color:transparent} .rung .unit{display:block;margin-top:.45rem;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(244,244,248,.42)} html[lang="ko"] .rung .unit,html[lang="ja"] .rung .unit,html[lang^="zh"] .rung .unit{font-family:inherit;font-size:11px;letter-spacing:.12em} /* The equation line - spaced out, with the result carrying the colour */ .eq-line{font-family:'JetBrains Mono',monospace;font-weight:500;letter-spacing:.24em; font-size:clamp(11px,1.5vw,15px);color:rgba(244,244,248,.42);text-transform:uppercase} .eq-line{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.55em} .eq-line b{font-weight:500;color:rgba(244,244,248,.62)} .eq-line i{font-style:normal;color:rgba(244,244,248,.26)} .eq-line em{font-style:normal;background:linear-gradient(100deg,#d8baff,#9446ff);-webkit-background-clip:text;background-clip:text;color:transparent} /* Stage cards - image, hairline, caption. No container chrome. */ .stage-card{overflow:visible;border-radius:0;border:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none} .stage-card:hover{transform:none;box-shadow:none;border-color:transparent} .stage-card img{border-radius:.75rem;transition:transform 1.2s cubic-bezier(.16,1,.3,1),opacity .5s;opacity:.9} .stage-card:hover img{transform:translateY(-4px);opacity:1} .stage-card figcaption{padding:1.5rem 0 0;margin-top:1.5rem;border-top:1px solid rgba(255,255,255,.12)} .stage-card .head{display:flex;align-items:baseline;gap:.85rem} .stage-card .head span{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.3em;color:rgba(244,244,248,.34)} .stage-card .head h3{font-size:1.3rem;font-weight:700;letter-spacing:-.015em} .stage-card p{margin-top:.75rem;font-size:.875rem;line-height:1.85;color:rgba(244,244,248,.48)} @media(prefers-reduced-motion:reduce){.hero-enter,html.i18n-ready .hero-enter,.blob,.blob-anim,.blob-anim2,html.i18n-ready .hero-logo.hero-enter,.grad-text,.sparkle,.hero-scroll,.node.is-now{animation:none;opacity:1}.reveal{filter:none}} /* Philosophy expansion - the human axis. One spine, brightening as it descends: the further down, the larger and hotter the word. The last line is the payoff. */ .axis{position:relative;list-style:none;margin:0 auto;padding:0;max-width:660px; display:flex;flex-direction:column;align-items:center;gap:clamp(28px,3.6vw,46px)} .axis::before{content:"";position:absolute;left:50%;top:2px;bottom:2px;width:1px;translate:-50% 0; background:linear-gradient(180deg,rgba(148,70,255,.05),rgba(148,70,255,.34) 34%,rgba(216,186,255,.9))} /* a single light falls down the spine when the block comes into view */ .axis::after{content:"";position:absolute;left:50%;top:-26%;width:2px;height:26%;translate:-50% 0; background:linear-gradient(180deg,transparent,rgba(233,216,255,.95),transparent); filter:blur(1px);opacity:0;pointer-events:none} .reveal.in.axis::after{animation:axisRun 2.8s cubic-bezier(.42,0,.2,1) .35s} @keyframes axisRun{0%{opacity:0;top:-26%}14%{opacity:1}100%{opacity:0;top:104%}} .ax{--p:calc(var(--i) / 6);position:relative;display:flex;flex-direction:column;align-items:center;gap:.45rem; opacity:0;transform:translateY(16px); transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1); transition-delay:calc(var(--i) * .1s)} .reveal.in .ax{opacity:1;transform:none} /* the node sits on the spine, growing hotter with each step */ .ax::before{content:"";position:absolute;left:50%;top:calc(-1 * clamp(14px,1.8vw,23px)); width:7px;height:7px;translate:-50% -50%;rotate:45deg;background:#0f0f13; border:1px solid rgba(148,70,255,calc(.28 + var(--p) * .72)); box-shadow:0 0 calc(5px + var(--p) * 18px) rgba(148,70,255,calc(.12 + var(--p) * .6))} .ax:first-child::before{display:none} .ax-n{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.24em; color:rgba(216,186,255,calc(.16 + var(--p) * .44))} .ax-w{font-family:'JetBrains Mono',var(--font-lang),monospace;font-weight:700; font-size:calc(11px + var(--p) * 10px); letter-spacing:calc(.24em + var(--p) * .05em); color:rgba(244,244,248,calc(.44 + var(--p) * .56)); text-shadow:0 0 calc(var(--p) * 28px) rgba(148,70,255,calc(var(--p) * .5))} .ax-s{font-family:'Bodoni Moda',Georgia,serif;font-style:italic;text-align:center; font-size:calc(.9rem + var(--p) * .46rem);line-height:1.5; color:rgba(244,244,248,calc(.32 + var(--p) * .44))} html[lang="ko"] .ax-s,html[lang="ja"] .ax-s,html[lang="zh-CN"] .ax-s{ font-family:var(--font-lang),serif;font-style:normal} /* the last line is where the whole flow arrives */ .ax:last-child .ax-w{background:linear-gradient(92deg,#e9d8ff,#9446ff); -webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 0 26px rgba(148,70,255,.55))} @media(prefers-reduced-motion:reduce){ .ax{opacity:1;transform:none;transition:none} .reveal.in.axis::after{animation:none} } /* Concept card - philosopher stays an attribution, the idea is the headline */ .concept{position:relative;padding:1.9rem 1.6rem 1.7rem;border:1px solid rgba(255,255,255,.07); border-radius:1.1rem;background:rgba(255,255,255,.012);transition:border-color .4s} .concept:hover{border-color:rgba(148,70,255,.28)} .concept h3{font-size:1.05rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase} .concept .attr{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em; text-transform:uppercase;color:rgba(244,244,248,.34);margin-top:.5rem} .concept .say{margin-top:1rem;font-size:1.02rem;line-height:1.6;color:rgba(244,244,248,.86)} .concept .body{margin-top:.75rem;font-size:.92rem;line-height:1.85;color:rgba(244,244,248,.5)} /* Footer locations - set as a quiet mono line, one register below the tagline */ .footer-loc{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.55rem 1rem; font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;letter-spacing:.22em; text-transform:uppercase;color:rgba(244,244,248,.34)} /* separators come from CSS so the list wraps without orphaned dots */ .footer-loc span{display:inline-flex;align-items:center} .footer-loc span:not(:last-child)::after{content:"·";margin-left:1rem;color:rgba(148,70,255,.7);letter-spacing:0} .drawer-link{padding:.6rem .7rem;border-radius:.65rem;transition:background .15s} .drawer-link:hover{background:rgba(255,255,255,.06)} /* NAV - marks on the dark, no panel. The hairline and blur arrive only after the hero. */ #siteNav{transition:background .5s ease,backdrop-filter .5s ease} #siteNav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;opacity:0;transition:opacity .5s ease; background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent)} #siteNav.is-scrolled{background:rgba(10,10,13,.62);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)} #siteNav.is-scrolled::after{opacity:1} .nav-inner{height:76px} .nav-logo{height:20px;width:auto;opacity:.85;transition:opacity .35s} .nav-logo:hover{opacity:1} .nav-links{gap:clamp(1.8rem,3.4vw,3.2rem);align-items:center} .nav-links a,.nav-lang{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:rgba(244,244,248,.4);transition:color .35s} .nav-links a:hover,.nav-lang:hover{color:#f4f4f8} .nav-lang{display:flex;align-items:center;gap:7px} .nav-ham{display:flex;align-items:center;justify-content:center;width:26px;height:26px;margin-left:-4px;color:rgba(244,244,248,.5)} /* Philosophy pillars - hairline columns instead of boxes */ .pillar{position:relative;padding-top:1.9rem} .pillar::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.13)} .pillar .idx{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.32em;color:#b78bff} .pillar h3{margin-top:1.15rem;font-size:1.4rem;font-weight:700;letter-spacing:-.01em} .pillar p{margin-top:.9rem;max-width:30ch;font-size:.9rem;line-height:1.95;color:rgba(244,244,248,.5)} /* one column on phones - left-aligned columns read as skewed, so centre them */ @media(max-width:767px){ .pillar{text-align:center} .pillar p{margin-left:auto;margin-right:auto} } /* Epigraph - the single borrowed thought, ruled above and below instead of boxed */ .epigraph{position:relative;margin:clamp(64px,9vw,120px) auto 0;max-width:56rem;padding:clamp(40px,5vw,64px) 1rem;text-align:center} .epigraph::before,.epigraph::after{content:"";position:absolute;left:50%;transform:translateX(-50%);width:72px;height:1px; background:linear-gradient(90deg,transparent,rgba(216,186,255,.55),transparent)} .epigraph::before{top:0} .epigraph::after{bottom:0} .epigraph p{font-size:clamp(19px,2.4vw,29px);line-height:1.6;font-weight:700;letter-spacing:-.012em;color:rgba(244,244,248,.94)} /* Lede - a measured column wide enough that short sentences stay on one line */ .lede{max-width:62ch;margin-left:auto;margin-right:auto;font-size:1rem;line-height:1.95;color:rgba(244,244,248,.54)} /* Stage cards - index and title share a baseline instead of stacking */ .stage-card{overflow:hidden;border-radius:1.25rem} .stage-card figcaption{padding:1.5rem 1.5rem 1.75rem} .stage-card .head{display:flex;align-items:baseline;gap:.85rem} .stage-card .head span{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.28em;color:#b78bff} .stage-card .head h3{font-size:1.3rem;font-weight:700;letter-spacing:-.01em} .stage-card p{margin-top:.7rem;font-size:.875rem;line-height:1.85;color:rgba(244,244,248,.5)} /* ── 3탭 구조 (경영 철학 / 경연 / 기술) ───────────────────────────── */ /* active tab — the dot sits under the label so the row height never shifts */ .nav-links a.is-active{color:rgba(244,244,248,.96)} .nav-links a.is-active::after{content:"";position:absolute;left:50%;bottom:-9px;width:4px;height:4px; border-radius:50%;background:#9446ff;transform:translateX(-50%);box-shadow:0 0 10px rgba(148,70,255,.9)} .nav-links a{position:relative} /* page head — every sub page opens the same way so they read as one site */ .page-head{padding:calc(96px + 8vh) 0 clamp(40px,7vw,84px)} .page-head h1{text-wrap:balance} .page-head::after{content:"";display:block;width:clamp(56px,9vw,110px);height:1px;margin-top:2.4rem; background:linear-gradient(90deg,rgba(216,186,255,.65),transparent)} /* gate cards — the three ways in, on the home page */ .gate{position:relative;display:block;overflow:hidden;border-radius:20px;padding:26px 24px 60px; background:linear-gradient(150deg,rgba(148,70,255,.10),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08);transition:border-color .5s,transform .5s,background .5s} .gate:hover{border-color:rgba(148,70,255,.42);transform:translateY(-4px); background:linear-gradient(150deg,rgba(148,70,255,.17),rgba(255,255,255,.03))} .gate-n{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.28em;color:rgba(216,186,255,.7)} .gate h3{margin-top:1.1rem;font-size:1.5rem;font-weight:800;letter-spacing:-.01em} .gate p{margin-top:.8rem;font-size:.9rem;line-height:1.85;color:rgba(244,244,248,.5)} .gate-go{position:absolute;left:24px;bottom:24px;font-size:1.1rem;color:rgba(216,186,255,.55); transition:transform .5s,color .5s} .gate:hover .gate-go{transform:translateX(6px);color:rgba(216,186,255,.95)} /* ── 경연 흐름 — 화면 한 컷과 설명 한 덩어리가 번갈아 선다 ─────────── */ .flow{display:grid;gap:clamp(28px,5vw,64px);align-items:center;grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .flow.is-flip .flow-art{order:2} .flow-art{display:flex;justify-content:center} .flow-art img{width:min(300px,72vw);height:auto;display:block;border-radius:26px; border:1px solid rgba(255,255,255,.09);box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 60px rgba(148,70,255,.14)} .flow-n{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.3em;color:rgba(216,186,255,.65)} .flow-copy h3{margin-top:1rem;font-size:clamp(1.5rem,2.6vw,2rem);font-weight:800;letter-spacing:-.015em;line-height:1.25} .flow-copy p{margin-top:1rem;max-width:34ch;font-size:.95rem;line-height:1.95;color:rgba(244,244,248,.5)} @media(max-width:820px){ .flow{grid-template-columns:1fr;gap:26px} .flow.is-flip .flow-art{order:0} .flow-copy{text-align:center} .flow-copy p{margin-left:auto;margin-right:auto} } /* ── 분배 막대 ───────────────────────────────────────────────────── */ .split{border-radius:20px;padding:26px 24px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)} .split h3{font-size:1.35rem;font-weight:800;letter-spacing:-.01em} .split-sub{margin-top:.5rem;font-size:.85rem;line-height:1.8;color:rgba(244,244,248,.42)} .bars{margin-top:1.6rem;display:flex;flex-direction:column;gap:.9rem} .bar{display:grid;grid-template-columns:minmax(84px,auto) 1fr auto;align-items:center;gap:12px;font-size:.85rem} .bar .bl{color:rgba(244,244,248,.62)} .bar .bt{display:block;height:8px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden} .bar .fill{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#5a16c9,#9446ff 60%,#d8baff)} .bar b{font-variant-numeric:tabular-nums;color:rgba(244,244,248,.9)} /* ── 인트로 — 조리개 영상이 열리며 히어로가 드러난다 ───────────────── */ html.intro-on,html.intro-on body{overflow:hidden;height:100%} html.intro-on .hero-grid,html.intro-on #siteNav{opacity:0;pointer-events:none} .hero-grid,#siteNav{transition:opacity .8s ease .15s} #intro{position:fixed;inset:0;z-index:300;--io:0;background:#000; transition:opacity .6s ease,visibility .6s} #intro.is-done{opacity:0;visibility:hidden;pointer-events:none} /* 정사각 영상을 화면에 꽉 채운다. object-fit:cover 라 넘치는 쪽만 잘리고 조리개는 가운데에 그대로 남는다. 끝으로 갈수록 살짝 밀고 들어가야 "통과한다"로 읽힌다. */ #intro .ivid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transform:scale(calc(1 + var(--io) * .28)); opacity:calc(.2 + var(--io) * .8)} /* 세로 화면에서는 꽉 채우지 않는다 — cover 로 좌우를 자르면 조리개가 화면을 넘겨 버려 "작게 시작해 열린다"는 처음 인상이 사라진다. */ @media(max-width:900px){ #intro .ivid{inset:auto;left:50%;top:50%;translate:-50% -50%; width:min(112vmin,112vmax);height:min(112vmin,112vmax);object-fit:contain; transform:scale(calc(1 + var(--io) * .34))} } #intro .iui{position:absolute;left:0;right:0;bottom:11vh;display:flex;flex-direction:column; align-items:center;gap:26px;pointer-events:none;opacity:calc(1 - var(--io) * 1.8)} #intro .ikicker{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.34em; color:rgba(244,244,248,.5)} @media(min-width:640px){#intro .ikicker{font-size:12px}} #intro .icue{display:flex;flex-direction:column;align-items:center;gap:9px; font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.3em;color:rgba(244,244,248,.3)} #intro .icue i{display:block;width:1px;height:44px; background:linear-gradient(180deg,transparent,rgba(216,186,255,.75)); animation:cueRun 2.1s cubic-bezier(.5,0,.3,1) infinite} @keyframes cueRun{0%{transform:scaleY(.2);transform-origin:top;opacity:0} 40%{opacity:1}100%{transform:scaleY(1);transform-origin:top;opacity:0}} #intro.show-hint .icue{color:rgba(216,186,255,.72)} /* ── 기술 페이지 ─────────────────────────────────────────────────── */ .tcard{border-radius:20px;padding:24px 22px;background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08)} .tcard h3{font-size:1.2rem;font-weight:800;letter-spacing:-.01em} .tcard p{margin-top:.8rem;font-size:.9rem;line-height:1.9;color:rgba(244,244,248,.5)} /* 단계 — 번호가 왼쪽에 서고 선이 아래로 이어진다 */ .steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0} .step{position:relative;padding:0 0 30px 58px} .step:last-child{padding-bottom:0} .step::before{content:"";position:absolute;left:17px;top:34px;bottom:2px;width:1px; background:linear-gradient(180deg,rgba(148,70,255,.5),rgba(148,70,255,.06))} .step:last-child::before{display:none} .step-n{position:absolute;left:0;top:0;width:35px;height:35px;border-radius:50%; display:grid;place-items:center;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700; color:#d8baff;background:rgba(148,70,255,.14);border:1px solid rgba(148,70,255,.42)} .step h3{font-size:1.1rem;font-weight:800;letter-spacing:-.01em;line-height:1.4;padding-top:5px} .step p{margin-top:.55rem;max-width:52ch;font-size:.9rem;line-height:1.9;color:rgba(244,244,248,.5)} @media(min-width:900px){ .steps-wide{display:grid;grid-template-columns:1fr 1fr;gap:0 42px} .steps-wide .step:nth-last-child(2)::before{display:none} } /* 결제 수단 칩 */ .chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px} .chips span{border-radius:99px;padding:11px 22px;font-size:.9rem;font-weight:600; color:rgba(244,244,248,.88);background:rgba(148,70,255,.13);border:1px solid rgba(148,70,255,.36)} .chips-quiet span{font-family:'JetBrains Mono',monospace;font-size:.78rem;letter-spacing:.12em; padding:8px 16px;color:rgba(244,244,248,.5);background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.09)} /* 원본 도식 — 흰 바탕이라 종이처럼 눕힌다 */ .sheet{margin:0;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.1); background:#fff;box-shadow:0 30px 70px rgba(0,0,0,.5)} .sheet img{display:block;width:100%;height:auto} /* THE NAME — 새 로고에서 잘라낸 조각을 쓴다. img 라서 회전은 그대로 먹지만 조리개는 이제 입체라 계속 돌면 어지럽다 — 아주 느리게만 돈다. */ img.mark{display:block;object-fit:contain} img.formula-o,img.formula-mul,img.formula-x{display:inline-block;vertical-align:middle;object-fit:contain} img.aperture-spin{animation-duration:64s} img.formula-mul{transform:rotate(45deg)} /* 동서 여섯 장을 받아 내는 한 줄 — 카드와 맺음 사이에 홀로 선다 */ .unity{margin:clamp(52px,6vw,76px) auto clamp(56px,7vw,88px);max-width:44ch;text-align:center; font-family:'Bodoni Moda',Georgia,serif;font-style:italic;font-weight:600; font-size:clamp(19px,2.4vw,27px);line-height:1.62; background:linear-gradient(96deg,#f4f4f8 8%,#d8baff 48%,#9446ff 96%); -webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 8px 30px rgba(148,70,255,.34))} html[lang="ko"] .unity,html[lang="ja"] .unity,html[lang="zh-CN"] .unity{ font-family:var(--font-lang),serif;font-style:normal;font-weight:700;letter-spacing:-.01em} /* ── PC 에서만 작은 글자를 키운다 ──────────────────────────────────── 모바일은 화면이 좁아 지금 크기가 맞다. 넓은 화면에서만 한 단계 올린다. 본문 0.9~1.0rem 은 큰 모니터에서 작게 읽힌다. */ @media(min-width:1024px){ .concept h3{font-size:1.18rem} .concept .attr{font-size:11px;letter-spacing:.2em} .concept .say{font-size:1.14rem} .concept .body{font-size:1rem;line-height:1.95} .lede{font-size:1.1rem} .copy{font-size:1.05rem} .gate p{font-size:1rem} .gate-n{font-size:12px} .flow-copy p{font-size:1.04rem} .step h3{font-size:1.18rem} .step p{font-size:1rem;line-height:1.95} .step-n{font-size:13px} .tcard h3{font-size:1.28rem} .tcard p{font-size:1rem;line-height:1.95} .split h3{font-size:1.44rem} .split-sub{font-size:.95rem} .bar{font-size:.95rem} .stage-card p{font-size:.95rem} .daily-a{font-size:10px} .ax-n{font-size:10px} .nav-links a,.nav-lang{font-size:11px} .footer-loc{font-size:.85rem} }