/* ===================== リセット・基本 ===================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:"Hiragino Sans","Yu Gothic UI",sans-serif;background:#f0f0f2;color:#222;font-size:14px;min-height:100vh;}

/* ===================== ナビ ===================== */
.global-nav{position:sticky;top:0;z-index:1200;background:#1a1a2e;padding:0 16px;display:flex;gap:4px;align-items:center;height:44px;overflow-x:auto;white-space:nowrap;box-shadow:0 2px 10px rgba(0,0,0,.12);}
.global-nav a{color:#aaa;text-decoration:none;padding:8px 14px;border-radius:6px;font-size:13px;transition:background .15s,color .15s;}
.global-nav a:hover,.global-nav a.active{background:#fff2;color:#fff;}
.nav-spacer{flex:1 1 auto;min-width:16px;}
.nav-user{color:#e8edf7;font-size:12px;font-weight:700;padding:0 8px;}

/* ===================== コンテナ・カード ===================== */
.container{max-width:1440px;margin:0 auto;padding:12px;}
.card{background:#fff;border-radius:10px;border:1px solid #e0e0e0;padding:10px;margin-bottom:10px;}

/* ===================== 検索バー ===================== */
.search-bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.search-bar input,.search-bar select{padding:7px 10px;border:1px solid #ccc;border-radius:6px;font-size:14px;outline:none;}
.search-bar input{flex:1;min-width:160px;}
.search-bar input:focus,.search-bar select:focus{border-color:#1976d2;}
.search-input-wrap{flex:1;min-width:220px;display:flex;gap:6px;align-items:center;}
.search-input-wrap input{min-width:0;width:100%;}
.search-clear-btn{flex:0 0 auto;padding:7px 10px;background:#fff;color:#555;border-color:#cfd8dc;}
.search-clear-btn:hover{background:#eef2f5;}

/* ===================== ボタン共通 ===================== */
button{padding:7px 14px;border:1px solid #ccc;border-radius:6px;cursor:pointer;font-size:13px;background:#f5f5f5;color:#333;transition:background .15s;}
button:hover{background:#e8e8e8;}
button:disabled{opacity:.45;cursor:default;}
.btn-primary{background:#1976d2;color:#fff;border-color:#1565c0;}
.btn-primary:hover{background:#1565c0;}
.btn-secondary{background:#f5f7fb;color:#263238;border-color:#cfd8dc;}
.btn-secondary:hover{background:#e9eef6;}
.readonly-mode .edit-btn,
.readonly-mode .card-btn-edit,
.readonly-mode .modal-submit-btn,
.readonly-mode .modal-delete-btn,
.readonly-mode .add-color-btn,
.readonly-mode .remove-color-btn,
.readonly-mode .search-bar .btn-primary,
.readonly-mode #open-selected-modal-btn,
.readonly-mode .btn-edit,
.readonly-mode .btn-del,
.readonly-mode #smaregi-register-btn,
.readonly-mode #price-tag-btn,
.readonly-mode #instruction-btn,
.readonly-mode #reproduction-btn {
    display: none !important;
}

/* ===================== グリッド ===================== */
#item-list{display:grid;gap:10px;grid-template-columns:repeat(4,1fr);}
@media(max-width:1100px){#item-list{grid-template-columns:repeat(3,1fr);}}
@media(max-width:760px){#item-list{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){#item-list{grid-template-columns:1fr;}}
#yarn-list{display:grid;gap:10px;grid-template-columns:repeat(4,1fr);align-items:stretch;}
@media(max-width:1100px){#yarn-list{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));}}
@media(max-width:760px){#yarn-list{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));}}
@media(max-width:480px){#yarn-list{grid-template-columns:1fr;}}
.no-result{grid-column:1/-1;text-align:center;color:#999;padding:40px 0;}

/* ===================== カード ===================== */
.item{background:#fff;border:1px solid #ddd;border-radius:10px;overflow:hidden;cursor:pointer;transition:box-shadow .18s,transform .18s;display:flex;flex-direction:column;}
.item:hover{box-shadow:0 4px 18px rgba(0,0,0,.12);transform:translateY(-2px);}
.item-img-wrap{width:100%;aspect-ratio:1/1;background:#f4f4f4;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.thumb{width:100%;height:100%;object-fit:cover;display:block;}
.item-body{padding:8px;display:flex;flex-direction:column;gap:4px;flex:1;}
.item-name{font-size:12px;font-weight:500;color:#555;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.item-meta{display:flex;flex-wrap:wrap;gap:3px 8px;font-size:11px;color:#666;}
.meta-item{display:flex;gap:3px;align-items:baseline;}
.meta-label{color:#aaa;font-size:10px;}
.color-chip{display:inline-block;background:#e8f0fe;color:#1a4fa3;border-radius:20px;padding:2px 8px;font-size:11px;font-weight:500;white-space:nowrap;}
.color-chips{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0;}
.item-actions{margin-top:auto;padding-top:6px;display:flex;gap:6px;width:100%;align-items:center;}
.item-actions .delete-btn{flex:0 0 calc((100% - 6px) / 9);min-width:0;padding-left:0;padding-right:0;font-size:11px;}
.item-actions .edit-btn{flex:1 1 auto;min-width:0;min-height:44px;}
.delete-btn{background:#d32f2f;color:#fff;border-color:#b71c1c;padding:5px 10px;font-size:12px;}
.delete-btn:hover{background:#b71c1c;}
.confirm-modal-content{background:#fff;border-radius:10px;width:min(420px,92vw);padding:18px;box-shadow:0 12px 34px rgba(0,0,0,.2);}
.confirm-modal-title{font-size:16px;font-weight:700;color:#1a1a2e;margin-bottom:8px;}
.confirm-modal-message{font-size:13px;line-height:1.7;color:#444;margin-bottom:16px;}
.confirm-modal-actions{display:flex;justify-content:flex-end;gap:8px;}
.confirm-modal-actions .delete-btn{min-width:68px;}

/* ===================== 在庫テーブル（生地） ===================== */
.stock-table{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:4px;}
.stock-table th{background:#f5f5f5;padding:4px 5px;border:1px solid #e0e0e0;font-weight:600;color:#555;text-align:center;white-space:nowrap;font-size:11px;}
.stock-table td{padding:4px 5px;border:1px solid #f0f0f0;vertical-align:middle;}
.stock-table tr:last-child td{border-bottom:none;}
.td-right{text-align:right;}.td-center{text-align:center;}
.stock-badge{display:inline-block;padding:2px 7px;border-radius:8px;font-size:11px;font-weight:700;white-space:nowrap;}
.badge-rolls{background:#e3f2fd;color:#1565c0;}
.badge-remnant{background:#f3e5f5;color:#6a1b9a;}
.badge-nostock{background:#f5f5f5;color:#aaa;border-radius:8px;padding:2px 8px;font-size:11px;}
.text-muted{color:#ccc;font-size:12px;}

/* ===================== モーダル共通 ===================== */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center;z-index:2000;padding:12px;
/* スクロール固定 */
overflow:hidden;}
.hidden{display:none!important;}
.modal-content{background:#fff;border-radius:12px;width:min(1100px,94vw);max-width:1100px;height:min(88vh,920px);height:min(88dvh,920px);display:flex;overflow:hidden;}
.preview-area{width:50%;background:#f4f4f4;display:flex;align-items:center;justify-content:center;padding:12px;flex-shrink:0;}
.form-area{width:50%;display:flex;flex-direction:column;border-left:1px solid #eee;min-height:0;position:relative;}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;border-bottom:1px solid #eee;flex-shrink:0;}
.modal-header h2{font-size:16px;font-weight:700;}
.close-btn{background:none;border:none;font-size:18px;color:#888;padding:4px 8px;}
.close-btn:hover{background:#f0f0f0;color:#333;}
.form-scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:12px 16px 84px;}

/* フォーム要素 */
.form-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.form-row label{width:90px;flex-shrink:0;font-size:13px;color:#555;}
.form-row input,.form-row select{flex:1;padding:7px 9px;border:1px solid #ccc;border-radius:6px;font-size:14px;outline:none;background:#fff;}
.form-row input:focus,.form-row select:focus{border-color:#1976d2;box-shadow:0 0 0 2px #1976d240;}
.required{color:#d32f2f;font-size:11px;}
.input-unit{flex:1;display:flex;align-items:center;gap:4px;}
.input-unit input{flex:1;}
.unit{font-size:12px;color:#888;width:22px;flex-shrink:0;}
.form-section{margin-bottom:10px;}
.section-label{display:block;font-size:13px;color:#555;margin-bottom:4px;}
.form-section input[type="file"]{width:100%;padding:6px;border:1px solid #ccc;border-radius:6px;}
.form-scroll textarea{width:100%;padding:8px 10px;border:1px solid #ccc;border-radius:6px;font-size:13px;font-family:inherit;resize:vertical;outline:none;line-height:1.6;}
.form-scroll textarea:focus{border-color:#1976d2;box-shadow:0 0 0 2px #1976d240;}
.color-input-row{display:flex;gap:6px;align-items:center;margin-bottom:5px;}
.color-input-row input[type="text"]{flex:1;padding:7px 9px;border:1px solid #ccc;border-radius:6px;font-size:14px;outline:none;}
.color-input-row input[type="text"]:focus{border-color:#1976d2;box-shadow:0 0 0 2px #1976d240;}
.remove-color-btn{padding:5px 9px;background:#fce8e8;color:#c62828;border-color:#f8b4b4;font-size:13px;}
.remove-color-btn:hover{background:#fbd0d0;}
.add-color-btn{background:#e8f5e9;color:#2e7d32;border-color:#a5d6a7;font-size:13px;padding:5px 12px;margin-top:2px;}
.add-color-btn:hover{background:#d0edce;}
.error-box{margin:0 16px 8px;background:#fdecea;border:1px solid #f5c6c2;border-radius:6px;padding:8px 12px;font-size:13px;color:#c62828;line-height:1.8;}
.form-buttons{display:flex;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid #eee;}
.form-area > .form-scroll .form-buttons,
.pcol-form > .pcol-scroll .form-buttons{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:5;
    margin:0;
    padding:10px 16px;
    background:#fff;
    border-top:1px solid #e8e8e8;
    box-shadow:0 -4px 14px rgba(0,0,0,.06);
}
.form-buttons button{flex:1;}
.form-buttons .modal-delete-btn{flex:1 1 0;min-width:0;padding-left:4px;padding-right:4px;}
.form-buttons .modal-submit-btn{flex:7 1 0;}
.form-buttons .modal-close-action-btn{flex:2 1 0;}

/* 色+在庫入力（生地） */
.color-input-row.fabric-stock{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:6px;align-items:start;margin-bottom:6px;}
.color-field-main input[type="text"],.stock-input-pair input[type="number"]{width:100%;padding:7px 8px;border:1px solid #ccc;border-radius:6px;font-size:13px;outline:none;}
.color-field-main input[type="text"]:focus,.stock-input-pair input[type="number"]:focus{border-color:#1976d2;box-shadow:0 0 0 2px #1976d240;}
.stock-input-pair{display:flex;flex-direction:column;gap:2px;}
.stock-mini-label{font-size:10px;color:#aaa;padding-left:2px;}
.color-stock-preview{grid-column:1/4;font-size:11px;padding:3px 6px;border-radius:4px;margin-top:-2px;margin-bottom:2px;}
.preview-ok{background:#e8f5e9;color:#2e7d32;}
.preview-nostock{background:#f5f5f5;color:#aaa;}
.color-table-head{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:6px;font-size:11px;color:#aaa;padding:0 0 3px;border-bottom:1px solid #eee;margin-bottom:4px;}

/* ===================== トースト ===================== */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:#323232;color:#fff;padding:10px 22px;border-radius:8px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:9999;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast-success{background:#2e7d32;}
.toast-error{background:#c62828;}

/* ===================== 詳細モーダル（画像オリジナル表示） ===================== */
.detail-modal-content{background:#fff;border-radius:12px;width:min(1380px,92vw);height:min(900px,88vh);height:min(900px,88dvh);max-width:none;max-height:none;display:flex;flex-direction:column;overflow:hidden;}
.detail-modal-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #eee;flex-shrink:0;}
.detail-modal-header h3{font-size:16px;font-weight:700;}
.detail-header-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.detail-body{display:flex;flex:1;min-height:0;overflow:hidden;}
.detail-img-col{width:32%;max-width:520px;background:#f4f4f4;display:flex;align-items:center;justify-content:center;padding:12px;flex-shrink:0;}
.detail-img-col img{max-width:100%;max-height:100%;object-fit:contain;}
.detail-info-col{flex:1;min-width:0;overflow:auto;-webkit-overflow-scrolling:touch;padding:16px;}

/* ===================== 商品管理 ===================== */
.product-card .item-name{font-size:12px;}
.card-key-info{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:2px;}
.card-key-row{display:flex;align-items:baseline;gap:5px;min-width:0;line-height:1.25;}
.card-key-label{font-size:10px;color:#777;font-weight:700;flex-shrink:0;min-width:38px;}
.card-key-value{font-size:15px;color:#111;font-weight:800;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.card-badges{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px;}
.category-badge{display:inline-block;background:#fff3e0;color:#e65100;border-radius:4px;padding:2px 8px;font-size:11px;font-weight:600;}
.size-badge{display:inline-block;background:#e8eaf6;color:#283593;border-radius:4px;padding:2px 8px;font-size:11px;font-weight:600;}
.product-info{display:flex;flex-direction:column;gap:2px;margin:4px 0;}
.info-row{display:flex;gap:4px;font-size:12px;}
.info-label{color:#888;min-width:76px;flex-shrink:0;}
.info-value{color:#333;}
.product-comment{font-size:12px;color:#555;background:#fafafa;border-left:3px solid #e0e0e0;padding:5px 8px;border-radius:0 4px 4px 0;white-space:pre-wrap;line-height:1.6;margin-top:4px;}
.section-block{margin-top:8px;border:1px solid #e8e8e8;border-radius:6px;overflow:auto;max-width:100%;}
.section-block-title{font-size:11px;font-weight:700;color:#555;background:#f5f5f5;padding:4px 8px;border-bottom:1px solid #e8e8e8;}

/* 商品モーダル 3カラム */
.product-modal{max-width:98vw;width:98vw;height:92vh;height:92dvh;display:flex;flex-direction:column;border-radius:14px;overflow:hidden;}
.product-modal-header{display:flex;align-items:center;justify-content:space-between;padding:12px 20px 10px;border-bottom:1px solid #eee;flex-shrink:0;}
.product-modal-header h2{font-size:17px;font-weight:700;}
.product-3col{display:flex;flex:1;min-height:0;}
.pcol-scroll{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:14px 16px 88px;box-sizing:border-box;}
.pcol-img{width:420px;flex-shrink:0;background:#f5f5f5;border-right:1px solid #e8e8e8;display:flex;flex-direction:column;padding:14px;gap:10px;}
.product-img-box{flex:1;background:#e8e8e8;border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;min-height:200px;}
.img-placeholder{color:#bbb;font-size:13px;}
.product-img-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
.image-manager{display:flex;flex-direction:column;gap:7px;min-height:0;}
.image-manager-title{font-size:12px;font-weight:700;color:#444;margin-top:4px;}
.product-image-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:6px;max-height:168px;overflow:auto;padding-right:2px;}
.product-image-tile{border:1px solid #ddd;border-radius:6px;background:#fff;overflow:hidden;}
.product-image-tile img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#f2f2f2;cursor:pointer;}
.product-image-actions{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:4px;font-size:11px;}
.product-image-actions label{display:flex;align-items:center;gap:3px;white-space:nowrap;}
.product-image-actions button{padding:2px 5px;font-size:11px;border-radius:4px;}
.image-manager input[type=file]{font-size:12px;width:100%;}
.yarn-left-image-manager{width:100%;max-height:42%;margin-top:8px;}
.yarn-simple-row{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:center;margin-bottom:6px;}
.yarn-material-row{display:grid;grid-template-columns:1fr minmax(110px,150px) auto;gap:6px;align-items:center;margin-bottom:6px;}
.stock-mode-wrap{display:flex;gap:14px;flex-wrap:wrap;margin-top:4px;}
.yarn-card .item-name{font-size:13px;font-weight:700;color:#1a1a2e;}
.yarn-card .item-meta{display:flex;flex-direction:column;gap:4px;}
.yarn-card .meta-item{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid #f0f0f0;padding-bottom:2px;}
.yarn-card .meta-label{color:#777;flex:0 0 auto;}
.yarn-modal .form-group-title{margin-top:4px;}
.detail-img-col{flex-direction:column;gap:8px;}
.detail-image-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:5px;width:100%;max-height:160px;overflow:auto;}
.detail-gallery-group{grid-column:1/-1;font-size:11px;font-weight:700;color:#666;margin-top:2px;}
.detail-image-thumb{width:100%;aspect-ratio:1/1;object-fit:cover;border:1px solid #ddd;border-radius:5px;background:#fff;cursor:pointer;}
.pcol-form{width:300px;flex-shrink:0;border-right:1px solid #e8e8e8;display:flex;flex-direction:column;overflow:hidden;position:relative;}
.pcol-meas{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;background:#fafafa;}
.form-group-title{font-size:11px;font-weight:700;color:#fff;background:#1a1a2e;padding:4px 10px;border-radius:4px;margin:12px 0 8px;letter-spacing:.05em;display:block;}
.hint-text{font-size:11px;color:#999;margin-bottom:6px;line-height:1.6;}
.color-input-row.simple{display:flex;gap:6px;align-items:center;margin-bottom:5px;}
.color-input-row.simple input[type="text"]{flex:1;padding:6px 8px;border:1px solid #ccc;border-radius:6px;font-size:13px;outline:none;}
.color-input-row.simple input[type="text"]:focus{border-color:#1976d2;box-shadow:0 0 0 2px #1976d240;}

/* 受注数テーブル */
.lot-table,.lot-input-table{width:100%;border-collapse:collapse;font-size:12px;margin-top:4px;}
.lot-table th,.lot-input-table th{background:#f5f5f5;padding:5px 8px;border:1px solid #e0e0e0;font-weight:600;color:#555;text-align:center;white-space:nowrap;}
.lot-table td,.lot-input-table td{padding:4px 6px;border:1px solid #eee;text-align:center;vertical-align:middle;}
.lot-color,.lot-color-cell{text-align:left!important;font-weight:600;color:#333;background:#fafafa;}
.lot-qty{color:#1976d2;}.lot-total{font-weight:700;background:#f5f5f5;}
.lot-qty-input{width:52px;padding:4px 5px;border:1px solid #ccc;border-radius:4px;font-size:12px;text-align:center;outline:none;}
.lot-qty-input:focus{border-color:#1976d2;box-shadow:0 0 0 2px #1976d240;}

/* 寸法テーブル */
.meas-table{width:100%;border-collapse:collapse;font-size:12px;margin-top:4px;}
.meas-table th{background:#f5f5f5;padding:5px 8px;border:1px solid #e0e0e0;font-weight:600;color:#555;text-align:center;white-space:nowrap;}
.meas-table td{padding:3px 6px;border:1px solid #eee;}
.meas-label{background:#fafafa;font-weight:600;color:#555;white-space:nowrap;}
.meas-val{text-align:right;color:#333;}
.meas-table-scroll{overflow-x:auto;border-radius:6px;border:1px solid #e0e0e0;}
.meas-input-table{width:max-content;min-width:100%;border-collapse:collapse;font-size:12px;}
.meas-input-table thead tr:first-child th{background:#e8eaf6;color:#283593;padding:5px 8px;border:1px solid #c5cae9;font-weight:700;text-align:center;white-space:nowrap;}
.meas-input-table thead tr:nth-child(2) th{background:#f5f5f5;color:#555;padding:4px 8px;border:1px solid #e0e0e0;font-size:11px;font-weight:600;text-align:center;}
.meas-input-table tbody td{padding:2px 3px;border:1px solid #f0f0f0;vertical-align:middle;}
.meas-input-table tbody tr:hover{background:#fafafa;}
.mth-label{min-width:70px;}
.mth-base,.mth-base2{background:#e3f2fd!important;color:#0d47a1!important;border-color:#bbdefb!important;}
.mth-diff,.mth-diff2{background:#fce4ec!important;color:#880e4f!important;border-color:#f8bbd0!important;}
.mth-divider{width:4px;background:#e0e0e0!important;border:none!important;padding:0!important;}
.mth-preview-group{background:#e8f5e9!important;color:#1b5e20!important;border-color:#c8e6c9!important;font-weight:700;}
.mth-preview{background:#f1f8e9!important;color:#33691e!important;border-color:#dcedc8!important;min-width:52px;}
.meas-td-label{white-space:nowrap;font-weight:600;color:#555;background:#fafafa;padding:3px 7px!important;min-width:68px;}
.meas-divider{width:4px;background:#e0e0e0;padding:0!important;}
.meas-subhead{font-size:10px;font-weight:400;opacity:.8;}
.meas-input{width:64px;padding:3px 5px;border:1px solid #ccc;border-radius:4px;font-size:12px;text-align:right;outline:none;}
.meas-input.meas-base{border-color:#90caf9;background:#e3f2fd;}
.meas-input.meas-diff{border-color:#f48fb1;background:#fce4ec;}
.meas-input:focus{box-shadow:0 0 0 2px #1976d240;border-color:#1976d2;}
.meas-preview-cell{text-align:right;padding:3px 8px!important;color:#aaa;background:#f9fbe7;min-width:52px;font-size:12px;}
.meas-preview-filled{color:#2e7d32;font-weight:700;background:#e8f5e9;}

/* ===================== タブレット対応 ===================== */
@media(max-width:1024px){
    .container{padding:10px;}
    .modal{align-items:center;padding:10px;}
    .modal-content{width:94vw;height:90vh;height:90dvh;}
    .preview-area{width:42%;}
    .form-area{width:58%;}
    .detail-modal-content{width:94vw;height:90vh;height:90dvh;}
    .product-modal{width:96vw;height:90vh;height:90dvh;}
    .product-3col{flex-direction:column;}
    .pcol-img{width:100%;height:240px;border-right:none;border-bottom:1px solid #e8e8e8;}
    .pcol-form{width:100%;border-right:none;}
    .pcol-meas{width:100%;min-height:360px;}
    .settings-grid{grid-template-columns:120px 1fr;}
}

/* ===================== スマートフォン対応 ===================== */
@media(max-width:640px){
    body{font-size:13px;}
    .global-nav{height:42px;padding:0 8px;}
    .global-nav a{padding:8px 10px;font-size:12px;}
    .container{padding:8px;}
    .card{padding:8px;border-radius:8px;}
    .modal{align-items:stretch;padding:8px;}
    .modal-content{flex-direction:column;width:100%;height:calc(100dvh - 16px);max-height:none;border-radius:10px;}
    .preview-area{width:100%;height:150px;min-height:120px;border-left:none;border-bottom:1px solid #eee;padding:8px;}
    .form-area{width:100%;min-height:0;border-left:none;}
    .modal-header{padding:10px 12px 8px;}
    .form-scroll{padding:10px 12px 84px;}
    .form-row{display:block;margin-bottom:10px;}
    .form-row label{display:block;width:auto;margin-bottom:4px;}
    .form-row input,.form-row select,.input-unit{width:100%;}
    .form-buttons{padding-bottom:8px;}
    .search-bar{flex-direction:column;}
    .search-bar input,.search-bar select,.search-bar button,.search-input-wrap{width:100%;}
    .search-input-wrap{min-width:0;}
    .search-input-wrap .search-clear-btn{width:auto;white-space:nowrap;}
    .color-input-row.fabric-stock{grid-template-columns:1fr 1fr auto;}
    .color-stock-header{grid-template-columns:1fr 72px 82px 24px;font-size:10px;}
    .color-stock-row{grid-template-columns:1fr 72px 82px 24px;}
    .color-stock-row .cs-preview{grid-column:1/-1;}
    .product-modal{flex-direction:column;width:100vw;height:100dvh;border-radius:0;}
    .product-3col{flex-direction:column;}
    .pcol-img{width:100%;height:200px;border-right:none;border-bottom:1px solid #e8e8e8;}
    .pcol-form{width:100%;border-right:none;}
    .pcol-meas{width:100%;}
    .detail-modal-content{width:100%;height:calc(100dvh - 16px);border-radius:10px;}
    .detail-body{flex-direction:column;}
    .detail-img-col{width:100%;max-width:none;height:180px;}
    .detail-info-col{padding:12px;}
    .settings-wrap{padding:8px;}
    .settings-header{gap:8px;}
    .settings-grid{grid-template-columns:1fr;gap:5px;}
    .settings-store-row{grid-template-columns:1fr;gap:6px;}
    .settings-actions{align-items:stretch;flex-direction:column;}
}
/* ── 生地管理 色・在庫横並び入力 ── */
.color-stock-header {
    display: grid;
    grid-template-columns: 1fr 90px 110px 28px;
    gap: 6px;
    font-size: 11px; color: #aaa;
    padding: 2px 0 4px;
    border-bottom: 1px solid #eee;
    margin-bottom: 4px;
}
.color-stock-row {
    display: grid;
    grid-template-columns: 1fr 90px 110px auto 28px;
    gap: 6px;
    align-items: center;
    margin-bottom: 5px;
}
.color-stock-row .cs-color,
.color-stock-row .cs-rolls,
.color-stock-row .cs-remnant {
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    width: 100%;
}
.color-stock-row .cs-color:focus,
.color-stock-row .cs-rolls:focus,
.color-stock-row .cs-remnant:focus {
    border-color: #1976d2;
    box-shadow: 0 0 0 2px #1976d240;
}
.cs-preview {
    font-size: 10px;
    color: #2e7d32;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 最終更新日時 */
.meta-updated {
    font-size: 10px;
    color: #bbb;
    margin-top: 2px;
}

/* ── 商品モーダル 2カラム（画像4割・フォーム6割） ── */
.product-2col {
    display: flex;
    flex: 1;
    min-height: 0;
}
.product-2col .pcol-img {
    width: 40%;
    flex-shrink: 0;
    background: #f5f5f5;
    border-right: 1px solid #e8e8e8;
    display: flex;
    flex-direction: column;
    padding: 14px;
    gap: 10px;
}
.product-2col .pcol-form {
    width: 60%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}
.product-2col .pcol-scroll {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 14px 20px 88px;
    box-sizing: border-box;
}

/* ── 削除・編集ボタン（横幅いっぱい） ── */
.card-btn-del, .card-btn-edit {
    flex: 1;
    padding: 7px 4px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: none;
}
.card-btn-del  { background: #d32f2f; color: #fff; }
.card-btn-del:hover { background: #b71c1c; }
.card-btn-edit { background: #1565c0; color: #fff; min-height:44px; padding-top:14px; padding-bottom:14px; }
.card-btn-edit:hover { background: #0d47a1; }
.item-actions  { display: flex; gap: 6px; margin-top: auto; padding-top: 6px; align-items:center; }
.item-actions .card-btn-edit{width:100%;flex:1 1 100%;}

/* スマレジ連携 */
.smaregi-loading,.smaregi-error,.smaregi-warning{font-size:12px;padding:8px;line-height:1.6;}
.smaregi-error,.smaregi-warning{color:#c62828;background:#fdecea;border-bottom:1px solid #f5c6c2;}
.smaregi-table-scroll{overflow-x:auto;max-width:100%;}
.smaregi-summary-table{width:max-content;min-width:100%;border-collapse:collapse;font-size:12px;}
.smaregi-summary-table th{background:#f5f5f5;padding:5px 8px;border:1px solid #e0e0e0;font-weight:600;color:#555;text-align:center;white-space:nowrap;}
.smaregi-summary-table td{padding:4px 7px;border:1px solid #eee;text-align:right;white-space:nowrap;}
.smaregi-summary-table td:first-child{text-align:left;}

/* 設定画面 */
.settings-wrap{max-width:920px;margin:0 auto;padding:14px;}
.settings-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.settings-header h1{font-size:18px;font-weight:700;color:#1a1a2e;}
.settings-card{padding:16px;}
.settings-grid{display:grid;grid-template-columns:140px 1fr;gap:10px 12px;align-items:center;}
.settings-grid label{font-size:13px;color:#555;font-weight:600;}
.settings-grid input,.settings-grid select,.settings-store-row input{padding:8px 10px;border:1px solid #ccc;border-radius:6px;font-size:14px;outline:none;background:#fff;}
.settings-grid input:focus,.settings-grid select:focus,.settings-store-row input:focus{border-color:#1976d2;box-shadow:0 0 0 2px #1976d240;}
.settings-section-title{font-size:11px;font-weight:700;color:#fff;background:#1a1a2e;padding:4px 10px;border-radius:4px;margin:18px 0 8px;}
.settings-store-row{display:grid;grid-template-columns:1fr 160px auto;gap:8px;margin-bottom:6px;align-items:center;}
.settings-note{font-size:12px;line-height:1.7;color:#555;background:#f7f9fc;border:1px solid #e1e7ef;border-radius:6px;padding:8px 10px;margin-bottom:10px;}
.settings-inline{display:flex;align-items:center;gap:8px;font-weight:500!important;}
.settings-inline input{width:auto;}
.settings-actions{display:flex;align-items:center;gap:10px;margin-top:12px;}
.settings-result{font-size:12px;color:#2e7d32;}
.settings-result-box{margin-top:10px;background:#f8fafc;border:1px solid #d9e2ec;border-radius:6px;padding:10px;font-size:12px;line-height:1.7;white-space:pre-wrap;color:#1f2933;}
.user-list-box{white-space:normal;}
.user-row{display:grid;grid-template-columns:minmax(180px,1fr) minmax(120px,170px) 110px 86px auto auto;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid #e7edf3;}
.user-row:last-child{border-bottom:none;}
.user-name{font-weight:800;color:#172033;}
.user-name span{font-size:11px;color:#77808c;font-weight:700;margin-left:6px;}
.user-meta{font-size:11px;color:#667085;}
.user-display-input,.user-role-select{padding:7px 9px;border:1px solid #cfd8dc;border-radius:6px;background:#fff;}
.user-active-check{justify-content:flex-start;}
@media(max-width:760px){
    .nav-spacer{display:none;}
    .nav-user{font-size:11px;}
    .user-row{grid-template-columns:1fr;align-items:stretch;}
}

/* ── 初期ロット合計行 ── */
.lot-total-label {
    text-align: right !important;
    font-weight: 700;
    color: #555;
    background: #f5f5f5;
    padding: 5px 8px;
}
.lot-grand-total {
    font-weight: 700;
    color: #1565c0;
    font-size: 14px;
    background: #e3f2fd;
    padding: 5px 8px;
}

/* ── プレビュー（生地）合計のみ表示 ── */
.cs-preview {
    font-size: 12px;
    color: #aaa;
    white-space: nowrap;
    min-width: 60px;
    text-align: right;
}
.cs-preview-ok {
    color: #1565c0;
    font-weight: 700;
}

/* ===================== 端末別の最終調整 ===================== */
@media(max-width:1024px){
    .settings-grid{grid-template-columns:120px 1fr;}
}

@media(min-width:641px) and (max-width:1024px){
    .product-2col{flex-direction:row;}
    .product-2col .pcol-img{width:40%;height:auto;border-right:1px solid #e8e8e8;border-bottom:none;}
    .product-2col .pcol-form{width:60%;border-right:none;}
}

@media(max-width:640px){
    .settings-wrap{padding:8px;}
    .settings-header{gap:8px;}
    .settings-grid{grid-template-columns:1fr;gap:5px;}
    .settings-store-row{grid-template-columns:1fr;gap:6px;}
    .settings-actions{align-items:stretch;flex-direction:column;}
    .color-stock-header{grid-template-columns:1fr 72px 82px 24px;font-size:10px;}
    .color-stock-row{grid-template-columns:1fr 72px 82px 24px;}
    .color-stock-row .cs-preview{grid-column:1/-1;text-align:left;min-width:0;}
    .product-2col{flex-direction:column;min-height:0;overflow:hidden;}
    .product-2col .pcol-img{width:100%;height:auto;min-height:0;max-height:45dvh;flex:0 0 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;border-right:none;border-bottom:1px solid #e8e8e8;padding:10px;}
    .product-2col .product-img-box{height:128px;min-height:128px;flex:0 0 auto;}
    .product-2col .image-manager{flex:0 0 auto;}
    .product-2col .product-image-list{grid-template-columns:repeat(auto-fill,minmax(62px,1fr));max-height:64px;}
    .product-2col .product-image-actions{font-size:10px;}
    .product-2col .pcol-form{width:100%;flex:1;min-height:0;border-right:none;}
    .product-2col .pcol-scroll{height:100%;padding:10px 12px 88px;}
}