diff --git a/vrc_meta_viewer.html b/vrc_meta_viewer.html
new file mode 100644
index 0000000..76f57f2
--- /dev/null
+++ b/vrc_meta_viewer.html
@@ -0,0 +1,831 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>VRC Meta Viewer</title>
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Outfit:wght@300;400;600;700&display=swap');
+
+  :root {
+    --bg: #0a0c14;
+    --panel: #0f1220;
+    --border: #1e2540;
+    --accent: #00e5ff;
+    --accent2: #7c3aed;
+    --accent3: #f472b6;
+    --text: #c9d4ef;
+    --muted: #4a5580;
+    --success: #10d98a;
+    --mono: 'Share Tech Mono', monospace;
+    --sans: 'Outfit', sans-serif;
+  }
+
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+
+  body {
+    background: var(--bg);
+    color: var(--text);
+    font-family: var(--sans);
+    min-height: 100vh;
+    overflow-x: hidden;
+  }
+
+  /* grid bg */
+  body::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    background-image:
+      linear-gradient(rgba(0,229,255,.03) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(0,229,255,.03) 1px, transparent 1px);
+    background-size: 40px 40px;
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  .wrap {
+    position: relative;
+    z-index: 1;
+    max-width: 960px;
+    margin: 0 auto;
+    padding: 48px 24px;
+  }
+
+  /* header */
+  header {
+    display: flex;
+    align-items: baseline;
+    gap: 16px;
+    margin-bottom: 40px;
+  }
+  .logo {
+    font-family: var(--mono);
+    font-size: 11px;
+    letter-spacing: .2em;
+    color: var(--accent);
+    text-transform: uppercase;
+    opacity: .7;
+  }
+  h1 {
+    font-size: 28px;
+    font-weight: 700;
+    letter-spacing: -.02em;
+    color: #fff;
+  }
+  h1 span { color: var(--accent); }
+
+  /* drop zone */
+  #dropzone {
+    border: 2px dashed var(--border);
+    border-radius: 16px;
+    padding: 64px 32px;
+    text-align: center;
+    cursor: pointer;
+    transition: border-color .2s, background .2s;
+    position: relative;
+    overflow: hidden;
+  }
+  #dropzone::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(ellipse at 50% 120%, rgba(0,229,255,.06) 0%, transparent 70%);
+    pointer-events: none;
+  }
+  #dropzone:hover, #dropzone.over {
+    border-color: var(--accent);
+    background: rgba(0,229,255,.03);
+  }
+  #dropzone .icon {
+    font-size: 48px;
+    margin-bottom: 16px;
+    opacity: .5;
+  }
+  #dropzone p {
+    color: var(--muted);
+    font-size: 15px;
+  }
+  #dropzone p strong {
+    color: var(--accent);
+    font-weight: 600;
+  }
+  #fileInput { display: none; }
+
+  /* results */
+  #results { display: none; margin-top: 40px; }
+
+  .preview-wrap {
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    gap: 24px;
+    margin-bottom: 32px;
+    align-items: start;
+  }
+  @media (max-width: 640px) {
+    .preview-wrap { grid-template-columns: 1fr; }
+  }
+
+  .preview-img {
+    border-radius: 12px;
+    overflow: hidden;
+    border: 1px solid var(--border);
+    position: relative;
+  }
+  .preview-img img {
+    width: 100%;
+    display: block;
+    max-height: 280px;
+    object-fit: cover;
+  }
+  .preview-badge {
+    position: absolute;
+    bottom: 10px;
+    left: 10px;
+    background: rgba(10,12,20,.85);
+    backdrop-filter: blur(8px);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 4px 10px;
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--accent);
+  }
+
+  .file-info {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+  .file-name {
+    font-size: 20px;
+    font-weight: 600;
+    color: #fff;
+    word-break: break-all;
+  }
+  .file-stats {
+    display: flex;
+    gap: 16px;
+    flex-wrap: wrap;
+  }
+  .stat-chip {
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 4px 12px;
+    font-family: var(--mono);
+    font-size: 12px;
+    color: var(--muted);
+  }
+  .stat-chip b { color: var(--text); }
+
+  /* section */
+  .section {
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    margin-bottom: 16px;
+    overflow: hidden;
+  }
+  .section-head {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 14px 20px;
+    cursor: pointer;
+    user-select: none;
+    border-bottom: 1px solid transparent;
+    transition: background .15s;
+  }
+  .section-head:hover { background: rgba(255,255,255,.02); }
+  .section-head.open { border-bottom-color: var(--border); }
+  .section-tag {
+    font-family: var(--mono);
+    font-size: 10px;
+    letter-spacing: .15em;
+    padding: 2px 8px;
+    border-radius: 4px;
+    text-transform: uppercase;
+  }
+  .tag-basic  { background: rgba(0,229,255,.15);  color: var(--accent);  }
+  .tag-exif   { background: rgba(124,58,237,.2);  color: #a78bfa; }
+  .tag-gps    { background: rgba(16,217,138,.15); color: var(--success); }
+  .tag_vrc    { background: rgba(244,114,182,.15);color: var(--accent3); }
+  .tag-iptc   { background: rgba(251,191,36,.15); color: #fbbf24; }
+  .tag-png    { background: rgba(99,102,241,.2);  color: #818cf8; }
+  .tag-raw    { background: rgba(75,85,99,.3);    color: #9ca3af; }
+  .tag-xmp    { background: rgba(234,179,8,.15);  color: #facc15; }
+
+  .section-title {
+    font-weight: 600;
+    font-size: 14px;
+    color: #fff;
+    flex: 1;
+  }
+  .section-count {
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--muted);
+  }
+  .chevron {
+    color: var(--muted);
+    transition: transform .2s;
+    font-size: 12px;
+  }
+  .chevron.open { transform: rotate(90deg); }
+
+  .section-body {
+    display: none;
+    padding: 0;
+  }
+  .section-body.open { display: block; }
+
+  table { width: 100%; border-collapse: collapse; }
+  tr { border-bottom: 1px solid rgba(30,37,64,.5); }
+  tr:last-child { border-bottom: none; }
+  tr:hover td { background: rgba(255,255,255,.015); }
+  td {
+    padding: 10px 20px;
+    font-size: 13px;
+    vertical-align: top;
+    line-height: 1.5;
+  }
+  td:first-child {
+    font-family: var(--mono);
+    font-size: 12px;
+    color: var(--muted);
+    width: 240px;
+    white-space: nowrap;
+  }
+  td:last-child {
+    color: var(--text);
+    word-break: break-all;
+  }
+  .highlight-val {
+    color: var(--accent);
+    font-weight: 600;
+  }
+
+  /* VRC section special */
+  .vrc-banner {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 16px 20px;
+    background: linear-gradient(90deg, rgba(244,114,182,.08), transparent);
+    border-bottom: 1px solid var(--border);
+  }
+  .vrc-dot {
+    width: 8px; height: 8px;
+    background: var(--accent3);
+    border-radius: 50%;
+    animation: pulse 2s infinite;
+  }
+  @keyframes pulse {
+    0%,100% { box-shadow: 0 0 0 0 rgba(244,114,182,.4); }
+    50%      { box-shadow: 0 0 0 6px rgba(244,114,182,0); }
+  }
+  .vrc-label { font-size: 13px; color: var(--accent3); font-weight: 600; }
+
+  /* no meta */
+  .empty-state {
+    padding: 24px 20px;
+    text-align: center;
+    color: var(--muted);
+    font-size: 13px;
+  }
+
+  /* reset btn */
+  .btn-reset {
+    margin-top: 32px;
+    background: transparent;
+    border: 1px solid var(--border);
+    color: var(--muted);
+    font-family: var(--sans);
+    font-size: 13px;
+    padding: 10px 24px;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: border-color .2s, color .2s;
+  }
+  .btn-reset:hover { border-color: var(--accent); color: var(--accent); }
+
+  /* copy */
+  .copy-all-wrap { text-align: right; padding: 0 20px 16px; }
+  .btn-copy {
+    background: transparent;
+    border: 1px solid var(--border);
+    color: var(--muted);
+    font-family: var(--mono);
+    font-size: 11px;
+    letter-spacing: .1em;
+    padding: 5px 14px;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all .2s;
+  }
+  .btn-copy:hover { border-color: var(--accent); color: var(--accent); }
+</style>
+</head>
+<body>
+<div class="wrap">
+  <header>
+    <span class="logo">// tool</span>
+    <h1>VRC <span>Meta</span> Viewer</h1>
+  </header>
+
+  <div id="dropzone" onclick="document.getElementById('fileInput').click()">
+    <input type="file" id="fileInput" accept="image/*">
+    <div class="icon">🖼️</div>
+    <p><strong>クリックして画像を選択</strong>　または　ドラッグ＆ドロップ</p>
+    <p style="margin-top:8px;font-size:12px;">PNG / JPEG / WebP / TIFF など対応</p>
+  </div>
+
+  <div id="results"></div>
+</div>
+
+<script>
+// ─── EXIF tag dictionaries ────────────────────────────────────────────
+const EXIF_TAGS = {
+  0x010E:'ImageDescription',0x010F:'Make',0x0110:'Model',0x0112:'Orientation',
+  0x011A:'XResolution',0x011B:'YResolution',0x0128:'ResolutionUnit',
+  0x0131:'Software',0x0132:'DateTime',0x013B:'Artist',
+  0x013E:'WhitePoint',0x013F:'PrimaryChromaticities',
+  0x0211:'YCbCrCoefficients',0x0213:'YCbCrPositioning',
+  0x0214:'ReferenceBlackWhite',0x8298:'Copyright',
+  0x8769:'ExifIFD',0x8825:'GPSIFD',
+  0x9000:'ExifVersion',0x9003:'DateTimeOriginal',0x9004:'DateTimeDigitized',
+  0x9101:'ComponentsConfiguration',0x9102:'CompressedBitsPerPixel',
+  0x9201:'ShutterSpeedValue',0x9202:'ApertureValue',0x9203:'BrightnessValue',
+  0x9204:'ExposureBiasValue',0x9205:'MaxApertureValue',0x9206:'SubjectDistance',
+  0x9207:'MeteringMode',0x9208:'LightSource',0x9209:'Flash',
+  0x920A:'FocalLength',0x9214:'SubjectArea',
+  0xA000:'FlashpixVersion',0xA001:'ColorSpace',0xA002:'PixelXDimension',
+  0xA003:'PixelYDimension',0xA005:'InteroperabilityIFD',
+  0xA20E:'FocalPlaneXResolution',0xA20F:'FocalPlaneYResolution',
+  0xA210:'FocalPlaneResolutionUnit',0xA214:'SubjectLocation',
+  0xA215:'ExposureIndex',0xA217:'SensingMethod',
+  0xA300:'FileSource',0xA301:'SceneType',0xA302:'CFAPattern',
+  0xA401:'CustomRendered',0xA402:'ExposureMode',0xA403:'WhiteBalance',
+  0xA404:'DigitalZoomRatio',0xA405:'FocalLengthIn35mmFilm',
+  0xA406:'SceneCaptureType',0xA407:'GainControl',0xA408:'Contrast',
+  0xA409:'Saturation',0xA40A:'Sharpness',0xA40B:'DeviceSettingDescription',
+  0xA40C:'SubjectDistanceRange',0xA420:'ImageUniqueID',
+  0xA430:'CameraOwnerName',0xA431:'BodySerialNumber',
+  0xA432:'LensSpecification',0xA433:'LensMake',0xA434:'LensModel',
+  0x0100:'ImageWidth',0x0101:'ImageLength',0x0102:'BitsPerSample',
+  0x0103:'Compression',0x0106:'PhotometricInterpretation',
+  0x0111:'StripOffsets',0x0115:'SamplesPerPixel',0x0116:'RowsPerStrip',
+  0x0117:'StripByteCounts',0x011C:'PlanarConfiguration',
+};
+const GPS_TAGS = {
+  0:'GPSVersionID',1:'GPSLatitudeRef',2:'GPSLatitude',3:'GPSLongitudeRef',
+  4:'GPSLongitude',5:'GPSAltitudeRef',6:'GPSAltitude',7:'GPSTimeStamp',
+  8:'GPSSatellites',9:'GPSStatus',10:'GPSMeasureMode',11:'GPSDOP',
+  12:'GPSSpeedRef',13:'GPSSpeed',14:'GPSTrackRef',15:'GPSTrack',
+  16:'GPSImgDirectionRef',17:'GPSImgDirection',18:'GPSMapDatum',
+  27:'GPSProcessingMethod',29:'GPSDateStamp',
+};
+const ORIENTATION_MAP = {1:'正常',2:'水平反転',3:'180°回転',4:'垂直反転',5:'90°右回転+水平反転',6:'90°右回転',7:'90°左回転+水平反転',8:'90°左回転'};
+const METERING_MAP  = {0:'不明',1:'平均',2:'中央重点',3:'スポット',4:'マルチスポット',5:'マルチパターン',6:'部分'};
+const FLASH_MAP     = {0:'発光なし',1:'発光',5:'発光(ストロボなし)',7:'発光(ストロボあり)',9:'強制発光',13:'強制発光(ストロボなし)',15:'強制発光(ストロボあり)',16:'発光禁止',24:'自動(発光なし)',25:'自動(発光)',29:'自動(発光、ストロボなし)',31:'自動(発光、ストロボあり)',32:'フラッシュなし',65:'赤目軽減',69:'赤目軽減(ストロボなし)',71:'赤目軽減(ストロボあり)',73:'強制発光+赤目軽減',77:'強制発光+赤目軽減(ストロボなし)',79:'強制発光+赤目軽減(ストロボあり)',89:'自動+赤目軽減',93:'自動+赤目軽減(ストロボなし)',95:'自動+赤目軽減(ストロボあり)'};
+const COLORSPACE_MAP= {1:'sRGB',65535:'未キャリブレーション'};
+const RESOLUTION_UNIT_MAP={1:'なし',2:'インチ',3:'センチメートル'};
+const EXPOSURE_MODE_MAP={0:'自動',1:'マニュアル',2:'自動ブラケット'};
+const WHITE_BALANCE_MAP={0:'自動',1:'マニュアル'};
+const SCENE_CAPTURE_MAP={0:'標準',1:'風景',2:'ポートレート',3:'夜景'};
+const LIGHT_SOURCE_MAP={0:'不明',1:'太陽光',2:'蛍光灯',3:'タングステン',4:'フラッシュ',9:'晴天',10:'曇天',11:'日陰',12:'昼光色蛍光灯',13:'昼白色蛍光灯',14:'白色蛍光灯',15:'白熱電球',255:'その他'};
+const SENSING_METHOD_MAP={1:'未定義',2:'1チップカラーエリアセンサ',3:'2チップカラーエリアセンサ',4:'3チップカラーエリアセンサ',5:'カラーシーケンシャルエリアセンサ',7:'トリリニアセンサ',8:'カラーシーケンシャルリニアセンサ'};
+
+// ─── VRC-specific EXIF & PNG keyword detection ───────────────────────
+const VRC_KEYS = ['vrc','vrchat','world','worldid','instanceid','author','photographerDisplayName'];
+
+function isVRCKey(k) {
+  const l = k.toLowerCase();
+  return VRC_KEYS.some(v => l.includes(v));
+}
+
+// ─── Drag & Drop ──────────────────────────────────────────────────────
+const dz = document.getElementById('dropzone');
+dz.addEventListener('dragover', e => { e.preventDefault(); dz.classList.add('over'); });
+dz.addEventListener('dragleave', () => dz.classList.remove('over'));
+dz.addEventListener('drop', e => { e.preventDefault(); dz.classList.remove('over'); handleFile(e.dataTransfer.files[0]); });
+document.getElementById('fileInput').addEventListener('change', e => handleFile(e.target.files[0]));
+
+function handleFile(file) {
+  if (!file) return;
+  const reader = new FileReader();
+  reader.onload = e => parse(file, e.target.result);
+  reader.readAsArrayBuffer(file);
+}
+
+// ─── Main parse ───────────────────────────────────────────────────────
+function parse(file, buf) {
+  const u8 = new Uint8Array(buf);
+  const result = {
+    basic: {
+      fileName: file.name,
+      fileSize: formatBytes(file.size),
+      fileType: file.type || '不明',
+      lastModified: new Date(file.lastModified).toLocaleString('ja-JP'),
+    },
+    exif: null,
+    gps: null,
+    iptc: null,
+    png: null,
+    vrc: [],
+    raw: [],
+    preview: null,
+  };
+
+  // preview
+  result.preview = URL.createObjectURL(file);
+
+  const sig2 = (u8[0] << 8) | u8[1];
+  const isPNG = u8[0]===137 && u8[1]===80 && u8[2]===78 && u8[3]===71;
+
+  if (sig2 === 0xFFD8) {
+    parseJPEG(u8, result);
+  } else if (isPNG) {
+    parsePNG(u8, result);
+  }
+
+  render(result, file);
+}
+
+// ─── JPEG parser ──────────────────────────────────────────────────────
+function parseJPEG(u8, result) {
+  let off = 2;
+  while (off < u8.length - 4) {
+    if (u8[off] !== 0xFF) break;
+    const marker = (u8[off] << 8) | u8[off+1];
+    const len    = (u8[off+2] << 8) | u8[off+3];
+    if (marker === 0xFFE1) {
+      const seg = u8.slice(off+4, off+2+len);
+      if (seg[0]===69&&seg[1]===120&&seg[2]===105&&seg[3]===102) {
+        readEXIF(seg.slice(6), result);
+      }
+      // XMP packet: "http://ns.adobe.com/xap/1.0/\0"
+      const xmpNs = [104,116,116,112,58,47,47,110,115,46,97,100,111,98,101,46,99,111,109,47,120,97,112,47,49,46,48,47,0];
+      if (xmpNs.every((b,i)=>seg[i]===b)) {
+        const xmpStr = new TextDecoder().decode(seg.slice(xmpNs.length));
+        readXMP(xmpStr, result);
+      }
+    }
+    if (marker === 0xFFED) {
+      const seg = u8.slice(off+4, off+2+len);
+      readIPTC(seg, result);
+    }
+    off += 2 + len;
+  }
+}
+
+// ─── EXIF reader ──────────────────────────────────────────────────────
+function readEXIF(data, result) {
+  const le = data[0]===0x49;
+  const r16 = o => le ? (data[o]|(data[o+1]<<8)) : ((data[o]<<8)|data[o+1]);
+  const r32 = o => le ? (data[o]|(data[o+1]<<8)|(data[o+2]<<16)|(data[o+3]<<24)) : ((data[o]<<24)|(data[o+1]<<16)|(data[o+2]<<8)|data[o+3]);
+
+  function readIFD(ifdOff, tagDict, target) {
+    if (ifdOff < 0 || ifdOff + 2 > data.length) return;
+    const count = r16(ifdOff);
+    for (let i = 0; i < count; i++) {
+      const off  = ifdOff + 2 + i * 12;
+      const tag  = r16(off);
+      const type = r16(off+2);
+      const num  = r32(off+4);
+      const name = tagDict[tag] || `Tag_0x${tag.toString(16).padStart(4,'0')}`;
+
+      // sub-IFD
+      if (tag === 0x8769 || tag === 0x8825) {
+        const subOff = r32(off+8);
+        readIFD(subOff, tag===0x8825?GPS_TAGS:EXIF_TAGS, tag===0x8825?(result.gps=result.gps||{}):(result.exif=result.exif||{}));
+        continue;
+      }
+
+      const val = readValue(data, r16, r32, type, num, off+8, le);
+      target[name] = val;
+      result.raw.push({tag:`0x${tag.toString(16).padStart(4,'0')}`, name, value: String(val)});
+      if (isVRCKey(name) || isVRCKey(String(val))) {
+        result.vrc.push({key: name, value: String(val)});
+      }
+    }
+  }
+
+  result.exif = {};
+  result.gps  = {};
+  const ifd0 = r32(4);
+  readIFD(ifd0, EXIF_TAGS, result.exif);
+}
+
+function readValue(data, r16, r32, type, count, valOff, le) {
+  const BYTE_SIZES = [0,1,1,2,4,8,1,1,2,4,8,4,8];
+  const totalBytes = (BYTE_SIZES[type]||1) * count;
+  let dataOff = valOff;
+  if (totalBytes > 4) dataOff = le ? (data[valOff]|(data[valOff+1]<<8)|(data[valOff+2]<<16)|(data[valOff+3]<<24)) : ((data[valOff]<<24)|(data[valOff+1]<<16)|(data[valOff+2]<<8)|data[valOff+3]);
+
+  if (type===2) { // ASCII
+    let s=''; for(let i=0;i<count-1;i++) s+=String.fromCharCode(data[dataOff+i]||0); return s;
+  }
+  if (type===5||type===10) { // Rational
+    const vals=[];
+    for(let i=0;i<Math.min(count,4);i++){
+      const n=le?(data[dataOff+i*8]|(data[dataOff+i*8+1]<<8)|(data[dataOff+i*8+2]<<16)|(data[dataOff+i*8+3]<<24)):((data[dataOff+i*8]<<24)|(data[dataOff+i*8+1]<<16)|(data[dataOff+i*8+2]<<8)|data[dataOff+i*8+3]);
+      const d=le?(data[dataOff+i*8+4]|(data[dataOff+i*8+5]<<8)|(data[dataOff+i*8+6]<<16)|(data[dataOff+i*8+7]<<24)):((data[dataOff+i*8+4]<<24)|(data[dataOff+i*8+5]<<16)|(data[dataOff+i*8+6]<<8)|data[dataOff+i*8+7]);
+      vals.push(d===0?n:(n/d).toFixed(4));
+    }
+    return vals.join(', ');
+  }
+  if (type===3) { // SHORT
+    const vals=[];
+    for(let i=0;i<Math.min(count,8);i++) vals.push(r16(dataOff+i*2));
+    return count===1?vals[0]:vals.join(', ');
+  }
+  if (type===4||type===9) { // LONG
+    return r32(dataOff);
+  }
+  if (type===1||type===7) { // BYTE/UNDEFINED
+    const vals=[];
+    for(let i=0;i<Math.min(count,16);i++) vals.push(data[dataOff+i]);
+    if(count>16) return '['+vals.join(',')+' ...]';
+    return '['+vals.join(',')+']';
+  }
+  return `[type=${type},count=${count}]`;
+}
+
+// ─── IPTC reader ──────────────────────────────────────────────────────
+const IPTC_TAGS = {5:'ObjectName',7:'EditStatus',10:'Urgency',15:'Category',20:'SupplementalCategories',22:'FixtureIdentifier',25:'Keywords',26:'ContentLocationCode',27:'ContentLocationName',30:'ReleaseDate',35:'ReleaseTime',37:'ExpirationDate',38:'ExpirationTime',40:'SpecialInstructions',55:'DateCreated',60:'TimeCreated',62:'DigitalCreationDate',63:'DigitalCreationTime',65:'OriginatingProgram',70:'ProgramVersion',80:'ByLine',85:'ByLineTitle',90:'City',92:'SubLocation',95:'Province',100:'CountryCode',101:'Country',103:'OriginalTransmissionReference',105:'Headline',110:'Credit',115:'Source',116:'Copyright',118:'Contact',120:'Caption',122:'Writer'};
+
+function readIPTC(seg, result) {
+  result.iptc = {};
+  let i=0;
+  while(i<seg.length-4){
+    if(seg[i]===0x1C&&seg[i+1]===0x02){
+      const tag=seg[i+2];
+      const len=(seg[i+3]<<8)|seg[i+4];
+      const val=Array.from(seg.slice(i+5,i+5+len)).map(c=>String.fromCharCode(c)).join('');
+      const name=IPTC_TAGS[tag]||`IPTC_${tag}`;
+      result.iptc[name]=val;
+      if(isVRCKey(name)||isVRCKey(val)) result.vrc.push({key:name,value:val});
+      i+=5+len;
+    } else i++;
+  }
+}
+
+// ─── XMP parser ───────────────────────────────────────────────────────
+function readXMP(xmlStr, result) {
+  result.xmp = {};
+  // Use DOMParser to parse the XMP XML
+  let doc;
+  try {
+    doc = new DOMParser().parseFromString(xmlStr, 'text/xml');
+  } catch(e) { return; }
+
+  // Friendly label map for known namespaces
+  const NS_LABELS = {
+    'http://ns.adobe.com/xap/1.0/': 'xmp',
+    'http://ns.vrchat.com/vrc/1.0/': 'vrc',
+    'http://purl.org/dc/elements/1.1/': 'dc',
+    'http://ns.adobe.com/tiff/1.0/': 'tiff',
+    'http://ns.adobe.com/exif/1.0/': 'exif',
+    'http://ns.adobe.com/photoshop/1.0/': 'photoshop',
+    'http://ns.adobe.com/xap/1.0/rights/': 'xmpRights',
+  };
+
+  function nsLabel(uri) {
+    return NS_LABELS[uri] || uri.split('/').filter(Boolean).pop() || uri;
+  }
+
+  function extractText(el) {
+    // rdf:Alt / rdf:Seq / rdf:Bag -> join li items
+    const li = el.querySelectorAll('li');
+    if (li.length) return Array.from(li).map(l=>l.textContent.trim()).filter(Boolean).join(', ');
+    return el.textContent.trim();
+  }
+
+  const descs = doc.querySelectorAll('Description');
+  descs.forEach(desc => {
+    Array.from(desc.children).forEach(child => {
+      const ns = nsLabel(child.namespaceURI || '');
+      const local = child.localName;
+      const key = ns ? `${ns}:${local}` : local;
+      const val = extractText(child);
+      if (!val) return;
+      result.xmp[key] = val;
+      result.raw.push({tag:'XMP', name:key, value:val});
+      if (isVRCKey(key) || isVRCKey(val)) {
+        // avoid duplicates
+        if (!result.vrc.find(v=>v.key===key)) {
+          result.vrc.push({key, value: val});
+        }
+      }
+    });
+  });
+}
+
+// ─── PNG parser ───────────────────────────────────────────────────────
+function parsePNG(u8, result) {
+  result.png = {};
+  let off=8;
+  while(off<u8.length-8){
+    const len=(u8[off]<<24)|(u8[off+1]<<16)|(u8[off+2]<<8)|u8[off+3];
+    const type=String.fromCharCode(u8[off+4],u8[off+5],u8[off+6],u8[off+7]);
+    if(type==='IHDR'){
+      result.png['Width'] =((u8[off+8]<<24)|(u8[off+9]<<16)|(u8[off+10]<<8)|u8[off+11])+'px';
+      result.png['Height']=((u8[off+12]<<24)|(u8[off+13]<<16)|(u8[off+14]<<8)|u8[off+15])+'px';
+      result.png['BitDepth']=u8[off+16];
+      const colorTypeMap={0:'グレースケール',2:'RGB',3:'インデックス',4:'グレースケール+α',6:'RGBA'};
+      result.png['ColorType']=colorTypeMap[u8[off+17]]||u8[off+17];
+      result.png['Interlace']=u8[off+20]?'あり（Adam7）':'なし';
+    }
+    if(type==='tEXt'||type==='iTXt'||type==='zTXt'){
+      const chunk=u8.slice(off+8,off+8+len);
+      let nullIdx=chunk.indexOf(0);
+      if(nullIdx>0){
+        const key=String.fromCharCode(...chunk.slice(0,nullIdx));
+        let valStart=nullIdx+1;
+        if(type==='iTXt') valStart=nullIdx+4; // skip flags/encoding
+        const val=new TextDecoder().decode(chunk.slice(valStart));
+        result.png[key]=val;
+        if(isVRCKey(key)||isVRCKey(val)) result.vrc.push({key,value:val});
+        result.raw.push({tag:type,name:key,value:val});
+        // XMP embedded in PNG tEXt/iTXt with key "XML:com.adobe.xmp"
+        if(key==='XML:com.adobe.xmp'||key==='xmp') readXMP(val, result);
+      }
+    }
+    if(type==='eXIf'){
+      readEXIF(u8.slice(off+8,off+8+len), result);
+    }
+    if(type==='IEND') break;
+    off+=12+len;
+  }
+}
+
+// ─── Helpers ──────────────────────────────────────────────────────────
+function formatBytes(b){const u=['B','KB','MB','GB'];let i=0;while(b>=1024&&i<3){b/=1024;i++;}return b.toFixed(1)+' '+u[i];}
+
+function humanize(key, val) {
+  const n=Number(val);
+  if(key==='Orientation' && ORIENTATION_MAP[n]) return ORIENTATION_MAP[n];
+  if(key==='MeteringMode'&& METERING_MAP[n]) return METERING_MAP[n];
+  if(key==='Flash'       && FLASH_MAP[n])    return FLASH_MAP[n];
+  if(key==='ColorSpace'  && COLORSPACE_MAP[n])return COLORSPACE_MAP[n];
+  if(key==='ResolutionUnit'&&RESOLUTION_UNIT_MAP[n])return RESOLUTION_UNIT_MAP[n];
+  if(key==='ExposureMode'&&EXPOSURE_MODE_MAP[n])return EXPOSURE_MODE_MAP[n];
+  if(key==='WhiteBalance'&&WHITE_BALANCE_MAP[n])return WHITE_BALANCE_MAP[n];
+  if(key==='SceneCaptureType'&&SCENE_CAPTURE_MAP[n])return SCENE_CAPTURE_MAP[n];
+  if(key==='LightSource' &&LIGHT_SOURCE_MAP[n])return LIGHT_SOURCE_MAP[n];
+  if(key==='SensingMethod'&&SENSING_METHOD_MAP[n])return SENSING_METHOD_MAP[n];
+  return val;
+}
+
+// ─── Render ───────────────────────────────────────────────────────────
+function render(result, file) {
+  const el = document.getElementById('results');
+  el.style.display='block';
+  dz.style.display='none';
+
+  let allText = '';
+  const sections=[];
+
+  // Build allText helper
+  function addToAll(label, rows){
+    allText+=`\n=== ${label} ===\n`;
+    rows.forEach(r=>allText+=`${r[0]}: ${r[1]}\n`);
+  }
+
+  // — Basic info
+  const basicRows=[
+    ['ファイル名',result.basic.fileName],
+    ['ファイルサイズ',result.basic.fileSize],
+    ['MIMEタイプ',result.basic.fileType],
+    ['最終更新日時',result.basic.lastModified],
+  ];
+  addToAll('基本情報',basicRows);
+  sections.push({tag:'tag-basic',label:'基本情報',tagLabel:'BASIC',rows:basicRows,isVRC:false});
+
+  // — VRC
+  if(result.vrc && result.vrc.length>0){
+    const vrcRows = result.vrc.map(v=>[v.key,v.value]);
+    addToAll('VRChat メタデータ',vrcRows);
+    sections.push({tag:'tag_vrc',label:'VRChat メタデータ',tagLabel:'VRC',rows:vrcRows,isVRC:true,open:true});
+  }
+
+  // — XMP
+  if(result.xmp && Object.keys(result.xmp).length>0){
+    const rows=Object.entries(result.xmp).map(([k,v])=>[k,v]);
+    addToAll('XMP',rows);
+    sections.push({tag:'tag-xmp',label:'XMP メタデータ',tagLabel:'XMP',rows,open:true});
+  }
+
+  // — EXIF
+  if(result.exif && Object.keys(result.exif).length>0){
+    const rows=Object.entries(result.exif).map(([k,v])=>[k, humanize(k,v)]);
+    addToAll('EXIF',rows);
+    sections.push({tag:'tag-exif',label:'EXIF データ',tagLabel:'EXIF',rows,open:true});
+  }
+
+  // — GPS
+  if(result.gps && Object.keys(result.gps).length>0){
+    const rows=Object.entries(result.gps).map(([k,v])=>[k,v]);
+    addToAll('GPS',rows);
+    sections.push({tag:'tag-gps',label:'GPS 情報',tagLabel:'GPS',rows,open:true});
+  }
+
+  // — PNG
+  if(result.png && Object.keys(result.png).length>0){
+    const rows=Object.entries(result.png).map(([k,v])=>[k,v]);
+    addToAll('PNG チャンク',rows);
+    sections.push({tag:'tag-png',label:'PNG チャンク',tagLabel:'PNG',rows,open:false});
+  }
+
+  // — IPTC
+  if(result.iptc && Object.keys(result.iptc).length>0){
+    const rows=Object.entries(result.iptc).map(([k,v])=>[k,v]);
+    addToAll('IPTC',rows);
+    sections.push({tag:'tag-iptc',label:'IPTC データ',tagLabel:'IPTC',rows,open:false});
+  }
+
+  // — Raw (all tags)
+  if(result.raw && result.raw.length>0){
+    const rows=result.raw.map(r=>[`${r.tag} ${r.name}`,r.value]);
+    addToAll('全タグ(Raw)',rows);
+    sections.push({tag:'tag-raw',label:`全タグ (Raw) — ${result.raw.length} 件`,tagLabel:'RAW',rows,open:false});
+  }
+
+  // render HTML
+  let html=`
+  <div class="preview-wrap">
+    <div class="preview-img">
+      <img src="${result.preview}" alt="preview">
+      <div class="preview-badge">${result.basic.fileType}</div>
+    </div>
+    <div class="file-info">
+      <div class="file-name">${escHtml(result.basic.fileName)}</div>
+      <div class="file-stats">
+        <div class="stat-chip"><b>${result.basic.fileSize}</b></div>
+        <div class="stat-chip">更新: <b>${result.basic.lastModified}</b></div>
+        ${result.vrc&&result.vrc.length>0?`<div class="stat-chip" style="border-color:rgba(244,114,182,.4);color:var(--accent3)">⚡ VRC メタデータあり</div>`:''}
+      </div>
+      <div class="copy-all-wrap" style="text-align:left;padding:0">
+        <button class="btn-copy" onclick="copyAll()">📋 全データをコピー</button>
+      </div>
+    </div>
+  </div>`;
+
+  sections.forEach((sec,idx)=>{
+    const isOpen = sec.open !== false;
+    html+=`<div class="section">
+      <div class="section-head ${isOpen?'open':''}" onclick="toggleSec(${idx})">
+        <span class="section-tag ${sec.tag}">${sec.tagLabel}</span>
+        <span class="section-title">${sec.label}</span>
+        <span class="section-count">${sec.rows.length} 件</span>
+        <span class="chevron ${isOpen?'open':''}">▶</span>
+      </div>`;
+    if(sec.isVRC) html+=`<div class="vrc-banner"><div class="vrc-dot"></div><span class="vrc-label">VRChat 関連メタデータを検出</span></div>`;
+    html+=`<div class="section-body ${isOpen?'open':''}"><table>`;
+    sec.rows.forEach(([k,v])=>{
+      const isVRCRow=isVRCKey(k)||isVRCKey(String(v));
+      html+=`<tr><td>${escHtml(k)}</td><td class="${isVRCRow?'highlight-val':''}">${escHtml(String(v))}</td></tr>`;
+    });
+    html+=`</table></div></div>`;
+  });
+
+  if(sections.length<=1){
+    html+=`<div class="section"><div class="empty-state">⚠️ この画像にはメタデータが含まれていないか、対応フォーマット外です</div></div>`;
+  }
+
+  html+=`<button class="btn-reset" onclick="reset()">↩ 別の画像を選択</button>`;
+  el.innerHTML=html;
+
+  window._allText=allText;
+}
+
+window.toggleSec=function(idx){
+  const heads=document.querySelectorAll('.section-head');
+  const bodies=document.querySelectorAll('.section-body');
+  const chevrons=document.querySelectorAll('.chevron');
+  const h=heads[idx],b=bodies[idx],c=chevrons[idx];
+  const open=b.classList.toggle('open');
+  h.classList.toggle('open',open);
+  c.classList.toggle('open',open);
+};
+window.copyAll=function(){
+  navigator.clipboard.writeText(window._allText||'').then(()=>{
+    const btn=document.querySelector('.btn-copy');
+    const orig=btn.textContent;
+    btn.textContent='✅ コピーしました';
+    setTimeout(()=>btn.textContent=orig,2000);
+  });
+};
+window.reset=function(){
+  document.getElementById('results').style.display='none';
+  document.getElementById('results').innerHTML='';
+  document.getElementById('dropzone').style.display='block';
+  document.getElementById('fileInput').value='';
+};
+
+function escHtml(s){return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');}
+</script>
+</body>
+</html>
