:root{font-family:"Yu Gothic",Meiryo,sans-serif;color:#1e2d3b;background:#f4f6f8;letter-spacing:0;--blue:#0636a5;--teal:#007c82;--ink:#263b4b}
*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible{outline:4px solid #e59e19;outline-offset:3px}[hidden]{display:none!important}
.app-header{height:64px;background:#fff;border-top:4px solid var(--blue);border-bottom:1px solid #dce3e8}.header-inner{height:100%;max-width:1400px;margin:auto;padding:0 24px;display:flex;align-items:center;gap:24px}.brand{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:700;color:var(--blue);white-space:nowrap}.brand img{width:32px;height:32px}h1{font-size:22px;border-left:1px solid #dce3e8;padding-left:24px;margin:0;line-height:1.4}.preview-label{margin-left:auto;font-size:13px;color:#5c6b78;white-space:nowrap}
.options-bar{height:60px;background:#fff;border-bottom:1px solid #dce3e8;display:flex;align-items:center;gap:16px;padding:7px 24px}.view-options{display:flex;gap:4px;max-width:1352px}.view-options a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 18px;border-radius:5px;text-decoration:none;font-size:18px;font-weight:700;border:1px solid transparent}.view-options a span{font-size:15px;font-weight:500}.view-options a[aria-current="page"]{background:#eaf0fd;color:var(--blue);border-color:#bacaf0}.view-options a:hover{background:#f0f3f8}#photo-note{margin-left:auto;font-size:13px;color:#5c6b78;white-space:nowrap}
main{max-width:1400px;margin:auto;height:calc(100dvh - 124px);min-height:540px;padding:18px 24px 24px}.workspace{height:100%;display:flex;flex-direction:column;gap:18px}.work-section{min-width:0;min-height:0;display:flex;flex-direction:column}.work-section h2{font-size:24px;line-height:1.3;color:var(--blue);margin:0 0 12px}.machines{flex:2}.machine-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:14px;flex:1;min-height:0}.bottom-grid{flex:1;min-height:144px;display:grid;grid-template-columns:2fr 1fr;gap:18px}.grinder h2{color:var(--teal)}.processing h2{color:var(--ink)}.equipment-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;flex:1;min-height:0}.processing .equipment-grid{grid-template-columns:1fr}
.equipment{width:100%;min-width:0;min-height:64px;border:2px solid #cbd5e0;border-radius:6px;background:#fff;color:var(--blue);padding:12px;display:flex;align-items:center;justify-content:center;gap:12px;position:relative;overflow:hidden;transition:background-color .12s,border-color .12s}.equipment:hover{background:#f5f8ff;border-color:var(--blue)}.equipment:active{background:#e9efff}.equipment[data-category="grinder"]{color:var(--teal)}.equipment[data-category="processing"]{color:var(--ink)}.equipment[data-category="grinder"]:hover{border-color:var(--teal);background:#eff9f8}.equipment.is-selected{box-shadow:inset 0 0 0 2px currentColor}.equipment-label{font-size:36px;line-height:1.2;font-weight:700;white-space:nowrap;position:relative}.equipment-label .number{font-size:inherit}.equipment-icon{width:64px;height:64px;stroke-width:1.4;flex-shrink:0}.equipment .chevron{display:none}
.view-a .equipment{flex-direction:column;gap:8px;border-color:currentColor}.view-a .equipment-icon{width:58px;height:58px}.view-a .bottom-grid .equipment{flex-direction:row;gap:22px}
.view-b .equipment{border-left:7px solid currentColor}.view-b .equipment-icon{display:none}.view-b .equipment-label{font-size:28px}.view-b .number{font-size:54px;margin-right:3px}.view-b .bottom-grid .equipment-label{font-size:42px}
.view-c .equipment{display:flex;flex-direction:column;padding:0;gap:0;border:1px solid #cbd5e0}.photo{width:100%;min-height:40px;flex:1;background-image:url('/assets/equipment-photo-preview.png');background-repeat:no-repeat;background-color:#e1e7e8}.view-c .equipment-label{font-size:30px;width:100%;padding:10px 6px;background:#fff;text-align:center}.view-c .equipment-icon{display:none}
.view-d.workspace{display:grid;grid-template-columns:2fr 1fr;gap:24px}.view-d .machine-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));grid-auto-flow:column;gap:12px}.view-d .bottom-grid{display:flex;flex-direction:column;border-left:1px solid #d6dee5;padding-left:24px;gap:30px;min-height:0}.view-d .bottom-grid .work-section{flex:0 0 auto}.view-d .bottom-grid .equipment-grid{grid-template-columns:1fr;gap:14px}.view-d .bottom-grid .equipment{min-height:88px}.view-d .equipment{justify-content:space-between;border-left:6px solid currentColor;padding:12px 18px}.view-d .equipment-icon{display:none}.view-d .equipment-label{font-size:32px}.view-d .chevron{display:block;width:24px;height:24px;flex-shrink:0}
dialog{border:1px solid #d5dee6;border-radius:8px;padding:0;width:min(400px,calc(100% - 32px));color:#263b4b;box-shadow:0 16px 70px #162c4a33}dialog::backdrop{background:#17263860}.selection-content{padding:30px}.selection-category{font-size:16px;color:#5c6b78}.selection-content h2{margin:10px 0 16px;font-size:32px}.selection-content p{margin:0 0 28px;color:#5c6b78}.back-button{display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid #c5d0dc;border-radius:5px;min-height:48px;padding:10px 24px;background:#fff;font-size:18px}.back-button svg{width:20px;height:20px}
@media(max-width:900px){.header-inner{padding:0 18px;gap:16px}.brand,h1{font-size:20px}h1{padding-left:16px}.options-bar{padding-right:18px;padding-left:18px}main{padding:16px 18px 20px}.machine-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:12px}.machines{flex:3}.view-a .equipment-icon{width:42px;height:42px}.view-a .equipment-label{font-size:30px}.view-b .number{font-size:44px}.view-c .equipment-label{font-size:26px;padding:8px 4px}.bottom-grid{gap:14px}.view-a .bottom-grid .equipment{gap:12px}.view-d .equipment-label{font-size:28px}.view-d .equipment{padding:10px 12px}.view-d .bottom-grid{padding-left:16px}.view-d.workspace{gap:16px}.view-options a{padding:8px 12px}}
@media(max-width:600px){.app-header{height:60px}.header-inner{padding:0 14px;gap:12px}.brand{font-size:16px;gap:6px}.brand img{width:28px;height:28px}h1{font-size:18px;padding-left:12px}.preview-label{display:none}.options-bar{height:auto;min-height:60px;padding:7px 10px;gap:6px;flex-wrap:wrap}.view-options{width:100%;gap:3px}.view-options a{flex:1;padding:8px 4px;gap:4px;font-size:16px}.view-options a span{font-size:12px}#photo-note{padding:0 5px 3px}main{height:auto;min-height:0;padding:18px 14px 24px}.workspace{height:auto;gap:22px}.work-section h2{font-size:21px}.machine-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,116px);gap:10px}.bottom-grid{display:flex;flex-direction:column;gap:22px}.equipment-grid{grid-auto-rows:100px;gap:10px}.view-a .equipment-label{font-size:30px}.view-b .number{font-size:42px}.view-b .bottom-grid .equipment-label{font-size:34px}.view-c .machine-grid{grid-template-rows:repeat(5,150px)}.view-c .equipment-grid{grid-auto-rows:160px}.view-d.workspace{display:flex;gap:22px}.view-d .machine-grid{grid-template-rows:repeat(5,76px)}.view-d .bottom-grid{padding:0;border:0;gap:22px}.view-d .grinder .equipment-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.view-d .bottom-grid .equipment{min-height:76px}.view-d .equipment-label{font-size:27px}.view-d .equipment{padding:10px}.view-d .chevron{width:20px}.view-d .equipment-grid{grid-auto-rows:76px}}