/* ================================================================
   カラートークン(ajikoto_build_brief_for_claude.md 第4章準拠)
   ベースは「テラコッタ系」がデフォルト。--terracotta 一式を書き換え
   るだけでブランドの基調色を切り替えられる(例:藍系への切替は
   下記 [data-brand="indigo"] を参照)。
   アクセント(金・翡翠・空・蓮)は、言語識別とレッスン内の意味色
   (聞く/言う=空、通じた=翡翠、文化=金)を兼ねる共有トークン。
   ================================================================ */
:root{
  --bg:#FBF7EE;
  --card:#FFFFFF;
  --card-2:#F4EDDD;
  --ink:#26251F;
  --ink-soft:#716C5F;
  --ink-faint:#A39D8C;
  --line:#EBE3CF;
  /* 翡翠(jade) */
  --green:#3E9E7A; --green-tint:#E4F3EE; --green-ink:#256B54;
  /* 空(sky) */
  --blue:#6FB2D6; --blue-tint:#E8F3F8; --blue-ink:#2B6F8C;
  /* 金(gold) */
  --amber:#E9A93F; --amber-tint:#FBF0D9; --amber-ink:#8A6320;
  --purple:#8A6FB0; --purple-tint:#EFE7F7; --purple-ink:#6B4F91;
  /* 蓮(lotus) */
  --lotus:#E58BA6; --lotus-tint:#FBE9EF; --lotus-ink:#A34E68;
  /* ベース(テラコッタ系・デフォルト) */
  --terracotta:#C0563A; --terracotta-on:#FBEFE7;
  --terracotta-tint:#F4DCD2; --terracotta-ink:#8A3D28;
  --shadow-sm:0 0.4rem 0.9rem -0.5rem rgba(38,37,31,0.22);
  --shadow:0 1rem 2rem -1rem rgba(38,37,31,0.28);
  --font-ui:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  --font-heading:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#1C1B17; --card:#26251F; --card-2:#302E26;
    --ink:#F3EDE0; --ink-soft:#C7BFA9; --ink-faint:#8C8571;
    --line:#3A382E;
    --green:#55C79E; --green-tint:rgba(85,199,158,0.16); --green-ink:#7FDBB8;
    --blue:#8FCBE8; --blue-tint:rgba(143,203,232,0.16); --blue-ink:#B7E0F0;
    --amber:#F0BE5E; --amber-tint:rgba(240,190,94,0.16); --amber-ink:#F0BE5E;
    --purple:#B29AD9; --purple-tint:rgba(178,154,217,0.16); --purple-ink:#C9B6E8;
    --lotus:#F0A8BE; --lotus-tint:rgba(240,168,190,0.18); --lotus-ink:#F0A8BE;
    /* ダークモードのベースは明るめの色調になるため、上に乗せる文字は
       暗色に反転させる(明るい塗りに明るい文字だとコントラスト不足になる)。 */
    --terracotta:#E2896A; --terracotta-on:#2B140C;
    --terracotta-tint:rgba(226,137,106,0.18); --terracotta-ink:#E2896A;
    --shadow-sm:0 0.4rem 0.9rem -0.5rem rgba(0,0,0,0.4);
    --shadow:0 1rem 2rem -1rem rgba(0,0,0,0.5);
  }
}

/* ブランド基調色の切替ポイント(ここ1箇所のみ):
   <body> に data-brand="indigo" を付けると藍系に切り替わる。 */
[data-brand="indigo"]{
  --terracotta:#333F78; --terracotta-on:#EDF1FB;
  --terracotta-tint:#DEE2F2; --terracotta-ink:#333F78;
  --green:#4FB79A; --blue:#7FC0E0; --lotus:#EC9BB6;
}
@media (prefers-color-scheme:dark){
  [data-brand="indigo"]{
    --terracotta:#7C8AC9; --terracotta-on:#1A2142;
    --terracotta-tint:rgba(124,138,201,0.2); --terracotta-ink:#AEB8E0;
    --green:#6FCDB0; --blue:#9ED2EC; --lotus:#F2B4C8;
  }
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;}
body{background:var(--bg);color:var(--ink);font-family:var(--font-ui);line-height:1.7;overscroll-behavior:none;}
h1,h2{font-family:var(--font-heading);}
#app{height:100dvh;max-width:480px;margin:0 auto;position:relative;overflow:hidden;}
#view{height:100%;}
svg{display:block;}
button,input{font-family:var(--font-ui);-webkit-tap-highlight-color:transparent;}

.icon{width:1.2rem;height:1.2rem;}
.icon.sm{width:1rem;height:1rem;flex:none;}
.icon.lg{width:2.2rem;height:2.2rem;}
.icon.rot{transform:rotate(180deg);width:0.85rem;height:0.85rem;opacity:0.6;}
.icon.good{color:var(--green);}
.icon.fire{color:var(--terracotta);}

.accent-neutral{--accent-c:var(--ink);}
.accent-blue{--accent-c:var(--blue);}
.accent-green{--accent-c:var(--green);}
.accent-amber{--accent-c:var(--amber);}
.accent-purple{--accent-c:var(--purple);}
.accent-marigold{--accent-c:var(--amber);}
.accent-lotus{--accent-c:var(--lotus);}

.appwrap{height:100%;display:flex;flex-direction:column;}
.screen{flex:1;min-height:0;display:flex;flex-direction:column;}
.screen.sub{padding:0;}

/* ================= 下部タブナビ ================= */
.tabbar{flex:none;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);background:var(--card);padding-bottom:env(safe-area-inset-bottom);}
.tabitem{border:0;background:none;color:var(--ink-faint);display:flex;flex-direction:column;align-items:center;gap:0.2rem;padding:0.6rem 0 0.5rem;cursor:pointer;}
.tabitem span{font-size:0.62rem;font-weight:700;}
.tabitem.on{color:var(--terracotta);}
.tabitem:focus-visible{outline:2px solid var(--terracotta);outline-offset:-2px;}
.tabicon{position:relative;display:inline-flex;}
.navbadge{position:absolute;top:-0.3rem;right:-0.5rem;min-width:1rem;height:1rem;padding:0 0.2rem;border-radius:1rem;
  background:var(--terracotta);color:#fff;font-size:0.6rem;font-weight:800;line-height:1;display:flex;align-items:center;justify-content:center;}

/* ================= 共通:サブ画面ヘッダー/本文 ================= */
.subhead{flex:none;display:flex;align-items:center;gap:0.7rem;padding:calc(env(safe-area-inset-top) + 0.9rem) 1.2rem 0.8rem;}
.subhead h2{margin:0;font-size:1.05rem;font-weight:900;}
.subbody{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0.2rem 1.2rem calc(env(safe-area-inset-bottom) + 1.4rem);display:flex;flex-direction:column;gap:0.8rem;}
.screen.sub{overflow-y:auto;-webkit-overflow-scrolling:touch;}
.screen.sub.nopad .subhead{padding-bottom:0.4rem;}

.iconbtn{width:2.1rem;height:2.1rem;border:0;background:none;color:var(--ink);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;border-radius:50%;flex:none;}
.iconbtn:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}

.card{background:var(--card);border:1px solid var(--line);border-radius:1.1rem;padding:1rem 1.1rem;box-shadow:var(--shadow-sm);}
.btn{border:0;border-radius:1.4rem;padding:0.8rem 1rem;font-size:0.9rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:0.4rem;}
.btn.pri{background:var(--accent-c,var(--terracotta));color:var(--terracotta-on);}
.btn.gh{background:var(--card-2);color:var(--ink-soft);}
.btn.danger{background:#c0392b;color:#fff;}
.btn.danger[disabled]{opacity:0.6;cursor:default;}
.btn.sm{padding:0.5rem 0.8rem;font-size:0.78rem;border-radius:1.1rem;}
.btn.wide{width:100%;}
.btn:active{transform:scale(0.98);}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}

.lbl{font-size:0.7rem;color:var(--ink-faint);font-weight:700;margin:0 0 0.35rem;}
.note{font-size:0.8rem;color:var(--ink-faint);margin:0;}
.note.err{color:#c0392b;}
.note.center{text-align:center;}
.betaagree{display:flex;align-items:center;gap:0.5rem;margin-top:0.6rem;font-size:0.85rem;font-weight:700;color:var(--ink);cursor:pointer;}
.betaagree input[type="checkbox"]{width:1.15rem;height:1.15rem;flex:none;accent-color:var(--terracotta);cursor:pointer;}
.body{font-size:0.9rem;color:var(--ink-soft);margin:0;line-height:1.85;}
.body b{color:var(--ink);font-weight:800;}
.homesub{font-size:0.84rem;color:var(--ink-soft);margin:0.1rem 0 1rem;}

.empty{padding:2.6rem 1rem;text-align:center;}
.empty p{margin:0 0 0.4rem;font-weight:700;}
.empty .note{margin:0;}

.soon-badge{font-size:0.66rem;font-weight:800;color:var(--ink-faint);background:var(--card-2);padding:0.28rem 0.6rem;border-radius:1rem;flex:none;}

/* ================= オンボーディング(G-1) ================= */
.onboard{align-items:center;justify-content:flex-start;padding:calc(env(safe-area-inset-top) + 1.2rem) 1.4rem calc(env(safe-area-inset-bottom) + 1.6rem);gap:1rem;text-align:center;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.langtoggle{align-self:flex-end;display:flex;gap:0.35rem;}
.langtogglebtn{border:1px solid var(--line);background:var(--card-2);color:var(--ink-soft);font-size:0.72rem;font-weight:700;padding:0.32rem 0.7rem;border-radius:1rem;cursor:pointer;}
.langtogglebtn.on{background:var(--green);color:#fff;border-color:var(--green);}
.obhero{width:100%;max-width:20rem;border-radius:1.3rem;overflow:hidden;box-shadow:var(--shadow-sm);}
.obhero svg{width:100%;height:auto;display:block;}
.obcopy h1{font-size:1.5rem;font-weight:900;margin:0 0 0.4rem;line-height:1.5;}
.obcopy p{font-size:0.92rem;color:var(--ink-soft);margin:0;}
.obcopy.top{width:100%;text-align:left;margin-top:0.5rem;}
.obcopy.top h2{font-size:1.2rem;font-weight:900;margin:0 0 0.3rem;}
.obcopy.top p{font-size:0.84rem;color:var(--ink-soft);margin:0;}
.obfoot{width:100%;margin-top:auto;}

.pickgrid{width:100%;display:flex;flex-direction:column;gap:0.7rem;margin-top:0.4rem;}
.pickcard{display:flex;align-items:center;gap:0.8rem;background:var(--card);border:1.5px solid var(--line);border-radius:1.1rem;padding:0.9rem 1.05rem;cursor:pointer;text-align:left;box-shadow:var(--shadow-sm);}
.pickcard.active{border-color:var(--accent-c,var(--terracotta));}
.pickchip{width:2.3rem;height:2.3rem;border-radius:0.7rem;background:var(--accent-c,var(--card-2));color:var(--terracotta-on);font-size:0.68rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none;}
.pickmain{flex:1;display:flex;flex-direction:column;gap:0.15rem;}
.pickmain b{font-size:0.92rem;}
.pickmain span{font-size:0.76rem;color:var(--ink-faint);font-weight:600;}

/* 動機選択で「地図から旅するように選びたい」を目立たせる */
.travelpick{background:var(--green-tint);border-color:var(--green);}
.travelpick .iconwrap{flex:none;width:2.3rem;height:2.3rem;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;}
.travelpick .iconwrap .icon{width:1.2rem;height:1.2rem;color:#fff;}
.travelpick .pickmain b{color:var(--green-ink);}
.travelpick .pickmain span{color:var(--ink-soft);}

/* ================= ホーム(H-1) ================= */
.home{padding:calc(env(safe-area-inset-top) + 1rem) 1.2rem 1.2rem;overflow-y:auto;-webkit-overflow-scrolling:touch;gap:0.8rem;}
.hometop{display:flex;align-items:center;justify-content:space-between;}
.langswitch{display:flex;align-items:center;gap:0.4rem;border:1.5px solid var(--line);background:var(--card);border-radius:1.2rem;padding:0.4rem 0.75rem;cursor:pointer;color:var(--ink);}
.langswitch b{font-size:0.82rem;}
.langswitch.sm{padding:0.3rem 0.6rem;}
.langswitch::before{content:"";width:0.55rem;height:0.55rem;border-radius:50%;background:var(--accent-c,var(--terracotta));margin-right:0.1rem;}
/* ホームの言語切替は目立たせる(他はplainのまま) */
.hometop .langswitch{border-width:2px;border-color:var(--accent-c,var(--terracotta));box-shadow:var(--shadow-sm);padding:0.5rem 0.6rem 0.5rem 0.85rem;}
.hometop .langswitch b{font-size:0.94rem;font-weight:900;}
.hometop .langswitch::before{width:0.65rem;height:0.65rem;}
.hometop .langswitch .icon.rot{opacity:0.9;width:0.95rem;height:0.95rem;}
.streakpill{display:flex;align-items:center;gap:0.3rem;background:var(--terracotta-tint);color:var(--terracotta-ink);font-weight:800;font-size:0.82rem;padding:0.35rem 0.7rem;border-radius:1.2rem;}
.hometitle{font-size:1.4rem;font-weight:900;margin:0.4rem 0 0;}
.laptag{display:inline-block;font-size:0.66rem;font-weight:800;color:var(--terracotta-ink);background:var(--terracotta-tint);padding:0.12rem 0.45rem;border-radius:1rem;margin-left:0.35rem;vertical-align:middle;}
.lapnotice{display:flex;flex-direction:column;gap:0.4rem;align-items:flex-start;background:var(--card-2);border:1px solid var(--line);border-radius:1rem;padding:0.8rem 0.9rem;}
.lapnotice b{font-size:0.92rem;}
.installactions{display:flex;align-items:center;gap:0.6rem;}

/* ================= お知らせ ================= */
.newdot{display:inline-block;width:0.4rem;height:0.4rem;border-radius:50%;background:var(--terracotta);margin-left:0.35rem;vertical-align:middle;}
.noticerow{display:flex;align-items:baseline;gap:0.6rem;padding:0.3rem 0;}
.noticedate{font-size:0.68rem;color:var(--ink-faint);flex:none;}
.noticetitle{font-size:0.82rem;}
.noticediv{border-top:1px solid var(--line);margin:0.2rem 0;}
.noticecarddate{font-size:0.7rem;color:var(--ink-faint);margin:0;}
.noticecardtitle{display:block;font-size:0.95rem;margin:0.15rem 0 0.4rem;}
.noticebody{white-space:pre-wrap;}

.continuecard .ctitle{font-size:1rem;}
.continuecard .csub{font-size:0.78rem;color:var(--ink-faint);margin:0 0 0.3rem;}

.sectitle{font-size:0.8rem;font-weight:800;margin:0.4rem 0 0.1rem;}
/* overflow-x:autoを持つ横スクロール行は、縦方向のflexコンテナ(.screen)の中で
   高さが不足するとautomatic minimum sizeが0扱いになり、他の要素は縮まないのに
   この行だけ潰れて消えてしまうことがある(コンテンツ量次第で再現したりしなかったり
   する不具合の原因)。flex-shrink:0で常に本来の高さを保つようにする。 */
.themerow{display:flex;gap:0.6rem;overflow-x:auto;padding-bottom:0.2rem;flex-shrink:0;}
.themechip{flex:none;display:flex;align-items:center;gap:0.4rem;background:var(--card);border:1px solid var(--line);border-radius:1.2rem;padding:0.5rem 0.9rem;cursor:pointer;box-shadow:var(--shadow-sm);}
.themechip:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.themechip span{font-size:0.78rem;font-weight:700;white-space:nowrap;}

.crossbanner{display:flex;align-items:center;gap:0.7rem;cursor:pointer;color:var(--blue-ink);background:var(--blue-tint);border-color:transparent;}
.crossbanner:focus-visible{outline:2px solid var(--blue-ink);outline-offset:2px;}
.crossbanner > div{flex:1;min-width:0;}
.crossbanner b{display:block;font-size:0.86rem;color:var(--ink);overflow-wrap:break-word;}
.crossbanner span{font-size:0.74rem;color:var(--ink-soft);overflow-wrap:break-word;}
.crossbanner .icon{color:var(--blue);flex:none;}

/* ================= 学ぶ(L-2/L-3) ================= */
.learn{padding:calc(env(safe-area-inset-top) + 1rem) 1.2rem 0.4rem;overflow-y:auto;-webkit-overflow-scrolling:touch;gap:0.5rem;}
.lrntop{display:flex;align-items:center;justify-content:space-between;}
.lrntop h2{margin:0;font-size:1.2rem;font-weight:900;}

.themelink{display:flex;align-items:center;gap:0.7rem;cursor:pointer;text-align:left;}
.themelink .icon{color:var(--green);}
.themelink b{display:block;font-size:0.86rem;}
.themelink span{font-size:0.74rem;color:var(--ink-faint);}

/* 旅するモードへの導線(学ぶ画面の一番目立つ位置に置く) */
.travelbanner{display:flex;align-items:center;gap:0.8rem;cursor:pointer;text-align:left;background:var(--green-tint);border-color:transparent;}
.travelbanner .iconwrap{flex:none;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;}
.travelbanner .iconwrap .icon{width:1.3rem;height:1.3rem;color:#fff;}
.travelbanner b{display:block;font-size:0.92rem;color:var(--green-ink);}
.travelbanner span{font-size:0.76rem;color:var(--ink-soft);}
.travelbanner > .icon{color:var(--green-ink);opacity:0.7;}

.stagemap{display:flex;flex-direction:column;margin-top:0.4rem;}
.stageline{width:2px;height:0.9rem;background:var(--line);margin-left:1.85rem;}
.stagerow{display:flex;align-items:center;gap:0.8rem;background:var(--card);border:1px solid var(--line);border-radius:1.1rem;padding:0.7rem 0.9rem;cursor:pointer;text-align:left;box-shadow:var(--shadow-sm);}
.stagerow.locked{opacity:0.55;cursor:default;pointer-events:none;}
.stagerow.done{border-color:var(--green);}
.stageicon{width:2.6rem;height:2.6rem;border-radius:50%;overflow:hidden;flex:none;background:var(--card-2);display:flex;align-items:center;justify-content:center;}
.stageicon svg{width:100%;height:100%;}
.stageicon .icon{width:1.3rem;height:1.3rem;color:var(--ink-faint);}
.stagemain{flex:1;display:flex;flex-direction:column;gap:0.1rem;min-width:0;}
.stagemain b{font-size:0.88rem;}
.stagemain span{font-size:0.72rem;color:var(--ink-faint);font-weight:600;}
.stagecount{font-size:0.72rem;font-weight:800;color:var(--ink-faint);flex:none;}
.stagerow.done .stagecount{color:var(--green);}

.kenteilink{display:flex;align-items:center;justify-content:space-between;margin-top:0.6rem;margin-bottom:0.6rem;cursor:pointer;text-align:left;}
.kenteilink b{display:block;font-size:0.86rem;}
.kenteilink span{font-size:0.74rem;color:var(--ink-faint);}

.unitcard{display:flex;flex-direction:column;gap:0.5rem;}
.lessonrow{display:flex;align-items:center;gap:0.6rem;background:var(--card-2);border:0;border-radius:0.8rem;padding:0.7rem 0.8rem;cursor:pointer;text-align:left;}
.lessonrow.done{background:var(--green-tint);}
.lvlpill{font-size:0.66rem;font-weight:800;color:#fff;background:var(--blue);padding:0.2rem 0.45rem;border-radius:0.5rem;flex:none;}
.lessonmain{flex:1;min-width:0;}
.lessonmain b{font-size:0.86rem;}

.themecard2{display:flex;align-items:center;justify-content:space-between;gap:0.7rem;}
.themehead{display:flex;align-items:center;gap:0.7rem;flex:1;min-width:0;}
.themehead .icon{color:var(--amber);flex:none;}
.themehead b{display:block;font-size:0.88rem;}
.themehead span{font-size:0.76rem;color:var(--ink-faint);}

/* ================= レッスン画面(L-4) ================= */
.lhead{flex:none;display:flex;align-items:center;gap:0.7rem;padding:calc(env(safe-area-inset-top) + 0.9rem) 1.1rem 0.6rem;}
.pbar{flex:1;height:0.34rem;border-radius:0.3rem;background:var(--line);overflow:hidden;}
.pbar i{display:block;height:100%;border-radius:0.3rem;background:var(--green);transition:width .3s ease;}
.stepno{font-size:0.76rem;font-weight:700;color:var(--ink-faint);min-width:2.2rem;text-align:right;display:flex;justify-content:flex-end;}

.lbody{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0.4rem 1.3rem 1.4rem;display:flex;flex-direction:column;}
.lfoot{flex:none;display:flex;gap:0.7rem;padding:0.85rem 1.3rem calc(env(safe-area-inset-bottom) + 0.9rem);border-top:1px solid var(--line);}
.lfoot .btn.pri{flex:2;}
.lfoot .btn.gh{flex:1;}
.lfoot .btn.wide{flex:1;}
.lfoot.col{flex-direction:column;}
.lfoot.col .btn{flex:none;width:100%;}
.lfinish{align-self:center;padding:0.35rem;}

.stepcard{flex:1;display:flex;flex-direction:column;justify-content:center;gap:0.85rem;padding:0.4rem 0 1rem;}
.stepcard.center{align-items:center;text-align:center;}
.sceneart{width:100%;border-radius:1rem;overflow:hidden;box-shadow:var(--shadow-sm);}
.sceneart.sm{max-width:14rem;}
.sceneart svg{width:100%;height:auto;display:block;}

.chip{display:inline-flex;align-items:center;gap:0.4rem;align-self:center;background:var(--card-2);color:var(--accent-c,var(--ink-soft));font-size:0.74rem;font-weight:700;padding:0.4rem 0.8rem;border-radius:1.2rem;}
.stepcard:not(.center) .chip{align-self:flex-start;}

.bigicon{width:4.6rem;height:4.6rem;border-radius:50%;background:var(--card-2);color:var(--accent-c,var(--ink));display:flex;align-items:center;justify-content:center;}
.bigicon svg{width:2.2rem;height:2.2rem;}
.bigicon.good{background:var(--green-tint);color:var(--green);}
.bigicon.star{background:var(--amber-tint);color:var(--amber);}

h2{font-size:1.28rem;font-weight:900;margin:0;line-height:1.5;text-wrap:balance;}
.stepcard:not(.center) h2{text-align:left;}
h2.center{text-align:center;}

.phrasebox{background:var(--card);border:1px solid var(--line);border-radius:1.1rem;padding:1.2rem 1.4rem;display:flex;flex-direction:column;align-items:center;gap:0.25rem;width:100%;box-shadow:var(--shadow-sm);}
.native{font-size:1.5rem;font-weight:800;margin:0;text-align:center;}
.kana{font-size:0.84rem;color:var(--ink-faint);font-weight:600;margin:0.1rem 0 0.6rem;}
.playbtn{width:2.6rem;height:2.6rem;border-radius:50%;border:0;background:var(--accent-c,var(--blue));color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;}
.playbtn svg{width:1.05rem;height:1.05rem;margin-left:2px;}
.playbtn.sm{width:2rem;height:2rem;}
.playbtn.sm svg{width:0.8rem;height:0.8rem;}
.playbtn:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}

.breakdown{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:1rem;padding:0.5rem 1.1rem;}
.brow{display:flex;justify-content:space-between;gap:1rem;padding:0.55rem 0;border-bottom:1px solid var(--line);}
.brow:last-child{border-bottom:none;}
.bw{font-weight:800;font-size:0.9rem;}
.bm{color:var(--ink-soft);font-size:0.86rem;text-align:right;}

/* 文法の基礎: 図表(人称代名詞表・類別詞表など)。横長の表だとスマホ幅では
   カタカナ読み併記後にどうしても横スクロールが発生し見にくいため、
   1行=1カードの縦積みレイアウトにして横スクロールなしで全部見えるようにする。 */
.growlist{display:flex;flex-direction:column;gap:0.6rem;width:100%;}
.growrow{background:var(--card);border:1px solid var(--line);border-radius:1rem;padding:0.8rem 1rem;}
.growhead{font-weight:800;font-size:0.92rem;color:var(--ink);}
.growline{font-size:0.82rem;padding:0.4rem 0 0;margin-top:0.4rem;border-top:1px solid var(--line);}
.growlabel{display:block;color:var(--ink-faint);font-weight:700;font-size:0.7rem;margin-bottom:0.2rem;}
.growval{display:block;color:var(--ink);font-weight:600;word-break:break-word;}
.gcaption{font-size:0.72rem;font-weight:800;color:var(--ink-faint);margin:-0.3rem 0 0;}

.micwrap{position:relative;width:6.4rem;height:6.4rem;display:flex;align-items:center;justify-content:center;margin:0.2rem 0;}
.ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--blue);opacity:0;}
.micwrap.rec .ring{animation:micpulse 1.5s ease-out infinite;}
.micwrap.rec .r2{animation-delay:.55s;}
@keyframes micpulse{0%{transform:scale(.58);opacity:.55;}100%{transform:scale(1.55);opacity:0;}}
@media (prefers-reduced-motion:reduce){ .micwrap.rec .ring{animation:none;opacity:.35;} }
.micbtn{width:3.6rem;height:3.6rem;border-radius:50%;border:0;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;z-index:2;}
.micbtn svg{width:1.5rem;height:1.5rem;}
.micbtn.on{background:var(--green);}
.micbtn:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}

.resultchip{display:flex;align-items:center;gap:0.5rem;background:var(--green-tint);color:var(--green-ink);font-weight:700;font-size:0.86rem;padding:0.55rem 1rem;border-radius:1.2rem;}
.linkbtn{border:0;background:none;color:var(--ink-faint);text-decoration:underline;text-underline-offset:2px;font-size:0.8rem;font-weight:700;cursor:pointer;padding:0.2rem;}
.linkbtn.danger{color:#c0392b;}

/* 退会 */
.dangerzone{border-color:rgba(192,57,43,0.3);}
.dangerzone .btn.danger{margin-top:0.3rem;}
.dangerzone .linkbtn{margin-top:0.2rem;}

/* イラストスロット */
.pickart{width:3.4rem;height:2.9rem;border-radius:0.7rem;overflow:hidden;flex:none;background:#FBF7EE;}
.pickart svg,.pickart img{width:100%;height:100%;display:block;object-fit:cover;}
.continuecard{display:flex;flex-direction:row;align-items:stretch;gap:0.8rem;}
.continuemain{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.45rem;align-items:flex-start;}
.homeart{width:5.2rem;border-radius:0.8rem;overflow:hidden;flex:none;align-self:center;}
.homeart svg,.homeart img{width:100%;height:100%;display:block;object-fit:cover;}
/* 画像があれば上に重なり、404なら<img>が消えて下のSVGが見える */
.illustwrap{position:relative;display:block;width:100%;height:100%;}
.illustwrap svg{width:100%;height:100%;display:block;}
.sceneart .illustwrap svg,.obhero .illustwrap svg{height:auto;}
.illustimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1;}

/* 再生ボタン列+ゆっくり再生 */
.playrow{display:flex;align-items:center;justify-content:center;gap:0.6rem;}
.slowbtn{border:1px solid var(--line);background:var(--card-2);color:var(--ink-soft);font-size:0.72rem;font-weight:700;padding:0.4rem 0.7rem;border-radius:1rem;cursor:pointer;}
.voicewarn{color:var(--terracotta);}

/* おもいだしクイズ */
.quizopts{display:flex;flex-direction:column;gap:0.6rem;width:100%;}
.quizopt{display:flex;align-items:center;justify-content:space-between;gap:0.6rem;border:1.5px solid var(--line);background:var(--card-2);border-radius:1rem;padding:0.85rem 1rem;font-size:0.9rem;font-weight:700;color:var(--ink);cursor:pointer;text-align:left;}
.quizopt.right{border-color:var(--green);color:var(--green);}
.quizopt.wrong{border-color:var(--terracotta);opacity:0.65;}
.quizopt .icon{flex:none;width:1.1rem;height:1.1rem;}

/* 並べ替え(scramble)クイズのタイルUI */
.scramblearea{display:flex;flex-direction:column;gap:0.9rem;width:100%;}
.scrambleanswer{display:flex;flex-wrap:wrap;gap:0.5rem;min-height:2.6rem;padding:0.6rem;border:1.5px dashed var(--line);border-radius:1rem;background:var(--card-2);}
.scramblehint{font-size:0.78rem;color:var(--ink-faint);align-self:center;}
.scramblebank{display:flex;flex-wrap:wrap;gap:0.5rem;}
.scrambletile{border:1.5px solid var(--line);background:var(--card);color:var(--ink);font-size:0.9rem;font-weight:700;padding:0.55rem 0.9rem;border-radius:0.9rem;cursor:pointer;}
.scrambletile.placed{background:var(--blue-tint);border-color:var(--blue);color:var(--blue-ink);}
.scrambletile.used{visibility:hidden;}

/* 不正解時の文法ヒント(既存のgrammarステップを再掲) */
.grammarfeedback{background:var(--card-2);border:1px solid var(--line);}
.grammarfeedback .lbl{color:var(--purple-ink);}

/* 発音の自己申告 */
.selfassess{display:flex;gap:0.6rem;}

/* ステージ完走バナー */
.stageclear{display:flex;gap:0.5rem;align-items:center;background:var(--card-2);border:1px solid var(--line);border-radius:1rem;padding:0.7rem 0.9rem;font-size:0.8rem;font-weight:700;color:var(--ink-soft);text-align:left;}

/* ホームのおすすめテーマ印 */
.reco{font-style:normal;font-size:0.6rem;font-weight:800;color:#fff;background:var(--terracotta);border-radius:0.6rem;padding:0.12rem 0.42rem;margin-left:0.3rem;}

/* テーマカード */
.themecard2.focus{outline:2px solid var(--terracotta);outline-offset:1px;}
.themefoot{display:flex;align-items:center;justify-content:space-between;gap:0.6rem;}

/* フレーズ帳の言語絞り込み(上のカテゴリタブとは見た目を変えて区別する) */
.langfilter{display:flex;align-items:center;gap:0.4rem;padding-bottom:0.1rem;overflow-x:auto;flex-shrink:0;}
.langfilterlabel{flex:none;font-size:0.7rem;font-weight:700;color:var(--ink-faint);margin-right:0.1rem;}
.langchip{flex:none;border:1px solid var(--line);background:var(--bg);color:var(--ink-soft);font-size:0.74rem;font-weight:700;padding:0.32rem 0.7rem;border-radius:0.8rem;cursor:pointer;}
.langchip.on{background:var(--blue-tint);color:var(--blue-ink);border-color:var(--blue);}

/* 復習めくりカード */
.revrow{cursor:pointer;}
.revrow:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.revrow .revja{display:block;font-size:0.92rem;font-weight:800;color:var(--ink);}
.revrow .revhint{font-size:0.7rem;color:var(--ink-faint);}
.revrow .revanswer{display:none;margin-top:0.45rem;}
.revrow.open .revhint{display:none;}
.revrow.open .revanswer{display:block;}
.revrow .revanswer b{display:block;font-size:0.95rem;}
.revrow .revanswer > span{font-size:0.76rem;color:var(--ink-faint);}
.revactions{display:flex;align-items:center;gap:0.5rem;margin-top:0.5rem;}

/* 修了テスト */
.subhead .langswitch{margin-left:auto;}
.kentrow{display:flex;align-items:center;gap:0.7rem;}
.kentrow.passed{border-color:var(--green);}
.kentmain{flex:1;min-width:0;}
.kentmain b{display:block;font-size:0.92rem;}
.kentmain span{font-size:0.74rem;color:var(--ink-faint);}
.stampicon{width:2.4rem;height:2.4rem;flex:none;}
.stampicon svg{width:100%;height:100%;}

/* 旅の辞書 */
.dicthead{font-size:0.78rem;font-weight:800;color:var(--ink-soft);margin:1rem 0 0.45rem;}
.dictlangname{font-size:0.95rem;font-weight:900;margin:1.5rem 0 0.2rem;padding-top:0.8rem;border-top:1px solid var(--line);}
.dictdot{width:1rem;height:1rem;border:2px solid var(--line);border-radius:50%;flex:none;margin:0 0.65rem 0 0.6rem;}

/* 単語帳 */
.wordreading{font-size:0.76rem;font-weight:700;color:var(--ink-faint);}
.phraserow.notyet .phrasemain b{color:var(--ink-soft);font-weight:600;}
.playall{margin-bottom:0.75rem;}
.worddetailhint{display:inline-flex;align-items:center;gap:0.15rem;margin-left:0.4rem;color:var(--terracotta);font-weight:700;}
.worddetailhint .icon{width:0.7rem;height:0.7rem;}

/* にがてドリル */
.weakcard{display:flex;flex-direction:column;gap:0.8rem;}
.weakhead{display:flex;align-items:center;gap:0.7rem;}
.weakhead.col{flex-direction:column;align-items:flex-start;gap:0.5rem;}
.dialoguesetup{align-self:stretch;font-size:0.8rem;color:var(--ink-soft);background:var(--card-2);padding:0.55rem 0.75rem;border-radius:0.9rem;}

/* 旅のスタンプ帳 */
.stampgrid{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:0.6rem;}
.stamprow{display:flex;align-items:center;gap:0.35rem;flex-wrap:wrap;}
.stamp{width:1.9rem;height:1.9rem;flex:none;border:0;background:none;padding:0;}
.stamp svg{width:100%;height:100%;}
.stamp.off{filter:grayscale(1);opacity:0.22;}
button.stamp{cursor:pointer;padding:0.15rem;margin:-0.15rem;border-radius:0.5rem;}
button.stamp:focus-visible{outline:2px solid var(--terracotta);outline-offset:1px;}
/* 周回・連続学習スタンプ: ステージスタンプ(自前で色付き)と違い単色アイコンなので、
   丸バッジの背景を敷いて存在感を揃える */
.stamp.achieve{background:var(--terracotta-tint);color:var(--terracotta-ink);border-radius:50%;padding:0.3rem;box-shadow:0 0.1rem 0.2rem rgba(38,37,31,0.15);}
.stamp.achieve.off{background:var(--card-2);color:var(--ink-faint);box-shadow:none;}
button.stamp.achieve{padding:0.3rem;margin:0;}

/* テスターモード表示 */
.testerbadge{flex:none;text-align:center;font-size:0.68rem;font-weight:800;letter-spacing:0.02em;color:var(--terracotta-on);background:var(--terracotta);padding:0.35rem 0.5rem;padding-top:calc(env(safe-area-inset-top) + 0.35rem);}

/* 旅のスタンプ帳: タップで開く読みものシート */
.stampsheet{position:absolute;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;background:rgba(20,18,12,0.5);padding:1rem;animation:stampfade 0.15s ease;}
@keyframes stampfade{from{opacity:0;}to{opacity:1;}}
.stampcard{position:relative;width:100%;max-height:88%;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--card);border-radius:1.3rem;box-shadow:var(--shadow);}
.stampimg{width:100%;aspect-ratio:16/10;position:relative;overflow:hidden;border-radius:1.3rem 1.3rem 0 0;background:var(--card-2);}
.stampimg .illustwrap{height:100%;}
.stampclose{position:absolute;top:0.7rem;right:0.7rem;z-index:2;width:2.1rem;height:2.1rem;border:0;border-radius:50%;background:rgba(20,18,12,0.55);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.stampclose .icon{width:1.1rem;height:1.1rem;}
.stampcardbody{padding:1.1rem 1.2rem calc(env(safe-area-inset-bottom) + 1.2rem);}
.stampcat{display:inline-flex;align-items:center;gap:0.3rem;font-size:0.72rem;font-weight:800;color:var(--amber-ink);background:var(--amber-tint);padding:0.3rem 0.65rem;border-radius:1rem;}
.stampcat .icon{width:0.85rem;height:0.85rem;}
.stampcardbody h3{margin:0.6rem 0 0.15rem;font-size:1.05rem;}
.stampmeta{margin:0 0 0.6rem;font-size:0.76rem;color:var(--ink-faint);}
.stamptext{margin:0 0 0.7rem;font-size:0.88rem;color:var(--ink-soft);}
.stamporigin{margin:0;font-size:0.72rem;color:var(--ink-faint);border-top:1px solid var(--line);padding-top:0.6rem;}

/* 単語の詳細シート(画像を使わないstampcardbody: 閉じるボタンとの重なりを避けるため上余白を広めに取る) */
.worddetailbody{padding-top:2.6rem;display:flex;flex-direction:column;gap:0.7rem;}
.worddetailbody .stampmeta{margin:0;}
.worddetailnote{background:var(--card-2);}
.phrasemain.worddetailbtn{display:block;width:100%;background:none;border:0;padding:0;margin:0;text-align:left;font:inherit;color:inherit;cursor:pointer;}
.phrasemain.worddetailbtn:focus-visible{outline:2px solid var(--terracotta);outline-offset:2px;border-radius:0.4rem;}

/* 旅するモード: バンコク水彩マップ(背景は実写ではなく専用の水彩イラスト資産) */
.travelmapwrap{position:relative;width:100%;aspect-ratio:2/3;border-radius:1.2rem;overflow:hidden;margin-top:0.3rem;
  box-shadow:var(--shadow-sm), inset 0 0 3rem rgba(93,58,38,0.18), inset 0 0 0.9rem rgba(93,58,38,0.12);}
.travelmapart{position:absolute;inset:0;pointer-events:none;}
.travelroute{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
/* タイ全体マップ: 実写イラストの海の青みをアプリの生成りトーンに馴染ませる */
.travelmaptone{position:absolute;inset:0;background:#F6ECD8;opacity:0.12;pointer-events:none;}

/* スポットのクラスタ(アイコン→ラベル→チップ)。flexカラムで密着させ一体として
   タップ座標の中心に揃える(位置ずれ防止)。 */
.travelspot{position:absolute;z-index:2;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:3px;}
.pinfloat{position:relative;display:block;animation:pinfloat 3s ease-in-out infinite;}
@keyframes pinfloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
@media (prefers-reduced-motion:reduce){ .pinfloat{animation:none;} }

/* 円形にマスクした水彩アイコン。写真そのものが直接タップ対象(黒いピン記号は使わない) */
.travelpin{position:relative;display:block;width:4.5rem;height:4.5rem;min-width:64px;min-height:64px;
  border:3px solid #fff;border-radius:50%;overflow:hidden;padding:0;margin:0;background:#FBF3E4;
  box-shadow:0 0.25rem 0.625rem rgba(107,66,38,0.38);cursor:pointer;}
.travelpin .pinart{display:block;width:100%;height:100%;}
.travelpin.bounced{animation:pinbounce 0.22s ease;}
@keyframes pinbounce{0%{transform:scale(1);}50%{transform:scale(1.1);}100%{transform:scale(1);}}
.travelpin:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px;}

/* 訪問済みバッジ(緑チェック)。.travelpinの外接円をはみ出すので.pinfloat側の子として配置 */
.pinfoot{position:absolute;top:-0.15rem;right:-0.15rem;width:1.3rem;height:1.3rem;border-radius:50%;
  background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0.1rem 0.2rem rgba(38,37,31,0.3);}
.pinfoot .icon{width:0.85rem;height:0.85rem;}

/* スポット名ラベル */
.pinlabel{background:rgba(255,255,255,0.82);color:#4A2F1D;font-family:var(--font-heading);
  font-size:0.68rem;font-weight:700;padding:0.18rem 0.55rem;border-radius:999px;white-space:nowrap;
  max-width:6.4rem;overflow:hidden;text-overflow:ellipsis;box-shadow:0 0.1rem 0.2rem rgba(90,58,40,0.18);}


/* バンコクだけ大きく・写真そのまま(押せることが一目で分かる) */
.travelpin.citymain{width:4.5rem;height:4.5rem;}
.tapbadge{position:absolute;top:-0.35rem;right:-0.6rem;z-index:3;background:var(--terracotta);color:#fff;
  font-family:var(--font-heading);font-size:0.62rem;font-weight:800;padding:0.16rem 0.42rem;border-radius:999px;
  border:2px solid #fff;white-space:nowrap;box-shadow:0 0.1rem 0.2rem rgba(38,37,31,0.3);}

/* 他4都市: 淡く・小さく・押せない見た目(タップは軽い揺れ+トーストのみ)。
   本物の地形イラスト(山などの描き込み)に埋もれないよう、淡い白グローを敷く。 */
.travelpin.citymini{width:3rem;height:3rem;min-width:44px;min-height:44px;border-width:2px;
  background:var(--card-2);color:#8A6B4A;opacity:0.55;filter:saturate(0.4);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0.15rem 0.35rem rgba(107,66,38,0.25), 0 0 0 6px rgba(255,255,255,0.35);}
.cityglyph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.cityglyph svg{width:58%;height:58%;}
.travelpin.citymini.shaking{animation:cityshake 0.4s ease;}
@keyframes cityshake{0%,100%{transform:translateX(0);}20%{transform:translateX(-4px);}40%{transform:translateX(4px);}60%{transform:translateX(-3px);}80%{transform:translateX(3px);}}

/* 準備中都市タップ時の一瞬トースト */
.traveltoast{position:absolute;left:50%;bottom:0.8rem;transform:translateX(-50%);z-index:3;
  background:rgba(38,37,31,0.85);color:#fff;font-size:0.76rem;font-weight:700;padding:0.5rem 0.9rem;
  border-radius:1rem;white-space:nowrap;pointer-events:none;animation:toastfade 1.4s ease;}
@keyframes toastfade{0%{opacity:0;}12%{opacity:1;}82%{opacity:1;}100%{opacity:0;}}

/* 音声再生に失敗した際の全画面共通トースト(タブバーの少し上、どの画面でも出せる) */
.ttstoast{position:fixed;left:50%;bottom:calc(4.6rem + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;
  background:rgba(38,37,31,0.9);color:#fff;font-size:0.8rem;font-weight:700;padding:0.6rem 1rem;
  border-radius:1rem;white-space:nowrap;max-width:90vw;overflow:hidden;text-overflow:ellipsis;
  pointer-events:none;animation:toastfade 2.6s ease;}

/* スポットカード内のレッスン一覧・カテゴリ色分け(行自体は既存.lessonrowを再利用) */
.spotlessonlist{display:flex;flex-direction:column;gap:0.5rem;margin-top:0.8rem;}
.spotlessonlist .lessonrow{width:100%;}
.spotlessonlist .lessonmain b{display:block;}
.spotlessonlist .lessonmain span{font-size:0.72rem;color:var(--ink-faint);}
.spotlessoncat{width:1.9rem;height:1.9rem;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;}
.spotlessoncat .icon{width:1rem;height:1rem;}
.spotlessoncat.cat-move{background:var(--blue-tint);color:var(--blue-ink);}
.spotlessoncat.cat-food{background:var(--amber-tint);color:var(--amber-ink);}
.spotlessoncat.cat-shop{background:var(--purple-tint);color:var(--purple-ink);}
.spotlessoncat.cat-sight{background:var(--green-tint);color:var(--green-ink);}
.stampcat.cat-visited{color:var(--green-ink);background:var(--green-tint);}
.achieveimg{display:flex;align-items:center;justify-content:center;color:var(--terracotta);}
.achieveicon{width:4rem;height:4rem;}

/* ストリークお守り・週間ふりかえり */
.shieldon{color:var(--blue);}
.weekline{font-size:0.76rem;color:var(--green-ink);font-weight:700;margin:-0.5rem 0 0.9rem;}

/* 見比べ: 学習中の言語カード */
.langcard.mine{box-shadow:0 0 0 2px var(--accent-c,var(--green)) inset;}
.minitag{font-style:normal;font-size:0.58rem;font-weight:800;color:#fff;background:var(--accent-c,var(--green));border-radius:0.5rem;padding:0.1rem 0.36rem;vertical-align:middle;}

/* ================= 多言語見比べ(L-5) ================= */
.chead{flex:none;display:flex;align-items:center;gap:0.7rem;padding:calc(env(safe-area-inset-top) + 0.9rem) 1.2rem 0.75rem;border-bottom:1px solid var(--line);}
.chead h2{font-size:1rem;margin:0;font-weight:800;}
.cbody{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:1.1rem 1.2rem calc(env(safe-area-inset-bottom) + 1.6rem);display:flex;flex-direction:column;gap:1.15rem;}
.lead{font-size:0.86rem;color:var(--ink-soft);margin:0;line-height:1.85;}
.cardstack{display:flex;flex-direction:column;gap:0.8rem;}
.langcard{background:var(--card);border:1px solid var(--line);border-radius:1.1rem;padding:1rem 1.1rem;box-shadow:var(--shadow-sm);}
.lc-top{display:flex;align-items:center;gap:0.7rem;margin-bottom:0.6rem;}
.lcode{width:2rem;height:2rem;border-radius:0.6rem;background:var(--accent-c);color:#fff;font-size:0.66rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none;}
.lc-meta{flex:1;min-width:0;}
.lc-meta b{display:block;font-size:0.86rem;}
.lc-meta span{display:block;font-size:0.72rem;color:var(--ink-faint);font-weight:600;}
.lc-native{font-size:1.15rem;font-weight:800;margin:0 0 0.2rem;}
.lc-native u{text-decoration-color:var(--accent-c);text-decoration-thickness:3px;text-underline-offset:3px;text-decoration-line:underline;}
.lc-kana{font-size:0.78rem;color:var(--ink-faint);font-weight:600;margin:0 0 0.45rem;}
.lc-key{font-size:0.76rem;color:var(--ink-soft);font-weight:600;margin:0;background:var(--card-2);display:inline-block;padding:0.3rem 0.6rem;border-radius:0.6rem;}

.insight{display:flex;gap:0.8rem;background:var(--amber-tint);border-radius:1.1rem;padding:1rem 1.1rem;color:var(--amber-ink);}
.insight svg{width:1.3rem;height:1.3rem;flex:none;margin-top:0.1rem;color:var(--amber-ink);}
.insight .body{color:var(--amber-ink);}
.insight .addendum{font-size:0.82rem;font-weight:800;margin:0.5rem 0 0;color:var(--amber-ink);}

/* ================= フレーズ帳(P-1/P-2/P-3) ================= */
.searchbar{padding:0 1.2rem 0.6rem;}
.searchbar input{width:100%;border:1px solid var(--line);background:var(--card-2);border-radius:1rem;padding:0.6rem 0.9rem;font-size:0.84rem;color:var(--ink);}
.searchbar input:focus-visible{outline:2px solid var(--green);}
/* .themerowと同じ理由(overflow-x:autoの横スクロール行はflex列の中で潰れやすい)でflex-shrink:0が必須 */
.phrasetabs{display:flex;gap:0.5rem;padding:0 1.2rem 0.6rem;overflow-x:auto;flex-shrink:0;}
.ptab{flex:none;border:0;background:var(--card-2);color:var(--ink-soft);font-size:0.78rem;font-weight:700;padding:0.45rem 0.85rem;border-radius:1.1rem;cursor:pointer;}
.ptab.on{background:var(--green);color:#fff;}

.phraserow{display:flex;align-items:center;gap:0.7rem;}
.langtag{width:2.2rem;height:2.2rem;border-radius:0.6rem;background:var(--accent-c,var(--green));color:#fff;font-size:0.62rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none;}
.phrasemain{flex:1;min-width:0;}
.phrasemain b{display:block;font-size:0.9rem;}
.phrasemain span{font-size:0.76rem;color:var(--ink-faint);}

.collectrow{width:100%;display:flex;align-items:center;justify-content:space-between;gap:0.6rem;cursor:pointer;text-align:left;}
.collectrow b{font-size:0.86rem;}
.collectrow .icon{color:var(--ink-faint);flex:none;}

/* ================= マイページ(M-1〜M-4) ================= */
.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0.6rem;}
.statcell{background:var(--card-2);border-radius:0.9rem;padding:0.7rem 0.5rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:0.25rem;}
.statcell b{font-size:1rem;}
.statcell span{font-size:0.62rem;color:var(--ink-faint);font-weight:700;}

.progrow{display:flex;align-items:center;gap:0.7rem;padding:0.5rem 0;}
.progmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.3rem;}
.progmain b{font-size:0.84rem;}
.progmain .pbar{height:0.3rem;}
.progmain .pbar i{background:var(--accent-c,var(--green));}
.pct{font-size:0.76rem;font-weight:800;color:var(--ink-faint);flex:none;}

.rowbtn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:0.7rem;cursor:pointer;text-align:left;}
.rowbtn b{display:block;font-size:0.86rem;}
.rowbtn span{font-size:0.74rem;color:var(--ink-faint);}
.rowbtn .icon{color:var(--ink-faint);flex:none;}
.rowbtn.off{opacity:0.55;cursor:default;}
.wbstagebtn .icon{transition:transform 0.15s ease;}
.wbstagebtn.open .icon{transform:rotate(90deg);}

input[type="range"]{width:100%;accent-color:var(--green);margin:0.3rem 0;}

/* ================= ご意見・ご要望 ================= */
.fbtextarea{width:100%;min-height:7rem;border:1px solid var(--line);background:var(--card-2);border-radius:1rem;padding:0.7rem 0.9rem;font-size:0.86rem;color:var(--ink);font-family:inherit;resize:vertical;box-sizing:border-box;}
.fbtextarea:focus-visible{outline:2px solid var(--green);}