/* =========================================
   Milvaneth Mobile CSS
   スマホ用レスポンシブ上書き
   iPhone / Android 対応
   ========================================= */

/* -----------------------------------------
   共通安全設定
----------------------------------------- */




@media (max-width: 768px) {

  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    overflow-x: hidden;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  img {
    max-width: 100%;
    height: auto;
  }

}

/* =========================================
   HEADER
   ========================================= */

@media (max-width: 768px) {

  /* タイトルカード */
  .site-header-card {
    padding: 12px;
  }

  .site-header-title {
    font-size: 16px;
    line-height: 1.4;
  }

  .site-header-desc {
    font-size: 12px;
  }

}

/* =========================================
   MODE / WORLD SELECT
   ========================================= */

@media (max-width: 768px) {

  .mode-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .mode-pill {
    flex: 1 1 120px;
    min-height: 36px;
  }

  .dc-select-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

}

/* =========================================
   SIDEBAR
   ========================================= */

@media (max-width: 768px) {

  /* 左ミニナビ */
  .sidebar-mini {
    width: 42px;
    min-width: 42px;
  }

  .sidebar-mini .mini-btn {
    width: 32px;
    height: 32px;
  }

}

/* =========================================
   ESTIMATOR
   ========================================= */

@media (max-width: 768px) {

  /* 原価計算メインレイアウト */

  #calc-body {
    display: block;
  }

  .calc-section {
    width: 100%;
    margin-bottom: 14px;
  }

}

/* =========================================
   PRODUCT HEADER
   ========================================= */

@media (max-width: 768px) {

  .product-head {
    display: block;
  }

  .ph-name {
    font-size: 16px;
    line-height: 1.35;
  }

  .ph-sub {
    font-size: 12px;
  }

}

/* =========================================
   KPI
   ========================================= */

@media (max-width: 768px) {

  .ph-kpis {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .calc-kpis {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

}

/* =========================================
   RECIPE TREE
   ========================================= */

@media (max-width: 768px) {

  .tree {
    overflow: visible;
  }

  .tree .name,
  .tree .meta {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

}

/* =========================================
   MATERIAL TABLE
   ========================================= */

@media (max-width: 768px) {

  #materials-by-decision {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #materials-by-decision table {
    min-width: 520px;
  }

}

/* =========================================
   RANKING
   ========================================= */

@media (max-width: 768px) {

  .ranking-row {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 8px;
  }

}

/* =========================================
   CATEGORY
   ========================================= */

@media (max-width: 768px) {

  .category-grid {
    grid-template-columns: 1fr;
  }

}

/* =========================================
   SMALL PHONE
   ========================================= */

@media (max-width: 480px) {

  .mode-pill {
    flex: 1 1 100%;
  }

  .ph-name {
    font-size: 15px;
  }

}

/* =========================================
   Milvaneth mobile layout fix
   ========================================= */
@media (max-width: 768px) {

  .container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px !important;
  }

  .threecol {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .threecol > section.card {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 12px 0 !important;
  }

  /* 左メニューカード */
  .threecol > section.card:first-child {
    padding: 10px !important;
  }

  /* サイドバーの中身を横幅いっぱいで扱う */
  #left-menu {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ミニメニューを左の細い独立列として残しつつ圧縮 */
  .sidebar-mini {
    width: 44px !important;
    min-width: 44px !important;
  }

  .sidebar-mini .mini-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }

  /* ランキング・原価計算・カテゴリ結果 */
  #market-card,
  #profit-card,
  #calc-view,
  #category-results,
  #gmv-top-card,
  #profit-top-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* 原価計算の本体はさらに1カラム */
  #calc-body {
    display: block !important;
    width: 100% !important;
  }

  #calc-body > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 12px !important;
  }

  /* モード切替まわり */
  #mode-switch {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  #mode-switch .mode-pill {
    flex: 1 1 120px;
  }

  /* header内の直書きflex救済 */
  header .card[style*="display:flex"] {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }

  .dev-controls {
    display: none !important;
  }

  #dc,
  #worldId {
    max-width: 100% !important;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 10px !important;
  }

  #mode-switch .mode-pill {
    flex: 1 1 100% !important;
  }
}

@media (max-width: 768px){

  /* 左の1列サイドバーをやめる */
  .threecol{
    display: block !important;
  }

  .threecol > section.card:first-child{
    width: 100% !important;
    min-width: 0 !important;
    padding: 8px !important;
    margin-bottom: 10px !important;
  }

  #left-menu{
    display: block !important;
    width: 100% !important;
  }

  /* カテゴリアイコンを横並びに */
  .sidebar-mini{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;

    padding: 6px 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  .sidebar-mini .mini-btn{
    flex: 0 0 auto !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
  }

  .sidebar-mini .mini-sep,
  .sidebar-mini .mini-grow{
    display: none !important;
  }
}