/* DEMi standard hero (2026-10-16) — ONE shared component for demiapps · demihub · demisub · demicut · demiphoto.
   Spec (user): key words sit directly on the image (no text box/panel behind them); the image darkens toward the left;
   the site wordmark sits above the catchphrase with the same height/spacing everywhere; catchphrases use the bold
   display face of the DEMi Sub hero (LanaPixel), at whole-pixel scales of its 11px grid (44 / 55 px) so strokes stay crisp. */
@font-face{font-family:Paperlogy;src:url('/assets/Paperlogy-7Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
:root{--hero-veil:linear-gradient(90deg,#111113f2 0%,#111113cc 30%,#11111380 52%,#11111333 74%,#11111314 100%);
 --hero-wm-h:36px;--hero-wm-gap:22px;--hero-title:55px;--section-title:33px}
@media (max-width:1180px){:root{--hero-title:44px}}
@media (max-width:720px){:root{--hero-wm-h:28px;--hero-wm-gap:16px;--hero-title:33px;--section-title:22px}}
/* catchphrase: IDENTICAL to the DEMi Sub hero "자막은 늘고 / 편집은 줄고" as measured in the browser on the live page
   (Paperlogy 700, 46.08px at 1440 = 3.2vw, 29px at 390, letter-spacing -1.5px, line-height 1.22, #fff, orange #fd8c0b,
   no stroke, no shadow on the original). Same face for section catchphrases. */
/* r25: catchphrase 1.5x the r24 size on desktop (was clamp(29px,3.2vw,62px) -> 4.8vw, max 93px); narrow screens: a vw clamp
   so every line fits at 390px (keep-all for Korean, highlighted words never split, CJK lines may break between characters). */
/* r39: capped at 64px for ALL five sites (Sub included): the longest Korean catchphrase line ("가벼운 프로그램으로",
   7.99 em at -1.5px tracking) must stay on ONE line in the 527px hero column (1180px page), so every hero is exactly
   2 lines at 1920/1440/1280/1024 (was 4.8vw up to 93px: demicut/demiphoto wrapped into 3-4 huge lines). */
:root{--catch-size:clamp(44px,4.8vw,64px)}
@media (max-width:720px){:root{--catch-size:clamp(26px,10vw,44px)}}
html body :is(.f-title,.hero-scene .intro h1) em{white-space:nowrap}
html body :is(.f-title,.hero-scene .intro h1):is(:lang(ja),:lang(zh)){word-break:normal;line-break:strict}
html body :is(.f-title,.hero-scene .intro h1,.section-head h2,.row-copy h2,.hub-band h2,.reviews-heading),
html body :is(.f-title,.hero-scene .intro h1,.section-head h2,.row-copy h2,.hub-band h2,.reviews-heading) *{font-family:Paperlogy,'Malgun Gothic',sans-serif!important;font-weight:700!important;font-synthesis:none;letter-spacing:-1.5px!important}
html body :is(.f-title,.hero-scene .intro h1){font-size:var(--catch-size)!important;line-height:1.22!important;color:#fff!important;margin:0 0 24px!important;word-break:keep-all}
html body .f-title em{color:#fd8c0b!important;font-style:normal}
html body.p-photo .f-title em,html[data-product=photo] body .f-title em{color:#a08bff!important}
html body :is(.section-head h2,.row-copy h2,.hub-band h2){font-size:clamp(25px,2.4vw,34px)!important;line-height:1.25!important}
/* app row under the catchphrase — the DEMi Sub hero .product row on every site (square icon left, name + one line right) */
html body .demi-app-row{display:flex!important;align-items:center;gap:12px;margin:0 0 24px!important;padding:0;background:none}
html body .demi-app-row .app-icon{width:40px!important;height:40px!important;flex:0 0 40px!important;border-radius:10px;overflow:hidden}
html body .demi-app-row .app-icon img{display:block;width:40px!important;height:40px!important;object-fit:contain}
html body .demi-app-row .app-icon~div h2,html body .hero-scene .intro .demi-app-row h2{font-family:Paperlogy,'Malgun Gothic',sans-serif!important;font-weight:700!important;font-size:25px!important;line-height:1.16!important;letter-spacing:normal!important;color:#eeedf0!important;margin:0!important}
html body .demi-app-row .app-icon~div .app-sub,html body .hero-scene .intro .demi-app-row .app-sub{margin:4px 0 0!important;font-size:13px!important;line-height:1.4!important;color:#b6aeb9!important}
html body .demi-app-row .sub-current{margin-top:8px}
/* family heroes (demiapps/demihub/demicut/demiphoto): text on the image, darker to the left */
.f-hero::before{background:var(--hero-veil),linear-gradient(180deg,#11111359 0%,#11111300 28%,#11111300 64%,#111113 100%)!important}
/* DEMi Sub hero: the same spec — no panel behind the copy, left-to-right darkening over the background */
.hero-scene .intro{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:28px 0 20px!important}
.hero-scene::before{background:var(--hero-veil),linear-gradient(180deg,#11111338 0%,#11111300 40%,#11111378 100%)!important}
.hero-scene .intro :is(.lead,.product,.download-note,.sub-more,.sub-current){text-shadow:0 1px 2px #000c,0 0 18px #000a}
html body :is(.f-title,.hero-scene .intro h1),html body :is(.f-title,.hero-scene .intro h1) *{text-shadow:none!important}
@media (max-width:980px){.f-hero::before,.hero-scene::before{background:linear-gradient(180deg,#111113b3 0%,#111113cc 55%,#111113 100%)!important}}

/* ---- r8: DEMi Sub header on every site ---------------------------------------------------------------
   Family pages wrap the identical DEMi Sub header markup in .hero-scene.demi-header-scene, so the DEMi Sub header
   rules (hero-surface.css, header-language.css, cut-language.css) apply unchanged; only the hero-box parts of
   .hero-scene are neutralised for that wrapper. */
.demi-header-scene{position:relative;z-index:30;padding:0!important;background:none!important;overflow:visible!important;isolation:auto}
.demi-header-scene::before,.demi-header-scene::after{content:none!important}
.f-hero{margin-top:0!important;padding-top:0!important}
.f-hero-body{padding-top:28px!important}
.demi-header-scene>header,.hero-scene>header{display:grid}
.demi-header-scene .brand img,.hero-scene>header>.brand img{width:100%;height:auto;display:block}
.slot-word.slot-orange{color:hsl(30 100% 50%)}.slot-word.slot-purple{color:#a08bff}
/* r25: demicut / demiphoto rolling slot words (one per hero slide, demi_ui.SCENE_WORDS); "쉬운" stays white */
/* r36: the accessible word list of the header slot is visually hidden HERE too (shipped in every site overlay), so it
   never shows next to the wordmark when hero-surface.css (a baseline file) is missing, e.g. a static server on the
   overlay folder alone. Same rule as hero-surface.css. */
.slot-accessible{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
:where(.header-slot){display:inline-flex;align-items:center;gap:.35em;white-space:nowrap}:where(.slot-window){position:relative;display:inline-block;width:4.8em;height:2em;overflow:hidden;vertical-align:middle}:where(.slot-word){position:absolute;inset:0;display:flex;align-items:center;opacity:0}:where(.slot-word.is-current){opacity:1}   /* zero-specificity copies of the hero-surface.css slot basics (that file wins whenever it is there) */
.header-slot .slot-word.slot-c-orange{color:#FF831F}
.header-slot .slot-word.slot-c-lilac{color:#D9CCFF}
.header-slot .slot-word.slot-c-violet{color:#7C5CFF}
/* app links: one compact row directly under the header, right-aligned to the header's actions (all 5 sites) */
.demi-app-links{width:min(1240px,calc(100% - 64px));margin:-14px auto 0;display:flex;justify-content:flex-end;gap:4px 18px;flex-wrap:wrap;position:relative;z-index:30}
.demi-app-links a{display:inline-flex;align-items:center;gap:8px;padding:4px 0;font-size:16px;line-height:1.2;color:#cfcad2;text-decoration:none;opacity:.85;transition:opacity .2s,color .2s}
.demi-app-links a img{width:32px;height:32px;display:block}   /* r39: 2x (was 16px); label 13 -> 16px, gap 6 -> 8px so the row stays balanced */
.demi-app-links a:hover{opacity:1;color:#fff}
.demi-app-links a[aria-current=page]{opacity:1;color:#fff;text-decoration:underline;text-underline-offset:5px;text-decoration-color:#ff922c}
@media(max-width:880px){.demi-app-links{width:calc(100% - 36px);margin-top:-6px;justify-content:flex-start;gap:4px 16px}}
/* DEMi Sub footer layout (style.css footer + legal.css) on the family pages */
body.family footer.legal-footer{width:min(1180px,calc(100% - 96px));margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 15px;padding:20px 0;color:#9a91a0;font-size:11px;border:0;grid-template-columns:none}
body.family footer.legal-footer .legal-links{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
body.family footer.legal-footer a:hover{color:#ffac72}
body.family footer.legal-footer .legal-notice{flex-basis:100%;font-size:11px;color:#a69ba9;line-height:1.7}
body.family footer.legal-footer .privacy-link{font-weight:bold;color:#d0c5d6}
@media(max-width:940px){body.family footer.legal-footer{width:calc(100% - 48px);line-height:1.7}body.family footer.legal-footer>span:last-of-type{display:none}}
/* DEMi Sub hero bottom = the family hero bottom: the background fades smoothly into the page (no hard edge / flat band) */
.landing-page .hero-scene:not(.demi-header-scene){padding-bottom:96px!important}
.landing-page .hero-scene:not(.demi-header-scene)::after{height:42%!important;background:linear-gradient(180deg,#11111300 0%,#11111366 45%,#111113cc 75%,#111113 100%)!important}
/* brand box = DEMi Sub as measured: 150x38 box, wordmark 27px high (22px under 880px), 106px box under 480px */
.demi-header-scene .sub-brand{display:flex;align-items:center;width:150px!important;height:38px!important;overflow:visible}
.demi-header-scene .sub-brand img{width:100%!important;height:27px!important;object-fit:contain;object-position:left center}
@media(max-width:880px){.demi-header-scene .sub-brand img{height:22px!important}}
@media(max-width:480px){.demi-header-scene .sub-brand{width:106px!important}}
@media(max-width:360px){.demi-header-scene .sub-brand{width:86px!important}}
/* r10: ONE download button on every site = DEMi Sub's hero button (measured on demisub: full intro width, 50px, 19px,
   radius 12, padding 11/17, ↓ 21px; enabled white/#241509, disabled #363033/#b2a4a2; note 12px). Click = download starts. */
.demi-dl{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:548px}
.demi-dl .download{display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:50px;padding:11px 17px;border-radius:12px;background:#fff;color:#241509;font-size:19px;line-height:1.25;word-break:keep-all;text-decoration:none;cursor:pointer;box-shadow:none;transition:background .15s}
.demi-dl .download:hover{background:#f0f0f0}
.demi-dl .download[aria-disabled=true]{background:#363033;color:#b2a4a2;cursor:default}
.demi-dl .download[aria-busy=true]{opacity:.7;pointer-events:none}
.demi-dl .download .dl-arrow{font-size:21px;line-height:16px;flex-shrink:0}
.demi-dl .download-note{margin:10px 0 0;font-size:12px;line-height:1.6;color:#d9d9df;text-shadow:0 1px 2px #000c,0 0 18px #000a}
.demi-dl .download-note+.download-note{margin-top:2px}
.demi-dl .download-note:empty,.demi-dl .download-note:has(>a[hidden]:only-child){display:none}
.demi-dl .download-note a{text-decoration:underline}
.demi-dl.compact{width:auto;max-width:none;flex:1 1 auto;min-width:0}
.demi-dl.compact .download{min-height:40px;padding:8px 14px;border-radius:10px;font-size:15px}
.demi-dl.compact .download .dl-arrow{font-size:18px}
.demi-dl.compact .download-note{color:var(--muted,#a5a5af);text-shadow:none}
@media(max-width:1000px){.demi-dl .download{font-size:18px}}
.product-card .links .demi-dl a.download{border:0;font-size:15px;padding:8px 14px;border-radius:10px;background:#fff;color:#241509}
.product-card .links .demi-dl a.download:hover{background:#f0f0f0}
.product-card .links .demi-dl a.download[aria-disabled=true]{background:#363033;color:#b2a4a2}
/* r11: header = DEMi Sub's header pixel for pixel (measured on demisub at 1440 / 390): Sub's page has line-height normal and
   text #eeece8 (family pages: 1.65 / #f5f5f7), brand link gap 9px. */
.demi-header-scene{line-height:normal;color:#eeece8}
.demi-header-scene header .brand{gap:9px}
/* r11: demiapps hero background = the app icons as a repeating staggered pattern (assets/brand/apps-pattern.svg, 650px tile since r17:
   Cut/Photo/Sub/Hub only, icons 1.8x, pitch 1.3/1.6 x icon), drifting one tile toward the TOP-LEFT per 87 s (~7.5 px/s as before) (seamless: the layer is one tile larger and moves exactly one tile).
   GPU: transform only. Low opacity; the hero veil (.f-hero::before, left side darker) stays on top. */
.f-hero-art.apps-pattern{background:#111113;overflow:hidden}
.f-hero-art.apps-pattern::after{content:"";position:absolute;left:0;top:0;width:calc(100% + var(--apps-tile));height:calc(100% + var(--apps-tile));
  background:var(--apps-pattern) 0 0/var(--apps-tile) var(--apps-tile) repeat;opacity:.2;will-change:transform;animation:apps-pattern-drift 87s linear infinite}
.f-hero-art.apps-pattern{--apps-tile:650px}
@media (max-width:720px){.f-hero-art.apps-pattern{--apps-tile:455px}}
@keyframes apps-pattern-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1 * var(--apps-tile)),calc(-1 * var(--apps-tile)),0)}}
@media (prefers-reduced-motion:reduce){.f-hero-art.apps-pattern::after{animation:none;will-change:auto}}
/* r12: DEMi Sub install dialog (site style; native <dialog>: Esc closes, backdrop click closes) */
.demi-sub-install{padding:0;border:1px solid #ffffff1f;border-radius:18px;background:#1b1b1f;color:#eeece8;width:min(440px,calc(100% - 32px));box-shadow:0 30px 90px #000a;font-family:Mona12,"Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif}
.demi-sub-install::backdrop{background:#0b0b0dcc;backdrop-filter:blur(4px)}
.demi-sub-install .sid-body{position:relative;display:grid;gap:14px;padding:26px 24px 22px}
.demi-sub-install .sid-x{position:absolute;top:10px;right:10px;width:36px;height:36px;border:0;border-radius:10px;background:transparent;color:#a5a5af;font-size:22px;line-height:1;cursor:pointer}
.demi-sub-install .sid-x:hover{background:#ffffff12;color:#fff}
.demi-sub-install .sid-icons{display:flex;align-items:center;gap:10px}
.demi-sub-install .sid-icons img{width:40px;height:40px}
.demi-sub-install .sid-arrow{color:#a5a5af;font-size:18px}
.demi-sub-install h2{margin:0;font:700 21px/1.35 Paperlogy,Mona12,sans-serif;letter-spacing:-.3px;word-break:keep-all;padding-right:28px}
.demi-sub-install p{margin:0;color:#b9b8bf;font-size:14px;line-height:1.65;word-break:keep-all}
.demi-sub-install .demi-dl{max-width:none}
.demi-sub-install .demi-dl .download{background:#ff831f;color:#1a1006;font-size:17px}
.demi-sub-install .demi-dl .download:hover{background:#ff9640}
.demi-sub-install .demi-dl .download[aria-disabled=true]{background:#363033;color:#b2a4a2}
.demi-sub-install .demi-dl .download-note{text-shadow:none;color:#a5a5af}
.demi-sub-install .sid-cut-page{justify-self:start;color:#ff9a4a;font-size:14px;text-decoration:underline;text-underline-offset:3px}
.demi-sub-install .sid-plugin{min-height:46px;padding:10px 16px;border:1px solid #ffffff2e;border-radius:12px;background:transparent;color:#eeece8;font:inherit;font-size:15px;cursor:pointer}
.demi-sub-install .sid-plugin:hover{background:#ffffff0f}
.demi-sub-install :focus-visible{outline:2px solid #ff831f;outline-offset:3px}
/* r12: shared hero rotator (demi-hero-rotator.js) — same layering as DEMi Sub's .hero-slides */
.f-hero-art .hero-slides{position:absolute;inset:0;isolation:isolate}
.f-hero-art .hero-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%;mix-blend-mode:plus-lighter;
  filter:blur(1.5px) var(--slide-filter,);transform-origin:50% 48%;will-change:transform,opacity}
@media (prefers-reduced-motion:reduce){.f-hero-art .hero-slides img{will-change:auto}}
/* r14: demihub hero = ONE full-height row of preview frames (scripts/hub-wall.py tiles), butted edge to edge. The images
   stay upright; only the cut edges lean 20deg clockwise: every slice is (--tw + --s) wide, clipped to a parallelogram
   (--s = hero height * tan 20deg) and overlapped by --s, so neighbouring edges coincide (no gaps). The row holds the
   sequence twice and drifts LEFT by exactly N tiles (--n * --tw) per cycle = seamless loop. Opacity on the row (group)
   so the 1px seam overlap never shows as a brighter line. r18: 30% slower (243 s / 157 s mobile, was 170 / 110). */
.f-hero-art.hub-wall{background:#111113;overflow:hidden;container-type:size;
  --tw:34cqw;--s:calc(100cqh * .36397);--n:12;--dur:243s}
.hub-wall .hw-row{position:absolute;top:0;bottom:0;left:calc(-1 * (var(--tw) + var(--s)));display:flex;opacity:.62;
  will-change:transform;animation:hw-drift var(--dur) linear infinite}
.hub-wall .hw-row img{position:static;inset:auto;filter:none;transform:none;flex:none;display:block;
  width:calc(var(--tw) + var(--s));height:100%;margin-right:calc(-1 * var(--s));object-fit:cover;object-position:50% 50%;
  clip-path:polygon(var(--s) 0,calc(100% + 1px) 0,calc(100% - var(--s) + 1px) 100%,0 100%)}
.hub-wall .hw-row img.is-placeholder{filter:brightness(.65)}
@keyframes hw-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1 * var(--n) * var(--tw)),0,0)}}
@media (max-width:720px){.f-hero-art.hub-wall{--tw:62cqw;--dur:157s}}
@media (prefers-reduced-motion:reduce){.hub-wall .hw-row{animation:none;will-change:auto}}
/* DEMi Sub's own style.css sizes every ".download span" (24px/16px): the shared button's label keeps the button's type */
.demi-dl .download .dl-label{font-size:inherit;line-height:inherit}
/* r13: Google profile photo avatars (demi-avatar.js); fallback = today's person icon (header) / initial letter (profile) */
.demi-account-trigger[data-avatar=true]{position:relative}
.demi-account-trigger[data-avatar=true]::before{opacity:0!important}
.demi-account-trigger .demi-avatar{position:absolute;inset:0;margin:auto;width:26px;height:26px;border-radius:50%;object-fit:cover;transform:translateY(-2px);pointer-events:none}
.demi-profile-avatar{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;overflow:hidden;margin:0 10px 0 0;vertical-align:middle;
  background:#ff831f;color:#1a1006;font:700 18px/1 Paperlogy,Mona12,sans-serif}
html[data-product=photo] .demi-profile-avatar{background:#8b6cff;color:#fff}
.demi-profile-avatar[data-kind=photo]{background:#2a2a2f}
.demi-profile-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}

/* r27: header language list on wide screens = one row to the LEFT of the language button, on the button's line
   (right-aligned, growing leftwards) instead of dropping onto the app-link row; narrow screens keep the r8 behaviour.
   cut-language.js adds header.lang-covers-slot when the row would touch the centred slot text -> the slot fades out. */
@media (min-width:1024px){
 html body .hero-scene .cut-header-actions .language-switch .language-menu{top:0!important;right:calc(100% + 22px);bottom:auto;height:var(--site-language-row,44px);display:flex;flex-wrap:nowrap;align-items:center;gap:0 20px;max-width:none!important;transform:translateX(14px)}
 html body .hero-scene .cut-header-actions .language-switch.is-open .language-menu{transform:none}
 html body .hero-scene .cut-header-actions .language-switch .language-menu[hidden]{display:none}
 html body .hero-scene>header .header-slot{transition:opacity .2s}
 html body .hero-scene>header.lang-covers-slot .header-slot{opacity:0}
}

/* r39: family heroes use DEMi Sub's hero metrics exactly — the app window is top-aligned with the catchphrase (Sub's
   demo window starts at the catchphrase top), and the one-line description reserves Sub's two lines so the download
   bar and note sit at the same height on every site. */
.f-hero-body{align-items:start!important}
.f-hero-body>.shot{align-self:start;margin-top:0}
.f-hero .f-lead{min-height:3.5em}