:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f6f3ee;--surface:#fff;--text:#2b2724;--muted:#6f6861;--line:#ddd6cc;--accent:#3f6f68;--accent-text:#fff;--danger:#b3382c;--warn-bg:#fff3d6;--error-bg:#fde3df;color:var(--text);background:var(--bg);font-family:system-ui,-apple-system,Noto Sans KR,Apple SD Gothic Neo,sans-serif;font-size:16px;line-height:1.5}*{box-sizing:border-box}body{margin:0}h1,h2{margin:0;line-height:1.3}h1{font-size:1.25rem}h2{margin-bottom:.75rem;font-size:1.1rem}input,select,textarea,button{font:inherit;color:inherit;border:1px solid var(--line);background:var(--surface);border-radius:8px;min-height:44px;padding:.5rem .75rem}input,select,textarea{width:100%;min-width:0}textarea{resize:vertical;min-height:8rem}button{cursor:pointer;min-width:44px}a.button{border:1px solid var(--line);background:var(--surface);min-height:44px;color:inherit;border-radius:8px;align-items:center;padding:.5rem .75rem;text-decoration:none;display:inline-flex}button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}button.danger{color:var(--danger);border-color:var(--danger)}button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}:focus-visible{outline:3px solid color-mix(in srgb, var(--accent) 50%, transparent);outline-offset:1px}.loading,.empty{color:var(--muted);padding:1rem}.app{flex-direction:column;height:100dvh;display:flex}.banner{margin:0;padding:.75rem 1rem;font-weight:600}.banner.warn{background:var(--warn-bg)}.banner.error{background:var(--error-bg);color:var(--danger)}.panes{flex:1;grid-template-columns:1fr;min-height:0;display:grid}.list,.detail{min-height:0;overflow-y:auto}.list{padding:1rem}.app:not([data-view=list]) .list,.app[data-view=list] .detail{display:none}.list-head{justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:.75rem;display:flex}.list-head h1{flex:1}.filters{gap:.5rem;margin-bottom:.75rem;display:flex}.filters button{white-space:nowrap;flex:1;padding-inline:.25rem}.list ul{gap:.5rem;margin:0;padding:0;list-style:none;display:grid}.list li a{background:var(--surface);border:1px solid var(--line);min-height:56px;color:inherit;border-radius:8px;justify-content:space-between;align-items:center;gap:.75rem;padding:.5rem .75rem;text-decoration:none;display:flex}.list li a[aria-current=page]{border-color:var(--accent);box-shadow:inset 4px 0 0 var(--accent)}.cover{background:#ece7df;border-radius:6px;flex:none;width:40px;height:40px;overflow:hidden}.cover img{object-fit:cover;width:100%;height:100%;display:block}.title{overflow-wrap:anywhere;flex:1}.untitled{color:var(--muted)}.badge{background:#ece7df;border-radius:999px;flex:none;padding:.125rem .625rem;font-size:.8125rem}.badge.knitting{background:#d9ebe7}.badge.finished{background:#e3e0f2}.detail-body{gap:1.25rem;max-width:880px;margin:0 auto;padding:1rem;display:grid}.back{min-height:44px;color:var(--accent);align-items:center;font-weight:600;text-decoration:none;display:inline-flex}.detail-body section{background:var(--surface);border:1px solid var(--line);border-radius:12px;align-content:start;gap:.75rem;padding:1rem;display:grid}.detail-body h2,.detail-body section p{margin:0}.field{gap:.25rem;min-width:0;display:grid}.field>span{color:var(--muted);font-size:.875rem}.row3{grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:.75rem;display:grid}.grid2{grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.75rem;display:grid}.card{border:1px solid var(--line);background:var(--bg);border-radius:8px;gap:.75rem;padding:.75rem;display:grid}.card.inline{grid-template-columns:1fr 8rem auto;align-items:end}.photos{grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:.75rem;margin:0;padding:0;list-style:none;display:grid}.photo{align-content:start;gap:.5rem;display:grid}.photo-frame{aspect-ratio:1;background:#ece7df;border-radius:8px;place-items:center;display:grid;position:relative;overflow:hidden}.photo-frame img{object-fit:cover;width:100%;height:100%}.photo-missing{color:var(--muted);font-size:.875rem}.cover-badge{background:var(--accent);color:var(--accent-text);border-radius:999px;padding:.125rem .5rem;font-size:.8125rem;font-weight:600;position:absolute;top:.375rem;left:.375rem}.photo-actions{gap:.5rem;display:flex}.photo-actions button{white-space:nowrap;flex:1;padding-inline:.25rem}.result{overflow-wrap:anywhere;margin:0;font-weight:600}.facts{grid-template-columns:max-content 1fr;gap:.375rem 1rem;margin:0;display:grid}.facts dt{color:var(--muted)}.facts dd{margin:0;font-weight:600}.inline-error{color:var(--danger);margin:0;font-weight:600}.gauges{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.75rem;display:grid}fieldset{border:1px solid var(--line);border-radius:8px;grid-template-columns:1fr 1fr;gap:.75rem;min-width:0;margin:0;padding:.75rem;display:grid}legend{padding:0 .25rem;font-weight:600}.hint{color:var(--muted);margin:0;font-size:.875rem}.actions{flex-wrap:wrap;gap:.5rem;display:flex}.table-wrap{overflow-x:auto}table{border-collapse:separate;border-spacing:0 .5rem;width:100%;min-width:620px}th{text-align:left;color:var(--muted);padding:0 .25rem;font-size:.875rem;font-weight:500}td{padding:0 .25rem}td:first-child{min-width:7rem}td:nth-child(2){width:5.5rem}td:nth-child(3),td:nth-child(5),td:nth-child(6){width:5rem}td:nth-child(4){width:4.5rem}td button{white-space:nowrap}td output{background:var(--bg);border-radius:8px;min-height:44px;padding:0 .5rem;font-weight:600;line-height:44px;display:block}@media (width<=699px){.card.inline{grid-template-columns:1fr 1fr}.card.inline button{grid-column:1/-1}table,tbody,tr,td{display:block;width:auto!important}table{min-width:0}thead{display:none}tr{border:1px solid var(--line);background:var(--bg);border-radius:8px;grid-template-columns:1fr 1fr 1fr;gap:.5rem;margin-bottom:.75rem;padding:.75rem;display:grid}td{min-width:0;padding:0}td[data-label]:before{content:attr(data-label);color:var(--muted);font-size:.875rem;display:block}td:first-child{grid-column:1/-1}td:last-child{align-self:end}td button{width:100%}td output{background:var(--surface)}}@media (width>=900px){.panes{grid-template-columns:340px 1fr}.app:not([data-view=list]) .list,.app[data-view=list] .detail{display:block}.list{border-right:1px solid var(--line)}.back{display:none}.placeholder{text-align:center;padding:3rem 1rem}}
