/* ============================================
   亀トレ資金管理ツール 共通CSS (common.css)
   全4ツールで読み込む。ツール固有のスタイルは
   各ツールのCSS（lot-size.css 等）に書く。
   ============================================ */

:root{
  --shell:#17352C;        /* 甲羅グリーン（ヒーロー・見出し） */
  --shell-soft:#1F4438;
  --leaf:#2F9E6B;         /* 若葉（メインアクセント） */
  --leaf-dark:#1E7A50;
  --sand:#E3A93C;         /* アンバー（注意） */
  --sand-bg:#FBF3DF;
  --danger:#D65045;       /* 危険 */
  --danger-bg:#FBE5E3;
  --ink:#1C2B26;
  --muted:#5F6F68;
  --bg:#F3F6F3;
  --card:#FFFFFF;
  --line:#DCE4DE;
  --num:'IBM Plex Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN',sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.7;
}
.wrap{max-width:860px;margin:0 auto;padding:0 16px}

/* ===== hero ===== */
.hero{background:var(--shell);color:#fff;padding:40px 0 50px;position:relative;overflow:hidden}
.hero::after{ /* 甲羅パターン */
  content:"";position:absolute;inset:0;opacity:.07;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 2 52 16v28L28 58 4 44V16zM28 60 52 74v28L28 116 4 102V74z' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E");
  background-size:56px 97px;
}
.hero .wrap{position:relative;z-index:1}
.series-tag{
  display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.12em;
  border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:3px 14px;margin-bottom:14px;
}
.hero h1{font-size:1.65rem;font-weight:900;line-height:1.45;margin-bottom:10px}
.hero p{font-size:.93rem;opacity:.88;max-width:600px}
.series-nav{display:flex;gap:8px;margin-top:22px;flex-wrap:wrap}
.series-nav a{
  font-size:.8rem;font-weight:700;text-decoration:none;border-radius:8px;padding:7px 12px;
  color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);transition:.2s;
}
.series-nav a:hover{background:rgba(255,255,255,.24)}
.series-nav a.current{background:var(--leaf);border-color:var(--leaf)}

/* ===== layout / card ===== */
main{padding:30px 0 60px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
@media(max-width:720px){.grid{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px}
@media(max-width:480px){.card{padding:18px 16px}}
.card h2{
  font-size:1.05rem;font-weight:900;color:var(--shell);margin-bottom:18px;
  padding-left:12px;border-left:5px solid var(--leaf);line-height:1.4;
}

/* ===== form ===== */
.field{margin-bottom:18px}
.field label{display:block;font-size:.87rem;font-weight:700;margin-bottom:6px}
.input-unit{display:flex;align-items:center;gap:8px}
input[type=number],select{
  width:100%;padding:11px 12px;font-size:1.05rem;font-family:var(--num);font-weight:600;
  border:1.5px solid var(--line);border-radius:9px;background:#FBFDFB;color:var(--ink);
}
select{font-family:inherit;font-weight:700;font-size:.95rem}
input:focus,select:focus{outline:2px solid var(--leaf);outline-offset:1px;border-color:var(--leaf)}
.unit{font-size:.85rem;font-weight:700;color:var(--muted);white-space:nowrap}

/* プリセットチップ */
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.chip{
  font-family:'Zen Kaku Gothic New',sans-serif;font-size:.82rem;font-weight:700;cursor:pointer;
  padding:6px 12px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--ink);transition:.15s;
}
.chip:hover{border-color:var(--leaf)}
.chip.on{background:var(--leaf);border-color:var(--leaf);color:#fff}

/* スライダー */
.slider-row{display:flex;align-items:center;gap:12px;margin-top:8px}
input[type=range]{flex:1;accent-color:var(--leaf);height:28px}

/* ツールチップ（タップ開閉） */
.tip-btn{
  display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:5px;
  border-radius:50%;border:1.5px solid var(--muted);color:var(--muted);background:#fff;
  font-size:.7rem;font-weight:700;cursor:pointer;vertical-align:2px;font-family:serif;
}
.tip-pop{
  display:none;font-size:.8rem;font-weight:400;line-height:1.6;color:var(--ink);
  background:#FFFDF4;border:1.5px solid var(--sand);border-radius:10px;padding:10px 13px;margin-top:7px;
}
.tip-pop.open{display:block}

/* 注意バッジ（リスク%アラート等） */
.risk-note{font-size:.8rem;border-radius:8px;padding:9px 12px;margin-top:-8px;margin-bottom:8px;font-weight:700}
.risk-note.safe{background:#E7F5EC;color:var(--leaf-dark)}
.risk-note.warn{background:var(--sand-bg);color:#9A6F14}
.risk-note.bad{background:var(--danger-bg);color:#A33028}

/* 「なぜ？」アコーディオン */
details.why{margin-bottom:18px}
details.why summary{
  font-size:.8rem;font-weight:700;color:var(--leaf-dark);cursor:pointer;list-style:none;
  display:inline-flex;align-items:center;gap:4px;
}
details.why summary::after{content:"▾";transition:.2s}
details.why[open] summary::after{transform:rotate(180deg)}
details.why .why-body{
  margin-top:10px;background:#F7FAF7;border:1px solid var(--line);border-radius:10px;padding:14px;
}
details.why .why-body p{font-size:.8rem;margin-bottom:10px}

/* ミニ表（アコーディオン内など） */
.mini-tbl{width:100%;border-collapse:collapse;font-size:.8rem}
.mini-tbl th,.mini-tbl td{padding:7px 6px;text-align:center;border-bottom:1px solid var(--line)}
.mini-tbl th{background:var(--shell);color:#fff;font-size:.72rem;font-weight:700}
.mini-tbl td{font-family:var(--num);font-weight:600}
.mini-tbl td:first-child{font-family:'Zen Kaku Gothic New',sans-serif}
.mini-tbl tr.me td{background:var(--sand-bg)}
.why-link{display:inline-block;margin-top:10px;font-size:.8rem;font-weight:700;color:var(--leaf-dark)}

/* 詳細設定折りたたみ */
details.adv{margin-top:4px}
details.adv summary{
  font-size:.84rem;font-weight:700;color:var(--muted);cursor:pointer;list-style:none;
  display:inline-flex;align-items:center;gap:5px;padding:4px 0;
}
details.adv summary::before{content:"⚙"}
details.adv summary::after{content:"▾"}
details.adv[open] summary::after{content:"▴"}
details.adv .adv-body{margin-top:12px;border-top:1px dashed var(--line);padding-top:14px}

/* 標準テーブル */
table.quick{width:100%;border-collapse:collapse;font-size:.9rem}
.quick th,.quick td{padding:9px 8px;text-align:center;border-bottom:1px solid var(--line)}
.quick th{background:var(--shell);color:#fff;font-size:.8rem;font-weight:700}
.quick td{font-family:var(--num);font-weight:600}
.quick tr.hl td{background:#E7F5EC;color:var(--leaf-dark)}
.quick td:first-child{font-family:'Zen Kaku Gothic New',sans-serif}

/* 解説セクション */
.explain{margin-top:22px}
.explain p{font-size:.92rem;margin-bottom:12px}
.explain a{color:var(--leaf-dark);font-weight:700}
.formula{
  background:#F2F7F3;border-left:4px solid var(--leaf);border-radius:0 8px 8px 0;
  padding:12px 16px;font-size:.9rem;font-weight:700;margin:14px 0;
}

/* 共有ボタン */
.share{display:flex;gap:10px;justify-content:center;margin-top:26px;flex-wrap:wrap}
.share button{
  display:inline-flex;align-items:center;gap:6px;font-size:.88rem;font-weight:700;cursor:pointer;
  border-radius:999px;padding:10px 22px;border:none;transition:.2s;
  font-family:'Zen Kaku Gothic New',sans-serif;
}
.share .x-btn{background:#000;color:#fff}
.share .copy-btn{background:#fff;color:var(--shell);border:1.5px solid var(--shell)}
.share button:hover{opacity:.8}

footer{background:var(--shell);color:#fff;text-align:center;font-size:.8rem;padding:20px 16px;margin-top:40px}
footer a{color:#8FE0B4}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===== 初期グレーアウト演出 =====
   結果エリアに class="idle-able idle" と data-idle-msg を付け、
   ユーザーが入力に触れたら wakeIdle() で .idle を外す */
.idle-able{position:relative}
.idle-able > *{transition:filter .5s ease, opacity .5s ease}
.idle-able.idle > *{filter:grayscale(1);opacity:.3;pointer-events:none;user-select:none}
.idle-able.idle::after{
  content:attr(data-idle-msg);
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;
  font-size:.95rem;font-weight:900;color:var(--shell);
  text-align:center;padding:0 24px;line-height:1.8;
}

/* ===== ネイティブ広告枠（テキストリンク＋説明文） =====
   景表法ステマ規制対応のためPRラベルを常時表示 */
.pr-native{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--card);border:1px solid var(--line);border-left:4px solid var(--sand);
  border-radius:12px;padding:16px 18px;margin-top:22px;
}
.pr-tag{
  flex-shrink:0;font-size:.66rem;font-weight:900;letter-spacing:.08em;color:#8A6410;
  background:var(--sand-bg);border:1px solid var(--sand);border-radius:5px;padding:2px 8px;margin-top:3px;
}
.pr-link{
  display:inline-block;font-size:.95rem;font-weight:900;color:var(--leaf-dark);
  text-decoration:underline;text-underline-offset:3px;line-height:1.5;
}
.pr-link:hover{color:var(--leaf)}
.pr-desc{font-size:.8rem;color:var(--muted);line-height:1.7;margin-top:4px}