@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}
.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}
.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}
.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}
@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:#4a4a91}
/* nearseal-specific: passphrase form + mode badge + strength meter */
.frow{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:10px}.frow:last-child{border-bottom:0}
.filelist{border:1px solid var(--line);border-radius:12px;background:var(--surface);margin:12px 0 18px}
.frow .fsize{color:var(--sub);font-size:13px}
.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}
/* RTL (Arabic): margin-right is a physical property and doesn't flip with dir, so the badge
   would butt up against the following text with the gap on the wrong side. App-local fix only
   — packages/near-kit/styles/base.css defines the same rule for other apps and is out of scope. */
[dir="rtl"] .mode-badge{margin-right:0;margin-left:8px}
.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(--navy);border-color:var(--navy)}
.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}
/* Encrypt-time format choice (NearSeal vs age) — plain radio rows, no custom widget chrome. */
.format-choice .format-legend{display:block;font-size:13px;color:var(--sub);margin-bottom:5px}
.format-opt{display:flex;align-items:flex-start;gap:8px;font-size:14px;line-height:1.4;padding:6px 0;cursor:pointer}
.format-opt input{margin:4px 0 0}
[dir="rtl"] .format-opt{flex-direction:row-reverse;justify-content:flex-end}