/* Video-to-GIF workspace. Hero/article/meta use the shared The New styles. */
.tn-vgif-page { width:min(1180px,calc(100% - 32px)); margin:0 auto; }
.tn-vgif-page .tn-vgif-ad { width:100%; margin:28px auto; }
.tn-vgif-page .tn-vgif-ad--top { margin:54px auto 36px; }
#tnVgifTool {
  --vg-ink:#1a1208; --vg-muted:#5a4a30; --vg-line:#b8a888; --vg-soft:#ddd4be;
  --vg-paper:#faf6ee; --vg-wash:#f5efdf; --vg-button:#ede6d4; --vg-hover:#dfd4bb;
  --vg-accent:#c44a00; --vg-primary:#6a3b1f; --vg-primary-hover:#824826; --vg-on-primary:#fff5e3;
  --vg-error:#a1251b; --vg-media:#e9e0cf; --vg-image-outline:rgba(0,0,0,.1);
  color:var(--vg-ink); -webkit-text-fill-color:var(--vg-ink); background:var(--vg-paper);
  color-scheme:light; border-top:2px solid var(--vg-ink); border-bottom:1px solid var(--vg-line);
  margin:0 auto 20px; min-width:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans KR",sans-serif;
  -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums; line-height:1.5;
}
#tnVgifTool *, #tnVgifTool *::before, #tnVgifTool *::after { box-sizing:border-box; }
#tnVgifTool [hidden] { display:none!important; }
#tnVgifTool :is(p,figure) { margin:0; }
#tnVgifTool .tn-vgif-drop {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  margin:16px; padding:18px 20px; min-height:100px; border:1px dashed var(--vg-line);
  background:var(--vg-wash); transition:background-color .18s ease,border-color .18s ease;
}
#tnVgifTool .tn-vgif-drop.is-dragging { border-color:var(--vg-accent); outline:2px solid var(--vg-accent); outline-offset:3px; background:var(--vg-button); }
#tnVgifTool .tn-vgif-drop-copy { flex:1 1 280px; min-width:0; }
#tnVgifTool .tn-vgif-drop-copy p { font-size:12px; color:var(--vg-muted); -webkit-text-fill-color:var(--vg-muted); }
#tnVgifTool .tn-vgif-drop-icon { display:flex; align-items:center; gap:10px; font:900 16px/1 "Courier New",monospace; color:var(--vg-accent); -webkit-text-fill-color:var(--vg-accent); }
#tnVgifTool .tn-vgif-drop-icon span, #tnVgifTool .tn-vgif-drop-icon b { display:grid; place-items:center; width:42px; height:46px; border:1px solid var(--vg-line); background:var(--vg-paper); }
#tnVgifTool .tn-vgif-drop-icon i { font-style:normal; font-size:20px; }
#tnVgifTool .tn-vgif-drop strong { display:block; font-size:17px; margin-bottom:4px; text-wrap:balance; }
#tnVgifTool .tn-vgif-previews { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-block:1px solid var(--vg-line); }
#tnVgifTool .tn-vgif-pane { min-width:0; padding:16px; }
#tnVgifTool .tn-vgif-pane + .tn-vgif-pane { border-left:1px solid var(--vg-line); }
#tnVgifTool .tn-vgif-pane-head { display:flex; flex-direction:column; gap:5px; min-height:56px; padding:0 0 12px; }
#tnVgifTool .tn-vgif-pane-head > span { font:900 13px/1.5 "Courier New",Courier,monospace; letter-spacing:.03em; color:var(--vg-muted); -webkit-text-fill-color:var(--vg-muted); }
#tnVgifTool .tn-vgif-pane--result { background:var(--vg-wash); }
#tnVgifTool .tn-vgif-pane--result .tn-vgif-pane-head > span { color:var(--vg-accent); -webkit-text-fill-color:var(--vg-accent); }
#tnVgifTool .tn-vgif-stage {
  display:grid; place-items:center; min-width:0; min-height:260px; height:300px; padding:12px;
  background:var(--vg-media); border:1px solid var(--vg-soft); overflow:hidden; position:relative;
  background-image:linear-gradient(90deg,transparent calc(50% - .5px),var(--vg-soft) 50%,transparent calc(50% + .5px)),linear-gradient(transparent calc(50% - .5px),var(--vg-soft) 50%,transparent calc(50% + .5px));
}
#tnVgifTool :is(#vgifVideo,#vgifGif) { display:block; width:auto; height:auto; max-width:100%; max-height:274px; object-fit:contain; outline:1px solid var(--vg-image-outline); background:#151310; }
#tnVgifTool #vgifVideo:not([src]) { display:none; }
#tnVgifTool .tn-vgif-empty { color:var(--vg-muted); -webkit-text-fill-color:var(--vg-muted); text-align:center; padding:20px; font-size:14px; max-width:30ch; }
#tnVgifTool .tn-vgif-empty > span { display:block; font-size:40px; line-height:1; margin-bottom:14px; opacity:.5; }
#tnVgifTool .tn-vgif-result { min-width:0; max-width:100%; display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding-top:14px; }
#tnVgifTool .tn-vgif-result p { flex:1 1 160px; font-size:12px; color:var(--vg-muted); -webkit-text-fill-color:var(--vg-muted); }
#tnVgifTool :is(.tn-vgif-meta,#vgifSourceMeta,#vgifResultMeta) { font-size:12px; color:var(--vg-muted); -webkit-text-fill-color:var(--vg-muted); overflow-wrap:anywhere; margin-top:0; min-height:18px; font-weight:500; }
#tnVgifTool .tn-vgif-trim { padding:18px 16px; border-bottom:1px solid var(--vg-soft); }
#tnVgifTool .tn-vgif-toolbar-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:12px; }
#tnVgifTool .tn-vgif-toolbar-head strong { font-size:14px; font-weight:800; }
#tnVgifTool .tn-vgif-toolbar-head span { font-size:12px; color:var(--vg-muted); -webkit-text-fill-color:var(--vg-muted); }
#tnVgifTool .tn-vgif-trim-fields { display:grid; grid-template-columns:minmax(80px,1fr) auto minmax(80px,1fr) auto auto; gap:10px; align-items:end; margin-top:8px; }
#tnVgifTool .tn-vgif-toolbar { display:block; }
#tnVgifTool .tn-vgif-output-row { display:grid; grid-template-columns:minmax(150px,1fr) minmax(150px,1fr) minmax(160px,1.8fr); gap:16px; align-items:end; padding:16px; border-bottom:1px solid var(--vg-soft); }
#tnVgifTool .tn-vgif-budget { display:grid; align-content:center; justify-items:start; gap:5px; min-width:0; }
#tnVgifTool #vgifLimit { font-size:12px; font-weight:700; line-height:1.5; color:var(--vg-accent); -webkit-text-fill-color:var(--vg-accent); }
#tnVgifTool #vgifFit { margin-top:3px; border-color:var(--vg-accent); color:var(--vg-ink); -webkit-text-fill-color:var(--vg-ink); }
#tnVgifTool .tn-vgif-field { display:flex; flex-direction:column; gap:6px; min-width:110px; flex:1 1 130px; }
#tnVgifTool label { color:var(--vg-muted); -webkit-text-fill-color:var(--vg-muted); font-size:12px; font-weight:700; }
#tnVgifTool :is(button,select,input[type="number"],a) {
  min-height:42px; min-width:40px; border:1px solid var(--vg-line); border-radius:0; margin:0; padding:9px 12px;
  background:var(--vg-button); color:var(--vg-ink); -webkit-text-fill-color:var(--vg-ink); box-shadow:none;
  font-family:"Courier New",Courier,monospace; font-size:13px; font-weight:900; line-height:1.5;
  text-decoration:none; text-align:center; transition:background-color .15s ease,border-color .15s ease,transform .15s ease;
}
#tnVgifTool :is(select,input[type="number"]) { width:100%; background:var(--vg-paper); text-align:left; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans KR",sans-serif; font-variant-numeric:tabular-nums; font-weight:600; }
#tnVgifTool :is(button,a#vgifDownload) { cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
#tnVgifTool :is(button,a#vgifDownload):hover { background:var(--vg-hover); border-color:var(--vg-muted); }
#tnVgifTool :is(button,a#vgifDownload):active { transform:scale(.96); }
#tnVgifTool :is(button,input,select,a):focus-visible { outline:2px solid var(--vg-accent); outline-offset:3px; }
#tnVgifTool :is(button,input,select):disabled { cursor:not-allowed; opacity:.48; }
#tnVgifTool :is(#vgifPick,#vgifCreate,#vgifDownload) { background:var(--vg-primary); color:var(--vg-on-primary); -webkit-text-fill-color:var(--vg-on-primary); border-color:var(--vg-primary); }
#tnVgifTool :is(#vgifPick,#vgifCreate,#vgifDownload):hover { background:var(--vg-primary-hover); border-color:var(--vg-primary-hover); }
#tnVgifTool #vgifScrub { width:100%; display:block; margin:6px 0 0; height:40px; accent-color:var(--vg-accent); cursor:ew-resize; }
#tnVgifTool .tn-vgif-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:16px; }
#tnVgifTool :is(.tn-vgif-help,#vgifEstimate) { font-size:13px; color:var(--vg-muted); -webkit-text-fill-color:var(--vg-muted); text-wrap:pretty; }
#tnVgifTool #vgifEstimate { padding:0; align-self:center; }
#tnVgifTool > .tn-vgif-help { padding:14px 16px; border-top:1px solid var(--vg-soft); }
#tnVgifTool .tn-vgif-feedback { padding:0 16px 16px; }
#tnVgifTool .tn-vgif-status { padding:0; }
#tnVgifTool #vgifStatus { font-size:13px; min-height:20px; }
#tnVgifTool #vgifStatus[data-error="true"] { color:var(--vg-error); -webkit-text-fill-color:var(--vg-error); }
#tnVgifTool #vgifProgress { display:block; width:100%; height:6px; margin:0 0 12px; appearance:none; border:0; background:var(--vg-soft); accent-color:var(--vg-accent); }
#tnVgifTool #vgifProgress::-webkit-progress-bar { background:var(--vg-soft); }
#tnVgifTool #vgifProgress::-webkit-progress-value { background:var(--vg-accent); transition:width .2s ease; }
#tnVgifTool #vgifProgress::-moz-progress-bar { background:var(--vg-accent); }
body[data-scheme="dark"] #tnVgifTool {
  --vg-ink:#f1e5cc; --vg-muted:#c0b398; --vg-line:#796a52; --vg-soft:#4d4334;
  --vg-paper:#211d16; --vg-wash:#2c261c; --vg-button:#3a3022; --vg-hover:#4b3d2a;
  --vg-accent:#f0a06e; --vg-primary:#9c542d; --vg-primary-hover:#ad6035; --vg-on-primary:#fff6e4;
  --vg-error:#ffac9e; --vg-media:#171510; --vg-image-outline:rgba(255,255,255,.1); color-scheme:dark;
}
@media (prefers-color-scheme:dark) {
  body[data-scheme="auto"] #tnVgifTool {
    --vg-ink:#f1e5cc; --vg-muted:#c0b398; --vg-line:#796a52; --vg-soft:#4d4334;
    --vg-paper:#211d16; --vg-wash:#2c261c; --vg-button:#3a3022; --vg-hover:#4b3d2a;
    --vg-accent:#f0a06e; --vg-primary:#9c542d; --vg-primary-hover:#ad6035; --vg-on-primary:#fff6e4;
    --vg-error:#ffac9e; --vg-media:#171510; --vg-image-outline:rgba(255,255,255,.1); color-scheme:dark;
  }
}
@media (max-width:760px) {
  .tn-vgif-page { width:calc(100% - 10px); }
  .tn-vgif-page .tn-vgif-ad--top { margin-top:48px; }
  #tnVgifTool { display:flex; flex-direction:column; }
  #tnVgifTool .tn-vgif-previews { display:contents; }
  #tnVgifTool .tn-vgif-pane--source { order:1; border-top:1px solid var(--vg-line); }
  #tnVgifTool .tn-vgif-toolbar { order:2; }
  #tnVgifTool .tn-vgif-pane--result { order:3; }
  #tnVgifTool > .tn-vgif-help { order:4; }
  #tnVgifTool .tn-vgif-pane + .tn-vgif-pane { border-left:0; border-top:1px solid var(--vg-line); }
  #tnVgifTool .tn-vgif-drop { margin:12px; padding:16px; }
  #tnVgifTool .tn-vgif-stage { height:250px; min-height:220px; }
  #tnVgifTool :is(#vgifVideo,#vgifGif) { max-height:224px; }
  #tnVgifTool .tn-vgif-trim-fields { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  #tnVgifTool #vgifPlaySelection { grid-column:1/-1; }
  #tnVgifTool .tn-vgif-output-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
  #tnVgifTool .tn-vgif-budget { grid-column:1/-1; }
  #tnVgifTool #vgifFit { width:100%; }
  #tnVgifTool .tn-vgif-drop-icon { display:none; }
  #tnVgifTool .tn-vgif-drop-copy { flex-basis:100%; }
  #tnVgifTool .tn-vgif-result { align-items:stretch; }
  #tnVgifTool .tn-vgif-result #vgifDownload { width:100%; }
  #tnVgifTool .tn-vgif-field { flex-basis:calc(50% - 10px); min-width:0; }
  #tnVgifTool :is(input[type="number"],select) { font-size:16px; }
  #tnVgifTool .tn-vgif-actions > * { flex:1 1 auto; }
}
@media (prefers-reduced-motion:reduce) {
  #tnVgifTool *, #tnVgifTool *::before, #tnVgifTool *::after { transition:none!important; animation:none!important; }
  #tnVgifTool :is(button,a#vgifDownload):active { transform:none; }
}