@font-face{font-family:Pretendard;font-style:normal;font-weight:1 500;font-display:swap;src:url(/fonts/pretendard-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0100-017F,U+0180-024F,U+2000-206F,U+2070-209F,U+20A0-20BF,U+2100-214F,U+2190-21FF,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Pretendard;font-style:normal;font-weight:1 500;font-display:swap;src:url(/fonts/pretendard-400-ko.woff2) format("woff2");unicode-range:U+1100-11FF,U+3000-303F,U+3130-318F,U+A960-A97F,U+AC00-D7A3,U+D7B0-D7FF}
@font-face{font-family:Pretendard;font-style:normal;font-weight:501 650;font-display:swap;src:url(/fonts/pretendard-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0100-017F,U+0180-024F,U+2000-206F,U+2070-209F,U+20A0-20BF,U+2100-214F,U+2190-21FF,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Pretendard;font-style:normal;font-weight:501 650;font-display:swap;src:url(/fonts/pretendard-600-ko.woff2) format("woff2");unicode-range:U+1100-11FF,U+3000-303F,U+3130-318F,U+A960-A97F,U+AC00-D7A3,U+D7B0-D7FF}
@font-face{font-family:Pretendard;font-style:normal;font-weight:651 900;font-display:swap;src:url(/fonts/pretendard-800-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0100-017F,U+0180-024F,U+2000-206F,U+2070-209F,U+20A0-20BF,U+2100-214F,U+2190-21FF,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Pretendard;font-style:normal;font-weight:651 900;font-display:swap;src:url(/fonts/pretendard-800-ko.woff2) format("woff2");unicode-range:U+1100-11FF,U+3000-303F,U+3130-318F,U+A960-A97F,U+AC00-D7A3,U+D7B0-D7FF}
@font-face{font-family:"Pretendard Fallback";src:local("Malgun Gothic"),local("Apple SD Gothic Neo"),local("Noto Sans KR"),local("Noto Sans CJK KR"),local("Noto Sans");size-adjust:103.67%;ascent-override:91.84%;descent-override:23.27%;line-gap-override:0%}
:root{--navy:#1f3a5f;--navy-d:#152a46;--ink:#141a22;--sub:#5a6675;--line:#e4e8ee;--bg:#fafbfc;--surface:#fff;--ok:#2e7d52;--tag:#eef2f7;--brand:#1f3a5f;--ad:var(--tag);--ad-line:var(--line)}
*{box-sizing:border-box}body{margin:0;font-family:Pretendard,"Pretendard Fallback",system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;font-size-adjust:from-font;color:var(--ink);background:var(--bg);line-height:1.7}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace}
.page{max-width:760px;margin:0 auto;padding:0 20px}
a{color:var(--navy)}
[hidden]{display:none !important}
.a11y-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.site-head{border-bottom:1px solid var(--line);background:var(--surface)}
.head-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;max-width:760px}
.wordmark a{font-weight:800;font-size:19px;color:var(--navy);text-decoration:none;letter-spacing:-.01em}
.head-right{display:flex;align-items:center;gap:14px}.head-right .mono{font-size:12px;color:var(--sub)}
/* position:relative anchor for .lang-menu nav's absolute positioning below — without it, the
   dropdown positions against the viewport instead of its own trigger. In LTR that's invisible by
   coincidence (the trigger sits near the page's right edge already, same as the viewport's), but
   it breaks visibly once dir="rtl" flips the trigger to the left while the dropdown stays pinned
   to the viewport's right (found auditing the Arabic locale rollout). */
.lang-menu{position:relative}
.lang-menu summary{cursor:pointer;font-size:13px;color:var(--sub);list-style:none}
.lang-menu nav{position:absolute;right:0;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:2px;margin-top:6px;max-width:340px;max-height:70vh;overflow-y:auto}
[dir="rtl"] .lang-menu nav{right:auto;left:0}
.lang-menu nav a{padding:5px 12px;text-decoration:none;color:var(--ink);font-size:14px;border-radius:5px}.lang-menu nav a:hover{background:var(--tag)}
.hero{text-align:center;padding:52px 0 28px}.hero h1{font-size:clamp(28px,5vw,40px);line-height:1.15;margin:0 0 14px}
.hero p{color:var(--sub);max-width:44ch;margin:0 auto}
.dropzone{border:2px dashed var(--line);border-radius:16px;background:var(--surface);text-align:center;padding:40px 20px;transition:.15s}
.dropzone.dragover{border-color:var(--brand);background:#f3f7fb}
.dropzone .primary{font-size:18px;font-weight:600}.dropzone .secondary{color:var(--sub);margin:6px 0}
.dropzone .paste-hint{color:var(--sub);font-size:12px;margin:14px 0 0}
.browse-btn,.btn{font:inherit;font-weight:600;background:var(--navy);color:#fff;border:0;border-radius:9px;padding:11px 20px;cursor:pointer}
.btn.line{background:transparent;color:var(--navy);border:1px solid var(--line)}.btn.sm{padding:7px 14px;font-size:14px}
.btn:disabled{opacity:.5;cursor:default}
.trust-line{text-align:center;color:var(--sub);font-size:14px;margin:16px 0 0}.trust-line .mono{color:var(--ok);font-weight:600}
.seo-block{border-top:1px solid var(--line);margin-top:40px;padding-top:28px}.seo-block h2{font-size:20px}.seo-block p{color:var(--sub)}
.legal-wrap{max-width:720px}
.legal-block{border-top:none}
.legal-h1{font-size:26px;margin:0 0 20px}
.legal-updated{font-size:12px;margin-top:24px}
.site-foot{margin-top:40px;padding:24px 0}.foot-links{display:flex;gap:18px;justify-content:center}.foot-links a{color:var(--sub);font-size:14px;text-decoration:none}
.ws-head{display:flex;align-items:center;gap:16px;padding:24px 0 8px}.ws-head h2{margin:0;font-size:22px}.back{color:var(--sub);text-decoration:none;font-size:14px}
.filelist{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden;margin:12px 0 20px}
.frow{padding:14px 16px;border-bottom:1px solid var(--line)}.frow:last-child{border-bottom:0}
.fname{font-weight:600;display:flex;align-items:center;gap:8px}.ftype{font:600 11px ui-monospace,monospace;color:var(--sub);background:var(--tag);padding:1px 7px;border-radius:5px}
.ffound{margin-top:6px}.tag{display:inline-block;font-size:12px;background:#fdeceb;color:#a6372c;border-radius:5px;padding:2px 8px;margin:2px 4px 2px 0}
.muted{color:var(--sub)}.fine{color:var(--sub);font-size:13px;margin-top:12px}.err{color:#a6372c}
.dl-shell{text-align:center;padding:56px 20px}.dl-check{width:56px;height:56px;border-radius:50%;background:#e1f0e7;color:var(--ok);font-size:28px;display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.dl-shell h1{font-size:26px;margin:0 0 8px}.dl-stats{color:var(--sub)}.dl-filesize{color:var(--sub);font-size:13px;margin:10px 0 20px}.dl-shell .btn{margin:6px}
/* "관련 도구" (related tools) — a small, secondary cross-product suggestion shown ONLY on the
   done screen, distinct from the generic "Part of Near" .family-bar (which lists all 6 products
   everywhere). This is 1-2 links tied to a real next-step in the task the visitor just finished
   (e.g. "scrub metadata next?"), intentionally styled quieter than .other-tools/.tool-links so it
   never competes with the primary .download-btn/.btn CTA above it. Plain first-party <a> links —
   no script, no third party — so it's unaffected by the ad-only-on-done-screen rule either way. */
.related-tools{margin:22px auto 0;max-width:420px;text-align:center}
.related-tools p{font-size:11px;color:var(--sub);margin:0 0 8px;text-transform:uppercase;letter-spacing:.06em}
.related-links{display:flex;flex-direction:column;gap:6px;align-items:center}
.related-links a{font-size:13px;color:var(--sub);text-decoration:none;border-bottom:1px dotted var(--line);line-height:1.5}
.related-links a:hover{color:var(--navy);border-bottom-color:var(--navy)}
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--surface);border-top:1px solid var(--line);padding:14px 20px;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}.cookie-banner p{margin:0;font-size:14px;color:var(--sub)}
/* Ad-consent gate (Accept/Reject) — see @near/kit/consent createAdConsentGate + @near/kit/ads. */
.cookie-actions{display:flex;gap:10px;flex-shrink:0}
.cookie-btn{font-family:inherit;font-size:13px;font-weight:600;padding:9px 18px;border-radius:6px;cursor:pointer;background:transparent;border:1px solid var(--line);color:var(--ink)}
.cookie-btn:hover{border-color:var(--brand)}
.cookie-btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.foot-link-btn{font-family:inherit;font-size:inherit;color:var(--sub);background:none;border:none;padding:0;cursor:pointer;text-decoration:none}
.foot-link-btn:hover{color:var(--brand)}
.foot-note{flex-basis:100%;margin:8px 0 0;opacity:.8}
/* Ad zones — fixed-size CSS boxes so unhiding on consent grant causes zero layout shift. */
.ad-native{max-width:640px;margin:36px auto;padding:16px 18px;background:var(--ad);border:1px solid var(--ad-line);border-radius:8px;display:flex;align-items:center;gap:14px}
.ad-native .tag,.ad-below .tag{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--sub);border:1px solid var(--ad-line);padding:2px 6px;border-radius:3px;flex-shrink:0}
/* Blog index (/blog/) — plain list, newest first; grows with the post count instead of relying
   on a hand-placed link to one post (see packages/near-kit/build.js's blogIndexPage()). */
.blog-index{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:16px}
.blog-index li{border:1px solid var(--line);border-radius:8px;padding:16px 18px}
.blog-index a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;text-decoration:none;color:inherit}
.blog-index .bi-title{font-weight:700;font-size:16px;color:var(--ink)}
.blog-index a:hover .bi-title{color:var(--brand)}
.blog-index .bi-date{font-size:12px;color:var(--sub);flex-shrink:0}
.blog-index p{margin:8px 0 0;font-size:14px;color:var(--sub);line-height:1.6}
.ws-layout{display:grid;grid-template-columns:1fr 220px;gap:28px;padding-top:12px}
.ad-side{position:sticky;top:24px;align-self:start;width:220px;height:600px;background:var(--ad);border:1px solid var(--ad-line);border-radius:8px}
.ad-anchor{position:fixed;left:0;right:0;bottom:0;z-index:39;background:var(--ad);border-top:1px solid var(--ad-line);min-height:50px}
@media (min-width:761px){.ad-anchor{display:none!important}}
.ad-below{margin:24px auto 0;max-width:560px;min-height:120px;background:var(--ad);border:1px solid var(--ad-line);border-radius:8px;padding:22px;font-size:12px;color:var(--sub)}
/* Coupang Partners affiliate widget (#coupang-ad-slot) — reuses .ad-below's box/.tag chip.
   .ad-disclosure carries the affiliate-link legal disclosure text (required in Korean; shown in
   every locale for consistency). iframe:display:block compensates for one harmless CSP-blocked
   inline style Coupang's own script sets (vertical-align:top) — see public/_headers' comment. */
.ad-disclosure{font-size:11px;color:var(--sub);line-height:1.5;margin:8px 0 0}
#coupang-ad-slot iframe{display:block;margin-top:10px}
/* Amazon Associates link (.amazon-link) — reuses .ad-below's box/.tag/.ad-disclosure classes for
   the same disclosure treatment as the Coupang block above it, but unlike Coupang/AdSense this
   block is plain static markup: no script, no iframe, nothing async, so it's never `hidden` and
   no JS reveals it (see @near/kit/amazon's header comment for why it needs no consent gate).
   The link itself is styled as quiet text, not a button, so it stays secondary to .download-btn. */
.amazon-link a{display:inline-block;margin-top:2px;font-size:13px;font-weight:600;color:var(--navy);text-decoration:none;border-bottom:1px dotted var(--navy)}
.amazon-link a:hover{border-bottom-style:solid}
@media (max-width:760px){.ws-layout{grid-template-columns:1fr}.ad-side{display:none!important}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* --- mobile & touch baseline: every app on base.css inherits (see COORDINATION.md §mobile) --- */
html{-webkit-text-size-adjust:100%}
.btn,.browse-btn{min-height:44px}
.f input{min-height:44px;font-size:16px}/* 16px stops iOS zoom-on-focus */
.lang-menu summary{min-height:44px;display:inline-flex;align-items:center}
.lang-menu nav a,.foot-links a{min-height:40px;display:inline-flex;align-items:center}
@supports(padding:max(0px)){
  .page{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
  .cookie-banner{padding-bottom:max(14px,env(safe-area-inset-bottom))}
}
@media (max-width:520px){
  .head-inner{padding:12px 16px}
  .hero{padding:36px 0 22px}.hero p{max-width:100%}
  .dropzone{padding:32px 16px}
  .dl-shell{padding:40px 16px}.dl-shell .btn{display:block;width:100%;margin:8px 0}
  .foot-links{gap:14px;flex-wrap:wrap}
  .ws-head{padding:18px 0 6px}
}
.mode-line{margin:4px 0 14px;color:var(--sub)}.mode-badge{font:700 12px ui-monospace,monospace;padding:3px 10px;border-radius:6px;margin-right:8px}
.mode-badge.enc{background:#e4ebf3;color:#1f3a5f}.mode-badge.dec{background:#e1f0e7;color:#2e7d52}
.frow .fsize{color:var(--sub);font-size:13px}
.f{margin:14px 0}.f label{display:block;font-size:13px;color:var(--sub);margin-bottom:5px}
.f input{width:100%;font:inherit;padding:11px 13px;border:1px solid var(--line);border-radius:9px;background:#fff}
.f input:focus{outline:2px solid var(--brand);border-color:var(--brand)}
.meter{display:flex;gap:5px;margin:-6px 0 8px}.meter i{height:4px;flex:1;background:var(--line);border-radius:2px}
.meter i.on{background:var(--ok)}
.fine.warn{color:#a6372c}.err{color:#a6372c;font-size:14px;display:inline-block;margin:4px 0}
/* Privacy receipt — Near Brand Guide §09-A: proof over claim, numbers not adjectives.
   Static/idle values (0 B / 0 files / WASM / ∅) since nothing is ever sent regardless of
   what's loaded — this isn't a live counter, it's what's always true by architecture. */
.receipt{border-radius:8px;background:var(--navy-d);color:#fff;padding:22px 24px;margin:20px 0}
.receipt-live{display:flex;align-items:center;gap:8px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:#8fe3b8}
.receipt-live .dot{width:7px;height:7px;border-radius:50%;background:#5fd39a;flex-shrink:0}
.receipt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:16px}
.receipt-num{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:26px;font-weight:700;line-height:1;display:block}
.receipt-num small{font-size:14px;font-weight:400;color:rgba(255,255,255,.55)}
.receipt-label{display:block;margin-top:6px;font-size:11.5px;color:rgba(255,255,255,.6);line-height:1.4}
@media (max-width:520px){.receipt-grid{grid-template-columns:repeat(2,1fr);gap:16px 12px}}
/* "Part of Near" family trust bar — Near Brand Guide §09-B. Family DNA: one trust, six tools.
   Glyphs are inline SVG (currentColor) so each keeps its own accent without an extra asset. */
.family-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;border:1px solid var(--line);border-radius:8px;padding:14px 18px;margin:20px 0}
.family-bar .family-label{font-size:13px;font-weight:700;color:var(--sub);white-space:nowrap}
.family-bar .family-label b{color:var(--navy);font-weight:800}
.family-tools{display:flex;gap:8px;flex-wrap:wrap;flex:1}
.family-tools a{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:6px;font-weight:600;font-size:13.5px;text-decoration:none;border:1px solid transparent;color:var(--sub)}
.family-tools a:hover{border-color:var(--line);background:var(--tag)}
.family-tools a.active{cursor:default;pointer-events:none}
.family-tools svg{width:15px;height:15px;flex-shrink:0}
@media (max-width:520px){.family-bar{padding:12px 14px}.family-bar .family-label{flex-basis:100%}}

:root{--brand:#a83e5b}
/* nearvid-specific additions on top of @near/kit/styles/base.css (baseCss stays on — this app
   ships no full stylesheet of its own, same as nearbg/nearscrub). Covers both the landing page
   (family-bar accent classes) and the separate /workspace/ page (operation picker, progress bar,
   result preview) — see templates/workspace.html's header comment for why that page is separate. */

/* "Part of Near" family bar (base.css §09-B): base.css's .family-tools rules only target <a>
   (the linked sibling tools) — nearvid's own entry in templates/index.html is a non-link
   <span class="active"> (it shouldn't link to itself), so give it the same layout/spacing here
   or it renders unstyled next to the anchors. Same pattern as nearbg's styles.css. */
.family-tools .active{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:6px;font-weight:600;font-size:13.5px;color:var(--sub);cursor:default}
/* Per-tool accent colors, as classes rather than inline style="color:#…" attributes — nearvid's
   CSP (public/_headers) is 'style-src self' with no 'unsafe-inline', which blocks inline style
   attributes outright (same reasoning as nearbg's styles.css). */
.family-tools .ft-pdf{color:#2b5b8c}
.family-tools .ft-scrub{color:#177d70}
.family-tools .ft-seal{color:#4a4a91}
.family-tools .ft-img{color:#a5620f}
.family-tools .ft-bg{color:#357a34}
.family-tools .ft-vid{color:#a83e5b}

/* --- /workspace/ page --- */

.ws-home-link{font-weight:800;font-size:19px;color:var(--navy);text-decoration:none}
.ws-trust{font-size:12px;color:var(--sub)}

.ws-center{text-align:center;padding:64px 20px}
.spinner{width:40px;height:40px;margin:0 auto 18px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--brand);animation:nv-spin 0.9s linear infinite}
@keyframes nv-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation:none;border-top-color:var(--line)}}

.progress-bar{max-width:320px;height:6px;margin:18px auto 0;background:var(--line);border-radius:3px;overflow:hidden}
.progress-fill{height:100%;width:0%;background:var(--brand);transition:width .2s ease}

/* Operation picker: 4 selectable cards, radiogroup semantics (role="radio" on each button).
   text-align uses the logical "start" keyword (not "left") so op-title/op-desc read from the
   correct edge in RTL locales (ar) without needing a separate [dir="rtl"] override — .op-grid's
   grid/.op-card's flex-direction:column already reflow correctly under dir="rtl" on their own. */
.op-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:18px 0}
.op-card{text-align:start;background:var(--surface);border:2px solid var(--line);border-radius:12px;padding:16px 18px;cursor:pointer;font:inherit;display:flex;flex-direction:column;gap:4px}
.op-card:hover{border-color:var(--brand)}
.op-card[aria-checked="true"]{border-color:var(--brand);background:color-mix(in srgb, var(--brand) 8%, var(--surface))}
.op-title{font-weight:700;font-size:15px}
.op-desc{color:var(--sub);font-size:13px;line-height:1.5}
@media (max-width:520px){.op-grid{grid-template-columns:1fr}}

.op-opts{border-top:1px solid var(--line);margin-top:18px;padding-top:16px}
.op-opts-row{display:flex;gap:16px;flex-wrap:wrap}
.op-opts-row .f{flex:1;min-width:120px}
.op-opts select{width:100%;font:inherit;padding:11px 13px;border:1px solid var(--line);border-radius:9px;background:#fff}

#process-btn{margin-top:18px;width:100%}
@media (min-width:521px){#process-btn{width:auto}}

/* Result preview on screen-done — video/img/audio share one box; sizing rules per element type. */
.ws-preview{margin:20px auto;max-width:420px}
.ws-preview-el{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--line)}
img.ws-preview-el{max-height:420px;object-fit:contain;background:
  linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);
  background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;background-color:#fff}
audio.ws-preview-el{border-radius:24px}