/* かんがえの型 — クリーム基調・モバイル最優先。さっとマインドマップと同系統の配色。 */
:root{
  --bg:#f4efe1;       /* クリーム背景 */
  --card:#fffdf7;     /* カード面 */
  --ink:#3a3a34;      /* 文字 */
  --muted:#8a8578;    /* 補助文字 */
  --line:#e3ddcc;     /* 罫 */
  --accent:#cf7a4a;   /* テラコッタ差し色 */
  --slate:#4f6b6f;    /* スレート */
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;
  font-size:16px; line-height:1.5;
  -webkit-text-size-adjust:100%;
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
}
.screen{ min-height:100vh; }
.hidden{ display:none !important; }

/* ---- ヘッダ ---- */
.appHeader{
  position:sticky; top:0; z-index:5; background:var(--bg);
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px 8px; border-bottom:1px solid var(--line);
}
.appTitle{ font-size:20px; font-weight:700; letter-spacing:.02em; }
.guideBtn{
  border:1px solid var(--accent); color:var(--accent); background:transparent;
  border-radius:999px; padding:8px 16px; font-size:14px; font-weight:600; cursor:pointer;
}
.guideBtn:active{ background:var(--accent); color:#fff; }

.fillHeader{
  position:sticky; top:0; z-index:5; background:var(--bg);
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; border-bottom:1px solid var(--line);
}
.hbtn{
  border:none; background:transparent; color:var(--ink);
  font-size:28px; line-height:1; padding:2px 8px; cursor:pointer;
}
.fillHeadMid{ min-width:0; }
.fillName{ font-size:18px; font-weight:700; }
.fillDesc{ font-size:12px; color:var(--muted); }

/* ---- ホーム本体 ---- */
.homeBody{ padding:8px 14px 40px; }
.sec{ margin:14px 0; }
.secTitle{ font-size:13px; font-weight:700; color:var(--slate); margin:0 2px 8px; letter-spacing:.03em; }
.cardList{ display:flex; flex-direction:column; gap:8px; }
.card{
  text-align:left; width:100%; background:var(--card);
  border:1px solid var(--line); border-radius:14px; padding:12px 14px; cursor:pointer;
  display:block;
}
.card:active{ background:#fbf6ea; }
.cardName{ font-size:16px; font-weight:700; }
.cardDesc{ font-size:13px; color:var(--ink); margin-top:1px; }
.cardWhen{ font-size:12px; color:var(--muted); margin-top:4px; }

/* ---- 保存した記入 ---- */
.entryList{ display:flex; flex-direction:column; gap:6px; }
.entry{
  display:flex; align-items:center; gap:8px;
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 12px;
}
.entryMain{ flex:1; min-width:0; cursor:pointer; }
.entryTitle{ font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.entrySub{ font-size:12px; color:var(--muted); }
.entryDel{
  border:none; background:transparent; color:var(--muted);
  font-size:22px; line-height:1; padding:2px 6px; cursor:pointer;
}

/* ---- 記入本体 ---- */
.fillBody{ padding:12px 14px 96px; }
.field{ margin-bottom:14px; }
.flabel{ display:block; font-size:14px; font-weight:700; }
.fhint{ font-size:12px; color:var(--muted); margin:1px 0 4px; }
.fta, .gta{
  width:100%; border:1px solid var(--line); border-radius:10px;
  background:var(--card); color:var(--ink); padding:9px 10px;
  font-family:inherit; font-size:16px; line-height:1.5; resize:none; overflow:hidden;
}
.fta:focus, .gta:focus{ outline:none; border-color:var(--accent); }

/* ---- マス目（マンダラート／SWOT） ---- */
.grid{ display:grid; gap:8px; }
.grid2{ grid-template-columns:1fr 1fr; }
.grid3{ grid-template-columns:1fr 1fr 1fr; }
.gcell{ display:flex; flex-direction:column; }
.glabel{ font-size:12px; font-weight:700; color:var(--slate); margin-bottom:3px; }
.grid3 .gta{ font-size:14px; padding:6px 7px; }
.grid3 .glabel{ font-size:11px; }

/* ---- 下部バー ---- */
.fillBar{
  position:fixed; left:0; right:0; bottom:0; z-index:6;
  display:flex; gap:8px; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, var(--bg) 70%, rgba(244,239,225,0));
}
.barBtn{
  flex:1; border:1px solid var(--line); background:var(--card); color:var(--ink);
  border-radius:12px; padding:13px 0; font-size:15px; font-weight:700; cursor:pointer;
}
.barBtn.primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.barBtn.ghost{ flex:0 0 auto; padding:13px 16px; color:var(--muted); font-weight:600; }
.barBtn:active{ opacity:.85; }

/* ---- ガイド ---- */
.guideBody{ padding:20px 16px 40px; }
.gq{ font-size:18px; font-weight:700; margin-bottom:16px; text-align:center; }
.gopts{ display:flex; flex-direction:column; gap:10px; }
.gopt{
  width:100%; text-align:left; background:var(--card);
  border:1px solid var(--line); border-radius:14px; padding:15px 16px;
  font-size:16px; font-weight:600; cursor:pointer;
}
.gopt:active{ background:#fbf6ea; }
.gresultHead{ font-size:16px; font-weight:700; color:var(--slate); margin-bottom:12px; }
.gagain{
  display:block; width:100%; margin-top:16px; background:transparent;
  border:1px solid var(--line); border-radius:12px; padding:12px 0;
  color:var(--muted); font-size:14px; font-weight:600; cursor:pointer;
}

/* ---- トースト ---- */
.toast{
  position:fixed; left:50%; bottom:84px; transform:translateX(-50%); z-index:20;
  background:var(--ink); color:#fff; padding:10px 18px; border-radius:999px;
  font-size:14px; box-shadow:0 4px 14px rgba(0,0,0,.2);
}