:root {
       --c-bg: #ffffff;
       --c-surface: #ffffff;
       --c-border: #e8e8e8;
       --c-text: #111110;
       --c-muted: #999896;
       --c-accent: #1a1a1a;
       --c-new: #cc3300;
       --c-disabled: #c8c6c0;
       --c-red: #cc0000;
       --radius: 4px;
       --transition: 0.15s ease;
   }

   * {
       /*box-sizing: border-box;
       margin: 0;
       padding: 0;*/
   }

   body {
       /* font-family: 'Noto Sans JP', 'Inter', sans-serif;
       background: var(--c-bg);
       color: var(--c-text);
       min-height: 100vh;*/
   }

   /* ── 2カラムレイアウト ── */
   .sim-wrap {
       display: grid;
       grid-template-columns: 480px 1fr;
       min-height: 100vh;
       align-items: start;
       /*border: 1px solid rgb(187, 187, 187);*/
       /*margin: 100px;*/
   }

   /* ── 左パネル（商品画像・製品記号） ── */
   .sim-left {
       position: sticky;
       top: 0;
       height: 100vh;
       display: flex;
       flex-direction: column;
       background: #fff;
       /*border-right: 1px solid var(--c-border);*/
       overflow: hidden;
   }

   .sim-left-img {
       flex: 1;
       display: flex;
       align-items: center;
       justify-content: center;
       background: #ffffff;
       overflow: hidden;
       /*padding: 2rem;*/
       position: relative;
   }

   #left-product-img {
       max-width: 100%;
       max-height: 100%;
       object-fit: contain;
       display: block;
   }

   .sim-left-info {
       padding: 1.25rem 1.5rem;
       border-top: 1px solid var(--c-border);
       background: #fff;
   }

   .left-code-row {
       display: flex;
       justify-content: space-between;
       align-items: center;
       font-size: 1.2rem;
       color: var(--c-muted);
       margin-bottom: 0.4rem;
   }

   .left-code-val {

       font-size: 1.2rem;
       font-weight: 600;
       color: var(--c-text);
       letter-spacing: 0.04em;
   }

   .left-shop-btn {
       display: block;
       width: 100%;
       margin-top: 0.75rem;
       padding: 10px;
       background: transparent;
       border: 1.5px solid var(--c-text);
       border-radius: 100px;
       font-size: 1.2rem;
       font-weight: 700;
       text-align: center;
       text-decoration: none;
       color: var(--c-text);
       cursor: pointer;
       transition: all var(--transition);
       font-family: inherit;
       letter-spacing: 0.08em;
   }

   .left-shop-btn:hover {
       background: var(--c-text);
       color: #fff;
   }

   .left-shop-btn.hidden {
       display: none;
   }

   .left-price-row {
       display: flex;
       justify-content: space-between;
       align-items: baseline;
       margin-bottom: 0.5rem;
   }

   .left-price-row.hidden {
       display: none;
   }

   .left-price-label {
       font-size: 1.2rem;
       color: var(--c-muted);
   }

   .left-price-val {
       font-size: 1.2rem;
       font-weight: 700;
       color: var(--c-text);
   }

   /* ── 右パネル ── */
   .sim-right {
       padding: 1rem 3rem;

   }

   /* タイトル行 */
   .sim-header {
       display: flex;
       align-items: baseline;
       gap: 1.5rem;
       margin-bottom: 1rem;
       padding-bottom: 1rem;
       border-bottom: 1.5px solid var(--c-text);
   }

   .sim-title {
       font-family: 'Inter', sans-serif;
       font-size: 1rem;
       font-weight: 700;
       letter-spacing: 0.15em;
       text-transform: uppercase;
   }

   /* ── タイプセレクター（右上部） ── */
   .type-panel {
       margin-bottom: 2.5rem;
   }

   /* 各グループ行 */
   .type-group-row {
       display: flex;
       align-items: flex-start;
       gap: 2rem;
       padding: 1rem 0;
       border-bottom: 1px solid var(--c-border);
   }

   .type-group-row:first-child {
       border-top: 1px solid var(--c-border);
   }

   .type-group-label {
       font-family: 'Inter', sans-serif;
       font-size: 1rem;
       font-weight: 700;
       letter-spacing: 0.1em;
       text-transform: uppercase;
       color: var(--c-text);
       /*min-width: 110px;*/
       padding-top: 4px;
       white-space: nowrap;
   }

   .type-group-label.sub {
       color: var(--c-muted);
   }

   /* 画像カード（背・肘・フレーム・キャスター） */
   .img-card-group {
       display: flex;
       flex-wrap: wrap;
       gap: 10px;
       align-items: flex-start;
   }

   .img-card {
       cursor: pointer;
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 6px;
       width: 60px;
   }

   .img-card-thumb {
       width: 60px;
       height: 60px;
       object-fit: cover;
       border: 1.5px solid var(--c-border);
       transition: border-color var(--transition);
       display: block;
       flex-shrink: 0;
   }

   .img-card.active .img-card-thumb {
       border-color: transparent;
       outline: 2px solid var(--c-text);
       outline-offset: 1px;
   }

   .img-card.fc-disabled {
       opacity: 0.3;
       cursor: not-allowed;
       pointer-events: none;
   }

   .img-card-label {
       font-size: 0.9rem;
       text-align: center;
       line-height: 1.3;
       color: var(--c-text);
       width: 60px;
       word-break: break-all;
   }

   .img-card.active .img-card-label {
       font-weight: 700;
   }

   /* 選択インジケーター（赤丸） */
   .type-active-dot {
       width: 8px;
       height: 8px;
       border-radius: 50%;
       background: var(--c-red);
       margin-top: 6px;
       flex-shrink: 0;
   }

   /* テキストボタン（ハンガー・脚など） */
   .type-options {
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
       align-items: center;
   }

   .type-btn {
       cursor: pointer;
       border: 1px solid var(--c-border);
       border-radius: 2px;
       background: transparent;
       padding: 5px 14px;
       font-size: 1rem;
       font-family: inherit;
       color: var(--c-text);
       font-weight: 500;
       transition: all var(--transition);
       white-space: nowrap;
   }

   .type-btn:hover:not(:disabled) {
       border-color: var(--c-text);
   }

   .type-btn.active {
       background: var(--c-text);
       border-color: var(--c-text);
       color: #fff;
   }

   .type-btn:disabled {
       opacity: 0.3;
       cursor: not-allowed;
   }

   /* ── カラーセクション ── */
   .material-section {
       margin-bottom: 1.2rem;
   }

   .material-header {
       display: flex;
       align-items: center;
       gap: 10px;
       margin-bottom: 1rem;
   }

   .material-title {
       font-size: 1.2rem;
       font-weight: 700;
       letter-spacing: 0.06em;
   }

   .material-badge {
       font-size: 0.6rem;
       background: #f5f5f5;
       color: var(--c-muted);
       border-radius: 2px;
       padding: 2px 6px;
       font-weight: 500;
   }

   .mat-unavail-note {
       font-size: 1rem;
       color: var(--c-muted);
       background: #f5f5f5;
       border-radius: 4px;
       padding: 0.75rem 1rem;
       margin-bottom: 0.5rem;
   }

   /* カラーグリッド：サムネイル正方形 */
   .color-grid {
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
   }

   .color-card {
       cursor: pointer;
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 5px;
       width: 60px;
       position: relative;
       /*width: 5rem;*/
   }

   .color-card.unavailable {
       opacity: 0.3;
       cursor: not-allowed;
   }

   .color-img-wrap {
       width: 60px;
       height: 60px;
       background: #f5f5f5;
       position: relative;
       overflow: hidden;
   }

   .thumb-real-img {
       width: 100%;
       height: 100%;
       object-fit: contain;
       display: block;
   }

   .new-tag {
       display: none;
   }

   .color-card.selected .color-img-wrap {
       outline: 3px solid var(--c-text);
       outline-offset: 2px;
   }

   .color-card.selected .color-name,
   .img-card.active .img-card-label {
       font-weight: 700;
   }

   .color-info {
       text-align: center;
   }

   .color-code {
       font-size: 0.6rem;
       color: var(--c-muted);
       line-height: 1.2;
   }

   .color-name {
       font-size: 0.8rem;
       line-height: 1.3;
       max-width: 88px;
   }

   /* ── ローダー ── */
   #csv-loader {
       display: none;
       align-items: center;
       justify-content: center;
       padding: 4rem 1rem;
       gap: 12px;
       color: var(--c-muted);
       font-size: 0.85rem;
       grid-column: 1 / -1;
   }

   /* ── モーダル ── */
   .modal-overlay {
       position: fixed;
       inset: 0;
       background: rgba(0, 0, 0, 0.6);
       z-index: 1000;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 1rem;
       opacity: 0;
       pointer-events: none;
       transition: opacity 0.2s;
   }

   .modal-overlay.open {
       opacity: 1;
       pointer-events: all;
   }

   .modal-box {
       background: var(--c-surface);
       border-radius: 8px;
       padding: 2rem;
       max-width: 400px;
       width: 100%;
       transform: scale(0.94);
       transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.70, 1);
       position: relative;
       max-height: 90vh;
       overflow-y: auto;
   }

   .modal-overlay.open .modal-box {
       transform: scale(1);
   }

   .modal-close {
       position: absolute;
       top: 12px;
       right: 12px;
       width: 30px;
       height: 30px;
       border-radius: 50%;
       background: var(--c-bg);
       border: 1px solid var(--c-border);
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 0.9rem;
       color: var(--c-muted);
       transition: all var(--transition);
   }

   .modal-close:hover {
       background: var(--c-border);
       color: var(--c-text);
   }

   .modal-product-img-wrap {
       width: 100%;
       aspect-ratio: 1;
       background: #ffffff;
       border-radius: 4px;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-bottom: 1.25rem;
       overflow: hidden;
       position: relative;
   }

   .modal-product-img {
       width: 100%;
       height: 100%;
       object-fit: contain;
   }

   .modal-product-img.hidden {
       display: none;
   }

   .modal-svg-fallback {
       width: 100%;
       height: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .modal-svg-fallback.hidden {
       display: none;
   }

   .modal-product-code-row {
       background: #f5f5f5;
       border-radius: 4px;
       padding: 10px 14px;
       margin-bottom: 1rem;
       display: flex;
       align-items: center;
       justify-content: space-between;
   }

   .modal-product-code-lbl {
       font-size: 0.8rem;
       color: var(--c-muted);
       font-weight: 600;
       letter-spacing: 0.08em;
   }

   .modal-product-code-val {

       font-size: 0.9rem;
       font-weight: 700;
       color: var(--c-text);
       letter-spacing: 0.05em;
   }

   .modal-material-badge {
       display: inline-block;
       font-size: 0.8rem;
       background: #f5f5f5;
       color: var(--c-muted);
       border-radius: 3px;
       padding: 2px 7px;
       font-weight: 600;
       margin-bottom: 0.5rem;
   }

   .modal-color-name {
       font-size: 1.1rem;
       font-weight: 700;
       margin-bottom: 0.25rem;
   }

   .modal-spec-row {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 8px 0;
       border-top: 1px solid var(--c-border);
       font-size: 0.8rem;
   }

   .modal-spec-label {
       color: var(--c-muted);
   }

   .modal-frames-row {
       display: flex;
       gap: 6px;
       align-items: center;
   }

   .modal-frame-chip {
       background: var(--c-bg);
       border: 1px solid var(--c-border);
       border-radius: 100px;
       padding: 3px 10px;
       font-size: 1rem;
       font-weight: 500;
   }

   .modal-product-link {
       display: block;
       width: 100%;
       margin-top: 16px;
       padding: 12px;
       background: var(--c-text);
       color: #fff;
       text-decoration: none;
       text-align: center;
       border-radius: 100px;
       font-weight: 700;
       font-size: 0.85rem;
       letter-spacing: 0.06em;
       transition: opacity .2s;
   }

   .modal-product-link:hover {
       opacity: 0.75;
   }

   /* ── スマホ専用全画面モーダル ── */
   @media (max-width: 700px) {
       .sim-wrap {
           margin: 0 !important;
           min-height: auto;
           grid-template-columns: inherit;
           border: none;
       }

       /* 左パネルを全画面に */
       .sim-left {
           position: static;
           height: auto;
           overflow: visible;
           border-right: none;
           /*border-bottom: 1px solid var(--c-border);*/
       }

       .sim-left-img {
           min-height: unset;
           max-height: unset;
           height: auto;
           padding: 1.5rem;
           overflow: visible;
       }

       #left-product-img {
           width: 100%;
           max-height: none;
           height: auto;
       }

       /* 右パネル（通常時）は非表示 */
       .sim-right {
           display: none;
       }

       /* カスタマイズボタン */
       .sp-customize-btn {
           display: flex;
           align-items: center;
           justify-content: center;
           gap: 6px;
           width: calc(100% - 2rem);
           margin: 0.75rem auto;
           padding: 12px;
           background: var(--c-text);
           color: #fff;
           border: none;
           border-radius: 100px;
           font-size: 1.2rem;
           font-weight: 700;
           font-family: inherit;
           letter-spacing: 0.08em;
           cursor: pointer;
       }

       /* 全画面オーバーレイ */
       .sp-sheet-overlay {
           display: block;
           position: fixed;
           inset: 0;
           background: rgba(0, 0, 0, 0);
           z-index: 200;
           pointer-events: none;
           transition: background 0.25s;
       }

       .sp-sheet-overlay.open {
           background: rgba(0, 0, 0, 0.3);
           pointer-events: all;
       }

       /* 全画面シート */
       .sp-sheet {
           position: fixed;
           inset: 0;
           z-index: 201;
           background: var(--c-bg);
           transform: translateY(100%);
           transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
           display: flex;
           flex-direction: column;
       }

       .sp-sheet.open {
           transform: translateY(0);
       }

       /* ハンドルは全画面では不要なので非表示 */
       .sp-sheet-handle {
           display: none;
       }

       .sp-sheet-header {
           display: flex;
           align-items: center;
           justify-content: space-between;
           padding: 14px 1.25rem;
           flex-shrink: 0;
           border-bottom: 1px solid var(--c-border);
           background: var(--c-bg);
       }

       .sp-sheet-title {
           font-size: 0.78rem;
           font-weight: 700;
           letter-spacing: 0.1em;
           text-transform: uppercase;
       }

       .sp-sheet-close {
           width: 32px;
           height: 32px;
           border-radius: 50%;
           background: var(--c-border);
           border: none;
           font-size: 0.9rem;
           cursor: pointer;
           display: flex;
           align-items: center;
           justify-content: center;
           color: var(--c-text);
       }

       .sp-sheet-body {
           overflow-y: auto;
           -webkit-overflow-scrolling: touch;
           flex: 1;
           padding: 1rem 1.25rem 3rem;
       }

       /* シート内のタイプグループを縦積みに */
       .sp-sheet-body .type-group-row {
           flex-direction: column;
           gap: 0.75rem;
       }

       .sp-sheet-body .type-group-label {
           min-width: unset;
       }
   }

   /* デスクトップではスマホUI非表示 */
   @media (min-width: 701px) {

       .sp-customize-btn,
       .sp-sheet-overlay,
       .sp-sheet {
           display: none !important;
       }
   }

   @keyframes spin {
       to {
           transform: rotate(360deg);
       }
   }

   /* ── 画像フェードイン ── */
   @keyframes fadeIn {
       from {
           opacity: 0;
       }

       to {
           opacity: 1;
       }
   }

   #left-product-img {
       animation: fadeIn 0.5s ease forwards;
   }

   #left-product-img.fade-reset {
       opacity: 0;
       animation: none;
   }

   #reset-btn {
       display: block;
       width: 100%;
       margin-top: 0.5rem;
       padding: 6px;
       background: transparent;
       border: none;
       font-size: 1.2rem;
       color: var(--c-muted);
       cursor: pointer;
       text-align: center;
       font-family: inherit;
       letter-spacing: 0.05em;
   }

   #reset-btn:hover {
       color: var(--c-text);
   }