body { margin: 0; padding: 0; color: #333; line-height: 1.6; font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; background-color: #fcfcfc; }
  .ag-viewport-container { min-height: 100vh; position: relative; background: #FFF; }
  
  .scroll-notice { display: none; } /* 自然なスクロールにするため案内を非表示に */
  
  /* Header & Logo */
  .header-top { border-bottom: 1px solid #a3a3a3; padding: 12px 0; background: #fff; display: flex; justify-content: center; }
  .devirock-logo img { display: block; width: 140px; height: auto; }

  .container { max-width: 800px; margin: 0 auto; padding: 16px 20px 40px; }
  
  /* QA Page Title */
  .medium-category { margin-bottom: 12px; }
  .qa-page-title { text-align: center; font-size: 20px; font-weight: bold; color: #000; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; }
  .qa-page-title img { width: 32px; height: auto; }
  @media (min-width: 801px) {
    .qa-page-title { font-size: 32px; gap: 16px; }
    .qa-page-title img { width: 56px; }
  }
  
  .section { margin-bottom: 32px; }
  .section-title { border-left: 4px solid #333; padding-left: 12px; font-size: 18px; margin-bottom: 20px; font-weight: bold; }
  
  /* Compact Action Tile */
  .compact-action { margin-top: -8px; }
  .action-tile-button { width: 100%; min-height: 72px; background: #333; color: #FFF; border: none; border-radius: 12px; padding: 16px 20px; cursor: pointer; display: flex; align-items: center; text-align: left; gap: 16px; transition: transform 0.2s, background 0.2s; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
  .action-tile-button:active { transform: scale(0.98); background: #000; }
  .action-tile-button .icon { font-size: 24px; }
  .action-tile-button .text-group { flex: 1; display: flex; flex-direction: column; }
  .action-tile-button .main-label { font-size: 16px; font-weight: bold; }
  .action-tile-button .sub-label { font-size: 11px; opacity: 0.7; margin-top: 2px; }
  .action-tile-button .arrow { font-size: 16px; opacity: 0.5; }

  /* Tabs */
  .tabs-container { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; border-bottom: 1px solid #EEE; padding-bottom: 8px; }
  .tab-button { padding: 6px 14px; border: 1px solid #EEE; border-radius: 20px; background: #FFF; cursor: pointer; font-size: 12px; color: #666; transition: all 0.2s; min-height: 32px; }
  .tab-button.active { background: #333; color: #FFF; border-color: #333; }

  /* FAQ */
  .faq-search-wrapper { margin-bottom: 12px; }
  .faq-search-input { width: 100%; padding: 10px 16px; border: 1px solid #EEE; border-radius: 10px; font-size: 14px; box-sizing: border-box; background: #F8F9FA; transition: all 0.2s; min-height: 40px; }
  .faq-search-input:focus { outline: none; border-color: #333; background: #FFF; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
  
  /* FAQ Container */
  .faq-container { border-top: 1px solid #333; overflow-y: auto; background: #FFF; height: calc(100vh - 280px); min-height: 420px; } /* 画面サイズに合わせて高さを可変に */
  
  /* FAQ Item */
  .faq-item { border-bottom: 1px solid #e5e5e5; }
  .faq-item:last-child { border-bottom: none; }
  
  /* FAQ Default Marker Hidden */
  details summary::-webkit-details-marker { display: none; }
  details summary { list-style: none; }
  
  /* FAQ Summary */
  .faq-summary { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px 18px 4px; cursor: pointer; background: #FFF; transition: background 0.2s; min-height: 44px; }
  .faq-question { font-weight: bold; font-size: 13px; flex: 1; padding-right: 12px; text-align: left; }
  
  /* FAQ Icon +/- */
  .faq-icon { display: inline-flex; justify-content: center; align-items: center; width: 20px; height: 20px; flex-shrink: 0; }
  .faq-icon::after { content: "＋"; font-family: monospace; font-weight: 300; font-size: 16px; color: #888; transition: color 0.2s; }
  details[open] .faq-icon::after { content: "－"; color: #333; }
  
  .faq-highlight { color: #E60012; } /* 背景色を削除し赤字のみに変更 */
  
  /* FAQ Answer */
  .faq-answer { padding: 20px 20px 20px 28px; background: #f8f9fa; color: #555; font-size: 13px; border-top: 1px dashed #ddd; }
  .no-results-msg { height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; text-align: center; color: #999; font-size: 13px; background: #FBFBFB; box-sizing: border-box; padding: 24px 20px; }
  
  /* Bottom Sheet (Responsive UI) */
  .bottom-sheet { visibility: hidden; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; display: flex; align-items: flex-end; justify-content: center; transition: visibility 0.3s; }
  .bottom-sheet.active { visibility: visible; }
  .sheet-overlay { position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.3s; cursor: pointer; }
  .bottom-sheet.active .sheet-overlay { opacity: 1; }
  
  .sheet-content { position: relative; width: 100%; background: #FFF; border-radius: 20px 20px 0 0; transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); height: 80vh; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 -8px 24px rgba(0,0,0,0.15); z-index: 1001; }
  .bottom-sheet.active .sheet-content { transform: translateY(0); }
  
  /* Search Results Styling */
  .search-result-container { position: relative; }
  .sticky-header { 
    position: sticky; 
    top: -20px; /* sheet-bodyのpadding分を相殺 */
    background: #FFF; 
    z-index: 10; 
    padding: 10px 4px 16px; 
    margin: -10px -4px 20px; 
    border-bottom: 1px solid #F0F0F0;
  }
  .result-product-name { margin: 0 0 4px; font-size: 15px; font-weight: bold; color: #333; line-height: 1.4; }
  .result-product-id { margin: 0; font-size: 11px; color: #888; }
  
  .color-group-item { 
    padding: 20px 0; 
    border-bottom: 1px solid #F8F9FA; 
  }
  .color-name-label { 
    font-size: 14px; 
    font-weight: bold; 
    color: #333; 
    margin-bottom: 12px; 
    padding-left: 4px;
  }
  .color-details { 
    display: flex; 
    gap: 16px; 
    align-items: flex-start;
  }
  .color-image-col { flex-shrink: 0; }
  .result-thumb-large { 
    width: 120px; 
    height: 120px; 
    border-radius: 8px; 
    overflow: hidden; 
    background: #F8F9FA; 
    border: 1px solid #EEE; 
  }
  .result-thumb-large img { width: 100%; height: 100%; object-fit: cover; }
  
  .color-info-col { flex: 1; min-width: 0; }
  
  .mini-status-table { width: 100%; border-collapse: collapse; font-size: 12px; }
  .mini-status-table td { padding: 4px 0; border-bottom: 1px dotted #EEE; }
  .mini-status-table tr:last-child td { border-bottom: none; }
  .mini-size { width: 40px; color: #666; font-weight: bold; }
  .mini-status { color: #333; text-align: right; }
  .mini-status.has-plan { color: #E60012; font-weight: bold; }

  /* PC向けレイアウト調整 */
  @media (min-width: 801px) {
    .bottom-sheet { align-items: center; }
    .sheet-content { width: 800px; height: auto; max-height: 85vh; border-radius: 20px; transform: translateY(40px); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }
    .bottom-sheet.active .sheet-content { transform: translateY(0); opacity: 1; }
    .sheet-handle { display: none; } /* PCではハンドル不要 */
  }
  
  .sheet-handle { width: 36px; height: 4px; background: #DDD; border-radius: 2px; margin: 10px auto 4px; flex-shrink: 0; }
  .sheet-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; font-size: 24px; border: none; background: none; cursor: pointer; color: #BBB; display: flex; align-items: center; justify-content: center; z-index: 10; }
  
  .sheet-header { padding: 16px 24px 20px; border-bottom: 1px solid #F0F0F0; flex-shrink: 0; }
  .sheet-title { margin: 0 0 4px; font-size: 18px; font-weight: bold; color: #333; }
  .sheet-desc { margin: 0 0 16px; font-size: 12px; color: #888; }
  
  .sheet-search-form { display: flex; gap: 8px; }
  .sheet-input { flex: 1; padding: 10px 14px; border: 1px solid #DDD; border-radius: 10px; font-size: 16px; min-height: 44px; background: #F8F9FA; -webkit-appearance: none; }
  .sheet-input:focus { border-color: #333; background: #FFF; outline: none; }
  .sheet-search-button { background: #333; color: #FFF; padding: 0 20px; border: none; border-radius: 10px; cursor: pointer; font-weight: bold; min-height: 44px; font-size: 14px; }
  
  .sheet-body { padding: 20px 24px 40px; overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
  .search-placeholder { text-align: center; color: #BBB; padding: 48px 20px; font-size: 14px; }

  /* Results Table (Fixed Header in Modal Body) */
  .search-result-table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .search-result-table th { padding: 12px 8px; text-align: left; background: #F8F9FA; border-bottom: 1px solid #EEE; position: sticky; top: 0; z-index: 5; }
  .search-result-table td { padding: 14px 8px; border-bottom: 1px solid #F8F9FA; }
  .status-text { font-weight: bold; color: #333; } /* 赤から濃いグレーへ統一 */

  /* Loader */
  .loader { border: 3px solid #f3f3f3; border-top: 3px solid #333; border-radius: 50%; width: 24px; height: 24px; animation: spin 1s linear infinite; margin: 0 auto 12px; }
  @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }