/* Long-form content pages (e.g. /<lang>/privacy/). Reuses landing.css header/footer. */
body.content-page{background:#f6f7fb}
.page-header{margin-bottom:10px}
.content-article{width:min(780px,calc(100% - 40px));margin:30px auto 60px;padding:0 0 20px;color:#30364d}
.content-article h1{margin:0 0 14px;color:#171b30;font-family:'Space Grotesk','Instrument Sans','Noto Sans KR',sans-serif;font-size:clamp(30px,5vw,44px);line-height:1.15;letter-spacing:-.04em}
.content-article .lead{margin:0 0 28px;color:#62697c;font-size:17px;line-height:1.75}
.content-article section{padding:22px 0;border-top:1px solid #e2e5ed}
.content-article h2{margin:0 0 8px;color:#171b30;font-size:20px}
.content-article section p{margin:0;color:#4a516a;font-size:15px;line-height:1.8}
.content-article .back-link{margin-top:26px}.content-article .back-link a{color:#4a56d8;font-weight:700;text-decoration:none}
.page-footer{display:grid;justify-items:center;gap:12px;padding:30px 0 50px;text-align:center}
.page-header #language-select{min-height:38px}
@media(prefers-color-scheme:dark){
  body.content-page{background:#0b1220}
  .content-article h1,.content-article h2{color:#f1f5f9}
  .content-article .lead,.content-article section p{color:#b7bfd3}
  .content-article section{border-top-color:rgba(255,255,255,.12)}
  .content-article .back-link a{color:#9aa5ff}
}

/* "/" gateway */
.gateway{width:min(640px,calc(100% - 40px));margin:0 auto;padding:72px 0 60px;text-align:center}
.gateway .site-brand{justify-content:center;margin-bottom:22px}
.gateway h1{margin:0 0 12px;color:#171b30;font-family:'Space Grotesk','Instrument Sans',sans-serif;font-size:clamp(40px,8vw,60px);letter-spacing:-.05em}
.gateway .lead{margin:0 auto 26px;max-width:520px;color:#62697c;font-size:16px;line-height:1.75}
.gateway-start{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 28px;border-radius:14px;background:#4a56d8;color:#fff;font-weight:700;text-decoration:none}
.gateway h2{margin:44px 0 14px;color:#30364d;font-size:15px;font-weight:700}
.gateway-note{margin-top:30px;font-size:12px}.gateway-note a{color:#70778b}
@media(prefers-color-scheme:dark){.gateway h1{color:#f1f5f9}.gateway .lead{color:#b7bfd3}.gateway h2{color:#d3d9ea}.lang-hub-links a{color:#d3d9ea;border-color:rgba(255,255,255,.18)}}

/* Guides, how it works, about, terms (publisher pages) */
.content-article section ul,.content-article section ol{margin:6px 0 0;padding-left:22px;color:#4a516a;font-size:15px;line-height:1.8}
.content-article section li{margin:4px 0}
.content-article section h3{margin:18px 0 6px;color:#171b30;font-size:16px}
.content-article section p+p,.content-article section p+ul,.content-article section p+ol,.content-article section ul+p{margin-top:10px}
.content-article strong{color:#171b30}
.content-article .breadcrumb ol{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:0;list-style:none;color:#70778b;font-size:13px}
.content-article .breadcrumb li+li::before{content:"/";margin-right:6px}
.content-article .breadcrumb a{color:#4a56d8;text-decoration:none}
.content-article .toc{margin:0 0 20px;padding:14px 18px;border:1px solid #e2e5ed;border-radius:12px;background:#fff;font-size:14px}
.content-article .toc ol{margin:8px 0 0;padding-left:20px;line-height:1.9}
.content-article .toc a{color:#4a56d8;text-decoration:none}
.content-article .guide-card{padding:20px 0;border-top:1px solid #e2e5ed}
.content-article .guide-card h2 a{color:#171b30;text-decoration:none}
.content-article .guide-card p{margin:0 0 8px;color:#4a516a;font-size:15px;line-height:1.75}
.content-article .guide-card .when{color:#62697c;font-size:14px}
.content-article .reviewed{margin:26px 0 0;color:#70778b;font-size:13px}
.content-article .dates{margin:-6px 0 14px;color:#70778b;font-size:14px}
.page-footer .footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px}
.page-footer .footer-links a{color:#4a56d8;font-size:14px;text-decoration:none}
.site-page .site-nav{display:flex}
@media(max-width:720px){.site-page .site-header{flex-wrap:wrap;gap:8px}.site-page .site-nav{order:3;width:100%;flex-wrap:wrap;gap:4px 14px}}
@media(prefers-color-scheme:dark){
  .content-article section ul,.content-article section ol{color:#b7bfd3}
  .content-article section h3,.content-article strong,.content-article .guide-card h2 a{color:#f1f5f9}
  .content-article .toc{background:#111a2e;border-color:rgba(255,255,255,.12)}
  .content-article .toc a,.content-article .breadcrumb a,.page-footer .footer-links a{color:#9aa5ff}
  .content-article .guide-card{border-top-color:rgba(255,255,255,.12)}
  .content-article .guide-card p{color:#b7bfd3}
}
.content-article .guide-figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:12px 0 4px}
.content-article .guide-figure{margin:0}
.content-article .guide-figure img{display:block;width:100%;height:auto;border:1px solid #e2e5ed;border-radius:12px}
.content-article .guide-figure figcaption{margin-top:6px;color:#62697c;font-size:13px;line-height:1.5}
.content-article .figure-note{margin-top:8px;color:#70778b;font-size:12px}
@media(prefers-color-scheme:dark){.content-article .guide-figure img{border-color:rgba(255,255,255,.14)}.content-article .guide-figure figcaption{color:#b7bfd3}}

/* Tools (/<lang>/tools/...), learn articles and root page */
.content-article .tool-panel{margin:0 0 26px;padding:18px;border:1px solid #e2e5ed;border-radius:14px;background:#fff}
.content-article .tool-panel h2{margin:0 0 10px}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:12px}
.tool-card{display:grid;gap:8px;align-content:start;padding:14px;border:1px solid #e2e5ed;border-radius:12px;background:#f9fafd}
.tool-card label{font-size:13px;font-weight:700;color:#30364d}
.tool-card select{width:100%;min-height:40px;padding:0 10px;border:1px solid #c9cfe0;border-radius:10px;background:#fff;color:#171b30;font-size:14px}
.tool-video{aspect-ratio:16/9;overflow:hidden;border-radius:10px;background:#0b1220}
.tool-video video{display:block;width:100%;height:100%;object-fit:contain;background:#0b1220}
.tool-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tool-btn{min-height:42px;padding:0 16px;border:0;border-radius:10px;background:#4a56d8;color:#fff;font-size:14px;font-weight:700;cursor:pointer}
.tool-btn.secondary{background:#e9ecff;color:#2f3aa8}
.tool-btn:disabled{opacity:.5;cursor:not-allowed}
.tool-btn:focus-visible,.tool-card select:focus-visible,.tool-check input:focus-visible{outline:3px solid #8c97ff;outline-offset:2px}
.tool-meta{margin:6px 0 0;color:#62697c;font-size:13px;line-height:1.6;word-break:break-word}
.tool-status{margin:8px 0 0;padding:8px 12px;border-radius:10px;background:#f1f3f9;color:#30364d;font-size:14px;line-height:1.6}
.tool-status:empty{display:none}
.tool-status.is-ok{background:#e6f6ec;color:#17613a}
.tool-status.is-warn{background:#fff5df;color:#7a5200}
.tool-status.is-bad{background:#fdeeee;color:#8f2323}
.tool-meter{position:relative;height:18px;overflow:hidden;border-radius:9px;background:#e2e5ed}
#meter-bar{height:100%;width:0;background:linear-gradient(90deg,#2f9e5b,#e0b43a 75%,#c24141);transition:width .06s linear}
#meter-peak{position:absolute;top:0;bottom:0;left:0;width:3px;background:#171b30}
.tool-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:14px 0}
.tool-stats div{padding:10px 12px;border:1px solid #e2e5ed;border-radius:10px;background:#f9fafd}
.tool-stats dt{margin:0;color:#62697c;font-size:12px}
.tool-stats dd{margin:4px 0 0;color:#171b30;font-size:20px;font-weight:700}
.tool-table-wrap{overflow-x:auto}
.tool-table{width:100%;border-collapse:collapse;font-size:13px}
.tool-table caption{margin-bottom:6px;color:#62697c;text-align:left}
.tool-table th,.tool-table td{padding:6px 8px;border-bottom:1px solid #e2e5ed;text-align:left;word-break:break-all}
.tool-check{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:#30364d}
.tool-checks{margin:0 0 12px;padding:0;list-style:none}
.tool-row{margin:6px 0;padding:8px 12px;border-radius:10px;background:#f1f3f9;color:#30364d;font-size:14px}
.tool-row.is-ok{background:#e6f6ec;color:#17613a}
.tool-row.is-bad{background:#fff5df;color:#7a5200}
.tool-privacy{margin:14px 0 0;color:#62697c;font-size:13px;line-height:1.7}
.content-article section .back-link{margin-top:14px}
.content-article .guide-card h3{margin:0 0 8px;font-size:17px}
.content-article .guide-card h3 a{color:#171b30;text-decoration:none}
.content-article .guide-diagrams{display:grid;gap:14px;margin:12px 0 4px}
.content-article .guide-diagram{margin:0}
.content-article .guide-diagram img{display:block;width:100%;height:auto;border:1px solid #e2e5ed;border-radius:12px}
.content-article .guide-diagram figcaption{margin-top:6px;color:#62697c;font-size:13px;line-height:1.5}
.content-article .root-article .cta-button,.content-article .gateway-start{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 28px;border-radius:14px;background:#4a56d8;color:#fff;font-weight:700;text-decoration:none}
.content-article.root-article .lang-hub-links{display:flex;flex-wrap:wrap;gap:8px}
.content-article.root-article .lang-hub-links a{padding:8px 14px;border:1px solid #c9cfe0;border-radius:10px;color:#30364d;text-decoration:none}
.content-article .reviewed a,.content-article section a{color:#4a56d8}
@media(max-width:560px){.content-article .tool-panel{padding:12px}.tool-btn{flex:1 1 auto}}
@media(prefers-color-scheme:dark){
  .content-article .tool-panel,.tool-card,.tool-stats div{background:#111a2e;border-color:rgba(255,255,255,.12)}
  .tool-card label,.tool-check{color:#d3d9ea}
  .tool-card select{background:#0b1220;color:#f1f5f9;border-color:rgba(255,255,255,.2)}
  .tool-btn.secondary{background:#1d2650;color:#c7ceff}
  .tool-meta,.tool-privacy,.tool-stats dt,.tool-table caption{color:#aab3cc}
  .tool-status,.tool-row{background:#18213a;color:#d3d9ea}
  .tool-status.is-ok,.tool-row.is-ok{background:#143324;color:#8fe0b3}
  .tool-status.is-warn{background:#3a2e10;color:#f0cf7a}
  .tool-status.is-bad{background:#3a1c1c;color:#f0a0a0}.tool-row.is-bad{background:#3a2e10;color:#f0cf7a}
  .tool-meter{background:#26314f}#meter-peak{background:#f1f5f9}
  .tool-stats dd{color:#f1f5f9}.tool-table th,.tool-table td{border-bottom-color:rgba(255,255,255,.12)}
  .content-article .guide-card h3 a{color:#f1f5f9}
  .content-article .guide-diagram img{border-color:rgba(255,255,255,.14)}.content-article .guide-diagram figcaption{color:#b7bfd3}
  .content-article.root-article .lang-hub-links a{color:#d3d9ea;border-color:rgba(255,255,255,.2)}
  .content-article .reviewed a,.content-article section a{color:#9aa5ff}
}

/* Contact form */
.contact-form{display:grid;gap:8px;max-width:560px}
.contact-form label{font-size:13px;font-weight:700;color:#30364d}
.contact-form input,.contact-form textarea{width:100%;padding:10px 12px;border:1px solid #c9cfe0;border-radius:10px;background:#fff;color:#171b30;font:inherit;font-size:15px}
.contact-form textarea{resize:vertical}
.contact-form .cf-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
@media(prefers-color-scheme:dark){.contact-form label{color:#d3d9ea}.contact-form input,.contact-form textarea{background:#0b1220;color:#f1f5f9;border-color:rgba(255,255,255,.2)}}

/* ---- newer tools: recorders, webcam, QR, call quality (appended 2026-10-25) ---- */
.tool-banner{margin:0 0 16px;padding:12px 16px;border:1px solid #e6c36a;border-radius:12px;background:#fff5df;color:#5c4100;font-size:14px;line-height:1.7}
.tool-banner[hidden],.tool-unsupported[hidden],.tool-card[hidden]{display:none}
.tool-banner p{margin:0 0 6px}
.tool-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.tool-link[aria-disabled=true]{opacity:.5;pointer-events:none}
.tool-btn.secondary.tool-link{color:#2f3aa8}
.tool-fieldset{margin:6px 0;padding:8px 12px;border:1px solid #e2e5ed;border-radius:10px}
.tool-fieldset legend{padding:0 6px;color:#30364d;font-size:13px;font-weight:700}
.tool-fieldset .tool-check{display:flex;flex-wrap:wrap;margin:4px 0}
.tool-textarea{width:100%;min-height:96px;padding:10px;border:1px solid #c9cfe0;border-radius:10px;background:#fff;color:#171b30;font:inherit;font-size:14px;resize:vertical;box-sizing:border-box}
.tool-textarea:focus-visible{outline:3px solid #8c97ff;outline-offset:2px}
.tool-meter-bar{height:100%;width:0;background:linear-gradient(90deg,#2f9e5b,#e0b43a 75%,#c24141);transition:width .06s linear}
.tool-wave,.tool-hist{display:block;width:100%;height:56px;border-radius:8px;background:#eef0f7}
.tool-video video.is-mirrored{transform:scaleX(-1)}
.tool-qr{display:grid;place-items:center;padding:12px;border-radius:10px;background:#fff}
.tool-qr canvas{max-width:100%;height:auto;image-rendering:pixelated}
.tool-live{display:flex;align-items:center;gap:12px;min-height:34px;margin:6px 0 0}
.tool-countdown{min-width:1.2em;color:#4a56d8;font-family:'Space Grotesk',sans-serif;font-size:34px;font-weight:700;line-height:1}
.rec-list{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.rec-item{padding:12px;border:1px solid #e2e5ed;border-radius:12px;background:#fff}
.rec-item video,.rec-item img{display:block;width:100%;max-height:320px;margin-bottom:6px;border-radius:8px;background:#0b1220;object-fit:contain}
.rec-item audio{display:block;width:100%;margin-bottom:6px}
.tool-send{margin-top:10px;padding-top:10px;border-top:1px dashed #c9cfe0}
.tool-unsupported h2{margin-top:14px}
.tool-row.is-warn{background:#fff5df;color:#7a5200}
.ad-slot{min-height:280px;margin:26px 0;overflow:hidden}
.ad-slot::before{content:attr(data-label);display:block}
@media(max-width:560px){.tool-countdown{font-size:28px}.ad-slot{min-height:250px}}
@media (prefers-color-scheme:dark){
  .tool-banner{background:#3a2e10;border-color:#8a6d1c;color:#f0cf7a}
  .tool-fieldset,.rec-item{border-color:rgba(255,255,255,.12)}.rec-item{background:#111a2e}
  .tool-fieldset legend{color:#d3d9ea}
  .tool-textarea{background:#0b1220;color:#f1f5f9;border-color:rgba(255,255,255,.2)}
  .tool-wave,.tool-hist{background:#18213a}.tool-qr{background:#fff}
  .tool-countdown{color:#8c97ff}.tool-send{border-top-color:rgba(255,255,255,.2)}
  .tool-row.is-warn{background:#3a2e10;color:#f0cf7a}.tool-btn.secondary.tool-link{color:#c7ceff}
}
.tool-grid+.tool-card,.tool-card+.tool-card,.tool-panel>div>.tool-card{margin-top:16px}
.tool-panel>div>.tool-grid+.tool-card{margin-top:16px}
@media(max-width:640px){
  .gateway-page .content-article{margin-top:14px}
  .gateway-page .content-article h1{margin-bottom:8px;font-size:26px}
  .gateway-page .content-article .lead{margin-bottom:10px;font-size:14px;line-height:1.55}
  .gateway-page .root-article>p:has(#gateway-start-main){display:none}
  .gateway-page #tools{padding-top:12px}.gateway-page #tools>p:not(.back-link){display:none}
}