:root{--bg:#0b0b0c;--panel:#141416;--line:#26262a;--text:#ececef;--muted:#9a9aa3;--accent:#005ce6;--accent-ink:#ffffff}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;line-height:1.6}
a{color:inherit}
.wrap{max-width:760px;margin:0 auto;padding:0 16px}
header.top{border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;justify-content:space-between;align-items:center;height:56px}
.logo{font-weight:800;text-decoration:none;letter-spacing:-.02em}
.hero{position:relative;padding:48px 0 24px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-40% -20% auto auto;width:520px;height:520px;background:radial-gradient(closest-side,rgba(0,92,230,.18),transparent);pointer-events:none}
h1{font-size:clamp(28px,6vw,44px);line-height:1.2;letter-spacing:-.03em;margin:0 0 12px}
.lead{color:var(--muted);margin:0}
.tool{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;margin:16px 0 8px}
textarea{width:100%;min-height:200px;background:#0e0e10;color:var(--text);border:1px solid var(--line);border-radius:10px;padding:12px;font:inherit;font-size:16px;resize:vertical}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:12px}
.row label{display:flex;gap:6px;align-items:center;color:var(--muted);font-size:14px}
.row input[type=range]{width:120px}
.btn{appearance:none;border:0;border-radius:10px;padding:12px 18px;font:inherit;font-weight:700;cursor:pointer}
.btn-main{background:var(--accent);color:var(--accent-ink)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.stats{color:var(--muted);font-size:13px}
.cta{display:block;text-align:center;text-decoration:none;margin:24px 0;padding:16px;border-radius:12px;border:1px solid var(--accent);color:var(--accent);font-weight:700}
section.faq{margin:40px 0}
details{border-bottom:1px solid var(--line);padding:14px 0}
summary{cursor:pointer;font-weight:700}
details p{color:var(--muted);margin:8px 0 0}
footer{border-top:1px solid var(--line);color:var(--muted);font-size:14px;padding:24px 0;margin-top:40px}
#stage{position:fixed;inset:0;background:#000;z-index:10;display:none;overflow:hidden}
#stage.on{display:block}
#scroller{position:absolute;left:0;right:0;top:0;padding:40vh 6vw;white-space:pre-wrap;font-weight:700;line-height:1.5;color:#fff;will-change:transform}
#stage.flip #scroller{transform-origin:center}
#guide{position:absolute;left:0;right:0;height:1.6em;transform:translateY(-.3em);background:rgba(0,92,230,.14);border-top:2px solid var(--accent);border-bottom:2px solid var(--accent);pointer-events:none;z-index:0}
#scroller{z-index:1}
#hud{position:absolute;z-index:2;left:0;right:0;bottom:0;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:12px;background:rgba(0,0,0,.75)}
#hud button{background:#1c1c1f;color:#fff;border:1px solid #333;border-radius:8px;padding:10px 14px;font:inherit;min-width:48px}
#hud .val{color:#ccc;align-self:center;font-size:14px;min-width:64px;text-align:center}
::highlight(reading){background:rgba(0,92,230,.35);color:#fff}
#cam{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);filter:brightness(.45);display:none;z-index:0}
.tool-rating{border:1px solid var(--line);border-radius:12px;padding:16px;margin:24px 0;background:var(--panel)}
.tool-rating [hidden]{display:none}
.rating-summary,.rating-status{color:var(--muted);font-size:14px;margin:0}
.tool-rating h2{font-size:18px;margin:8px 0}
.rating-draft{color:var(--muted);font-size:12px}
.rating-stars{display:flex;gap:4px;margin:8px 0}
.rating-stars button{width:48px;height:48px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--muted);font:inherit;font-size:30px;cursor:pointer}
.rating-stars button.selected{color:var(--accent);border-color:var(--accent)}
.rating-stars button:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.rating-stars button:disabled{cursor:wait}

.presale-conditions{max-width:48ch;margin:8px auto 0;color:#65656b;font-size:13px;line-height:1.55;text-align:center}.presale-conditions p{margin:0}
/* Confirmed shared values from DESIGN.md. */
:root {
  color-scheme: dark;

  --color-primary: #ffffff;
  --color-on-primary: #121212;
  --color-background: #0f0f10;
  --color-surface: #131315;
  --color-surface-raised: #212021;
  --color-surface-selected: #2e2e33;
  --color-viewer: #2b2b2e;
  --color-timeline: #232426;
  --color-border: #ffffff1a;
  --color-text: #ffffff;
  --color-text-muted: #9a9aa6;
  --color-clip-video: #1e5591;
  --color-clip-video-edge: #06192f;
  --color-clip-caption: #7364ba;
  --color-waveform: #617a9d;
  --color-cut-hatch: #181a1b;
  --color-playhead: #ffffff;

  --font-family-body: "Pretendard Variable", "Pretendard", sans-serif;
  --font-family-timecode: "JetBrains Mono", monospace;
  --font-feature-settings-timecode: "tnum";

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-full: 999px;

  --layout-panel-padding: var(--space-md);
  --layout-item-gap: var(--space-sm);

  --component-button-primary-background: var(--color-primary);
  --component-button-primary-text: var(--color-on-primary);
  --component-button-primary-font-family: var(--font-family-body);
  --component-button-primary-radius: var(--radius-md);
  --component-button-primary-padding: var(--space-sm) 14px;

  --component-button-secondary-background: var(--color-surface-raised);
  --component-button-secondary-text: var(--color-text);
  --component-button-secondary-font-family: var(--font-family-body);
  --component-button-secondary-radius: var(--radius-md);
  --component-button-secondary-padding: 6px var(--space-md);

  --component-chat-bubble-user-background: var(--color-surface-raised);
  --component-chat-bubble-user-text: var(--color-text);
  --component-chat-bubble-user-font-family: var(--font-family-body);
  --component-chat-bubble-user-radius: var(--radius-lg);

  --component-clip-video-background: var(--color-clip-video);
  --component-clip-video-text: var(--color-text);
  --component-clip-video-font-family: var(--font-family-body);
  --component-clip-video-radius: var(--radius-sm);

  --component-clip-caption-background: var(--color-clip-caption);
  --component-clip-caption-text: var(--color-text);
  --component-clip-caption-font-family: var(--font-family-body);
  --component-clip-caption-radius: var(--radius-sm);

  --component-caption-row-selected-background: var(--color-surface-selected);
  --component-caption-row-selected-text: var(--color-text);
  --component-caption-row-selected-font-family: var(--font-family-body);
  --component-caption-row-selected-radius: var(--radius-md);

  --component-timecode-font-family: var(--font-family-timecode);
  --component-timecode-font-feature-settings: var(--font-feature-settings-timecode);
}

/* Proposed values from DESIGN.md stay separate until approved. */
:root {
  /* DESIGN.md describes this marker color as an approximation. */
  --proposal-color-marker: #f5b400;
  /* These colors have no recorded approval status in DESIGN.md. */
  --proposal-color-success: #3fbf4a;
  --proposal-color-danger: #f2555a;

  --proposal-type-body-size: 13px;
  --proposal-type-body-weight: 400;
  --proposal-type-body-line-height: 1.45;
  --proposal-type-body-letter-spacing: -0.01em;
  --proposal-type-body-strong-size: 13px;
  --proposal-type-body-strong-weight: 600;
  --proposal-type-body-strong-line-height: 1.45;
  --proposal-type-body-strong-letter-spacing: -0.01em;
  --proposal-type-label-size: 12px;
  --proposal-type-label-weight: 500;
  --proposal-type-label-line-height: 1.35;
  --proposal-type-label-letter-spacing: -0.01em;
  --proposal-type-caption-size: 11px;
  --proposal-type-caption-weight: 400;
  --proposal-type-caption-line-height: 1.35;
  --proposal-type-caption-letter-spacing: -0.01em;
  --proposal-type-timecode-size: 12px;
  --proposal-type-timecode-weight: 400;
  --proposal-type-timecode-line-height: 1.4;
  --proposal-type-timecode-letter-spacing: 0;
  --proposal-type-title-size: 15px;
  --proposal-type-title-weight: 600;
  --proposal-type-title-line-height: 1.2;
  --proposal-type-title-letter-spacing: -0.02em;
}

/* Sales site scale. Draft values for the fe-site ticket (2026-10-12).
   Every site section reads these variables and the DESIGN.md values above. */
:root {
  --site-width: 1120px;
  --site-gutter: 24px;
  --site-section-space: 160px;
  --site-header-height: 64px;

  --site-type-display: clamp(40px, 6.2vw, 84px);
  --site-type-heading: clamp(28px, 4.2vw, 54px);
  --site-type-lead: clamp(17px, 1.7vw, 21px);
  --site-type-stat: clamp(104px, 17vw, 212px);
  --site-type-count: clamp(36px, 4.6vw, 56px);
  --site-type-text: 15px;
  /* Same ratios as DESIGN.md typography (2026-10-12): titles 1.2 and -0.02em, text 1.45 and -0.01em. */
  --site-title-line-height: var(--proposal-type-title-line-height);
  --site-title-letter-spacing: var(--proposal-type-title-letter-spacing);
  --site-text-line-height: var(--proposal-type-body-line-height);
  --site-text-letter-spacing: var(--proposal-type-body-letter-spacing);

  --site-dot-size: 22px;
  --site-move-duration: 900ms;
  --site-move-ease: cubic-bezier(0.65, 0, 0.35, 1);
}

@media (max-width: 640px) {
  :root {
    --site-gutter: 16px;
    --site-section-space: 104px;
    --site-header-height: 56px;
    --site-type-text: 14px;
  }
}

/* Icons: Lucide only, one size and one stroke (DESIGN.md Do's and Don'ts). */
:root {
  --site-icon-size: 18px;
  --site-icon-stroke: 2;
}

/* One header for the sales page, blog, /vs and the free tools (fe-site-header-unify).
   build-presale-site.mjs appends design-tokens.css and this file to the free tools' assets.css,
   so this file sets its own font and reads only design-tokens.css values. */
:root {
  /* Phone: the menu moves to a second row of this height. */
  --site-header-nav-height: 40px;
}

.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  background: var(--color-background);
  font-family: var(--font-family-body);
  font-size: var(--site-type-text);
  line-height: var(--site-text-line-height);
  letter-spacing: var(--site-text-letter-spacing);
  word-break: keep-all;
}

.site-header__inner {
  display: flex;
  width: min(100% - 2 * var(--site-gutter), var(--site-width));
  min-height: var(--site-header-height);
  margin: 0 auto;
  align-items: center;
  gap: var(--space-md);
}

.wordmark {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: var(--site-title-letter-spacing);
  text-decoration: none;
}

.site-nav {
  display: flex;
  margin-left: auto;
  gap: var(--space-xs);
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* 1px less on the left: Lucide icons leave about 2px of empty grid before the ink. */
  padding: 6px var(--space-md) 6px 11px;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--proposal-type-body-size);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:hover {
  color: var(--color-text);
  background: var(--color-surface-raised);
}

/* Same white primary button as .checkout-button, header size. */
.site-header__cta {
  display: inline-flex;
  flex: none;
  min-height: 36px;
  padding: 0 14px;
  align-items: center;
  gap: 6px;
  border-radius: var(--component-button-primary-radius);
  color: var(--component-button-primary-text);
  background: var(--component-button-primary-background);
  font: var(--proposal-type-body-strong-weight) var(--proposal-type-body-size) / 1.3 var(--component-button-primary-font-family);
  letter-spacing: var(--proposal-type-body-strong-letter-spacing);
  text-decoration: none;
  white-space: nowrap;
}

.site-header .icon {
  flex: none;
  width: var(--site-icon-size);
  height: var(--site-icon-size);
  stroke-width: var(--site-icon-stroke);
}

.site-header__cta .icon {
  transition: transform 160ms var(--site-move-ease);
}

.site-header__cta:hover .icon {
  transform: translateX(3px);
}

/* Phone: logo and button on the first row, the menu on a second row that swipes if it ever overflows. */
@media (max-width: 760px) {
  .site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: var(--site-header-height) var(--site-header-nav-height);
    gap: 0 var(--space-md);
  }

  .wordmark {
    justify-self: start;
  }

  .site-nav {
    grid-row: 2;
    grid-column: 1 / -1;
    height: var(--site-header-nav-height);
    margin-left: -7px;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .site-nav::-webkit-scrollbar {
    display: none;
  }

  .site-nav a {
    padding-inline: 7px 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header__cta .icon {
    transition: none;
  }
}

#stage{z-index:30}
#script{field-sizing:content}body{word-break:keep-all}