:root{--bg: #f7f4ef;--panel: #fffdf9;--border: #e4ddce;--ink: #3a3227;--ink-soft: rgba(58, 50, 39, .62);--accent: #5b6b62;--accent-strong: #3f4d45;--danger: #b1543f;--radius: 14px}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--ink);font-family:Hiragino Sans,Noto Sans JP,Yu Gothic,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}.app{min-height:100%;display:flex;flex-direction:column;padding:24px clamp(16px,4vw,48px) 48px;gap:28px}.app-header{text-align:center}.app-header h1{margin:0;font-size:1.9rem;font-weight:600;letter-spacing:.04em}.app-header .kanji{color:var(--accent-strong);font-weight:700;margin-left:.35em}.tagline{margin:6px 0 0;color:var(--ink-soft);font-size:.92rem}.app-main{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr);gap:24px;align-items:start}@media (max-width: 860px){.app-main{grid-template-columns:1fr}}.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:16px}.container-size,.dims{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--ink-soft)}.container-size label,.dims label{display:flex;align-items:center;gap:6px}input[type=number],input[type=text]{border:1px solid var(--border);border-radius:8px;padding:6px 10px;font-size:.95rem;background:#fff;color:var(--ink);width:84px}input[type=text]{width:auto;flex:1}.unit{color:var(--ink-soft);font-size:.8rem}.packing-canvas{width:100%;height:min(52vh,440px);display:block;border-radius:10px}.result-summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 16px;font-size:.9rem;color:var(--ink-soft)}.result-summary .strategy{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;opacity:.75}.result-summary .suggestion{width:100%;margin:0;color:var(--danger);font-size:.85rem}.pack-button{align-self:center;padding:14px 40px;border:none;border-radius:999px;background:var(--accent-strong);color:#fdfaf4;font-size:1.05rem;font-weight:600;letter-spacing:.08em;cursor:pointer;transition:transform .15s ease,opacity .15s ease}.pack-button:hover:not(:disabled){transform:translateY(-1px)}.pack-button:disabled{opacity:.4;cursor:not-allowed}.item-form{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.item-form input[type=text]{flex-basis:100%}.rotate-toggle{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--ink-soft)}.item-form button,.project-controls button{padding:8px 16px;border:1px solid var(--accent-strong);border-radius:999px;background:transparent;color:var(--accent-strong);cursor:pointer;font-size:.88rem}.item-form button:hover,.project-controls button:hover{background:var(--accent-strong);color:#fdfaf4}.item-list,.project-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:320px;overflow-y:auto}.item-list li,.project-list li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;background:#3a322708;font-size:.88rem}.item-list li.unplaced{background:#b1543f14}.swatch{width:14px;height:14px;border-radius:4px;flex-shrink:0}.item-list .name,.project-load-btn{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.item-list .dims{color:var(--ink-soft);font-size:.78rem}.badge{font-size:.7rem;color:var(--danger);border:1px solid var(--danger);border-radius:999px;padding:1px 8px}.remove{border:none;background:transparent;color:var(--ink-soft);font-size:1rem;cursor:pointer;line-height:1;padding:2px 6px}.remove:hover{color:var(--danger)}.empty-hint{color:var(--ink-soft);font-size:.85rem;padding:8px 0}.project-controls{display:flex;gap:8px;align-items:center;border-top:1px solid var(--border);padding-top:14px}.project-load-btn{border:none;background:transparent;color:var(--ink);cursor:pointer;font-size:.88rem;padding:0}.project-load-btn:hover{color:var(--accent-strong);text-decoration:underline}.container-tabs{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.container-tab{display:flex;align-items:center;gap:2px;background:#3a32270d;border-radius:999px;padding:2px 4px 2px 12px}.container-tab.active{background:var(--accent-strong)}.container-tab.active>button:first-child{color:#fdfaf4}.container-tab>button:first-child{background:none;border:none;cursor:pointer;font-size:.82rem;color:var(--ink);padding:4px 2px}.container-tab .remove{font-size:.85rem}.add-container-btn{border:1px dashed var(--border);background:transparent;border-radius:999px;width:28px;height:28px;cursor:pointer;color:var(--ink-soft);font-size:.95rem;line-height:1}.container-name{font-weight:600;border:none!important;background:transparent!important;padding:4px 0!important;width:auto!important;flex:1}.action-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}.ghost-btn{padding:8px 16px;border:1px solid var(--border);border-radius:999px;background:transparent;color:var(--ink-soft);cursor:pointer;font-size:.85rem}.ghost-btn:hover:not(:disabled){border-color:var(--accent-strong);color:var(--accent-strong)}.ghost-btn:disabled{opacity:.4;cursor:not-allowed}.camera-launch{display:flex;justify-content:flex-end}.theme-row{display:flex;flex-direction:column;gap:6px;font-size:.82rem;color:var(--ink-soft);border-top:1px solid var(--border);padding-top:12px}.theme-switcher{display:flex;gap:6px;flex-wrap:wrap}.theme-switcher button{padding:5px 12px;border-radius:999px;border:1px solid var(--border);background:#fff;font-size:.78rem;cursor:pointer;color:var(--ink-soft)}.theme-switcher button.active{background:var(--accent-strong);border-color:var(--accent-strong);color:#fdfaf4}.template-row{border-top:1px solid var(--border);padding-top:12px;display:flex;flex-direction:column;gap:10px}.template-panel{display:flex;flex-direction:column;gap:10px}.template-save{display:flex;gap:8px}.template-save input{flex:1}.template-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:180px;overflow-y:auto}.template-list li{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;background:#3a322708;font-size:.85rem}.comparison-view{border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:#3a322708;display:flex;flex-direction:column;gap:8px}.comparison-header{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--ink-soft)}.comparison-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:6px}.comparison-list li button{width:100%;display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:8px;border:1px solid var(--border);background:#fff;cursor:pointer;text-align:left}.comparison-list li.selected button{border-color:var(--accent-strong);background:#3f4d4514}.family-name{font-size:.8rem;font-weight:600}.family-stat{font-size:.72rem;color:var(--ink-soft)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#1e1a148c;display:flex;align-items:center;justify-content:center;padding:20px;z-index:50}.modal{position:relative;background:var(--panel);border-radius:var(--radius);padding:24px;max-width:520px;width:100%;max-height:90vh;overflow-y:auto;display:flex;flex-direction:column;gap:14px}.modal-close{position:absolute;top:12px;right:12px;border:none;background:transparent;font-size:1.3rem;cursor:pointer;color:var(--ink-soft);line-height:1}.camera-step{display:flex;flex-direction:column;gap:12px}.camera-instruction{margin:0;font-size:.88rem;color:var(--ink-soft)}.video-wrap{width:100%;aspect-ratio:4 / 3;background:#1a1712;border-radius:10px;overflow:hidden}.video-wrap video{width:100%;height:100%;object-fit:cover}.tap-canvas{width:100%;height:auto;border-radius:10px;cursor:crosshair;background:#1a1712}.camera-error{color:var(--danger);font-size:.85rem;margin:0}.camera-controls{display:flex;justify-content:space-between;gap:10px}.camera-controls button{padding:8px 14px;border-radius:999px;border:1px solid var(--border);background:transparent;cursor:pointer;font-size:.85rem;color:var(--ink-soft)}.primary-btn{border:none!important;background:var(--accent-strong)!important;color:#fdfaf4!important}.primary-btn:disabled{opacity:.4;cursor:not-allowed}.estimate-form{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--ink-soft)}.estimate-form label{display:flex;align-items:center;gap:6px}.pro-modal h2{margin:0;font-size:1.2rem}.pro-lead{margin:0;font-size:.88rem;color:var(--ink-soft);line-height:1.6}.pro-feature-list{margin:0;padding-left:20px;font-size:.85rem;color:var(--ink);display:flex;flex-direction:column;gap:6px}