/* =========================================================
   ほどく — スマホ用レイヤー（calm トークンの上に載せる）
   ========================================================= */
:root{
  --t-kimochi:#bd8168;
  --t-kimetsuke:#b9994a;
  --t-suisoku:#7c90ab;
  --t-fact:#6f8f68;
  --nav-h:64px;
}
*{box-sizing:border-box}
body{
  margin:0;background:#e6e5da;color:var(--c-text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}

/* --- 端末枠（PCで見たときだけ額縁になる） --- */
.phone{
  max-width:430px;margin:0 auto;min-height:100vh;background:var(--c-bg);
  position:relative;box-shadow:0 0 60px rgba(65,71,59,.14);
  padding-bottom:calc(var(--nav-h) + 12px);
}

/* --- 上部 --- */
.head{
  position:sticky;top:0;z-index:20;background:rgba(244,243,236,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--c-border);
  padding:14px 18px 12px;display:flex;align-items:center;justify-content:space-between;
}
.head h1{margin:0;font-size:17px;font-weight:700;letter-spacing:.06em}
.head .sub{font-size:11px;color:var(--c-muted);letter-spacing:.08em}
.head-r{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--c-muted)}

/* --- 画面 --- */
.screen{display:none;padding:18px 18px 28px;animation:fadeUp .4s ease both}
.screen.on{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* --- 下タブ --- */
.tabbar{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;height:var(--nav-h);z-index:30;
  background:rgba(244,243,236,.97);backdrop-filter:blur(12px);
  border-top:1px solid var(--c-border);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));
}
.tabbar button{
  background:none;border:0;cursor:pointer;color:var(--c-muted);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:10px;letter-spacing:.04em;font-family:inherit;padding:0;
  transition:color .2s;
}
.tabbar button .icon{width:21px;height:21px}
.tabbar button.on{color:var(--c-primary);font-weight:700}
.tabbar button.on .dot{opacity:1}
.tabbar .dot{width:4px;height:4px;border-radius:50%;background:var(--c-primary);opacity:0}

/* --- 共通パーツ --- */
.lead{font-size:12.5px;line-height:1.85;color:var(--c-muted);margin:0 0 16px}
.h2{font-size:14px;font-weight:700;letter-spacing:.08em;margin:26px 0 10px;display:flex;align-items:center;gap:8px}
.h2:before{content:"";width:14px;height:1px;background:var(--c-accent)}
.box{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-m);padding:16px}
.box + .box{margin-top:12px}
.muted{color:var(--c-muted);font-size:11.5px;line-height:1.8}
.hr{height:1px;background:var(--c-border);margin:22px 0}

.ta{
  width:100%;border:1px solid var(--c-border);border-radius:var(--radius-s);
  background:#fbfaf4;padding:14px;font-size:15px;line-height:1.9;
  font-family:inherit;color:var(--c-text);resize:vertical;min-height:120px;
}
.ta:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(125,155,118,.14)}
.ta::placeholder{color:#b5b8a8}

.b{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:0;border-radius:999px;padding:14px 24px;font-size:14px;font-weight:700;
  font-family:inherit;cursor:pointer;letter-spacing:.06em;transition:.2s;
}
.b-main{background:var(--c-primary);color:var(--c-primary-text);box-shadow:var(--shadow-s)}
.b-main:hover{filter:brightness(1.06)}
.b-main:disabled{background:#c3c8bb;box-shadow:none;cursor:not-allowed}
.b-sub{background:transparent;color:var(--c-muted);border:1px solid var(--c-border)}
.b-full{width:100%}

/* --- 分解ステップ --- */
.steps{display:flex;gap:6px;margin-bottom:18px}
.steps i{flex:1;height:3px;border-radius:2px;background:var(--c-border);transition:.35s}
.steps i.on{background:var(--c-primary)}
.stepno{font-size:10.5px;letter-spacing:.18em;color:var(--c-accent);font-weight:700;margin-bottom:6px}
.stepq{font-size:19px;font-weight:700;line-height:1.55;margin:0 0 6px;letter-spacing:.02em}

/* --- 仕分け結果の文 --- */
.parsed{
  background:#fbfaf4;border:1px solid var(--c-border);border-radius:var(--radius-s);
  padding:16px;font-size:15px;line-height:2.15;letter-spacing:.01em;
}
.tag{border-radius:4px;padding:2px 3px;margin:0 1px;position:relative;font-weight:500}
.tag-kimochi{background:rgba(189,129,104,.17);color:#8e5942;box-shadow:inset 0 -2px 0 var(--t-kimochi)}
.tag-kimetsuke{background:rgba(185,153,74,.17);color:#8a6f22;box-shadow:inset 0 -2px 0 var(--t-kimetsuke)}
.tag-suisoku{background:rgba(124,144,171,.17);color:#4f6683;box-shadow:inset 0 -2px 0 var(--t-suisoku)}

.legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.leg{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--c-muted)}
.leg s{width:9px;height:9px;border-radius:3px;display:inline-block}

.found{margin-top:14px;display:flex;flex-direction:column;gap:9px}
.found-row{
  display:flex;gap:10px;align-items:flex-start;background:var(--c-surface);
  border:1px solid var(--c-border);border-radius:var(--radius-s);padding:11px 13px;
}
.found-row b{font-size:11px;letter-spacing:.1em;padding:2px 8px;border-radius:999px;color:#fff;white-space:nowrap;flex-shrink:0}
.found-row p{margin:0;font-size:11.5px;line-height:1.75;color:var(--c-muted)}
.found-row p em{font-style:normal;color:var(--c-text);font-weight:700}

/* --- 気持ちチップ --- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  border:1px solid var(--c-border);background:#fbfaf4;border-radius:999px;
  padding:9px 16px;font-size:13px;font-family:inherit;cursor:pointer;color:var(--c-text);
  transition:.18s;
}
.chip:hover{border-color:var(--t-kimochi)}
.chip.on{background:var(--t-kimochi);border-color:var(--t-kimochi);color:#fff;font-weight:700}
.chip.auto{background:rgba(189,129,104,.14);border-color:var(--t-kimochi);color:#8e5942}

/* --- 3つの箱 --- */
.hako{border:1px solid var(--c-border);border-radius:var(--radius-m);overflow:hidden;background:#fbfaf4}
.hako + .hako{margin-top:12px}
.hako-h{padding:12px 14px;display:flex;align-items:center;gap:9px;background:var(--c-surface);border-bottom:1px solid var(--c-border)}
.hako-h b{font-size:13px;letter-spacing:.04em}
.hako-h span{font-size:10.5px;color:var(--c-muted);margin-left:auto}
.hako-b{padding:12px 14px}
.hako-b input{
  width:100%;border:0;border-bottom:1px dashed var(--c-border);background:none;
  padding:9px 2px;font-size:14px;font-family:inherit;color:var(--c-text);
}
.hako-b input:focus{outline:none;border-bottom-color:var(--c-primary)}
.hako-b input::placeholder{color:#c0c3b4;font-size:13px}
.hako-mark{width:7px;height:22px;border-radius:3px;flex-shrink:0}

/* --- カード（積み） --- */
.tsumi{display:flex;flex-direction:column;gap:10px}
.tcard{
  background:#fbfaf4;border:1px solid var(--c-border);border-radius:var(--radius-m);
  padding:15px 16px;transition:.2s;
}
.tcard .dt{font-size:10.5px;letter-spacing:.14em;color:var(--c-accent);font-weight:700}
.tcard .ft{font-size:14.5px;line-height:1.75;margin:6px 0 9px}
.tcard .mt{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.mini{font-size:10.5px;padding:2px 9px;border-radius:999px;background:rgba(189,129,104,.15);color:#8e5942}
.mini-u{font-size:10.5px;padding:2px 9px;border-radius:999px;background:rgba(124,144,171,.15);color:#4f6683}
.rate{margin-left:auto;font-size:11px;color:var(--c-muted);font-weight:700}

/* --- 積みの山（棒） --- */
.yama{display:flex;align-items:flex-end;gap:3px;height:78px;padding:0 2px}
.yama div{flex:1;background:linear-gradient(180deg,var(--c-primary),#9db497);border-radius:3px 3px 0 0;min-height:3px;opacity:.85}
.yama div:last-child{opacity:1;background:linear-gradient(180deg,var(--c-accent),#c3a98d)}
.yama div.blank{background:var(--c-border);opacity:.4;height:8px!important}

/* --- 段位 --- */
.rank{display:flex;align-items:center;gap:14px}
.rank-badge{
  width:62px;height:62px;border-radius:var(--radius-blob);flex-shrink:0;
  background:linear-gradient(145deg,var(--c-primary),#9db497);
  display:flex;align-items:center;justify-content:center;color:#fbfaf4;
  font-size:13px;font-weight:700;letter-spacing:.04em;box-shadow:var(--shadow-s);
}
.bar{height:6px;background:var(--c-border);border-radius:3px;overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;background:var(--c-primary);border-radius:3px;transition:width .6s}

/* --- 班 --- */
.han-card{background:#fbfaf4;border:1px solid var(--c-border);border-radius:var(--radius-m);padding:15px 16px}
.han-card + .han-card{margin-top:10px}
.han-top{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.av{width:32px;height:32px;border-radius:var(--radius-leaf);background:var(--c-surface);border:1px solid var(--c-border);
    display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--c-primary)}
.han-top b{font-size:13.5px}
.han-top .rk{font-size:10px;color:var(--c-muted);border:1px solid var(--c-border);border-radius:999px;padding:1px 8px}
.han-top .tm{margin-left:auto;font-size:10.5px;color:var(--c-muted)}
.han-u{margin-top:10px;padding:10px 12px;background:rgba(124,144,171,.09);border-left:2px solid var(--t-suisoku);border-radius:0 8px 8px 0}
.han-u span{font-size:10px;letter-spacing:.12em;color:#4f6683;font-weight:700}
.han-u p{margin:3px 0 0;font-size:13px;line-height:1.7}
.han-act{display:flex;align-items:center;gap:14px;margin-top:11px;font-size:11.5px;color:var(--c-muted)}
.han-act button{background:none;border:1px solid var(--c-border);border-radius:999px;padding:6px 14px;
  font-size:11.5px;font-family:inherit;color:var(--c-text);cursor:pointer}
.han-act button:disabled{opacity:.45;cursor:not-allowed}

/* --- 道場 --- */
.kadai{border:1px solid var(--c-border);border-radius:var(--radius-m);overflow:hidden}
.kadai + .kadai{margin-top:12px}
.kadai-h{background:var(--c-surface);padding:13px 15px;display:flex;align-items:center;gap:10px}
.kadai-h b{font-size:14.5px}
.kadai-h .m{font-size:10.5px;letter-spacing:.12em;color:var(--c-accent);font-weight:700}
.kadai-h .st{margin-left:auto;font-size:10.5px;padding:2px 9px;border-radius:999px}
.st-now{background:var(--c-primary);color:#fbfaf4}
.st-done{background:var(--c-border);color:var(--c-muted)}
.kadai-b{padding:14px 15px;font-size:13.5px;line-height:1.95;background:#fbfaf4}

/* --- 相談 --- */
.slot{display:flex;align-items:center;gap:12px;padding:14px 0}
.slot + .slot{border-top:1px solid var(--c-border)}
.slot .n{font-size:21px;font-weight:700;color:var(--c-primary);min-width:70px;white-space:nowrap}
.slot .t{font-size:13px;line-height:1.7}
.slot .t b{display:block;font-size:11px;color:var(--c-muted);font-weight:400}

/* --- 空 --- */
.empty{text-align:center;padding:40px 16px;color:var(--c-muted);font-size:12.5px;line-height:2}
.empty .icon{width:34px;height:34px;opacity:.4;margin-bottom:10px}

/* --- 完成 --- */
.done-wrap{text-align:center;padding:14px 0 4px}
.done-mark{
  width:74px;height:74px;margin:0 auto 16px;border-radius:var(--radius-blob);
  background:linear-gradient(145deg,var(--c-primary),#9db497);
  display:flex;align-items:center;justify-content:center;color:#fbfaf4;
  animation:pop .5s cubic-bezier(.34,1.56,.64,1) both;
}
.done-mark .icon{width:34px;height:34px}
@keyframes pop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}

/* --- 注記 --- */
.note{
  margin-top:22px;padding:12px 14px;border:1px dashed var(--c-border);border-radius:var(--radius-s);
  font-size:11px;line-height:1.85;color:var(--c-muted);background:rgba(236,236,224,.5);
}
.note b{color:var(--c-accent)}

/* --- コーチ画面（PC） --- */
.wide{max-width:1080px;margin:0 auto;padding:26px 22px 60px}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kpi .box{text-align:center}
.kpi .v{font-size:27px;font-weight:700;color:var(--c-primary);letter-spacing:.02em}
.kpi .l{font-size:11px;color:var(--c-muted);margin-top:3px}
.apply{border:1px solid var(--c-border);border-radius:var(--radius-m);background:#fbfaf4;padding:17px 19px}
.apply + .apply{margin-top:12px}
.apply-h{display:flex;align-items:center;gap:11px;margin-bottom:11px;flex-wrap:wrap}
.apply-h b{font-size:15px}
.warn{background:rgba(189,129,104,.15);color:#8e5942;border-radius:999px;padding:3px 11px;font-size:11px;font-weight:700}
.ok{background:rgba(111,143,104,.16);color:#4f6a49;border-radius:999px;padding:3px 11px;font-size:11px;font-weight:700}
.qa{font-size:13px;line-height:1.9}
.qa dt{font-size:10.5px;letter-spacing:.1em;color:var(--c-accent);font-weight:700;margin-top:11px}
.qa dd{margin:3px 0 0}
.acts{display:flex;gap:9px;margin-top:15px}

/* ============ v2：タグ付け・深掘り・軸・ズレ ============ */

/* タグの凡例 */
.tagkey{display:flex;flex-direction:column;gap:5px;margin-bottom:16px;padding:12px 14px;
  background:var(--c-surface);border-radius:var(--radius-s);border:1px solid var(--c-border)}
.tagkey span{font-size:11px;color:var(--c-muted);display:flex;align-items:center;gap:7px}
.tagkey s{width:9px;height:9px;border-radius:3px;flex-shrink:0}

/* 塊 */
.piece{background:#fbfaf4;border:1px solid var(--c-border);border-radius:var(--radius-m);
  padding:14px 15px;margin-bottom:10px;transition:.25s}
.piece.done{background:var(--c-surface);border-color:var(--c-primary)}
.piece-t{font-size:15.5px;line-height:1.85}
.piece-h{font-size:10.5px;color:var(--c-accent);margin-top:6px}
.piece-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.tg{border:1px solid var(--c-border);background:#fff;border-radius:999px;padding:7px 13px;
  font-size:12px;font-family:inherit;cursor:pointer;color:var(--c-muted);transition:.15s}
.tg:hover{border-color:var(--tgc);color:var(--c-text)}
.tg.on{background:var(--tgc);border-color:var(--tgc);color:#fff;font-weight:700}

/* リストの下に置く操作バー（浮かせない。祖先のアニメで fixed が効かないため） */
.stickbar{display:flex;align-items:center;gap:12px;margin-top:18px;
  padding:11px 12px 11px 20px;background:var(--c-surface);
  border:1px solid var(--c-border);border-radius:999px}
.stickbar .b{padding:12px 24px;font-size:13.5px;margin-left:auto}

/* 深掘り */
.target{background:var(--c-surface);border-left:3px solid var(--c-primary);
  border-radius:0 var(--radius-s) var(--radius-s) 0;padding:11px 14px;margin-bottom:16px}
.target span{font-size:10px;letter-spacing:.14em;color:var(--c-muted);font-weight:700}
.target p{margin:4px 0 0;font-size:14.5px;line-height:1.7}
.answers{display:flex;flex-direction:column;gap:9px;margin-top:18px}
.ans{background:#fbfaf4;border:1px solid var(--c-border);border-radius:var(--radius-m);
  padding:16px 17px;font-size:15px;font-family:inherit;text-align:left;cursor:pointer;
  color:var(--c-text);line-height:1.6;transition:.18s}
.ans:hover{border-color:var(--c-primary);background:#fff;transform:translateX(3px)}

/* たどった道 */
.pathwrap{margin-top:22px;display:flex;flex-direction:column;gap:0}
.pth{padding:9px 0 9px 16px;border-left:1px dashed var(--c-border);position:relative}
.pth:before{content:"";position:absolute;left:-4px;top:15px;width:7px;height:7px;
  border-radius:50%;background:var(--c-border)}
.pth span{display:block;font-size:10.5px;color:var(--c-muted);line-height:1.6}
.pth b{display:block;font-size:13px;margin-top:2px}

/* 夢と軸 */
.yume{background:linear-gradient(135deg,var(--c-surface),#e4e6d9);
  border-radius:var(--radius-m);padding:15px 17px;margin-bottom:18px}
.yume span{font-size:10px;letter-spacing:.16em;color:var(--c-accent);font-weight:700}
.yume p{margin:5px 0 0;font-size:16px;font-weight:700;line-height:1.6}
.yume i{display:block;font-style:normal;font-size:10.5px;color:var(--c-muted);margin-top:7px}
.yume.big p{font-size:19px}
.axlist{display:flex;flex-direction:column;gap:9px}
.axbtn{background:#fbfaf4;border:1px solid var(--c-border);border-radius:var(--radius-m);
  padding:16px 17px;font-size:15px;font-family:inherit;text-align:left;cursor:pointer;
  color:var(--c-text);transition:.18s}
.axbtn:hover{border-color:var(--c-primary)}
.axbtn.on{background:var(--c-primary);border-color:var(--c-primary);color:#fbfaf4;font-weight:700}
.axbtn.none{color:var(--c-muted);font-size:13.5px}
.jk{display:flex;align-items:center;gap:12px;background:#fbfaf4;border:1px solid var(--c-border);
  border-radius:var(--radius-m);padding:14px 16px;margin-bottom:9px}
.jk b{font-size:14.5px}
.jk span{margin-left:auto;font-size:12px;color:var(--c-primary);font-weight:700}
.jk.out{background:var(--c-surface)}
.jk.out b{color:var(--c-muted)}
.jk.out span{color:var(--c-accent)}

/* まとめ */
.sum{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:6px}
.sum div{background:var(--c-surface);border-radius:var(--radius-s);padding:13px 8px;text-align:center}
.sum b{display:block;font-size:17px;color:var(--c-primary);line-height:1.4}
.sum span{font-size:10px;color:var(--c-muted)}

/* ズレ */
.ct{background:#fbfaf4;border:1px solid var(--c-border);border-left:3px solid var(--t-kimochi);
  border-radius:0 var(--radius-m) var(--radius-m) 0;padding:14px 16px;margin-bottom:10px}
.ct b{font-size:14.5px;line-height:1.65;display:block}
.ct p{margin:7px 0 0;font-size:12.5px;line-height:1.85;color:var(--c-muted)}

/* 軸との突き合わせ（最後の一枚） */
.face{margin-top:20px;padding:20px 18px;border-radius:var(--radius-m);
  background:linear-gradient(135deg,#41473b,#565d4c);color:#f4f3ec}
.face b{display:block;font-size:16px;line-height:1.7}
.face p{margin:6px 0 0;font-size:16px;line-height:1.7;color:#dcded0}

/* 気持ちの棒 */
.fb{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.fb span{font-size:12px;min-width:62px}
.fb i{height:9px;border-radius:5px;background:var(--t-kimochi);opacity:.75;display:block}
.fb b{font-size:11px;color:var(--c-muted)}

.mini-ok{font-size:10.5px;padding:2px 9px;border-radius:999px;
  background:rgba(111,143,104,.18);color:#4f6a49;font-weight:700}

/* ほどいた道（結果画面に必ず出す） */
.road{background:#fbfaf4;border:1px solid var(--c-border);border-radius:var(--radius-m);padding:6px 16px 10px}
.rd{padding:11px 0 11px 17px;border-left:2px solid var(--c-border);position:relative;margin-left:4px}
.rd:before{content:"";position:absolute;left:-5px;top:17px;width:8px;height:8px;border-radius:50%;
  background:var(--c-border)}
.rd span{display:block;font-size:10.5px;color:var(--c-muted);line-height:1.6}
.rd b{display:block;font-size:14.5px;line-height:1.65;margin-top:3px}
.rd.start{border-left-color:var(--c-accent)}
.rd.start:before{background:var(--c-accent)}
.rd.start b{color:var(--c-text)}
.rd.end{border-left-color:var(--t-kimochi)}
.rd.end:before{background:var(--t-kimochi);width:11px;height:11px;left:-6px}
.rd.end b{color:#8e5942;font-size:17px}

/* ============ トップ（濃い面） ============ */
:root{ --c-deep:#2b6f7d; --c-deep-2:#24606c; }
.top{min-height:calc(100vh - var(--nav-h));background:linear-gradient(160deg,var(--c-deep),var(--c-deep-2));
  color:#eef6f7;padding:64px 26px 40px;display:flex;flex-direction:column}
.top-ttl span{font-size:15px;letter-spacing:.22em;opacity:.85}
.top-ttl h1{margin:6px 0 0;font-size:44px;font-weight:700;letter-spacing:.02em;line-height:1.15}
.top-menu{margin-top:52px;display:flex;flex-direction:column;gap:22px}
.tm{display:flex;align-items:center;gap:16px;background:none;border:0;padding:6px 0;
  color:#eef6f7;font-family:inherit;cursor:pointer;text-align:left;transition:.2s}
.tm:hover{transform:translateX(4px)}
.tm .icon{width:22px;height:22px;flex-shrink:0;opacity:.9}
.tm span{display:block}
.tm b{display:block;font-size:21px;font-weight:700;line-height:1.45}
.tm i{display:block;font-style:normal;font-size:11.5px;opacity:.7;margin-top:3px}
.top-foot{margin-top:auto;padding-top:32px;font-size:11.5px;opacity:.65}
body.is-home .tabbar{background:rgba(36,96,108,.97);border-top-color:rgba(255,255,255,.14)}
body.is-home .tabbar button{color:rgba(238,246,247,.62)}
body.is-home .tabbar button.on{color:#fff}
body.is-home .tabbar .dot{background:#fff}

/* ログイン */
body.is-login .tabbar{display:none}
.top.login{min-height:100vh;padding-top:56px}
.login-box{margin-top:36px;background:rgba(255,255,255,.1);border-radius:var(--radius-m);padding:18px}
.login-tabs{display:flex;gap:6px;margin-bottom:16px}
.lt{flex:1;background:transparent;border:1px solid rgba(255,255,255,.35);color:#eef6f7;border-radius:999px;
  padding:9px 0;font-family:inherit;font-size:13px;cursor:pointer}
.lt.on{background:#eef6f7;color:var(--c-deep);font-weight:700}
.login-box label{display:block;font-size:12px;opacity:.85;margin:10px 0 6px}
.login-in{width:100%;border:0;border-radius:var(--radius-s);padding:13px 14px;font-size:16px;font-family:inherit;color:var(--c-text)}
.login-note{font-size:12px;line-height:1.8;opacity:.8;margin:12px 0 0}
.login-err{font-size:13px;line-height:1.7;color:#ffd7cc;margin:8px 0 0;min-height:1em}
.login-btn{margin-top:14px;background:#eef6f7;color:var(--c-deep)}
.login-btn:disabled{opacity:.6}

/* 保存できなかったときのお知らせ */
.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + 16px);transform:translate(-50%,20px);
  max-width:360px;width:calc(100% - 40px);background:#41473b;color:#fff;border-radius:14px;padding:12px 16px;
  font-size:13px;line-height:1.7;opacity:0;pointer-events:none;transition:.3s;z-index:50}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* 各画面の中身の余白 */
.pad{padding:18px 18px 28px}
.head-back{display:flex;align-items:center;gap:5px;background:var(--c-surface);
  border:1px solid var(--c-border);border-radius:999px;padding:7px 14px 7px 11px;margin-right:14px;
  color:var(--c-text);font-family:inherit;font-size:12px;cursor:pointer;flex-shrink:0;transition:.18s}
.head-back:hover{border-color:var(--c-primary);color:var(--c-primary)}
.head-back .icon{width:15px;height:15px}
.head{gap:0;justify-content:flex-start}

/* ============ 判断設計シート ============ */
.sh{background:#fbfaf4;border:1px solid var(--c-border);border-radius:var(--radius-m);
  padding:14px 16px;margin-bottom:9px;cursor:pointer;transition:.18s}
.sh:hover{border-color:var(--c-primary)}
.sh.filled{background:var(--c-surface);border-color:var(--c-primary)}
.sh-q{font-size:14.5px;font-weight:700;line-height:1.6}
.sh-a{margin-top:7px;font-size:15px;line-height:1.75;color:var(--c-text)}
.sh-w{margin-top:6px;font-size:12px;line-height:1.8;color:var(--c-muted)}
.sh-empty{margin-top:6px;font-size:12px;color:#b5b8a8}
.sh-edit{padding-top:4px}
.sh.open{background:#fff;border-color:var(--c-primary);cursor:default}
.sh-head{cursor:pointer}
.sh-body{margin-top:12px}
.sh-why{font-size:12.5px;font-weight:700;color:var(--c-accent);margin:14px 0 8px;line-height:1.7}
.sh-body .flow-act{margin-top:12px}

/* 例題を上に置いたまま答える */
.example.pin{margin-bottom:18px;padding:12px 15px;background:var(--c-surface)}
.example.pin p{font-size:13.5px;line-height:1.85}

/* 分析結果 */
.an-wait{background:var(--c-surface);border-radius:var(--radius-m);padding:14px 16px;
  font-size:13px;color:var(--c-muted);margin-bottom:4px}
.an-wait b{color:var(--c-primary)}
.an-box{background:#fbfaf4;border:1px solid var(--c-border);border-radius:var(--radius-m);padding:14px 16px}
.an-row{padding:10px 0}
.an-row + .an-row{border-top:1px solid var(--c-border)}
.an-row span{display:block;font-size:11px;color:var(--c-muted)}
.an-row b{display:block;font-size:15px;line-height:1.7;margin-top:3px;font-weight:500}
.an-words{display:flex;flex-wrap:wrap;gap:8px}
.an-words span{background:var(--c-surface);border-radius:999px;padding:6px 13px;font-size:14px}
.an-words i{font-style:normal;font-size:11px;color:var(--c-muted);margin-left:5px}

/* ============ マイページ ============ */
.daily{background:linear-gradient(135deg,var(--c-surface),#e4e6d9);border-radius:var(--radius-m);
  padding:18px 20px;margin-bottom:14px}
.daily span{font-size:10px;letter-spacing:.18em;color:var(--c-accent);font-weight:700}
.daily p{margin:8px 0 0;font-size:17px;font-weight:700;line-height:1.75}
.mystat{display:flex;gap:10px;margin-bottom:6px}
.grow{display:flex;align-items:center;gap:18px;background:#fbfaf4;border:1px solid var(--c-border);
  border-radius:var(--radius-m);padding:20px 18px}
.grow-mark{font-size:46px;line-height:1}
.grow-t b{display:block;font-size:15px}
.grow-t span{display:block;font-size:11.5px;color:var(--c-muted);margin-top:4px}

.rev-ask{display:block;font-style:normal;margin-top:14px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.18);font-size:13px;color:#c9cdbe}

/* ============ 2つのホーム（自分の話／人の話） ============ */

/* 入口 */
.intro{padding-top:6px}
.intro-note{display:inline-block;font-size:11px;letter-spacing:.1em;color:#8e5942;
  background:rgba(189,129,104,.14);border-radius:999px;padding:4px 12px;margin-bottom:12px}
.intro-steps{margin:20px 0 24px;display:flex;flex-direction:column;gap:0}
.is{display:flex;gap:12px;align-items:flex-start;padding:12px 0}
.is + .is{border-top:1px solid var(--c-border)}
.is i{width:22px;height:22px;border-radius:50%;background:var(--c-surface);color:var(--c-muted);
  display:flex;align-items:center;justify-content:center;font-style:normal;font-size:11px;
  font-weight:700;flex-shrink:0;margin-top:1px}
.is span{font-size:13.5px;line-height:1.7}

/* 例題 */
.example{background:#fbfaf4;border:1px solid var(--c-border);border-left:3px solid var(--c-accent);
  border-radius:0 var(--radius-m) var(--radius-m) 0;padding:16px 18px;margin-bottom:4px}
.example span{display:block;font-size:10.5px;letter-spacing:.14em;color:var(--c-accent);font-weight:700}
.example p{margin:8px 0 0;font-size:15px;line-height:1.95}

/* 操作 */
.flow-act{display:flex;gap:10px;margin-top:18px}
.flow-act .b{flex:1;padding:15px 20px}
.flow-act .b-sub{flex:0 0 34%}

/* 逆からなぞる */
.rev{display:flex;flex-direction:column;gap:0;margin-top:6px}
.rev-row{padding:13px 0 13px 18px;border-left:2px solid var(--c-primary);position:relative;
  animation:revIn .5s ease both}
.rev-row:before{content:"";position:absolute;left:-5px;top:19px;width:8px;height:8px;
  border-radius:50%;background:var(--c-primary)}
.rev-row span{display:block;font-size:11px;color:var(--c-muted);line-height:1.6}
.rev-row b{display:block;font-size:16px;line-height:1.7;margin-top:3px}
.rev-row:first-child{border-left-color:var(--t-kimochi)}
.rev-row:first-child:before{background:var(--t-kimochi);width:11px;height:11px;left:-6px}
@keyframes revIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.rev-end{margin-top:18px;padding:22px 20px;border-radius:var(--radius-m);
  background:linear-gradient(135deg,#41473b,#565d4c);color:#f4f3ec;animation:revIn .6s ease both}
.rev-end b{display:block;font-size:19px;line-height:1.65}
.rev-end p{margin:12px 0 0;font-size:14.5px;line-height:1.9;color:#dcded0}

/* 積みの頭 */
.tsumi-head{display:flex;gap:10px;margin-bottom:6px}
.tn{flex:1;background:var(--c-surface);border-radius:var(--radius-m);padding:15px 8px;text-align:center}
.tn b{display:block;font-size:24px;font-weight:700;color:var(--c-primary);line-height:1.3}
.tn span{font-size:11px;color:var(--c-muted)}

/* 起動時のエラー（content/ の書き間違いを黙って飲み込まない） */
.boot-error{max-width:640px;margin:24px auto;padding:18px 20px;border-radius:12px;
  background:#fff4f0;border:1px solid #e0b8a8;color:#7a4630;font-size:13px;line-height:1.9}
.boot-error b{display:block;font-size:15px;margin-bottom:8px}
.boot-error ul{margin:8px 0 0;padding-left:20px}
.boot-error li{margin-bottom:4px}
.boot-error .muted{color:#a08070}

/* 材料の棚卸し */
.stock{background:#fbfaf4;border:1px solid var(--c-border);border-radius:var(--radius-m);padding:4px 16px 16px}
.stk{padding:14px 0}
.stk + .stk{border-top:1px solid var(--c-border)}
.stk-h{display:flex;align-items:center;gap:10px;font-size:11.5px;font-weight:700;
  letter-spacing:.06em;color:var(--c-muted)}
.stk-h b{margin-left:auto;font-size:19px;font-weight:700}
.stk.out .stk-h b{color:var(--t-suisoku)}
.stk.self .stk-h b{color:var(--t-kimochi)}
.stk.unk .stk-h b{color:var(--c-muted)}
.stk ul{list-style:none;margin:9px 0 0;padding:0}
.stk li{position:relative;padding:7px 0 7px 15px;font-size:14px;line-height:1.6}
.stk li:before{content:"";position:absolute;left:0;top:15px;width:5px;height:5px;border-radius:50%}
.stk.out li:before{background:var(--t-suisoku)}
.stk.self li:before{background:var(--t-kimochi)}
.stk.unk li:before{background:var(--c-muted)}
.stk li span{display:block;font-size:10.5px;color:var(--c-muted);margin-top:2px}
.stk-none{margin:9px 0 0;font-size:14px;color:var(--c-muted);padding-left:15px}
.stk-line{margin:0;padding:15px 0 2px;border-top:1px solid var(--c-border);
  font-size:14px;line-height:1.95}

/* ほかの読み方（仮説） */
.hy{display:flex;gap:12px;background:#fbfaf4;border:1px solid var(--c-border);
  border-radius:var(--radius-m);padding:15px 16px;margin-bottom:10px}
.hy-n{width:24px;height:24px;border-radius:50%;background:var(--t-suisoku);color:#fbfaf4;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
  flex-shrink:0;margin-top:2px}
.hy-b{flex:1;min-width:0}
.hy-b b{display:block;font-size:14.5px;line-height:1.65}
.hy-b p{margin:7px 0 0;font-size:12.5px;line-height:1.85;color:var(--c-muted)}
.hy-t{margin-top:11px;padding:10px 12px;background:rgba(124,144,171,.10);
  border-radius:var(--radius-s);font-size:12.5px;line-height:1.85}
.hy-t span{display:block;font-size:10px;letter-spacing:.14em;color:#4f6683;
  font-weight:700;margin-bottom:3px}

/* 軸と、今日出てきたもの */
.face-pair{margin:14px 0 4px;display:flex;flex-direction:column;gap:11px}
.fp{padding:11px 13px;background:rgba(255,255,255,.09);border-radius:var(--radius-s)}
.fp span{display:block;font-size:10px;letter-spacing:.14em;color:#b9bcae}
.fp b{display:block;font-size:14.5px;line-height:1.75;margin-top:4px;color:#f4f3ec;font-weight:500}

/* 素材が足りないときの門番 */
.gate{margin-top:12px;padding:13px 15px;border-radius:var(--radius-s);
  background:rgba(189,129,104,.10);border:1px solid rgba(189,129,104,.35);
  font-size:13px;line-height:1.85;color:#8e5942}
.gate b{color:#7a4630}

/* 軸の入力 */
.axin{width:100%;margin-bottom:10px;border:1px solid var(--c-border);border-radius:var(--radius-s);
  background:#fbfaf4;padding:14px;font-size:15px;font-family:inherit;color:var(--c-text)}
.axin:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(125,155,118,.14)}
.axin::placeholder{color:#b5b8a8}