@import"https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap";:root{--bg-color: #121212;--surface-color: #1e1e1e;--primary-color: #005dd3;--primary-variant-color: #193450;--secondary-color: #589ed6;--text-color: #e0e0e0;--border-color: #333;--error-color: #cf6679}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Noto Sans JP,sans-serif;background:radial-gradient(125% 125% at 50% 0%,#000 40%,#010133);color:var(--text-color);display:flex;justify-content:center;align-items:flex-start;min-height:100vh;padding:2rem}textarea::-webkit-scrollbar{background:#2e2e2e;width:5px}textarea::-webkit-scrollbar-thumb{background-color:gray}.container{width:100%;max-width:1200px}header{text-align:center;margin-bottom:2rem}header h1{font-size:2.5rem;font-weight:400;color:var(--primary-color);margin-bottom:.5rem}header p{font-size:1.1rem;color:var(--text-color);opacity:.8}main{background-color:var(--surface-color);border-radius:12px;padding:2rem;box-shadow:0 10px 25px #0000004d}#drop-zone{border:3px dashed var(--border-color);border-radius:12px;padding:3rem;text-align:center;cursor:pointer;transition:background-color .3s,border-color .3s}#drop-zone.dragover{background-color:var(--primary-variant-color);border-color:var(--primary-color)}.drop-zone-prompt svg{color:var(--primary-color);margin-bottom:1rem}.drop-zone-prompt p{margin-bottom:1rem;font-size:1.2rem}.drop-zone-prompt .or-text{font-size:.9rem;opacity:.7;margin-bottom:1rem}#file-select-btn,#reset-btn{background-color:var(--primary-color);color:var(--text-color);border:none;border-radius:8px;padding:.8rem 1.5rem;font-size:1rem;font-weight:700;cursor:pointer;transition:background-color .3s}#file-select-btn:hover,#reset-btn:hover{background-color:var(--secondary-color)}.hidden{display:none!important}#result-area{display:flex;gap:2rem}.image-preview-wrapper{flex:1;min-width:300px}#preview-image{width:100%;height:auto;object-fit:contain;border-radius:8px;border:1px solid var(--border-color)}.metadata-display{flex:2;display:flex;flex-direction:column;gap:1.5rem}.metadata-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.metadata-item-grid label{display:block;margin-bottom:.5rem;font-weight:700;color:var(--secondary-color)}.input-wrapper{position:relative}.input-wrapper input{width:100%;background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:8px;padding:.8rem;color:var(--text-color);font-family:Noto Sans JP,monospace;font-size:.95rem}.input-wrapper input:focus{outline:none;border-color:var(--primary-color)}.metadata-item label{display:block;margin-bottom:.5rem;font-weight:700;color:var(--secondary-color)}.textarea-wrapper,.input-wrapper{position:relative}textarea,.input-wrapper input{width:100%;background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:8px;padding:.8rem;color:var(--text-color);font-family:Noto Sans JP,monospace;font-size:.95rem;resize:vertical}textarea:focus,.input-wrapper input:focus{outline:none;border-color:var(--primary-color)}.copy-btn{position:absolute;top:8px;right:8px;background:var(--surface-color);border:1px solid var(--border-color);color:var(--text-color);border-radius:6px;cursor:pointer;padding:.3rem;display:flex;align-items:center;justify-content:center;opacity:.7;transition:opacity .3s,background-color .3s}.copy-btn:hover{opacity:1;background-color:var(--bg-color)}.copy-btn.copied{color:var(--secondary-color)}#reset-btn{margin-top:.8rem;align-self:flex-end}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background-color:var(--surface-color);padding:2rem;border-radius:12px;box-shadow:0 5px 15px #00000080;position:relative;max-width:525px;width:90%;text-align:center;border:1px solid var(--border-color)}.modal-close-btn{position:absolute;top:10px;right:15px;background:none;border:none;color:var(--text-color);font-size:2rem;cursor:pointer;line-height:1}#error-modal-message{color:var(--error-color);font-size:1.1rem}@media(max-width:992px){#result-area{flex-direction:column}.image-preview-wrapper{max-width:500px;margin:0 auto}}@media(max-width:768px){body{padding:1rem}header h1{font-size:2rem}main{padding:1.5rem}#drop-zone{padding:2rem}}