/* my sorato: 白、細線、広い余白。置く→選ぶ→保存するための一本の作業レーン。 */
:root { --ink:#1e2a32; --ink-soft:#55636a; --muted:#8c979c; --line:#dde3e5; --line-strong:#cbd4d6; --paper:#fff; --quiet:#f8fafa; --accent:#4c7c78; --accent-dark:#39645f; --accent-wash:#edf5f3; --danger:#b14b4b; --radius:12px; --ease-out:cubic-bezier(.23,1,.32,1); }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { background:var(--paper); }
body { min-width:320px; margin:0; color:var(--ink); background:var(--paper); font-family:"Noto Sans JP",ui-sans-serif,system-ui,sans-serif; font-size:14px; line-height:1.65; -webkit-font-smoothing:antialiased; }
button,input,select { font:inherit; }
button:not(:disabled),label,select,input[type="range"],.drop-zone { cursor:pointer; }
button:disabled { cursor:wait; }
.site-header { width:min(100% - 40px,980px); height:72px; display:flex; align-items:center; justify-content:space-between; margin:0 auto; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:7px; color:var(--ink); font-size:15px; font-weight:700; letter-spacing:-.045em; text-decoration:none; }
.brand-mark { width:22px; height:22px; display:grid; place-items:center; color:var(--accent); }
.brand-mark svg { width:19px; height:19px; }
.header-label { color:var(--muted); font-size:12px; font-weight:500; }
.page-shell { width:min(100% - 40px,760px); margin:0 auto; padding:76px 0 52px; }
.intro { margin-bottom:46px; }
.eyebrow { margin:0 0 10px; color:var(--accent); font-size:11px; font-weight:700; letter-spacing:.13em; }
h1 { margin:0; font-size:clamp(27px,5vw,36px); font-weight:700; letter-spacing:-.045em; line-height:1.3; }
.intro > p:not(.eyebrow) { margin:16px 0 0; color:var(--ink-soft); line-height:1.9; }
.mobile-break { display:none; }
.tool-surface { border-top:1px solid var(--line-strong); }
.settings { position:relative; border-bottom:1px solid var(--line); }
.settings::before { content:"01  形式を選ぶ"; position:absolute; top:8px; left:0; color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:9px; letter-spacing:.04em; }
.settings::after { content:""; position:absolute; bottom:-29px; left:58px; height:29px; border-left:1px solid var(--line-strong); }
.setting-row { min-height:69px; display:grid; grid-template-columns:104px minmax(0,1fr); align-items:center; gap:20px; border-bottom:1px solid var(--line); }
.setting-row:last-child { border-bottom:0; }
.setting-label { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--ink-soft); font-size:13px; font-weight:500; }
.setting-label output { color:var(--accent); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; font-weight:600; }
.format-control { display:inline-grid; grid-template-columns:repeat(3,minmax(0,100px)); width:fit-content; overflow:hidden; border:1px solid var(--line-strong); border-radius:5px; }
.format-control input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.format-control label { padding:8px 14px; color:var(--ink-soft); border-right:1px solid var(--line-strong); font-size:12px; font-weight:600; text-align:center; transition:color .16s var(--ease-out),background-color .16s var(--ease-out); }
.format-control label:last-child { border-right:0; }
.format-control input:checked + label { color:#fff; background:var(--accent); }
.format-control input:focus-visible + label { outline:2px solid var(--ink); outline-offset:-2px; }
.range-wrap { display:grid; grid-template-columns:25px minmax(100px,280px) 28px; align-items:center; gap:9px; color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px; }
input[type="range"] { width:100%; height:18px; margin:0; appearance:none; background:transparent; }
input[type="range"]::-webkit-slider-runnable-track { height:3px; background:linear-gradient(to right,var(--accent) 0%,var(--accent) var(--range-fill,88.9%),var(--line-strong) var(--range-fill,88.9%),var(--line-strong) 100%); }
input[type="range"]::-webkit-slider-thumb { width:12px; height:12px; margin-top:-4.5px; appearance:none; border:2px solid var(--paper); border-radius:50%; background:var(--accent); box-shadow:0 0 0 1px var(--accent); }
input[type="range"]::-moz-range-track { height:3px; background:var(--line-strong); }
input[type="range"]::-moz-range-progress { height:3px; background:var(--accent); }
input[type="range"]::-moz-range-thumb { width:9px; height:9px; border:2px solid var(--paper); border-radius:50%; background:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.drop-zone { position:relative; min-height:188px; display:flex; flex-direction:column; align-items:center; justify-content:center; margin:28px 0 22px; border:1px dashed var(--line-strong); border-radius:var(--radius); color:var(--ink-soft); background:var(--quiet); outline:0; transition:background-color .18s var(--ease-out),border-color .18s var(--ease-out),transform .18s var(--ease-out); }
.drop-zone::before { content:"02  画像を置く"; position:absolute; top:-21px; left:0; color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:9px; letter-spacing:.04em; }
.drop-zone:hover,.drop-zone:focus-visible,.drop-zone.is-dragover { border-color:var(--accent); background:var(--accent-wash); }
.drop-zone.is-dragover { transform:translateY(-1px); }
.drop-zone input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.drop-icon { width:30px; height:30px; margin-bottom:9px; color:var(--accent); }
.drop-zone p { margin:0; color:var(--ink); font-size:15px; font-weight:600; }
.drop-zone span { margin-top:3px; color:var(--muted); font-size:12px; }
.queue-toolbar,.bulk-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 0 14px; border-bottom:1px solid var(--line); }
.queue-toolbar p,.bulk-bar p { margin:0; color:var(--ink-soft); font-size:12px; }
.toolbar-actions { display:flex; flex-wrap:wrap; gap:8px; }
.button { min-height:35px; padding:7px 13px; border:1px solid transparent; border-radius:7px; font-size:12px; font-weight:600; line-height:1.25; transition:transform .14s var(--ease-out),background-color .14s var(--ease-out),border-color .14s var(--ease-out),color .14s var(--ease-out); }
.button:active:not(:disabled) { transform:scale(.97); }
.button:focus-visible,.icon-button:focus-visible,.row-select:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.button-primary { color:#fff; background:var(--accent); }
.button-primary:hover:not(:disabled) { background:var(--accent-dark); }
.button-quiet { color:var(--ink-soft); border-color:var(--line-strong); background:#fff; }
.button-quiet:hover:not(:disabled) { color:var(--ink); border-color:var(--ink-soft); }
.button:disabled { opacity:.52; }
.empty-state { display:flex; flex-direction:column; gap:8px; padding:0 0 28px; color:var(--muted); font-size:12px; text-align:center; }
.sample-conversion { display:inline-flex; align-self:center; align-items:center; gap:6px; color:var(--line-strong); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:9px; }
.sample-conversion b { color:var(--muted); font-weight:500; }.sample-conversion i { font-family:sans-serif; font-style:normal; }.sample-conversion em { margin-left:4px; color:var(--accent); font-family:"Noto Sans JP",sans-serif; font-style:normal; font-weight:600; }
.file-list { margin:0; padding:0; list-style:none; }
.file-row { display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:13px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); animation:reveal .2s var(--ease-out) both; }
.file-row.is-processing { opacity:.72; }
.thumb { width:44px; height:44px; display:grid; place-items:center; overflow:hidden; border:1px solid var(--line); border-radius:7px; background:repeating-conic-gradient(#edf1f1 0% 25%,#fff 0% 50%) 50%/11px 11px; }
.thumb img { width:100%; height:100%; object-fit:cover; }.thumb .file-type { color:var(--ink-soft); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:9px; font-weight:700; }
.file-info { min-width:0; }.file-name { overflow:hidden; margin:0; color:var(--ink); font-size:13px; font-weight:600; line-height:1.4; text-overflow:ellipsis; white-space:nowrap; }
.file-meta { display:flex; flex-wrap:wrap; gap:5px 8px; align-items:center; margin-top:4px; color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px; line-height:1.4; }.meta-arrow { color:var(--line-strong); font-family:sans-serif; }.file-error { color:var(--danger); font-family:"Noto Sans JP",sans-serif; }.saving { color:var(--accent); font-family:"Noto Sans JP",sans-serif; font-weight:700; }
.file-actions { display:flex; align-items:center; gap:7px; }.row-select { height:32px; max-width:76px; padding:0 23px 0 7px; border:1px solid var(--line-strong); border-radius:5px; color:var(--ink-soft); background-color:#fff; background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%); background-position:calc(100% - 12px) 13px,calc(100% - 8px) 13px; background-size:4px 4px,4px 4px; background-repeat:no-repeat; appearance:none; font-size:10px; font-weight:600; }
.icon-button { width:32px; height:32px; display:grid; place-items:center; padding:0; border:1px solid var(--line-strong); border-radius:50%; color:var(--ink-soft); background:#fff; transition:color .15s var(--ease-out),border-color .15s var(--ease-out),transform .15s var(--ease-out); }.icon-button:hover:not(:disabled) { color:var(--accent); border-color:var(--accent); }.icon-button:active:not(:disabled) { transform:scale(.94); }.icon-button svg { width:15px; height:15px; }
.row-download { min-width:67px; height:32px; padding:0 10px; font-size:11px; }.spinner { width:15px; height:15px; border:1.5px solid var(--line-strong); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; }
.bulk-bar { margin-top:21px; padding:15px 0 0; border-top:1px solid var(--line); border-bottom:0; }.notice { min-height:20px; margin:18px 0 0; color:var(--ink-soft); font-size:12px; text-align:center; }.notice.is-error { color:var(--danger); }
.site-footer { width:min(100% - 40px,980px); display:flex; justify-content:space-between; gap:12px; margin:0 auto; padding:21px 0 29px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }.site-footer a { color:inherit; text-decoration:none; }.site-footer a:hover { color:var(--accent); }
@keyframes reveal { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:translateY(0); } }@keyframes spin { to { transform:rotate(360deg); } }
@media (max-width:620px) { .site-header{width:min(100% - 32px,980px);height:62px}.header-label{font-size:11px}.page-shell{width:min(100% - 32px,760px);padding:49px 0 40px}.intro{margin-bottom:36px}.intro>p:not(.eyebrow){margin-top:13px;font-size:13px}.mobile-break{display:inline}.settings::after{left:24px}.settings::before{top:5px}.setting-row{min-height:auto;grid-template-columns:1fr;gap:8px;align-items:start;padding:15px 0}.setting-label{justify-content:flex-start}.format-control{width:100%;grid-template-columns:repeat(3,1fr)}.format-control label{padding:8px 7px}.range-wrap{width:100%;max-width:none;grid-template-columns:20px minmax(80px,1fr) 24px}.drop-zone{min-height:169px;margin:22px 0 18px}.queue-toolbar,.bulk-bar{align-items:flex-start;flex-direction:column;gap:10px}.toolbar-actions,.toolbar-actions .button,.bulk-bar .button{width:100%}.file-row{grid-template-columns:38px minmax(0,1fr) auto;gap:10px}.thumb{width:38px;height:38px}.file-actions{align-self:stretch;flex-direction:column;justify-content:center}.row-select{width:48px;max-width:48px;font-size:0}.row-download{width:32px;min-width:32px;padding:0;border-radius:50%;font-size:0}.row-download::before{content:"↓";font-size:16px;line-height:1}.file-meta{font-size:9px}.site-footer{width:min(100% - 32px,980px);padding-bottom:24px} }
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}