:root { --bg:#0e1018; --panel:#181b27; --ink:#f6f0e4; --muted:#c3bdc3; --gold:#ecc986; --line:#3e3741; color-scheme:dark; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:radial-gradient(ellipse at 79% 20%,#252033 0,transparent 38rem),var(--bg); color:var(--ink); font:16px/1.65 system-ui,sans-serif; }
button,select { font:inherit; }
a { color:inherit; }
:focus-visible { outline:2px solid var(--gold); outline-offset:5px; }
[hidden] { display:none !important; }
.shell { width:min(1140px,calc(100% - 80px)); margin-inline:auto; }
.sr-only,.skip:not(:focus) { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.skip:focus { display:block; padding:8px 16px; }
.top { min-height:78px; display:flex; align-items:center; gap:32px; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; gap:12px; align-items:center; margin-right:auto; text-decoration:none; font-size:14px; font-weight:700; letter-spacing:.24em; }
.brand img,.hero-art img { object-fit:contain; }
.navigation a { text-decoration:none; font-size:14px; color:var(--muted); }
.navigation { display:flex; gap:clamp(12px,2vw,25px); align-items:center; }
.menu-button { display:none; min-height:42px; border:1px solid var(--line); border-radius:6px; background:var(--panel); color:var(--ink); padding:4px 10px; }
.language { display:flex; gap:8px; align-items:center; color:var(--gold); }
.language select { min-height:42px; color:var(--ink); background:#181a24; border:1px solid #655747; border-radius:6px; padding:4px 8px; }
.hero { min-height:610px; padding-block:66px; display:grid; grid-template-columns:1.1fr 1fr; gap:24px; align-items:center; }
.eyebrow { margin:0 0 17px; display:flex; align-items:center; gap:10px; color:var(--gold); font-size:12px; font-weight:750; letter-spacing:.19em; }
.eyebrow span { width:7px; height:7px; border-radius:50%; background:var(--gold); }
h1,h2,h3,p { margin:0; }
h1 { font-size:clamp(3.3rem,6.5vw,6.6rem); line-height:1.02; letter-spacing:-.075em; font-weight:660; }
.hero-line { display:flex; align-items:baseline; gap:.16em; }
.hero-syllable { display:inline-grid; place-items:center; flex:none; min-width:1.55em; padding:.12em .18em .2em; border:1px solid #806845; border-radius:.2em; font-size:.46em; letter-spacing:0; color:var(--gold); background:#ecc9860d; }
html[lang="ko"] .hero-syllable { display:none; }
.gold { color:var(--gold); }
.intro { max-width:40ch; margin-top:25px; color:var(--muted); }
.button { display:inline-flex; align-items:center; gap:20px; margin-top:26px; padding:10px 16px; border-radius:4px; color:#1a1514; background:var(--gold); text-decoration:none; font-weight:750; }
.hero-art { position:relative; display:grid; place-items:center; min-width:0; aspect-ratio:1; isolation:isolate; }
.hero-art::before { content:""; position:absolute; inset:14%; border-radius:50%; background:radial-gradient(#c4934726,transparent 66%); }
.orbit { position:absolute; border:1px solid #a78b5f42; border-radius:50%; }
.orbit-outer { inset:5%; }
.orbit-inner { inset:13%; }
.hero-art img { width:52%; height:52%; z-index:1; filter:drop-shadow(0 20px 28px #0007); animation:mark-in .8s ease-out both; }
.spark { position:absolute; inset:14% 21% auto auto; width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 19px var(--gold); }
.art-note { position:absolute; bottom:7%; right:0; background:#171620; color:var(--gold); padding:4px 10px; letter-spacing:.15em; font-size:10px; }
.hero-story { --story-travel:clamp(330px,76svh,600px); }
.hero-gate,.story-meter { display:none; }
.story-enabled .hero { position:relative; }
.story-pinned { min-height:calc(var(--hero-height) + var(--story-travel)); }
.story-pinned .hero { position:sticky; top:var(--hero-top); }
.story-enabled .hero-line {
  color:color-mix(in srgb,var(--gold) var(--highlight,0%),var(--ink));
  opacity:var(--line-opacity,1);
}
.story-enabled .hero-art img {
  animation:none;
  transform:translateY(var(--mark-y,0px)) scale(var(--mark-scale,1)) rotate(var(--mark-angle,0deg));
}
.story-enabled .orbit-outer { transform:scale(var(--ring-scale,1)); opacity:var(--ring-opacity,1); }
.story-enabled .orbit-inner { transform:scale(var(--inner-scale,1)); }
.story-enabled .spark { transform:rotate(var(--spark-angle,0deg)); transform-origin:-4.5em 5.2em; opacity:var(--ring-opacity,1); }
.story-enabled .hero-gate {
  display:block; position:absolute; inset:17%; border-radius:50%; overflow:hidden; pointer-events:none;
}
.hero-gate::before,.hero-gate::after {
  content:""; position:absolute; top:0; bottom:0; width:50%;
  opacity:var(--gate-opacity,0); border:1px solid #a78b5f66;
}
.hero-gate::before {
  left:0; transform:translateX(calc(-1 * var(--gate-offset,100%)));
  background:linear-gradient(90deg,transparent,#a8793b30);
}
.hero-gate::after {
  right:0; transform:translateX(var(--gate-offset,100%));
  background:linear-gradient(270deg,transparent,#a8793b30);
}
.story-enabled .story-meter {
  position:absolute; display:flex; align-items:center; gap:9px; bottom:13px; left:0;
  color:var(--gold); font-size:10px; letter-spacing:.12em; font-variant-numeric:tabular-nums;
}
.story-meter i { display:block; width:65px; height:2px; background:#5a4a4b; overflow:hidden; }
.story-meter i::before { content:""; display:block; height:100%; background:var(--gold); transform:scaleX(var(--story-progress,0)); transform-origin:left; }
.work { border-top:1px solid var(--line); padding-block:48px 75px; }
.work-heading { display:flex; flex-wrap:wrap; gap:12px 32px; align-items:end; justify-content:space-between; margin-bottom:24px; }
.work-heading h2 { font-size:clamp(2rem,5vw,3.75rem); line-height:1.15; letter-spacing:-.05em; }
.work-heading > p { max-width:38ch; color:var(--muted); }
.tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:12px; }
.tabs button { min-height:55px; display:flex; gap:12px; align-items:center; justify-content:center; padding:8px 10px; border:1px solid var(--line); border-radius:7px; background:#171925; color:var(--ink); cursor:pointer; }
.tabs button span:first-child { font-size:.75em; color:var(--gold); }
.tabs button[aria-selected="true"] { background:var(--gold); color:#1a1514; border-color:var(--gold); font-weight:750; }
.tabs button[aria-selected="true"] span:first-child { color:inherit; }
.case { display:grid; grid-template-columns:1.05fr 1fr; border:1px solid var(--line); border-radius:15px; background:var(--panel); overflow:hidden; animation:case-in .28s ease-out both; }
.case-copy { align-self:center; padding:clamp(25px,5vw,55px); }
.case-label { color:var(--gold); font-size:.82rem; }
.case h3 { font-size:clamp(1.85rem,4.2vw,3.25rem); letter-spacing:-.05em; line-height:1.2; margin-block:8px 13px; }
.case-lead { color:var(--ink); font-weight:720; margin-bottom:7px; }
.case-copy p:not(.case-label):not(.case-lead) { color:var(--muted); }
.case-link { display:inline-block; color:var(--gold); margin-top:18px; text-underline-offset:4px; }
:is(.button,.tabs button,.menu-button) {
  cursor:pointer;
  transition:transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.button > [aria-hidden="true"] { transition:transform .2s ease; }
.case-link { transition:color .2s ease; }
@media (hover:hover) and (pointer:fine) {
  :is(.button,.tabs button,.menu-button):hover {
    transform:translateY(-2px);
    box-shadow:0 6px 20px #ecc98630;
  }
  .button:hover,.tabs button[aria-selected="true"]:hover { background:#ffe0a5; }
  .button:hover > [aria-hidden="true"] { transform:translate(2px,2px); }
  .tabs button[aria-selected="false"]:hover,.menu-button:hover {
    background:#252330;
    border-color:var(--gold);
  }
  .case-link:hover { color:#fff0cb; }
}
:is(.button,.tabs button,.menu-button):active { transform:translateY(1px); box-shadow:none; }
.case-art { position:relative; display:grid; place-items:center; min-height:310px; padding:25px 18px 44px; }
.app-art { background:radial-gradient(ellipse,#2a5351,#12262c 75%); }
.phone { width:147px; min-height:235px; padding:16px 11px 11px; border:1px solid #6daba5; border-radius:20px; background:#0c191c; box-shadow:0 12px 32px #0007; }
.camera { margin:0 auto 7px; width:30px; height:3px; background:#60958f; border-radius:10px; }
.phone-title { font-size:12px; color:#a0ebe0; }
.scan-frame { position:relative; height:108px; display:grid; place-items:center; margin-block:14px; }
.scan-frame span { position:absolute; width:18px; height:18px; border:2px solid #8fdfd4; }
.scan-frame span:nth-child(1) { top:0; left:0; border-right:0; border-bottom:0; }
.scan-frame span:nth-child(2) { top:0; right:0; border-left:0; border-bottom:0; }
.scan-frame span:nth-child(3) { bottom:0; left:0; border-right:0; border-top:0; }
.scan-frame span:nth-child(4) { bottom:0; right:0; border-left:0; border-top:0; }
.scan-pattern { width:58px; aspect-ratio:1; background:repeating-conic-gradient(#abcfc8 0% 25%,#152527 0% 50%) 50% / 16px 16px; }
.scan-result { display:flex; align-items:center; gap:8px; padding:8px 6px; border-radius:5px; background:#274443; color:#c9eee8; font-size:11px; }
.field-art { background:radial-gradient(ellipse,#3e3031,#211c2b 80%); }
.flow { list-style:none; width:min(100%,335px); margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.flow li { min-height:76px; display:flex; flex-direction:column; justify-content:center; border:1px solid #806950; border-radius:8px; padding:8px 12px; background:#221e2a; overflow-wrap:anywhere; }
.step { color:var(--gold); font-size:11px; letter-spacing:.15em; }
.art-caption { position:absolute; right:14px; bottom:9px; color:#e2dacb; font-size:10px; letter-spacing:.17em; }
.footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 18px; padding-block:20px 30px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; }
.footer span:first-child { color:var(--gold); letter-spacing:.2em; }
.footer nav { display:flex; flex-wrap:wrap; gap:8px 20px; }
.footer a { text-underline-offset:4px; }
.company-section { border-top:1px solid var(--line); padding-block:clamp(40px,8vw,90px); }
.company-section h2 { max-width:25ch; font-size:clamp(1.85rem,4.5vw,3.3rem); line-height:1.18; letter-spacing:-.04em; }
.company-section p:not(.eyebrow) { max-width:66ch; color:var(--muted); margin-top:14px; }
.ip-box { display:flex; align-items:center; flex-wrap:wrap; gap:12px 25px; padding:20px; margin-top:24px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.ip-box > strong { color:var(--gold); font-size:3rem; line-height:1; }
.ip-box p:not(.eyebrow) { margin-top:4px; }
.founder { display:grid; grid-template-columns:185px minmax(0,1fr); gap:clamp(20px,6vw,70px); align-items:center; }
.founder figure { margin:0; }
.founder img { display:block; width:100%; height:auto; border-radius:36px 36px 18px 18px; }
.founder figcaption { margin-top:12px; }
.founder figcaption span { color:var(--muted); font-size:.85rem; }
.contact { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 25px; }
.contact a { overflow-wrap:anywhere; }
@keyframes mark-in { from { opacity:0; transform:scale(.92) translateY(12px); } }
@keyframes case-in { from { opacity:.65; transform:translateY(5px); } }
@media (max-width:990px) {
  .top { position:relative; z-index:2; gap:12px; }
  .menu-button { display:inline-block; }
  .navigation { display:none; position:absolute; right:0; top:calc(100% + 6px); min-width:min(240px,100%); padding:12px; border:1px solid var(--line); border-radius:8px; background:var(--panel); box-shadow:0 16px 28px #0007; }
  .navigation.is-open { display:grid; gap:0; }
  .navigation a { padding:9px 8px; }
}
@media (max-width:740px) {
  .shell { width:calc(100% - 36px); }
  .top { min-height:65px; gap:12px; }
  .hero { grid-template-columns:1fr; gap:16px; min-height:auto; padding-block:34px 30px; }
  .hero-art { width:min(100%,230px); justify-self:center; grid-row:1; }
  .hero-story { --story-travel:clamp(180px,43svh,330px); }
  .story-enabled .hero { gap:10px; padding-block:18px 43px; }
  .story-enabled .hero-art { width:min(100%,clamp(124px,22svh,190px)); }
  .story-enabled .hero h1 { font-size:clamp(2.65rem,10vw,3.5rem); }
  .story-enabled .hero .intro { margin-top:16px; }
  .story-enabled .hero .button { margin-top:16px; }
  .art-note { right:-8px; }
  .case { grid-template-columns:1fr; }
  .case-art { min-height:265px; }
  .founder { grid-template-columns:1fr; }
  .founder figure { max-width:140px; }
}
@media (max-width:360px) {
  .brand { gap:6px; letter-spacing:.12em; font-size:12px; }
  .brand img { width:27px; height:27px; }
  .language > span[aria-hidden] { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; }
  :is(.button,.tabs button,.menu-button,.case-link),.button > [aria-hidden="true"] { transition:none; }
  :is(.button,.tabs button,.menu-button):is(:hover,:active),.button:hover > [aria-hidden="true"] { transform:none; }
}