/* =========================================================
   ほどく — スマホ用レイヤー（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(5,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}

/* 軸の入力 */
.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}