/* ============================================================================
   dima.tools 툴 앱 공통 베이스 — dt-base.css (2026-08-30)
   원칙: 태그 셀렉터 금지(전부 클래스/스코프), ytdl styles.css·theme.css 비의존.
   프레임: .dt-nav / .container.dt-page / .elements / .intro / .download_form / .features-section / .dt-footer / .sidebar
   컴포넌트: .dt-* (버튼·칩·카드·표·드롭존·결과)
   ============================================================================ */
:root{--dt-bg:#F0F0F3;--dt-surface:#FFFFFF;--dt-surface2:#F7F8FA;--dt-line:#E5E7EB;--dt-line2:#EEF0F3;--dt-ink:#1F2937;--dt-ink2:#4B5563;--dt-mute:#6B7280;--dt-accent:#6C5CE7;--dt-accent2:#5F4FD6;--dt-accent-soft:#EEF2FF;--dt-brand:#00A87E;--dt-pos:#166534;--dt-pos-soft:#F0FDF4;--dt-neg:#991B1B;--dt-neg-soft:#FEF2F2;--dt-warn:#B45309;--dt-warn-soft:#FFF7ED;--dt-r:14px;--dt-shadow:9px 9px 16px #d1d9e6,-9px -9px 16px #ffffff;--dt-font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans KR",sans-serif}
.dt-body{margin:0;background:var(--dt-bg);color:var(--dt-ink);font-family:var(--dt-font);line-height:1.6;min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
.dt-body *{box-sizing:border-box}
.dt-body a{color:var(--dt-accent2)}
/* ---- nav ---- */
.dt-nav{background:var(--dt-surface);border-bottom:1px solid var(--dt-line);position:relative;z-index:20}
.dt-nav .navbar-container{max-width:1140px;margin:0 auto;padding:0 16px;height:64px;display:flex;align-items:center;justify-content:space-between}
.dt-nav .navbar-brand{color:var(--dt-brand);font-weight:700;font-size:1.2rem;text-decoration:none;display:inline-flex;align-items:center}
.dt-nav .navbar-nav{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.dt-nav .nav-link{color:#374151;text-decoration:none;font-size:14px;font-weight:500;padding:8px 12px;border-radius:8px}
.dt-nav .nav-link:hover{background:var(--dt-surface2);color:#111}
.dt-nav .navbar-toggler{display:none}
/* ---- page frame ---- */
.container.dt-page{max-width:1400px;margin:0 auto;padding:0 2rem 2rem;flex:1;display:flex;flex-direction:column;align-items:center;min-height:60vh;width:100%}
.elements{width:100%;display:flex;flex-direction:column;gap:1.5rem}
.intro{text-align:center;margin:1.5rem 0 0;padding:1.5rem;background:var(--dt-surface);border-radius:16px;border:1px solid var(--dt-line);width:100%}
.intro h1{font-size:1.9rem;font-weight:800;color:var(--dt-ink);margin:0 0 .5rem;line-height:1.3;text-wrap:balance}
.intro p{margin:0;color:var(--dt-ink2);font-size:1rem;max-width:72ch;margin-inline:auto}
.download_form{width:100%;background:var(--dt-surface);border-radius:var(--dt-r);box-shadow:var(--dt-shadow);padding:1.25rem 1.5rem;position:relative}
.download_form label{display:block;color:var(--dt-ink);margin-bottom:.5rem;font-size:.95rem;font-weight:600}
.download_form input[type=text],.download_form input[type=search],.download_form input[type=url],.download_form select,.download_form textarea{width:100%;padding:.9rem 1.1rem;background:var(--dt-surface2);border:1px solid var(--dt-line);border-radius:12px;color:var(--dt-ink);font:inherit;font-size:1rem;outline:none;transition:.15s}
.download_form input[type=text]:focus,.download_form input[type=search]:focus,.download_form input[type=url]:focus,.download_form select:focus,.download_form textarea:focus{border-color:var(--dt-accent);box-shadow:0 0 0 3px var(--dt-accent-soft)}
.download_form input::placeholder{color:#9CA3AF}
.download_form textarea{min-height:160px;resize:vertical}
.download_form input[type=number],.download_form input[type=color],.download_form input[type=range]{font:inherit}
.download_form input[type=number]{padding:8px 10px;border:1px solid var(--dt-line);border-radius:8px;background:var(--dt-surface2);width:96px}
/* primary CTA (submit) */
.dt-cta,.download_form #downloadButton,.download_form .dt-btn,.lc .lc-calc,.lc #calc,.lc #check,.lc #makePdfBtn{display:flex;width:100%;align-items:center;justify-content:center;gap:.5rem;margin-top:1rem;padding:1.1rem 2rem;border:0;border-radius:16px;background:linear-gradient(145deg,#7c6ce8,#5f4fd6);color:#fff;font:inherit;font-size:1rem;font-weight:700;cursor:pointer;box-shadow:6px 6px 12px rgba(108,92,231,.3);transition:.2s}
.dt-cta:hover,.download_form #downloadButton:hover{transform:translateY(-1px)}
.download_form #downloadButton:disabled,.dt-cta:disabled{opacity:.6;cursor:default;transform:none}
/* format choice */
.format-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.format-button{flex:1 1 200px;background:var(--dt-surface);border:1px solid var(--dt-line);border-radius:12px;padding:12px 14px;cursor:pointer;text-align:left;color:var(--dt-ink);font:inherit;transition:.15s;opacity:.85}
.format-button:hover{border-color:#c7d2fe}
.format-button.selected{background:var(--dt-accent-soft);border-color:var(--dt-accent);opacity:1;box-shadow:0 0 0 2px rgba(108,92,231,.15)}
.format-button-content{display:flex;align-items:center;gap:12px}
.format-icon{color:var(--dt-accent);display:flex;width:24px;height:24px;align-items:center;justify-content:center;flex:none}
.format-info{flex:1}.format-title{font-weight:700;font-size:.95rem}.format-description{font-size:.85rem;color:var(--dt-mute);line-height:1.3}
#formatInfo{display:none;margin-top:12px;padding:10px 14px;border-radius:10px;background:var(--dt-surface2);font-size:.92rem;color:var(--dt-ink2)}
#formatInfo.show{display:block}
#formatInfo.dt-ok{color:var(--dt-pos);background:var(--dt-pos-soft);border:1px solid #bbf7d0}
#formatInfo.dt-warn{color:var(--dt-warn);background:var(--dt-warn-soft);border:1px solid #fed7aa}
#progressBar{width:100%;height:8px;border-radius:4px;border:0;margin:1rem 0;background:var(--dt-line2)}
#progressBar::-webkit-progress-bar{background:var(--dt-line2);border-radius:4px}#progressBar::-webkit-progress-value{background:linear-gradient(145deg,var(--dt-accent),#5f4fd6);border-radius:4px}
#fileLink{text-align:center;margin:1rem 0}
/* sections */
.features-section{width:100%;background:var(--dt-surface);border:1px solid var(--dt-line);border-radius:var(--dt-r);padding:1.25rem 1.5rem}
.features-section h2{font-size:1.25rem;font-weight:700;margin:0 0 .75rem;color:var(--dt-ink)}
.features-section .vd-sites-desc{color:var(--dt-ink2);margin:0 0 1rem;font-size:.95rem}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.feature-item{background:var(--dt-surface2);border:1px solid var(--dt-line2);border-radius:12px;padding:14px 16px}
.feature-item h3{font-size:1rem;font-weight:700;margin:0 0 6px;color:var(--dt-ink)}
.feature-item p{margin:0;color:var(--dt-ink2);font-size:.92rem;line-height:1.55}
.feature-item code{background:var(--dt-line2);padding:1px 5px;border-radius:4px;font-size:.85em}
.dt-footer{text-align:center;padding:2rem 1rem;color:var(--dt-mute);font-size:.9rem;margin-top:auto}
.dt-footer p{margin:.25rem 0}
/* sidebar ads: only when there is real room (content 1400 + 2×(160+20+40)) */
.sidebar{position:fixed;top:50%;transform:translateY(-50%);width:160px;height:600px;z-index:5;display:none}
.left-sidebar{left:20px}.right-sidebar{right:20px}
@media (min-width:1800px){.sidebar{display:block}}
.elements .adsbygoogle{display:block;margin:0 auto;width:100%}
/* ---- components (dt-*) ---- */
.dt-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0}
.dt-row label{margin:0;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.dt-row input[type=number],.dt-row input[type=text],.dt-row select{padding:8px 10px;border:1px solid var(--dt-line);border-radius:8px;font-size:14px;background:var(--dt-surface);width:auto}
.dt-row input[type=number]{width:90px}
.dt-btn2{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:auto;margin:0;padding:8px 14px;border-radius:8px;border:1px solid #cfd6dd;background:var(--dt-surface);color:var(--dt-ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;box-shadow:none;transition:.15s}
.dt-btn2:hover{background:var(--dt-surface2);color:#111}
.dt-preset{display:inline-flex;align-items:center;gap:6px;width:auto;margin:0;padding:6px 10px;border:1px solid var(--dt-line);border-radius:8px;background:var(--dt-surface);color:#374151;font:inherit;font-size:13px;font-weight:500;cursor:pointer;text-align:left;box-shadow:none}
.dt-preset.sel{background:var(--dt-accent-soft);border-color:var(--dt-accent);color:#3730a3}
.dt-preset small{display:inline;color:var(--dt-mute)}
.dt-preset-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin:10px 0}
.dt-preset-list .dt-preset{display:flex;flex-wrap:wrap}.dt-preset-list .dt-preset small{flex-basis:100%;margin-left:22px}
.x,.chip button{display:inline-flex;border:0;background:none;color:var(--dt-mute);cursor:pointer;font:inherit;font-size:16px;padding:0 4px;width:auto;margin:0;box-shadow:none}
.x:hover,.chip button:hover{color:var(--dt-neg)}
.dt-result{margin-top:18px;padding:16px;border-radius:12px;background:var(--dt-surface2);border:1px solid var(--dt-line)}
.dt-result h3{font-size:17px;margin:0 0 10px}
.dt-muted{color:var(--dt-mute);font-size:13px}
.dt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.dt-card{background:var(--dt-surface);border:1px solid var(--dt-line);border-radius:12px;overflow:hidden}
.dt-card img{width:100%;display:block;background:#f1f5f9}
.dt-card .dt-cap{padding:10px 12px;font-size:13px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.dt-rel{text-decoration:none;color:inherit;display:block}.dt-rel:hover{color:inherit;box-shadow:0 6px 18px rgba(0,0,0,.08)}
.dt-drop{display:block;border:2px dashed #cbd5e1;border-radius:14px;padding:34px 16px;text-align:center;cursor:pointer;background:var(--dt-surface2);transition:.2s;margin:0;font-weight:400}
.dt-drop.over{border-color:var(--dt-accent);background:var(--dt-accent-soft)}.dt-drop input{display:none}
.dt-checker{background-image:linear-gradient(45deg,#e5e7eb 25%,transparent 25%),linear-gradient(-45deg,#e5e7eb 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e5e7eb 75%),linear-gradient(-45deg,transparent 75%,#e5e7eb 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}
.dt-warn{color:var(--dt-warn);background:var(--dt-warn-soft);border:1px solid #fed7aa;border-radius:8px;padding:8px 12px;margin:6px 0;font-size:14px}
.dt-ok{color:var(--dt-pos);background:var(--dt-pos-soft);border:1px solid #bbf7d0;border-radius:8px;padding:8px 12px;margin:6px 0;font-size:14px}
.dt-winner{font-size:20px;font-weight:700;padding:12px 16px;border-radius:10px;background:var(--dt-surface);border:2px solid var(--dt-accent);margin:8px 0;display:flex;justify-content:space-between;gap:10px;align-items:center}
.dt-winner small{font-weight:400;color:var(--dt-mute);font-size:13px}
.dt-roulette{font-size:26px;font-weight:800;text-align:center;padding:24px;border-radius:12px;background:#111827;color:#fff;letter-spacing:.02em;min-height:80px}
table.dt-table{width:100%;border-collapse:collapse;font-size:14px;background:var(--dt-surface)}
.dt-table th,.dt-table td{border:1px solid var(--dt-line);padding:8px 10px;text-align:left;vertical-align:top;word-break:break-all}
.dt-table th{background:var(--dt-surface2);white-space:nowrap}
canvas.dt-canvas{max-width:100%;border:1px solid var(--dt-line);border-radius:8px}
.dt-related .features-grid a.feature-item{text-decoration:none}
/* motion */
@media (prefers-reduced-motion:reduce){.dt-body *{animation:none!important;transition:none!important}}
/* responsive */
@media (max-width:768px){.container.dt-page{padding:0 .75rem 1.5rem}.intro h1{font-size:1.45rem}.download_form{padding:1rem}.dt-roulette{font-size:20px}.dt-nav .navbar-container{height:56px}}