/*
Theme Name: 画像とファイルの道具箱
Version: 0.1.0
Requires PHP: 8.1
License: GPL-2.0-or-later
*/
:root{--ink:#162b39;--muted:#526879;--blue:#075bd3;--line:#d6e2ea;--paper:#fff;--wash:#f1f6fa;--mint:#cefae9;--radius:12px;font-family:Arial,"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;color:var(--ink);background:var(--wash);font-size:16px}*{box-sizing:border-box}body{margin:0;line-height:1.8}a{color:var(--blue);text-underline-offset:4px}button,input,select,textarea{font:inherit}button,a,input,select,summary{touch-action:manipulation}button{cursor:pointer;border:1px solid var(--blue);background:var(--blue);color:white;padding:12px 19px;border-radius:7px;font-weight:bold}button:disabled{cursor:not-allowed;background:#e4ebf0;border-color:#d6e0e7;color:#657684}button.secondary{background:#fff;color:var(--blue)}button:disabled.secondary{color:#657684}button.text-button{border-color:transparent;background:none;color:var(--muted);font-weight:normal}button:hover:not(:disabled){filter:brightness(.94)}:focus-visible{outline:3px solid #ea8a10;outline-offset:3px}input,select{width:100%;padding:10px 12px;border:1px solid #b7c8d5;border-radius:6px;color:var(--ink);background:white;min-width:0}label{font-size:.9rem;font-weight:700}small,.hint{font-size:.875rem;color:var(--muted)}.shell{max-width:1240px;margin:auto;padding:0 36px}.site-header{background:var(--paper);border-bottom:1px solid var(--line)}.header-row{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:84px}.brand{color:var(--ink);text-decoration:none;font-weight:800;font-size:1.15rem;display:flex;align-items:center;gap:12px}.brand-mark{background:var(--ink);color:white;font:700 18px/1 Arial;padding:12px;border-radius:7px}nav{display:flex;gap:28px}nav a{text-decoration:none;color:var(--ink);font-size:.9rem}.intro{display:flex;justify-content:space-between;gap:36px;align-items:end;padding:46px 0 32px}.eyebrow{font-size:.75rem;font-weight:800;letter-spacing:.13em;margin:0 0 8px;color:var(--blue)}h1{font-size:clamp(1.8rem,3vw,2.7rem);line-height:1.45;letter-spacing:-.03em;margin:0 0 10px}h2{font-size:1.3rem;line-height:1.6;margin:0}h3{font-size:1.1rem}.intro p{margin:0;color:var(--muted)}.privacy-tag{background:var(--mint);padding:11px 16px;border-radius:6px;white-space:nowrap;font-size:.875rem;font-weight:bold}.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}.tool-panel{background:white;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:0 3px 0 #dce7ef50}.panel-title{display:flex;gap:16px;align-items:center}.tool-number{font-size:1.6rem;font-weight:700;color:#62839d;border-right:1px solid var(--line);padding-right:16px}.panel-title .eyebrow{margin:0}.tool-panel>p:first-of-type{min-height:3.6em;font-size:.94rem;color:var(--muted)}.file-picker{display:block;background:#f4f8fc;border:1px dashed #a9bfd1;padding:19px;border-radius:8px;color:var(--blue)}.file-picker input{margin:10px 0;background:white;font-size:.875rem;padding:6px;color:var(--ink)}.file-picker small{display:block;font-weight:400}.fields{display:grid;grid-template-columns:1fr 1fr;gap:17px;margin-top:24px}.fields label input,.fields label select{margin-top:6px}.hint{margin:14px 0 20px;line-height:1.8}.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.actions button{font-size:.9rem;padding:11px 14px}.result{padding:13px 15px;background:#f0f5fa;border-left:3px solid var(--blue);font-size:.875rem;overflow-wrap:anywhere}.image-preview{display:block;max-width:100%;max-height:340px;object-fit:contain;background:repeating-conic-gradient(#edf0f3 0% 25%,white 0% 50%) 50%/20px 20px;margin:20px auto}.image-preview[hidden]{display:none}.table-scroll{max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:6px;margin:20px 0}table{border-collapse:collapse;width:100%;font-size:.875rem;table-layout:fixed}th,td{text-align:left;padding:11px;overflow-wrap:anywhere;border-bottom:1px solid var(--line)}th{background:#f4f8fb;font-weight:700}tbody:empty:after{content:'選択したファイルがここに並びます';display:block;padding:24px;color:var(--muted);width:230px}details{border-top:1px solid var(--line);font-size:.875rem;padding-top:13px;margin-top:20px}summary{cursor:pointer;font-weight:bold}details p{color:var(--muted)}.guides{padding:48px 0}.section-head{display:flex;align-items:baseline;gap:20px;margin-bottom:20px}.section-head p{font-size:.875rem;color:var(--muted);margin:0}.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.guide-card{background:white;border:1px solid var(--line);border-radius:9px;padding:22px}.guide-card a{font-size:1.05rem;font-weight:bold;text-decoration:none;color:var(--ink)}.guide-card p{font-size:.9rem;color:var(--muted);margin:12px 0 0}.guide-card .eyebrow{font-size:.75rem;color:var(--blue);margin:0 0 9px}.site-footer{border-top:1px solid var(--line);background:white;margin-top:24px;padding:30px 0}.footer-row{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}.footer-links{display:flex;gap:18px;flex-wrap:wrap}.footer-links a,.site-footer p{font-size:.8rem;color:var(--muted)}.site-footer p{margin:8px 0}.article{max-width:820px;margin:40px auto;background:white;border:1px solid var(--line);padding:40px;border-radius:12px}.article h2{margin-top:32px}.article li{margin:8px 0}.article .meta{color:var(--muted);font-size:.875rem}.article blockquote{margin:20px 0;padding:14px 22px;background:var(--wash);border-left:3px solid var(--blue)}.article img{max-width:100%;height:auto}.skip{position:absolute;left:-9999px}.skip:focus{left:20px;top:10px;background:#fff;padding:10px;z-index:99}@media(max-width:900px){.tool-grid{grid-template-columns:1fr}.intro{align-items:start;flex-direction:column;gap:16px}.tool-panel>p:first-of-type{min-height:0}.guide-grid{grid-template-columns:1fr}.header-row{gap:16px}.shell{padding:0 22px}nav{gap:16px}.intro{padding-top:30px}.article{padding:26px}}@media(max-width:480px){.brand{font-size:.94rem;gap:8px}.brand-mark{padding:9px;font-size:15px}.header-row{align-items:start;flex-direction:column;padding:16px 0;gap:10px}.tool-panel{padding:20px}.shell{padding:0 15px}.fields{grid-template-columns:1fr}.privacy-tag{white-space:normal}.section-head{display:block}.article{padding:20px}.actions button{flex-grow:1}}@media(prefers-reduced-motion:no-preference){button{transition:filter .15s}}
