/* [2026-07-30] 目的：建立 300 DPI 轉檔工具的響應式操作介面，清楚呈現原圖、印刷尺寸與輸出資訊。 */
:root{--ink:#17201d;--muted:#68736f;--paper:#f4f1e9;--card:#fffdf8;--line:#dcd8cc;--accent:#ef6b43;--accent-dark:#d9532d;--green:#1f6b55}
*{box-sizing:border-box}html{min-height:100%;background:var(--paper)}body{margin:0;color:var(--ink);background:radial-gradient(circle at 8% 2%,rgba(239,107,67,.13),transparent 28rem),radial-gradient(circle at 94% 24%,rgba(31,107,85,.11),transparent 32rem),var(--paper);font-family:"Noto Sans TC","Microsoft JhengHei",sans-serif}button,input{font:inherit}.dpi-page{width:min(1180px,calc(100% - 40px));margin:auto;padding-bottom:40px}.dpi-header{height:78px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(23,32,29,.15)}.dpi-brand{color:var(--ink);font-size:17px;font-weight:900;letter-spacing:.13em;text-decoration:none}.dpi-header-tag{color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.2em}.dpi-intro{display:grid;grid-template-columns:1fr auto;align-items:end;gap:40px;padding:56px 0 42px}.dpi-eyebrow{margin:0 0 13px;color:var(--accent-dark);font-size:12px;font-weight:900;letter-spacing:.18em}.dpi-intro h1{margin:0;font-size:clamp(40px,6vw,76px);line-height:.98;letter-spacing:-.055em}.dpi-intro h1 span{color:var(--green)}.dpi-lead{max-width:650px;margin:24px 0 0;color:var(--muted);font-size:16px;line-height:1.8}.dpi-formula{min-width:270px;padding:20px 22px;border:1px solid var(--line);border-radius:16px;background:rgba(255,253,248,.65)}.dpi-formula strong,.dpi-formula span{display:block}.dpi-formula strong{margin-bottom:7px;font-size:12px;letter-spacing:.1em}.dpi-formula span{color:var(--muted);font-size:13px}
.dpi-workspace{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(380px,.96fr);border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 24px 70px rgba(44,46,39,.09)}.dpi-panel{min-width:0;padding:30px;background:var(--card)}.dpi-settings-panel{border-left:1px solid var(--line);background:#fff}.dpi-step{display:flex;align-items:center;gap:10px;margin-bottom:22px;font-size:13px;font-weight:900;letter-spacing:.08em}.dpi-step span{display:grid;place-items:center;width:30px;height:30px;color:#fff;border-radius:50%;background:var(--ink);font-size:11px}.dpi-dropzone{min-height:390px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;text-align:center;border:1.5px dashed #b9b7ae;border-radius:18px;background:#f8f6f0;cursor:pointer;transition:.2s}.dpi-dropzone:hover,.dpi-dropzone.is-dragging{border-color:var(--accent);background:#fff5ed;transform:translateY(-2px)}.dpi-dropzone input{position:absolute;width:1px;height:1px;opacity:0}.dpi-upload-icon{display:grid;place-items:center;width:58px;height:58px;margin-bottom:18px;color:#fff;border-radius:18px;background:var(--accent);font-size:34px;box-shadow:0 12px 28px rgba(239,107,67,.25)}.dpi-dropzone strong{font-size:19px}.dpi-dropzone small{margin-top:10px;color:var(--muted);line-height:1.6}.dpi-preview-stage{height:320px;display:grid;place-items:center;padding:18px;border-radius:18px;overflow:hidden;background-color:#eeeae1;background-image:linear-gradient(45deg,#dedbd2 25%,transparent 25%),linear-gradient(-45deg,#dedbd2 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#dedbd2 75%),linear-gradient(-45deg,transparent 75%,#dedbd2 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}.dpi-preview-stage img{display:block;max-width:100%;max-height:100%;object-fit:contain}.dpi-file-meta{position:relative;padding:18px 96px 0 2px}.dpi-file-meta strong,.dpi-file-meta span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dpi-file-meta span{margin-top:5px;color:var(--muted);font-size:12px}.dpi-file-meta button{position:absolute;top:15px;right:0;padding:7px 11px;border:1px solid var(--line);border-radius:9px;background:#fff;cursor:pointer}
.dpi-dimension-grid{display:grid;grid-template-columns:1fr 60px 1fr;align-items:end;gap:10px}.dpi-dimension-grid label>span{display:block;margin:0 0 9px 3px;color:var(--muted);font-size:12px;font-weight:700}.dpi-input-unit{display:flex;align-items:center;height:58px;border:1px solid var(--line);border-radius:13px;overflow:hidden;background:var(--card)}.dpi-input-unit:focus-within{border-color:var(--green);box-shadow:0 0 0 3px rgba(31,107,85,.1)}.dpi-input-unit input{min-width:0;width:100%;height:100%;padding:0 4px 0 15px;border:0;outline:0;background:transparent;font-size:23px;font-weight:800}.dpi-input-unit em{padding-right:13px;color:var(--muted);font-size:12px;font-style:normal}.dpi-lock{height:58px;padding:4px;border:0;background:transparent;cursor:pointer}.dpi-lock span,.dpi-lock small{display:block}.dpi-lock span{font-size:19px;filter:grayscale(1);opacity:.45}.dpi-lock small{margin-top:3px;color:var(--muted);font-size:9px}.dpi-lock.is-locked span{filter:none;opacity:1}.dpi-summary{display:grid;grid-template-columns:1fr 1fr;margin-top:27px;border-top:1px solid var(--line);border-left:1px solid var(--line)}.dpi-summary div{min-height:83px;padding:16px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.dpi-summary span,.dpi-summary strong{display:block}.dpi-summary span{margin-bottom:8px;color:var(--muted);font-size:11px}.dpi-summary strong{font-size:14px}.dpi-notice{margin:22px 0 14px;padding:12px 14px;color:#5f625d;border-radius:10px;background:#f3f1eb;font-size:12px;line-height:1.55}.dpi-notice.is-warning{color:#8b401f;background:#fff0e5}.dpi-notice.is-good{color:#205d49;background:#e9f5ef}.dpi-convert{width:100%;min-height:68px;padding:12px;color:#fff;border:0;border-radius:14px;background:var(--accent);cursor:pointer;box-shadow:0 12px 28px rgba(239,107,67,.2);transition:.18s}.dpi-convert:hover:not(:disabled){background:var(--accent-dark);transform:translateY(-2px)}.dpi-convert:disabled{background:#b8b9b5;box-shadow:none;cursor:not-allowed}.dpi-convert span,.dpi-convert small{display:block}.dpi-convert span{font-size:16px;font-weight:900}.dpi-convert small{margin-top:4px;opacity:.76;font-size:10px}.dpi-progress{margin-top:16px}.dpi-progress>div{height:7px;overflow:hidden;border-radius:99px;background:#eceae4}.dpi-progress span{display:block;width:0;height:100%;background:var(--green)}.dpi-progress p{margin:8px 0 0;color:var(--muted);font-size:11px}.dpi-footer{padding:24px 4px 0;color:var(--muted);font-size:12px;line-height:1.7}.dpi-footer p{margin:0}
/* [2026-07-30] 目的：選圖後讓拖曳提示原地切換成完整圖片預覽，避免上下同時出現兩個大型區塊。 */
.dpi-dropzone[hidden],.dpi-preview[hidden]{display:none!important}
.dpi-preview-stage{height:390px;display:flex;align-items:center;justify-content:center}
.dpi-preview-stage img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
@media(max-width:820px){.dpi-page{width:min(100% - 24px,680px)}.dpi-intro{grid-template-columns:1fr;padding:40px 0 30px}.dpi-formula{min-width:0}.dpi-workspace{grid-template-columns:1fr}.dpi-settings-panel{border-top:1px solid var(--line);border-left:0}.dpi-dropzone{min-height:300px}}@media(max-width:480px){.dpi-panel{padding:22px 17px}.dpi-dimension-grid{grid-template-columns:1fr 42px 1fr}.dpi-input-unit input{padding-left:10px;font-size:19px}.dpi-summary div{padding:13px 11px}}