/* The site part of /windows. Copied from the <style> in index.html so the two
   pages read as one site, with its fixed colours turned into tokens: this page
   also follows a light system setting, because the app it shows does. */
:root {
  --bg: #0b0b0d;
  --panel: #131418;
  --edge: rgba(255,255,255,.10);
  --text: rgba(255,255,255,.93);
  --dim: rgba(255,255,255,.58);
  --dimmer: rgba(255,255,255,.42);
  --accent: #0A84FF;
  --on-accent: #fff;
  --hover: rgba(255,255,255,.06);
  --field: rgba(255,255,255,.05);
  --header: rgba(11,11,13,.72);
  --shadow: 0 30px 80px rgba(0,0,0,.55);
  --shadow-soft: 0 18px 44px rgba(0,0,0,.45);
  --font: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f7f8fa;
    --panel: #fff;
    --edge: rgba(0,0,0,.11);
    --text: rgba(0,0,0,.87);
    --dim: rgba(0,0,0,.62);
    --dimmer: rgba(0,0,0,.52);
    --accent: #0067c0;
    --hover: rgba(0,0,0,.05);
    --field: rgba(0,0,0,.03);
    --header: rgba(247,248,250,.78);
    --shadow: 0 30px 80px rgba(20,40,70,.18);
    --shadow-soft: 0 18px 44px rgba(20,40,70,.14);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #f7f8fa;
  --panel: #fff;
  --edge: rgba(0,0,0,.11);
  --text: rgba(0,0,0,.87);
  --dim: rgba(0,0,0,.62);
  --dimmer: rgba(0,0,0,.52);
  --accent: #0067c0;
  --hover: rgba(0,0,0,.05);
  --field: rgba(0,0,0,.03);
  --header: rgba(247,248,250,.78);
  --shadow: 0 30px 80px rgba(20,40,70,.18);
  --shadow-soft: 0 18px 44px rgba(20,40,70,.14);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Korean wraps between any two characters by default, which splits words
     down the middle. keep-all breaks at spaces, as the language reads. */
  word-break: keep-all;
  overflow-wrap: break-word;
}
/* Headings read as a shape, so even line lengths matter more than filling the
   measure. Body text only needs its last line not to be a single word. */
h1, h2, h3, h4, .lead, .sub { text-wrap: balance; }
p { text-wrap: pretty; }
/* A phrase that must not be split across lines. Inline-block would break the
   surrounding line box's baseline on some engines, so keep it inline and let
   the nowrap do the work. */
.ib { white-space: nowrap; }
/* Only the sides: this class is combined with <section>, and the shorthand
   was silently zeroing the vertical padding those sections set for themselves. */
.wrap { max-width: 1080px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
a { color: inherit; }

header {
  position: sticky; top: 0; z-index: 50; padding: 16px 0;
  background: var(--header);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease;
}
/* The rule only earns its place once content is passing underneath. */
header.scrolled { border-bottom-color: var(--edge); }
header .wrap { display: flex; align-items: center; gap: 11px; }
header img { width: 30px; height: 30px; }
header b { font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
header nav { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 15px; }
header nav a {
  color: var(--dim); text-decoration: none; padding: 7px 12px;
  border-radius: 8px; transition: color 130ms ease, background 130ms ease;
}
header nav a:hover { color: var(--text); background: var(--hover); }
header nav a.cta { color: var(--text); }
@media (max-width: 640px) {
  header nav a:not(.cta) { display: none; }
  /* On a phone only Download and the language toggle remain in the header, and
     both were under the 44px a finger reliably hits. Give them the height
     without changing how they look on the desktop. */
  header nav a.cta { display: inline-flex; align-items: center; min-height: 44px; }
  .lang { min-height: 44px; }
}
.lang {
  background: transparent; border: 1px solid var(--edge); color: var(--dim);
  border-radius: 7px; padding: 5px 11px; font: inherit; font-size: 13.5px;
  cursor: pointer;
}
.lang:hover { color: var(--text); border-color: var(--dimmer); }

.hero { padding: 64px 0 0; text-align: center; }
.hero h1 {
  font-size: clamp(34px, 6vw, 60px); line-height: 1.14; letter-spacing: -.03em;
  font-weight: 700; margin: 0 0 20px;
}
.hero p.sub { font-size: clamp(17px, 2.3vw, 21px); color: var(--dim); margin: 0 auto 34px; max-width: 33em; }
.cta { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.btn {
  display: inline-block; padding: 14px 30px; border-radius: 11px;
  font-size: 16px; font-weight: 600; text-decoration: none; border: 1px solid transparent;
  cursor: pointer; font-family: inherit;
}
.btn.primary { background: var(--accent); color: var(--on-accent); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { border-color: var(--edge); color: var(--text); background: transparent; }
.btn.ghost:hover { background: var(--hover); }
.note { margin-top: 16px; font-size: 14px; color: var(--dimmer); }

.shot { margin: 56px auto 0; max-width: 1000px; padding-bottom: 40px; }
/* A window frame around the capture, so it reads as the app on a Mac. */
.shot-frame {
  border-radius: 12px; overflow: hidden; background: var(--panel);
  border: 1px solid var(--edge); box-shadow: var(--shadow);
}
.shot .shot-frame img { border: 0; border-radius: 0; box-shadow: none; }
/* Replay the opening demo: one round icon, no words. */
.replay {
  width: 52px; height: 52px; border-radius: 50%; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--edge); color: var(--dim);
  transition: color 130ms ease, background 130ms ease;
}
.replay:hover { color: var(--text); background: var(--hover); }
.replay:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#intro:focus { outline: none; }
.replay svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 300ms ease; }
.replay:hover svg { transform: rotate(-60deg); }
@media (prefers-reduced-motion: reduce) { .replay:hover svg { transform: none; } }
.shot img {
  width: 100%; height: auto; display: block;
  border-radius: 14px; border: 1px solid var(--edge);
  box-shadow: var(--shadow);
}

/* Every section carries its own top space, so the rhythm does not change
   depending on what happens to sit before it. */
section { padding: 72px 0 76px; }
section:last-of-type { padding-bottom: 24px; }
h2 { font-size: clamp(26px, 3.6vw, 36px); letter-spacing: -.025em; margin: 0 0 16px; font-weight: 700; }
.lead { color: var(--dim); margin: 0 0 52px; font-size: 18px; max-width: 32em; }

/* The problems, stated before the answers. Bordered rather than filled: these
   are questions being asked, not results being shown. */
.problems { padding-bottom: 20px; }
.problems h2 { margin-bottom: 34px; }
.prob-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.prob {
  border: 1px solid var(--edge); border-radius: 13px; padding: 24px;
  background: transparent;
}
.prob b { display: block; margin-bottom: 9px; font-size: 16px; font-weight: 650; letter-spacing: -.02em; }
.prob p { margin: 0; color: var(--dim); font-size: 15px; line-height: 1.72; }

.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-bottom: 92px; }
.feature:last-child { margin-bottom: 0; }
.feature.flip .txt { order: 2; }
.feature h3 { font-size: 23px; margin: 0 0 12px; letter-spacing: -.02em; font-weight: 650; }
.feature p { color: var(--dim); margin: 0; max-width: 34em; }
.feature .media > img, .feature .media > video {
  width: 100%; height: auto; display: block; border-radius: 12px;
  border: 1px solid var(--edge); box-shadow: var(--shadow-soft);
  background: var(--panel);
}
/* Motion that repeats forever is a poor companion to reading. Anyone who has
   asked for less of it gets the still frame instead. */
/* The still is a stand-in for the video, not a third item in the grid: it
   shares the same cell and only one of the two is ever displayed. */
.feature .media { position: relative; min-width: 0; }
.feature .media > .still { display: none; }
@media (prefers-reduced-motion: reduce) {
  .feature .media > video { display: none; }
  .feature .media > .still { display: block; }
}

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid + * { margin-top: 0; }
.card { background: var(--panel); border: 1px solid var(--edge); border-radius: 13px; padding: 24px; }
.card h4 { margin: 0 0 8px; font-size: 17px; font-weight: 600; }
.card p { margin: 0; color: var(--dim); font-size: 15.5px; }

/* The divider needs room above it as well as below, or it reads as a line
   drawn under the previous section's last card. */
#buy { border-top: 1px solid var(--edge); margin-top: 40px; padding-top: 96px; }
.price-box {
  background: var(--panel); border: 1px solid var(--edge); border-radius: 16px;
  padding: 38px; max-width: 480px; margin: 0 auto; text-align: center;
}
.price { font-size: 46px; font-weight: 700; letter-spacing: -.03em; }
.price small { font-size: 17px; color: var(--dim); font-weight: 400; letter-spacing: 0; }
.price-box ul { list-style: none; padding: 0; margin: 22px 0 26px; text-align: left; }
.price-box li { color: var(--dim); padding: 7px 0 7px 26px; position: relative; font-size: 15.5px; }
.price-box li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); }
.price-box input {
  width: 100%; padding: 13px 15px; border-radius: 10px; font-size: 16px;
  background: var(--field); border: 1px solid var(--edge);
  color: var(--text); font-family: inherit; margin-bottom: 12px;
}
.price-box input::placeholder { color: var(--dimmer); }
.price-box .btn { width: 100%; }

.err { color: #FF453A; font-size: 14.5px; margin-top: 12px; min-height: 20px; }

footer { border-top: 1px solid var(--edge); margin-top: 96px; padding: 56px 0 64px; font-size: 14.5px; }
.foot-top {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px;
  padding-bottom: 40px;
}
.foot-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.foot-brand img { width: 26px; height: 26px; }
.foot-brand b { font-size: 15.5px; font-weight: 600; }
.foot-blurb { color: var(--dimmer); margin: 0; max-width: 26em; line-height: 1.7; }
.foot-col h5 {
  margin: 0 0 14px; font-size: 13px; font-weight: 600; color: var(--dim);
}
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li { margin-bottom: 9px; }
.foot-col a { color: var(--dimmer); text-decoration: none; }
.foot-col a:hover { color: var(--text); }
.foot-legal {
  border-top: 1px solid var(--edge); padding-top: 26px; margin-bottom: 22px;
  color: var(--dimmer); font-size: 13px; line-height: 1.85;
}
.foot-legal p { margin: 0; }
.foot-bottom {
  padding-top: 0;
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
  color: var(--dimmer); font-size: 13.5px;
}
.foot-bottom .sep { margin-left: auto; }
@media (max-width: 780px) {
  .foot-top { grid-template-columns: 1fr; gap: 32px; }
  .foot-bottom .sep { margin-left: 0; }
}

@media (max-width: 780px) {
  .prob-grid { grid-template-columns: 1fr; }
  .feature { grid-template-columns: 1fr; gap: 26px; }
  .feature.flip .txt { order: 0; }
  .grid { grid-template-columns: 1fr; }
  section { padding: 52px 0 56px; }
  .shot { padding-bottom: 24px; }
}

/* Phone. The gutter shrinks with the screen, the headline stops scaling with
   the viewport before it reaches the edges, and the two hero buttons stack
   rather than splitting a line between them. */
@media (max-width: 520px) {
  body { font-size: 16px; }
  .wrap { padding-left: 20px; padding-right: 20px; }
  .hero { padding-top: 44px; }
  .hero h1 { font-size: clamp(28px, 8.2vw, 36px); line-height: 1.2; margin-bottom: 16px; }
  .hero p.sub { font-size: 16.5px; margin-bottom: 28px; }
  .cta { display: grid; gap: 10px; }
  .btn { padding: 15px 20px; width: 100%; text-align: center; }
  .replay { justify-self: center; }
  .shot { margin-top: 40px; }
  h2 { font-size: clamp(23px, 6.4vw, 28px); }
  .lead { font-size: 16.5px; margin-bottom: 36px; }
  .feature { margin-bottom: 64px; }
  .feature h3 { font-size: 19px; }
  section { padding: 44px 0 46px; }
  #buy { padding-top: 68px; }
  .price-box { padding: 28px 22px; }
  .price { font-size: 38px; }
  .card { padding: 20px; }
  footer { margin-top: 68px; padding: 44px 0 52px; }
}
/* Very narrow phones, where the gutter is the first thing worth reclaiming. */
@media (max-width: 380px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .hero h1 { font-size: 25px; }
}

/* The opening screen is the desktop demo (desktop.html) filling the window.
   When its tour ends the demo closes its window, this page cuts to black, and
   the site comes up out of the dark. */
html.touring { overflow: hidden; }
.tour { position: fixed; inset: 0; z-index: 60; display: none; padding: 0; background: #000; }
html.touring .tour, .tour.closing { display: block; }
/* A way out of the demo that does not require playing it to the end. Sits above
   the frame, which covers the whole window. */
.tour-skip {
  position: absolute; z-index: 2; top: 18px; right: 18px;
  padding: 7px 15px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13px; line-height: 1.4;
  color: rgba(255,255,255,.92); background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background 140ms ease, border-color 140ms ease;
}
.tour-skip:hover { background: rgba(0,0,0,.62); border-color: rgba(255,255,255,.45); }
.tour-skip:focus-visible { outline: 2px solid #0A84FF; outline-offset: 2px; }
.tour.closing .tour-skip { display: none; }
@media (max-width: 640px) { .tour-skip { top: 12px; right: 12px; } }

/* The black the demo closes into, and out of which the page appears. */
.tour::after {
  content: ''; position: absolute; inset: 0; background: #000; opacity: 0;
  pointer-events: none; transition: opacity 420ms ease;
}
.tour.blackout::after { opacity: 1; }
.tour.lifting { opacity: 0; transition: opacity 700ms ease; }
.tour.closing { pointer-events: none; }
/* Questions people ask before installing, answered in plain sentences. */
.faq-list { max-width: 760px; }
.faq details { border-bottom: 1px solid var(--edge); padding: 4px 0; }
.faq summary { cursor: pointer; list-style: none; padding: 16px 28px 16px 0; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 14px; color: var(--dim); font-size: 20px; }
.faq details[open] summary::after { content: '–'; }
.faq summary h3 { display: inline; font-size: 17px; font-weight: 600; letter-spacing: -.02em; margin: 0; }
.faq details p { color: var(--dim); margin: 0 0 18px; font-size: 15.5px; line-height: 1.75; }
.foot-legal a { color: var(--dim); }
/* 개인정보 처리방침은 다른 링크와 구별되게 표시한다 (작성지침). */
#foot-privacy { color: var(--text); font-weight: 600; }

/* ---- Windows page additions ------------------------------------------- */
/* The logo at the sizes it was drawn for. */
header img { width: 32px; height: 32px; }
.foot-brand img { width: 24px; height: 24px; }
[hidden] { display: none !important; } /* .status and .cta set their own display */
html { scrollbar-color: var(--edge) transparent; }
.status {
  display: inline-block; margin: 0 0 18px; padding: 5px 13px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; color: var(--text);
  border: 1px solid var(--edge); background: var(--field);
}
.btn[disabled] {
  background: var(--field); color: var(--dim); border-color: var(--edge);
  cursor: not-allowed; filter: none;
}
.note a, .foot-note a { color: var(--dim); text-underline-offset: 3px; }
.shot figcaption, .feature figcaption {
  margin-top: 12px; font-size: 13.5px; color: var(--dimmer); text-align: center;
}
.feature figure { margin: 0; min-width: 0; }
/* One capture per theme. A hidden lazy image is never fetched. */
.only-dark { display: block; }
.only-light { display: none !important; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .only-dark { display: none !important; }
  :root:not([data-theme="dark"]) .only-light { display: block !important; }
}
:root[data-theme="light"] .only-dark { display: none !important; }
:root[data-theme="light"] .only-light { display: block !important; }
.os-switch { color: var(--dim); text-decoration: none; }
.os-switch:hover { color: var(--text); border-color: var(--dimmer); }
.price.soon { font-size: 34px; letter-spacing: -.02em; }
.price-box .plain li::before { content: none; }
.price-box .plain li { padding-left: 0; }
.price-box .btn + .btn { margin-top: 10px; }
.foot-note { color: var(--dimmer); font-size: 13px; line-height: 1.8; margin: 0 0 22px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 640px) {
  header nav a.os-switch { display: inline-flex; align-items: center; min-height: 44px; }
}