/* ============ iGrow-like Modern Polish ============ */
:root{
  --bg:#f7f8fb;             /* 背景 */
  --bg-grad1:#eef3f9;       /* グラデ用 */
  --card:#ffffff;           /* カード面 */
  --ink:#0f172a;            /* 本文色 */
  --muted:#68768a;          /* 補助文字 */
  --line:#e5e9f0;           /* 枠線 */
  --line-strong:#d6dce6;
  --primary:#e60033;        /* 主ボタン(赤) */
  --primary-ink:#fff;
  --link:#0ea5e9;

  --radius:14px;
  --radius-sm:10px;
  --shadow:0 8px 24px rgba(16,23,42,.06);
  --shadow-pressed:0 6px 16px rgba(16,23,42,.10);

  --font:"SF Pro JP","Inter","Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--font); color:var(--ink);
  background:
    radial-gradient(900px 700px at -10% -10%, rgba(14,165,233,.10), transparent 60%),
    radial-gradient(1200px 900px at 110% -20%, rgba(230,0,51,.08), transparent 60%),
    linear-gradient(#fff, var(--bg-grad1)),
    var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* ---------- Header（中央寄せ＋下線で区切り） ---------- */
header{
  position:sticky; top:0; z-index:10;
  background:var(--card);
  border-bottom:1px solid var(--line);
  padding:16px 20px;
}
header h1{margin:0 0 6px; font-size:1.5rem; letter-spacing:.2px}
header small{color:var(--muted)}
/* 中央寄せ幅 */
header, section, footer{max-width:980px; margin-left:auto; margin-right:auto}

/* ---------- セクション（カード化） ---------- */
section{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
  margin:16px auto;
}
/* セクション見出しに“下線”で明瞭な区切り */
section h2, section h3{
  margin:0 0 14px; font-size:1.05rem; letter-spacing:.2px;
  padding-bottom:8px;
  border-bottom:2px solid var(--line);
}

/* ---------- 検索フォーム ---------- */
#search-form{
  display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center;
}
#search-form input{
  padding:14px; border:1px solid var(--line-strong); border-radius:28px; outline:none; background:#fff;
}
#search-form input::placeholder{color:#9aa3b2}
#search-form input:focus{border-color:#cfd6df; box-shadow:0 0 0 3px rgba(14,165,233,.10)}
#search-form button{
  padding:10px 16px; border:none; border-radius:28px; background:#0f172a; color:#fff; font-weight:700; cursor:pointer;
}
#search-form button:hover{box-shadow:var(--shadow-pressed)}

/* ---------- 検索結果 “ブロック全体” をカード化 ---------- */
.results{
  margin-top:14px;
  background:#fbfdff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px;
}
/* 各行をカード風に */
.result-row{
  display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px 14px;
}
.result-row + .result-row{margin-top:10px}
.result-row:hover{border-color:#dfe4eb}
.result-row small{color:var(--muted)}
.result-actions{display:flex; gap:8px}
.result-actions a{
  text-decoration:none; border:1px solid var(--line); border-radius:8px;
  padding:7px 12px; background:#f3f4f6; color:#0f172a; font-weight:600; font-size:.88rem;
}
.result-actions a:hover{background:#e5e7eb}

/* ---------- Quote / Trade（同じカード内でも区切り） ---------- */
#quote{
  display:grid; grid-template-columns:repeat(4,minmax(140px,1fr)); gap:10px;
  background:#f8fafc; border:1px solid var(--line); border-radius:12px; padding:12px;
}
#quote b{color:#334155}
.trade{
  margin-top:10px; display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center;
}
.trade input{
  padding:12px; border:1px solid var(--line-strong); border-radius:12px; outline:none;
}
.trade input:focus{border-color:#cfd6df; box-shadow:0 0 0 3px rgba(14,165,233,.10)}
#buy-btn{
  padding:10px 16px; border:none; border-radius:12px; background:var(--primary); color:var(--primary-ink);
  font-weight:700; cursor:pointer;
}
#buy-btn:hover{filter:brightness(.95)}

/* ---------- ボタン（軽量） ---------- */
button, a.button{
  cursor:pointer; font-weight:600; border-radius:8px; font-size:.9rem;
  border:1px solid var(--line); transition:.2s ease;
  background:#fff; color:#111827; padding:8px 14px; line-height:1.2;
}
button:hover, a.button:hover{background:#f3f4f6; border-color:#cbd5e1}
.btn-sell, .btn-sell-all{background:#0f172a; color:#fff; border:none; padding:9px 14px; font-weight:600}
.btn-sell:hover, .btn-sell-all:hover{filter:brightness(1.05)}

/* ---------- チャートもカード風に ---------- */
#price-chart{
  width:100%; height:340px; background:#fff; border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow); margin-top:10px;
}

/* ---------- テーブル（ポートフォリオ） ---------- */
.pf-table-wrap {
  width: 100%;
  overflow-x: auto;                /* 画面が狭い時は横スクロール */
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
}

#pf-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;             /* 列幅を安定させる */
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
}

#pf-table th,
#pf-table td {
  padding: 10px 8px;
  text-align: center;
  border-bottom: 1px solid #eaeaea;
  white-space: nowrap;             /* 折り返しで高さが暴れないように */
}

#pf-table th {
  background: #111827;
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
}

#pf-table th:first-child,
#pf-table td:first-child {
  text-align: left;
  padding-left: 12px;
  width: 26%;                      /* 銘柄名の列を広めに */
}

.sell-controls {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
}

.btn-sell, .btn-sell-all {
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 6px;
  border: none;
  background: #111827;
  color: #fff;
}
.btn-sell-all { background: #4b5563; }

#pf-table a.link {
  color: #1e40af; font-size: 13px; text-decoration: none;
}
#pf-table a.link:hover { text-decoration: underline; }

/* ---------- 合計サマリー ---------- */
.pf-summary{
  margin-top:12px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow);
  display:grid; grid-template-columns:1fr 1fr auto; gap:12px; padding:12px 14px;
}
.pf-summary b{color:#0f172a}
#pf-value-jpy,#pf-pl-jpy{font-size:1.12rem; font-weight:800}
#reset-btn{
  background:#f1f5f9; border:1px solid var(--line); color:#334155; border-radius:12px; padding:10px 14px; font-weight:700;
}
#reset-btn:hover{background:#e8eef6}

/* ---------- Footer ---------- */
footer{max-width:980px; margin:10px auto 40px; color:var(--muted); text-align:center}

/* ---------- Mobile（テーブルは“表のまま”表示） ---------- */
@media (max-width: 840px){
  section{padding:14px; margin:12px auto}
  header h1{font-size:1.35rem}
  #quote{grid-template-columns:1fr 1fr}
  .results .result-row{grid-template-columns:1fr; gap:8px}
  .trade{grid-template-columns:1fr}
  #price-chart{height:300px}
  .results .result-actions{flex-wrap:wrap}
  .results .result-actions a, .results .result-actions button{width:auto; max-width:100%}
}

@media (max-width: 720px){
  #pf-table { min-width: 640px; }          /* 横スクロール許可 */
  #pf-table th, #pf-table td { padding: 8px 6px; font-size: 13px; }
}

/* ---- 重要：以前の「カード化」指定を完全に無効化 ---- */
/* これらが残っていると崩れます。上書きで必ず無効化 */
@media (max-width: 600px){
  #pf-table thead { display: table-header-group !important; }
  #pf-table, #pf-table tbody, #pf-table tr, #pf-table td {
    display: table !important; width: auto !important;
  }
  #pf-table tbody td::before { content: none !important; }
}
/* ===== Portfolio: 強制テーブル表示＆はみ出し防止（最優先） ===== */

/* 包み枠は必ず横スクロール可能に */
.pf-table-wrap {
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* ここから “核オーバーライド” */
#pf-table,
#pf-table thead,
#pf-table tbody {
  display: table !important;
  width: 100% !important;
  border-collapse: collapse !important;
  table-layout: fixed !important;
  background: #fff !important;
}

#pf-table tr { display: table-row !important; }
#pf-table th, #pf-table td {
  display: table-cell !important;
  vertical-align: middle !important;
  white-space: nowrap !important;      /* 折り返しで縦長化しない */
  padding: 10px 8px !important;
  border-bottom: 1px solid #eaeaea !important;
  text-align: center !important;
}

/* ヘッダ */
#pf-table th {
  background: #111827 !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
}

/* 銘柄列は左寄せ＆少し広め */
#pf-table th:first-child,
#pf-table td:first-child {
  text-align: left !important;
  padding-left: 12px !important;
  width: 28% !important;
}

/* 以前の“カード化”のラベル表示を完全無効化 */
#pf-table tbody td::before {
  content: none !important;
}

/* ボタン行横並び維持 */
#pf-table .sell-controls {
  display: flex !important;
  gap: 6px !important;
  justify-content: flex-end !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

/* 画面が狭いときはテーブル自体に最小幅を付けて横スクロール許可 */
@media (max-width: 720px) {
  #pf-table { min-width: 640px !important; }
}
/* ===== Portfolio table: inside-card horizontal scroll & no overlap ===== */

/* カード内スクロールを強制 */
.pf-table-wrap{
  display:block !important;
  width:100% !important;
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch !important;
  border-radius:12px;
}

/* テーブルに最小幅を与えて“スクロールさせる” */
#pf-table{
  width:100%;
  min-width: 780px;              /* ← これより狭い画面では横スクロール */
  table-layout: fixed;
  border-collapse: collapse;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
}

#pf-table th,#pf-table td{
  padding:10px 8px;
  border-bottom:1px solid #eaeaea;
  text-align:center;
  white-space:nowrap;            /* 基本は折り返さない */
  vertical-align:middle;
}
#pf-table th{
  background:#111827; color:#fff; font-weight:600; font-size:.9rem;
}
#pf-table th:first-child,#pf-table td:first-child{
  text-align:left; padding-left:12px;
}

/* 列幅の比率（必要に応じて微調整） */
#pf-table th:nth-child(1), #pf-table td:nth-child(1){ width:26%; } /* 銘柄 */
#pf-table th:nth-child(2), #pf-table td:nth-child(2){ width:10%; } /* 株数 */
#pf-table th:nth-child(3), #pf-table td:nth-child(3){ width:16%; } /* 平均 */
#pf-table th:nth-child(4), #pf-table td:nth-child(4){ width:16%; } /* 現在 */
#pf-table th:nth-child(5), #pf-table td:nth-child(5){ width:12%; } /* 評価損益 */
#pf-table th:nth-child(6), #pf-table td:nth-child(6){ width:10%; } /* 売却株数 */
#pf-table th:nth-child(7), #pf-table td:nth-child(7){ width:10%; } /* 操作 */

/* --- 重なり対策 --- */
/* 売却株数の入力は固定幅で小さく */
#pf-table .td-qtysell input{
  width: 72px;
  padding: 6px 8px;
  border:1px solid var(--line-strong);
  border-radius:8px;
  font-size:14px;
}

/* 操作列は折り返しOKにして重なり禁止 */
#pf-table .td-ops{
  white-space: normal !important;     /* ← 折り返し許可 */
}
#pf-table .td-ops .sell-controls{
  display:flex;
  gap:6px;
  justify-content:flex-start;
  align-items:center;
  flex-wrap:wrap;                      /* ← はみ出す前に改行 */
}
#pf-table .td-ops .btn-sell,
#pf-table .td-ops .btn-sell-all{
  padding:6px 10px;
  font-size:13px;
  border-radius:6px;
  border:none;
  background:#111827; color:#fff;
}
#pf-table .td-ops .btn-sell-all{ background:#4b5563; }
#pf-table .td-ops a.link{ color:#1e40af; font-size:13px; text-decoration:none; }
#pf-table .td-ops a.link:hover{ text-decoration:underline; }

/* ヘッダのフォント＆セル余白を少し詰める（スマホ） */
@media (max-width: 720px){
  #pf-table { min-width: 720px; }
  #pf-table th, #pf-table td{ padding:8px 6px; font-size:13px; }
}

/* ===== Portfolio: 強制スクロール＆重なり防止（最優先パッチ） ===== */
.pf-table-wrap{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior: contain !important;  /* ページ縦スクロールに食われない */
  border-radius:12px;
}

/* テーブルは“広め最小幅”を持たせ、必ず横スクロールで見せる */
#pf-table{
  width:100% !important;
  min-width:820px !important;              /* ← ここを 780–900 で調整可 */
  table-layout:fixed !important;
  border-collapse:collapse !important;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
}

/* セル基本 */
#pf-table th,#pf-table td{
  padding:10px 8px !important;
  border-bottom:1px solid #eaeaea !important;
  text-align:center !important;
  white-space:nowrap !important;           /* 基本は折り返さない */
  vertical-align:middle !important;
}
#pf-table th{
  background:#111827 !important;
  color:#fff !important;
  font-weight:600 !important;
  font-size:.9rem !important;
}
#pf-table th:first-child,#pf-table td:first-child{
  text-align:left !important;
  padding-left:12px !important;
}

/* 列幅配分（必要に応じて微調整OK） */
#pf-table th:nth-child(1), #pf-table td:nth-child(1){ width:26% !important; } /* 銘柄 */
#pf-table th:nth-child(2), #pf-table td:nth-child(2){ width:10% !important; } /* 株数 */
#pf-table th:nth-child(3), #pf-table td:nth-child(3){ width:17% !important; } /* 平均 */
#pf-table th:nth-child(4), #pf-table td:nth-child(4){ width:17% !important; } /* 現在 */
#pf-table th:nth-child(5), #pf-table td:nth-child(5){ width:12% !important; } /* 評価損益 */
#pf-table th:nth-child(6), #pf-table td:nth-child(6){ width:9%  !important; } /* 売却株数 */
#pf-table th:nth-child(7), #pf-table td:nth-child(7){ width:9%  !important; } /* 操作 */

/* 売却欄と操作欄の重なり対策 */
#pf-table .td-qtysell input{
  width:68px !important;
  padding:6px 8px !important;
  border:1px solid var(--line-strong);
  border-radius:8px;
  font-size:14px;
}
#pf-table .td-ops{
  white-space:normal !important;           /* ← 折り返し許可 */
}
#pf-table .td-ops .sell-controls{
  display:flex !important;
  gap:6px !important;
  justify-content:flex-start !important;
  align-items:center !important;
  flex-wrap:wrap !important;               /* ← はみ出す前に改行 */
}

/* モバイルで少し詰める */
@media (max-width: 720px){
  #pf-table { min-width: 820px !important; }
  #pf-table th, #pf-table td{ padding:8px 6px !important; font-size:13px !important; }
}
/* iOS フォーカス拡大を起こさない */
input, select, textarea {
  font-size: 16px;              /* 16px以上でSafariはズームしない */
  -webkit-text-size-adjust: 100%;
}

/* 数値入力の見た目安定 */
input[type=number]{
  -moz-appearance: textfield;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance: none; margin: 0;
}
/* ===== PF: 入力とボタンが重ならない最終パッチ ===== */

/* テーブルはカード内で必ず横スクロール可に */
.pf-table-wrap{
  display:block !important;
  width:100% !important;
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch !important;
}

/* 列幅の配分（売却欄と操作欄を少し広めに） */
#pf-table{ min-width: 840px !important; table-layout: fixed !important; }
#pf-table th:nth-child(1), #pf-table td:nth-child(1){ width:24% !important; } /* 銘柄 */
#pf-table th:nth-child(2), #pf-table td:nth-child(2){ width:10% !important; } /* 株数 */
#pf-table th:nth-child(3), #pf-table td:nth-child(3){ width:18% !important; } /* 平均 */
#pf-table th:nth-child(4), #pf-table td:nth-child(4){ width:18% !important; } /* 現在 */
#pf-table th:nth-child(5), #pf-table td:nth-child(5){ width:12% !important; } /* 評価損益 */
#pf-table th:nth-child(6), #pf-table td:nth-child(6){ width:9%  !important; } /* 売却株数 */
#pf-table th:nth-child(7), #pf-table td:nth-child(7){ width:9%  !important; } /* 操作 */

/* 売却株数の入力は固定幅で小さめ＆はみ出さない */
#pf-table .td-qtysell{ white-space: nowrap !important; }
#pf-table .td-qtysell input{
  width: 72px !important; max-width: 100% !important;
  padding: 6px 8px !important;
  border:1px solid var(--line-strong); border-radius:8px;
  font-size: 14px;
}

/* 操作欄は折り返しを許可して重なり禁止 */
#pf-table .td-ops{ white-space: normal !important; }
#pf-table .td-ops .sell-controls{
  display:flex !important; gap:6px !important;
  justify-content:flex-start !important; align-items:center !important;
  flex-wrap:wrap !important;                /* ← ここで改行を許可 */
}
#pf-table .td-ops .btn-sell,
#pf-table .td-ops .btn-sell-all{
  padding:6px 10px; font-size:13px; border-radius:6px; border:none;
}
#pf-table .td-ops .btn-sell-all{ background:#4b5563; }
#pf-table .td-ops a.link{ font-size:13px; }

/* さらに狭い端末ではちょい詰め */
@media (max-width: 420px){
  #pf-table{ min-width: 880px !important; }  /* 強制的に横スクロール */
  #pf-table th, #pf-table td{ padding:7px 6px !important; font-size:12.5px !important; }
  #pf-table .td-qtysell input{ width:64px !important; }
  #pf-table .td-ops .btn-sell, #pf-table .td-ops .btn-sell-all{ padding:5px 8px; font-size:12px; }
}
/* ===== PF: 操作カラムを広く見やすく調整 ===== */

/* テーブルの横スクロール範囲を広げる */
#pf-table {
  min-width: 960px !important;   /* ← 880〜960pxくらいがバランス良い */
  table-layout: fixed !important;
}

/* 列幅配分を再調整（操作カラムを広く） */
#pf-table th:nth-child(1),
#pf-table td:nth-child(1) { width: 18% !important; } /* 銘柄 */
#pf-table th:nth-child(2),
#pf-table td:nth-child(2) { width: 10% !important; } /* 株数 */
#pf-table th:nth-child(3),
#pf-table td:nth-child(3) { width: 16% !important; } /* 平均取得 */
#pf-table th:nth-child(4),
#pf-table td:nth-child(4) { width: 16% !important; } /* 現在価格 */
#pf-table th:nth-child(5),
#pf-table td:nth-child(5) { width: 12% !important; } /* 評価損益 */
#pf-table th:nth-child(6),
#pf-table td:nth-child(6) { width: 10% !important; } /* 売却株数 */
#pf-table th:nth-child(7),
#pf-table td:nth-child(7) { width: 18% !important; } /* 操作（広め） */

/* 売却操作欄の内部余裕 */
#pf-table .td-ops .sell-controls {
  display: flex !important;
  gap: 8px !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: nowrap !important;     /* 折り返しを防ぐ（横並びで見やすく） */
}

/* ボタン間の視認性を上げる */
#pf-table .td-ops .btn-sell,
#pf-table .td-ops .btn-sell-all {
  padding: 7px 12px !important;
  font-size: 14px !important;
  border-radius: 6px;
}

#pf-table .td-ops a.link {
  font-size: 14px !important;
  text-decoration: none;
  color: #1e40af;
}

#pf-table .td-ops a.link:hover {
  text-decoration: underline;
}

/* モバイルでは強制的に横スクロールを許可 */
.pf-table-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding-bottom: 8px;
}