/* Hallmark · shape: sketchbook · genre: playful · theme: custom · redesign: full · idea: a black sketchbook annotated in white charcoal
 * paper: oklch(20% 0.005 145) · accent: oklch(74% 0.12 264) · display: Gaegu · body: Pretendard Variable · hero: manuscript · nav: notebook contents · footer: colophon · signature: a white charcoal pencil circles titles and underlines the sketchbook
 * axes: dark/handwritten/cool · posture: restrained · job: try · contrast: checked · fold: checked · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: decoration, made the pencil draw real annotations on the headings and limited product imagery to one real screenshot */
/* Hallmark · waive 65 · theme: custom (by request), black sketchbook and blue · HamaEditor uses the black paper, ivory charcoal and blue chosen by the user */
/* Hallmark · waive 80 · user requested the original pixel hippo, ASCII backgrounds and a pencil trail · HamaEditor blends the requested ASCII neurons, geometry and ferns into the paper behind its pixel hippo and charcoal pencil */
/* Hallmark · waive 79 · the original pixel hippo occupies the lower right of the hero · HamaEditor keeps space around its requested pencil and pixel mascot instead of adding filler copy */
/* Hallmark · dropped 조사, 계획, 편집. 한 곳에서 hamaeditor, 한글 안에서 모든 것이 해결 가능한 유일한 편집기, 2. 독서 현황, 3. 도서관 이용, 자료조사, 계획 먼저, 10월 현장체험학습 안내, 문서 완성!, 브레인스토밍부터 문서 작성까지, 한 공간에서, 쓰던 계정을 연결하면 끝 · user requested a complete sketchbook rewrite and minimal demos; simulated document headings were retired */
/* Hallmark · dropped 2025, c-title, f-title, flow-title, flow-video, price-title, research, rs-i-clip, rs-i-hwp, rs-i-note, rs-i-pdf, rs-i-web · removed the old sample-document year and internal demonstration elements during the homepage overhaul */
/* Hallmark · reworded "인앱 브라우저" to "자료를 모으고" · the browser remains described in the research paragraph with the same capability */
/* Hallmark · reworded "편집" to "계획을 세우고, 바로 편집해요" · the writing section combines planning and document editing */
/* Hallmark · dropped 연 ₩9,900 · annual pricing remains in the final section as body copy instead of a headline */
@import url("./tokens.css");
@import url("./base.css");

html { background: var(--paper); scroll-padding-top: 104px; }
body { isolation: isolate; color: var(--text); background: var(--paper); font-family: var(--font); line-height: 1.7; word-break: keep-all; overflow-wrap: break-word; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: url("sketchbook-black-paper.jpg") center / 1200px auto repeat; opacity: .5; pointer-events: none; }
a { text-decoration: none; }
button { color: inherit; }
svg { max-width: 100%; }
ul, ol { margin: 0; padding-left: 1.25em; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
figure, dl, dd { margin: 0; }
h1, h2, h3, h4 { min-width: 0; overflow-wrap: break-word; text-wrap: balance; }
h1, h2 { font-family: var(--font-hand); font-weight: 700; letter-spacing: -.035em; }
h3, h4 { font-family: var(--font); font-weight: 700; }
h1 { max-width: none; }
h2 { max-width: none; }
p { text-wrap: pretty; }
::selection { background: var(--accent-line); color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.skip { position: fixed; left: 16px; top: -100px; z-index: 100; padding: var(--space-sm) 20px; color: var(--button-ink); background: var(--accent); }
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); white-space: nowrap; }
.px, img[src$="hama.svg"], .final-hippo { image-rendering: pixelated; }
.px--flip { transform: scaleX(-1); }
.nb { white-space: nowrap; }
.display, .h1 { font-size: var(--text-display); line-height: 1.12; }
.h2 { font-size: var(--text-section); line-height: 1.16; }
.h3 { font-size: 22px; line-height: 1.4; }
.lead { font-size: var(--fs-lead); line-height: 1.7; max-width: 42em; color: var(--muted); }
.text { color: var(--muted); }
.small, .meta { font-size: 15px; color: var(--meta); letter-spacing: 0; }
.mono, code { font-family: var(--mono); }
.tone-accent { color: var(--accent); font-style: normal; }
.tone-muted { color: var(--muted); }
.link, .text-link, .link-arrow { color: var(--link-ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.link:hover, .text-link:hover, .link-arrow:hover { color: var(--paper-white); }
.handnote { display: block; font-family: var(--font-hand); font-size: 25px; line-height: 1.25; color: var(--note-ink); font-weight: 400; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); min-height: 52px; height: auto; padding: var(--space-md) var(--space-lg); border: 1px solid var(--accent); border-radius: 3px 6px 4px 5px; font-family: var(--font); font-size: 16px; line-height: 1.25; font-weight: 700; text-align: center; white-space: normal; cursor: pointer; transition: transform 150ms ease, background-color 150ms ease; }
.btn svg { flex: none; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.btn__icons { display: inline-flex; align-items: center; gap: var(--space-xs); }
.btn__icons svg { stroke: none; fill: currentColor; }
.btn--primary, .btn--white { background: var(--accent); color: var(--color-accent-ink); box-shadow: none; }
.btn--primary:hover, .btn--white:hover { background: var(--accent-hover); transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn--secondary { background: transparent; color: var(--link-ink); border-color: var(--accent-line); }
.btn--secondary:hover { background: var(--accent-wash); }
.btn--sm { min-height: 40px; padding: var(--space-sm) var(--space-md); font-size: 15px; }
.btn--block { width: 100%; }
.btn[aria-disabled="true"], .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }

/* Contents nav on the same paper */
.nav { position: relative; z-index: 30; background: transparent; }
.nav__in { max-width: var(--col); height: var(--nav-h); padding: 0 32px; margin-inline: auto; display: flex; align-items: center; gap: var(--space-xl); border-bottom: 1px solid var(--line-strong); }
.brand { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--text); font-family: var(--font-hand); font-size: 30px; font-weight: 700; letter-spacing: -.04em; white-space: nowrap; }
.brand img { width: 42px; height: 38px; object-fit: contain; }
.nav__links { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.nav__links a { font-size: 15px; color: var(--muted); position: relative; padding-block: var(--space-xs); }
.nav__links a:hover, .nav__links a[aria-current] { color: var(--link-ink); }
.nav__links a:hover::after, .nav__links a[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; border-bottom: 2px solid var(--accent); transform: rotate(-2deg); }
.nav__end { display: flex; align-items: center; gap: var(--space-sm); }
.nav__toggle { display: none; width: 44px; height: 44px; padding: var(--space-sm); border: 0; background: transparent; cursor: pointer; }
.nav__toggle span { display: block; height: 2px; width: 20px; margin: var(--space-2xs) 0; background: var(--text); }
.menu { position: absolute; left: 0; right: 0; padding: var(--space-lg); background: var(--paper); border-bottom: 1px solid var(--line-strong); box-shadow: none; }
.menu__links { display: grid; gap: var(--space-2xs); margin-bottom: var(--space-lg); }
.menu__links a { padding: var(--space-xs) 0; font-family: var(--font-hand); font-size: 32px; }
.menu .btn-row { align-items: stretch; }

/* Home page: one sketchbook */
.sketchbook { position: relative; max-width: var(--col); margin-inline: auto; }
.notebook-section { position: relative; margin-inline: 80px; padding: 112px 0; }
.notebook-section + .notebook-section { border-top: 1px solid var(--line-strong); }
.notebook-section h2 { font-size: var(--text-section); line-height: 1.12; }
.sketch-hero { min-height: max(560px, calc(100svh - var(--nav-h))); margin-inline: 32px; padding: 48px 0 120px; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.hero-center { position: relative; z-index: 3; }
.sketch-hero h1 { font-size: var(--text-display); line-height: 1.12; letter-spacing: -.055em; }
.hero-marked-title { position: relative; display: inline-block; }
.hero-actions { display: flex; justify-content: center; margin-top: 40px; }
.hero-platforms { margin: var(--space-md) auto 0; font-size: 14px; color: var(--meta); }
.hero-platforms a { text-decoration: underline; text-underline-offset: 4px; }
.hero-next { position: absolute; left: 50%; bottom: 36px; z-index: 3; display: grid; place-items: center; width: 64px; height: 56px; margin-left: -32px; color: var(--muted); transition: color 150ms ease; }
.hero-next:hover { color: var(--text); }
.hero-next svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.document-heading { display: flex; justify-content: space-between; gap: 48px; align-items: flex-end; margin-bottom: 48px; }
/* Word sizes and spacing form a loose splash around the editor screenshot. */
.editor-splash { position: relative; isolation: isolate; container-type: inline-size; padding: 124px 132px 160px; margin-inline: -40px; }
.keyword-splash { position: absolute; inset: 0; padding: 0; margin: 0; font-family: var(--font-hand); pointer-events: none; }
.keyword-splash li { position: absolute; font-size: 34px; line-height: 1.2; white-space: nowrap; color: var(--charcoal); }
.keyword-splash li:nth-child(1) { top: 12px; left: 6%; font-size: 48px; }
.keyword-splash li:nth-child(2) { top: 74px; left: 29%; font-family: var(--mono); font-size: 23px; color: var(--accent); }
.keyword-splash li:nth-child(3) { top: 0; left: 58%; font-size: 32px; color: var(--meta); }
.keyword-splash li:nth-child(4) { top: 60px; right: 2%; font-size: 50px; }
.keyword-splash li:nth-child(5) { top: 38%; left: 0; font-size: 30px; color: var(--accent); }
.keyword-splash li:nth-child(6) { top: 66%; left: 1%; font-size: 25px; }
.keyword-splash li:nth-child(7) { top: 33%; right: 0; font-size: 28px; }
.keyword-splash li:nth-child(8) { top: 64%; right: 1%; font-size: 30px; color: var(--meta); }
.keyword-splash li:nth-child(9) { bottom: 96px; left: 7%; font-size: 28px; color: var(--meta); }
.keyword-splash li:nth-child(10) { bottom: 20px; left: 28%; font-size: 50px; color: var(--accent); }
.keyword-splash li:nth-child(11) { bottom: 76px; left: 63%; font-size: 32px; color: var(--meta); }
.keyword-splash li:nth-child(12) { bottom: 8px; right: 0; font-size: 36px; }
@media (max-width: 1000px) {
 .editor-splash { margin-inline: 0; padding: 164px 0 176px; }
 .keyword-splash li:nth-child(1) { top: 0; left: 0; font-size: 32px; }
 .keyword-splash li:nth-child(2) { top: 20px; left: auto; right: 0; font-size: 17px; }
 .keyword-splash li:nth-child(3) { top: 74px; left: 35%; font-size: 25px; }
 .keyword-splash li:nth-child(4) { top: 116px; right: 2%; font-size: 32px; }
 .keyword-splash li:nth-child(5) { top: 112px; left: 0; font-size: 25px; }
 .keyword-splash li:nth-child(6) { top: 48px; left: 2%; font-size: 22px; }
 .keyword-splash li:nth-child(7) { top: auto; bottom: 128px; left: 0; right: auto; font-size: 25px; }
 .keyword-splash li:nth-child(8) { top: auto; bottom: 136px; right: 0; font-size: 23px; }
 .keyword-splash li:nth-child(9) { bottom: 58px; left: 0; font-size: 26px; }
 .keyword-splash li:nth-child(10) { bottom: 0; left: 25%; font-size: 30px; }
 .keyword-splash li:nth-child(11) { bottom: 88px; left: auto; right: 3%; font-size: 25px; }
 .keyword-splash li:nth-child(12) { bottom: 48px; right: 0; font-size: 24px; }
}
/* Phones: the document slide fits one screen. Seven keywords sit in a band above and below the preview
   (the other five are hidden), and HWP · HWPX keeps clear of the floating menu button. */
@media (max-width: 760px) {
 .document-section { padding: 40px 0 24px; }
 .document-section .document-heading { margin-bottom: 12px; }
 .editor-splash { padding: 80px 0 96px; }
 .keyword-splash li { top: auto; bottom: auto; left: auto; right: auto; }
 .keyword-splash li:nth-child(3), .keyword-splash li:nth-child(6), .keyword-splash li:nth-child(7), .keyword-splash li:nth-child(8), .keyword-splash li:nth-child(11) { display: none; }
 .keyword-splash li:nth-child(1) { top: 0; left: 0; font-size: 26px; }
 .keyword-splash li:nth-child(2) { top: 6px; right: 64px; font-size: 14px; }
 .keyword-splash li:nth-child(4) { top: 38px; right: 0; font-size: 24px; }
 .keyword-splash li:nth-child(5) { top: 42px; left: 0; font-size: 20px; }
 .keyword-splash li:nth-child(9) { bottom: 50px; left: 0; font-size: 20px; }
 .keyword-splash li:nth-child(10) { bottom: 4px; left: 22%; font-size: 28px; }
 .keyword-splash li:nth-child(12) { bottom: 50px; right: 0; font-size: 20px; }
}
@media (max-width: 400px) {
 .sketch-hero h1 { font-size: 42px; }
 .keyword-splash li:nth-child(1) { font-size: 28px; }
 .keyword-splash li:nth-child(2) { font-size: 14px; }
 .keyword-splash li:nth-child(3) { font-size: 22px; }
 .keyword-splash li:nth-child(4) { font-size: 28px; }
 .keyword-splash li:nth-child(5), .keyword-splash li:nth-child(7) { font-size: 22px; }
 .keyword-splash li:nth-child(6), .keyword-splash li:nth-child(8), .keyword-splash li:nth-child(12) { font-size: 20px; }
}
.editor-photograph { margin: 0; }
.editor-photograph img { width: 100%; height: auto; box-shadow: var(--paper-shadow); border-radius: 4px; }
.connect-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-lg) var(--space-2xl); }
.connect-intro > p { margin-top: var(--space-lg); color: var(--muted); }
.connect-intro .handnote { margin-top: 28px; transform: rotate(-4deg); }
.provider-list article { display: flex; align-items: flex-start; gap: 20px; padding: 28px 0; border-bottom: 1px solid var(--line-strong); }
.provider-list article:first-child { padding-top: var(--space-2xs); }
.provider-list article:last-child { border-bottom: none; }
.provider-list img { width: 36px; height: 36px; object-fit: contain; }
.provider-list h3 { font-size: 21px; margin-bottom: var(--space-xs); }
.provider-list p, .provider-list a { font-size: 15px; }
.provider-list p { color: var(--muted); }
.provider-list a { display: inline-block; margin-top: var(--space-sm); }
.final-section { text-align: center; padding-top: 80px; padding-bottom: 104px; }
/* Each homepage section fills the screen, like a slide; the friction scroll in site.js steps between them. */
.document-section, .final-section { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.final-section { align-items: center; }
.connect-section { min-height: 100svh; align-content: center; }
/* On larger screens the slim nav bar (40px) stays over every slide after the first, so those slides add
   40px to their top padding: the content centres in the visible area under the bar. */
@media (min-width: 761px) {
  .connect-section { padding-block: 152px 112px; }
  .final-section { padding-block: 144px 104px; }
}
/* The document slide fits one screen and gives most of it to the preview: a smaller heading,
   tight padding, and a reel sized by the screen height. Side keywords sit in the margins. */
@media (min-width: 1001px) {
  .document-section { padding-block: 48px 8px; }
  .document-section h2 { font-size: clamp(34px, 3.2vw, 44px); }
  .document-section .document-heading { margin-bottom: 0; }
  .document-section .editor-splash { padding: 64px 64px 72px; }
  .document-section .feature-reel { max-width: min(100%, calc((100svh - 380px) * 1.6)); min-width: min(100%, 560px); margin-inline: auto; }
  .document-section .feature-reel__chapters { margin-top: 14px; }
  .keyword-splash li:nth-child(2) { top: 18px; }
  .keyword-splash li:nth-child(4) { top: 4px; }
  .keyword-splash li:nth-child(5) { left: max(-9%, calc((100% - 100vw) / 2 + 24px)); }
  .keyword-splash li:nth-child(6) { left: max(-10%, calc((100% - 100vw) / 2 + 24px)); }
  .keyword-splash li:nth-child(7) { right: max(-9%, calc((100% - 100vw) / 2 + 24px)); }
  .keyword-splash li:nth-child(8) { right: max(-10%, calc((100% - 100vw) / 2 + 24px)); }
  .keyword-splash li:nth-child(9) { bottom: 26px; }
  .keyword-splash li:nth-child(10) { bottom: 0; }
  .keyword-splash li:nth-child(11) { bottom: 14px; }
  .keyword-splash li:nth-child(12) { bottom: 0; }
}
}
.final-hippo { width: 96px; height: 88px; object-fit: contain; margin: 0 auto 20px; }
.final-section h2 { margin-bottom: 32px; }


/* Subpages use the same paper and margins. */
main:not(.sketchbook) { max-width: var(--col); margin-inline: auto; }
.frame { position: relative; margin-inline: 32px; }
.frame--top { padding-top: 0; }
.cell { position: relative; padding: var(--space-xl) 48px; border-top: 1px solid var(--line-strong); }
.cell--open { border-top: 0; }
.cell--center { text-align: center; }
.cell--center .lead { margin-inline: auto; }
.cell--head, .page-head { padding-top: 80px; padding-bottom: 48px; }
.page-head .lead, .cell--head .lead { margin-top: var(--space-lg); }
.page-head .btn-row { margin-top: 28px; }
.cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cells--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cell--wide { grid-column: 1 / -1; }
.cell .h3 + p, .cell .h3 + .text { margin-top: var(--space-sm); }
.rule { border-top: 1px solid var(--line-strong); }
.card { position: relative; padding: 32px; background: transparent; border-radius: 3px; box-shadow: none; }
.card--navy { outline: 1px solid var(--accent); outline-offset: -1px; }
.perch { position: absolute; bottom: 100%; z-index: 2; width: 96px; height: 88px; pointer-events: none; }
.perch img { width: 100%; height: 100%; object-fit: contain; }
.check { display: flex; align-items: flex-start; gap: var(--space-sm); font-size: 15px; line-height: 1.7; }
.check input { width: 20px; height: 20px; margin: var(--space-2xs) 0 0; flex: none; accent-color: var(--accent); }
.check a { color: var(--link-ink); text-decoration: underline; text-underline-offset: 4px; }
.code-box { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md); background: var(--paper-2); border-bottom: 1px solid var(--line-strong); }
.step { display: flex; align-items: flex-start; gap: 20px; padding: var(--space-lg) 0; }
.step__n, .step__no { color: var(--accent); font-family: var(--font-hand); font-size: 32px; }
.step__body { min-width: 0; }
.step .h3 { font-size: 19px; }
.step .text { margin-top: var(--space-xs); font-size: 16px; }
.prose { font-size: 16px; line-height: 1.9; color: var(--muted); }
.prose h2 { font-family: var(--font); color: var(--text); }
.prose p + p { margin-top: 1em; }
.prose a { color: var(--link-ink); text-decoration: underline; }
.prose ul, .prose ol { margin-top: var(--space-md); }

/* Last page of the book. Contact and purchase info shows without JavaScript. */
.footer { position: relative; max-width: var(--col); margin-inline: auto; color: var(--muted); border-top: 1px solid var(--line-strong); }
.footer__in { padding: 48px 80px var(--space-lg); }
.footer__grid { display: flex; flex-wrap: wrap; gap: 32px var(--space-2xl); }
.footer__brand { flex: 1 1 100%; }
.footer__brand .brand { font-size: 32px; }
.footer__col { flex: 1; }
.footer__col h2 { font-family: var(--font); font-size: 15px; color: var(--text); margin-bottom: var(--space-md); letter-spacing: 0; }
.footer__col ul { list-style: none; padding: 0; display: grid; gap: var(--space-xs); }
.footer__col a { font-size: 14px; }
.footer__col .footer__privacy { font-weight: 700; color: var(--text); }
.footer a:hover { color: var(--link-ink); text-decoration: underline; text-underline-offset: 4px; }
.footer__base { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--line-strong); font-size: 13px; }
.footer__base a { overflow-wrap: anywhere; }
.footer__mark { display: none; }

@media (min-width: 761px) { .menu { display: none !important; } }
@media (max-width: 1000px) {
 .nav__in { gap: var(--space-lg); }
 .nav__links { gap: 20px; }
 .notebook-section { margin-inline: var(--space-2xl); }
 .sketch-hero { margin-inline: var(--space-lg); }
 .section-opening { gap: 32px; }
 .section-opening > p { flex-basis: 300px; }
}
@media (max-width: 760px) {
 :root { --nav-h: 76px; --fs-body: 16px; --fs-lead: 18px; --cell-pad: 24px; --text-display: clamp(46px, 9vw, 64px); --text-section: clamp(36px, 7.8vw, 48px); }
 .nav__in { margin-inline: var(--space-lg); padding-inline: 0; justify-content: space-between; }
 .brand { font-size: 27px; }
 .brand img { width: 33px; height: 30px; }
 .nav__links, .nav__end > .btn { display: none; }
 .nav__toggle { display: block; }
 .wide-only { display: none; }
 .notebook-section { margin-inline: var(--space-xl) var(--space-lg); padding: var(--space-2xl) 0; }
 .sketch-hero { padding: 40px 0 120px; margin-inline: var(--space-lg); }
 .sketch-hero h1 { line-height: 1.18; letter-spacing: -.055em; }
 .hero-actions { margin-top: 32px; }
 .hero-actions .btn { padding: var(--space-md) 20px; font-size: 15px; }
 .hero-platforms { font-size: 13px; }
 .document-heading { display: block; }
 .document-heading { margin-bottom: 28px; }

 .connect-section { grid-template-columns: minmax(0, 1fr); gap: 36px; }
 .connect-intro .handnote { margin-top: 20px; }
 .provider-list article { padding: var(--space-lg) 0; gap: var(--space-md); }
 .final-section { padding-top: 48px; padding-bottom: var(--space-2xl); }
 .frame { margin-inline: var(--space-lg); }
 .cell { padding: 28px var(--space-md); }
 .cell--head, .page-head { padding-top: 56px; padding-bottom: var(--space-xl); }
 .cells, .cells--3 { grid-template-columns: minmax(0, 1fr); }
 .perch { width: 72px; height: 65px; }
 .footer { margin-inline: var(--space-lg); }
 .footer__in { padding: 36px var(--space-xs) var(--space-lg); }
 .footer__grid { gap: 28px; }
 .footer__col { min-width: 100px; }
 .footer__base { gap: var(--space-xs) var(--space-md); margin-top: 28px; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.download-head { position: relative; padding-right: 160px; }
.download-hippo { position: absolute; right: 24px; top: 88px; width: 96px; height: 88px; image-rendering: pixelated; }
.installation-guide { margin-bottom: var(--space-2xl); }
.installation-steps { margin: var(--space-xl) 0 0; padding-left: 32px; }
.installation-steps li { padding: 0 0 28px var(--space-md); }
.installation-steps li::marker { font-family: var(--font-hand); font-size: 28px; color: var(--accent); }
.installation-steps h3 { font-size: 20px; margin-bottom: var(--space-sm); }
.installation-steps p { color: var(--muted); font-size: 16px; }
.activation-note .text { margin: var(--space-sm) 0 var(--space-md); }
.steps { padding: 0; list-style: none; counter-reset: steps; }
.steps > .step { display: block; padding: var(--space-lg) 0 var(--space-lg) 48px; position: relative; counter-increment: steps; border-bottom: 1px solid var(--line-strong); }
.steps > .step::before { content: counter(steps); position: absolute; left: 0; top: 16px; font-family: var(--font-hand); font-size: 32px; color: var(--accent); }
.steps > .step .btn { margin-top: var(--space-md); }
.shot { margin: 0; }
.shot img { width: 100%; height: auto; }
.buy--trial { outline: 1px solid var(--line-strong); outline-offset: -1px; }
.buy .check a { color: var(--link-ink); }
@media (max-width: 760px) {
 .download-head { padding-right: var(--space-md); }
 .download-hippo { position: static; width: 64px; height: 58px; margin: 0 0 20px; }
 .download-head .h1 { font-size: 45px; }
 .installation-steps { padding-left: 28px; }
 .installation-steps li { padding-left: var(--space-xs); }
}

.footer__base > span { flex: 0 0 auto; max-width: 100%; }
.footer__base a { white-space: nowrap; }

/* Neuron branches, geometric grids and fern leaves soak into the black paper. */
.notebook-section { isolation: isolate; }
.ascii-art { position: absolute; z-index: -1; margin: 0; font-family: "Nanum Gothic Coding", var(--mono); font-size: 12px; font-weight: 400; line-height: .8334; letter-spacing: 0; white-space: pre; pointer-events: none; user-select: none; mask-image: linear-gradient(to bottom, transparent, var(--charcoal) 15%, var(--charcoal) 85%, transparent), linear-gradient(to right, transparent, var(--charcoal) 15%, var(--charcoal) 85%, transparent); mask-composite: intersect; }
.ascii-art--neurons { top: -112px; right: -176px; color: var(--ascii-neuron-ink); opacity: var(--ascii-neuron-opacity); transform: rotate(-12deg); mask-image: linear-gradient(to bottom, transparent, var(--charcoal) 18%, var(--charcoal) 72%, transparent), linear-gradient(to right, transparent 12%, var(--charcoal) 55%, transparent); }
.ascii-art--nature { right: -160px; bottom: -160px; color: var(--ascii-nature-ink); opacity: var(--ascii-nature-opacity); transform: rotate(-8deg); }
@media (max-width: 760px) {
 .ascii-art { font-size: 8.4px; }
 .ascii-art--neurons { top: -48px; right: -208px; transform: rotate(-20deg); }
 .ascii-art--nature { right: -168px; bottom: -96px; }
}

/* The network blends into the paper texture behind the text. */
.ascii-art--network { top: -144px; right: -192px; color: var(--ascii-neuron-ink); opacity: var(--ascii-geometry-opacity); transform: rotate(-10deg); }
@media (max-width: 760px) {
 .ascii-art--network { top: -48px; right: -240px; transform: rotate(-8deg); }
}

/* Neuron branches run quietly behind the keywords and screenshot. */
.ascii-art--splash-neuron { top: 50%; left: 50%; font-size: clamp(5.4px, 1.38cqw, 14.4px); color: var(--ascii-neuron-ink); opacity: var(--ascii-neuron-opacity); transform: translate(-50%, -50%) scaleY(.76); }

/* On scroll the nav sticks to the paper; words and art drift slowly. */
@property --spread { syntax: "<number>"; inherits: false; initial-value: 0; }
/* The nav eases between its full and slim states. */
.nav { position: sticky; top: 0; transition: background-color 240ms ease, translate 420ms cubic-bezier(.16, 1, .3, 1); }
.nav.is-stuck { background: color-mix(in oklab, var(--paper) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
/* Slim bar once the page has scrolled (larger screens). The nav keeps its full height in the page flow, so
   nothing shifts; only a 40px strip is drawn and clickable, and the rest lets clicks through. */
.nav__in, .brand, .brand img, .nav__links a, .nav__end .btn { transition: height 320ms cubic-bezier(.2, .8, .2, 1), width 320ms cubic-bezier(.2, .8, .2, 1), font-size 320ms cubic-bezier(.2, .8, .2, 1), min-height 320ms cubic-bezier(.2, .8, .2, 1), padding 320ms cubic-bezier(.2, .8, .2, 1), border-color 240ms ease; }
@media (min-width: 761px) {
  .nav { height: var(--nav-h); }
  .nav.is-compact { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; }
  .nav.is-compact::before { content: ""; position: absolute; inset: 0 0 auto; height: 40px; background: color-mix(in oklab, var(--paper) 82%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
  .nav.is-compact .nav__in { position: relative; height: 40px; border-bottom-color: transparent; pointer-events: auto; }
  .nav.is-compact .brand { font-size: 18px; }
  .nav.is-compact .brand img { width: 22px; height: 20px; }
  .nav.is-compact .nav__links { gap: 22px; }
  .nav.is-compact .nav__links a { font-size: 13px; padding-block: 2px; }
  .nav.is-compact .nav__links a:hover::after, .nav.is-compact .nav__links a[aria-current]::after { bottom: -2px; }
  .nav.is-compact .nav__end .btn { min-height: 26px; padding: 3px 12px; font-size: 12px; }
}
/* On phones, once the page has scrolled, the nav is just the menu button floating over the page. */
@media (max-width: 760px) {
  .nav .brand, .nav__in { transition: opacity 240ms ease, border-color 240ms ease; }
  :root:not(.menu-open) .nav.is-stuck { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; }
  :root:not(.menu-open) .nav.is-stuck .nav__in { border-bottom-color: transparent; }
  :root:not(.menu-open) .nav.is-stuck .brand { opacity: 0; }
  :root:not(.menu-open) .nav.is-stuck .nav__toggle { pointer-events: auto; }
}
.motion .keyword-splash li { --spread: 0; translate: calc(var(--sx, 0px) * var(--spread) + var(--rx, 0px)) calc(var(--sy, 0px) * var(--spread) + var(--ry, 0px)); scale: calc(1 - var(--spread) * .45); animation: splash-drift var(--drift, 8s) ease-in-out var(--drift-delay, 0s) infinite; }
.motion .editor-splash:not(.is-in) .keyword-splash li { --spread: 1; opacity: 0; }
.motion .editor-splash.is-in .keyword-splash li { transition: --spread 1.1s cubic-bezier(.16, 1.1, .3, 1) var(--delay, 0ms), opacity 500ms ease var(--delay, 0ms); }
@keyframes splash-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  30% { transform: translate(3px, -6px) rotate(-1.2deg); }
  65% { transform: translate(-4px, 3px) rotate(.9deg); }
}
.motion .ascii-art { animation: ascii-breathe 22s ease-in-out infinite alternate; }
.motion .ascii-art--neurons { animation: none; }
.motion .ascii-art--splash-neuron { animation-name: ascii-turn; animation-duration: 34s; }
@keyframes ascii-breathe { from { rotate: -.6deg; scale: 1; } to { rotate: .8deg; scale: 1.03; } }
@keyframes ascii-turn { from { rotate: -1.6deg; } to { rotate: 1.6deg; } }
.motion .handnote { animation: note-wobble 5.5s ease-in-out infinite alternate; }
.motion .connect-intro .handnote { animation-delay: -3.5s; }
@keyframes note-wobble { from { rotate: -1deg; } to { rotate: 1.2deg; } }
.motion .final-hippo { animation: hippo-bob 3.2s ease-in-out infinite; }
@keyframes hippo-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.motion [data-reveal] { transition: opacity 700ms ease var(--reveal-delay, 0ms), translate 900ms cubic-bezier(.2, .8, .2, 1) var(--reveal-delay, 0ms); }
.motion [data-reveal]:not(.is-in) { opacity: 0; translate: 0 28px; }
.motion .hero-next svg { animation: next-bob 2.4s ease-in-out infinite; }
@keyframes next-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* Hero launch sequence. html.intro is set before first paint; anything it hides animates back in or is restored by the failsafe. */
.sketch-hero h1 { position: relative; }
.hero-scribble { position: absolute; left: -3%; bottom: -.2em; width: 106%; height: .32em; overflow: visible; fill: none; stroke: var(--accent); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.hero-scribble path { stroke-dasharray: 1; }
.hero-word { display: inline-block; white-space: nowrap; }
.hero-tail { white-space: nowrap; }
.hero-ch { display: inline-block; text-align: center; transition: opacity 360ms ease, translate 620ms var(--ease-out), filter 420ms ease; }
.hero-caret { position: absolute; left: 0; top: 0; width: 4px; height: .74em; border-radius: 2px; background: var(--accent); opacity: 0; pointer-events: none; transition: left 80ms ease, top 80ms ease, opacity 300ms ease; }
.hero-caret.is-on { opacity: 1; }
.hero-caret.is-blink { animation: caret-blink 1s steps(1) infinite; }
.hero-actions .btn { position: relative; overflow: hidden; isolation: isolate; }
.hero-actions .btn::after { content: ""; position: absolute; inset: -2px; z-index: -1; background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / .5) 50%, transparent 62%); translate: -110% 0; pointer-events: none; }
.motion .hero-actions .btn:hover::after { translate: 110% 0; transition: translate 900ms var(--ease-out); }
.ascii-art--glow { display: none; }
.motion .ascii-art--glow { display: block; --gr: 260px; color: var(--accent-hover); opacity: 0; mask-image: radial-gradient(circle var(--gr) at var(--gx, 50%) var(--gy, 50%), #000 18%, rgb(0 0 0 / .4) 52%, transparent), linear-gradient(to bottom, transparent, #000 18%, #000 72%, transparent), linear-gradient(to right, transparent 12%, #000 55%, transparent); mask-composite: intersect; transition: opacity 1.4s ease; }
.motion .sketch-hero.is-lit .ascii-art--glow { opacity: 1; }
.motion .sketch-hero .hero-center { translate: calc(var(--px, 0) * 9px) calc(var(--py, 0) * 7px + var(--out, 0) * -48px); scale: calc(1 - var(--out, 0) * .05); opacity: calc(1 - var(--out, 0) * .75); }
.intro:not(.intro-run) .sketch-hero > *, .intro .sketch-hero:not(.is-playing) :is(.hero-center, .hero-next) { opacity: 0; }
.intro .hero-ch:not(.is-on) { opacity: 0; translate: 0 .32em; filter: blur(8px); }
.intro .is-playing .hero-scribble path { animation: line-draw 800ms cubic-bezier(.6, 0, .3, 1) 1.05s both; }
.intro .is-playing .hero-actions { animation: hero-rise 800ms var(--ease-out) 1.2s both; }
.intro .is-playing .hero-actions .btn::after { animation: btn-sheen 1.1s cubic-bezier(.4, 0, .2, 1) 1.85s; }
.intro .is-playing .hero-platforms { animation: hero-rise 800ms var(--ease-out) 1.4s both; }
.intro .is-playing .hero-next { animation: hero-fade 900ms ease 2.3s both; }
@keyframes caret-blink { 50% { opacity: 0; } }
@keyframes line-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hero-rise { from { opacity: 0; translate: 0 18px; filter: blur(4px); } to { opacity: 1; translate: 0 0; filter: none; } }
@keyframes hero-fade { from { opacity: 0; } }
@keyframes btn-sheen { from { translate: -110% 0; } to { translate: 110% 0; } }
@media (max-width: 760px) {
 .motion .ascii-art--glow { --gr: 170px; }
 .hero-caret { width: 3px; }
}

/* Real application captures, held at two frames per second. */
.feature-reel video { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; background: #111; border-radius: 4px; box-shadow: var(--paper-shadow); }
.feature-reel__chapters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }
.feature-reel__chapters button { font: inherit; font-size: 13px; color: var(--meta); background: transparent; border: 1px solid var(--line-strong); border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.feature-reel__chapters button[aria-pressed="true"] { color: var(--text); background: var(--paper); border-color: currentColor; }
.feature-reel__chapters button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* Keep the homepage neuron identical to its initial drawing. */
.sketch-hero .ascii-art--neurons { animation: none; translate: none; rotate: none; scale: none; }
.sketch-hero .ascii-art--glow { display: none; }
.motion .sketch-hero .ascii-art--glow { display: block; opacity: 0; mask-image: none; transition: none; overflow: visible; }
.motion .sketch-hero.is-lit.is-neuron-hover .ascii-art--glow { opacity: 1; }

/* 무료 베타 신청 폼 (pricing) */
.beta-form { display: grid; gap: 8px; margin-top: 12px; }
.beta-form__label { font-size: 0.875rem; font-weight: 600; }
.beta-form__input { width: 100%; box-sizing: border-box; padding: 10px 12px; font: inherit; border: 1px solid currentColor; border-radius: 8px; background: transparent; color: inherit; }
.beta-form__consent { display: flex; gap: 8px; align-items: flex-start; font-size: 0.8125rem; line-height: 1.4; }
.beta-form__consent input { margin-top: 3px; flex: none; }
.beta-form__status:empty { display: none; }
.beta-form__status[data-state="success"] { color: #6fdc8c; }
.beta-form__status[data-state="error"] { color: #ff8a80; }