/* ===== ホスピタリティベーシック 20の行動  アプリ ===== */

:root {
  --bg:#efe7e0; --card:#fbf8f4; --panel:#6f7c79; --panel-2:#63706d;
  --panel-ink:#f4f1ea; --panel-dim:#cdd4d0;
  --ink:#2b2b31; --ink-soft:#4a4a52; --muted:#8a7f75;
  --line:#e3d9cf; --line-2:#d8ccbf;
  --accent:#a87f4c; --accent-ink:#8a6636; --accent-sf:#efe2ce;
  --ok:#5a7d63; --ng:#b06a55;
  --mark-bg:#f3d9a6; --mark-ink:#2b2b31;
  --shadow:0 1px 2px rgba(43,43,49,.05), 0 12px 34px -18px rgba(43,43,49,.26);
  --maxw:1120px; --head-h:58px;
  --vz-bg:var(--accent-sf); --vz-accent:var(--accent);
  --font-jp:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic","Yu Gothic UI",Meiryo,system-ui,sans-serif;
  --font-mc:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --font-lat:"Cormorant Garamond","Zen Old Mincho",Georgia,serif;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#17181b; --card:#212227; --panel:#39423f; --panel-2:#333b39;
  --panel-ink:#ece6dd; --panel-dim:#a7b0ac;
  --ink:#e7e1d7; --ink-soft:#c3bcb0; --muted:#9a9187;
  --line:#31323a; --line-2:#3a3b44;
  --accent:#c99e66; --accent-ink:#d8b183; --accent-sf:#322a20;
  --ok:#7fa588; --ng:#d0907c;
  --mark-bg:#7c6634; --mark-ink:#f7efe0;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 16px 40px -20px rgba(0,0,0,.6);
  --vz-bg:#2b2f34;
}}
:root[data-theme="dark"]{
  --bg:#17181b; --card:#212227; --panel:#39423f; --panel-2:#333b39;
  --panel-ink:#ece6dd; --panel-dim:#a7b0ac; --ink:#e7e1d7; --ink-soft:#c3bcb0; --muted:#9a9187;
  --line:#31323a; --line-2:#3a3b44; --accent:#c99e66; --accent-ink:#d8b183; --accent-sf:#322a20;
  --ok:#7fa588; --ng:#d0907c; --mark-bg:#7c6634; --mark-ink:#f7efe0;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 16px 40px -20px rgba(0,0,0,.6); --vz-bg:#2b2f34;
}

*{box-sizing:border-box}
html,body{overflow-x:hidden;max-width:100%}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-size:17.3px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-jp);
  font-size:1rem;line-height:1.85;font-feature-settings:"palt" 1;-webkit-font-smoothing:antialiased}
body.no-scroll{overflow:hidden}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
mark{background:var(--mark-bg);color:var(--mark-ink);border-radius:3px;padding:0 .1em}
.lat{font-family:var(--font-lat);font-weight:500;letter-spacing:.06em}
.dim{color:var(--muted)}
.boot{min-height:60vh;display:grid;place-items:center;color:var(--muted);text-align:center;padding:40px}
.boot.err{color:var(--ng)}

/* ---------- ボタン ---------- */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--ink);color:var(--card);border:0;border-radius:999px;
  font:inherit;font-weight:600;font-size:.92rem;padding:11px 22px;cursor:pointer;transition:opacity .15s}
.btn-primary:hover{opacity:.88}
.btn-primary:disabled{opacity:.5;cursor:default}
.btn-primary.sm{padding:7px 15px;font-size:.84rem}
.link-btn{background:none;border:0;color:var(--accent-ink);font:inherit;font-size:.86rem;cursor:pointer;padding:6px 4px;text-decoration:underline;text-underline-offset:3px}
.link-btn.danger{color:var(--ng)}
.hbtn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px;border:1px solid var(--line-2);
  border-radius:999px;background:var(--card);color:var(--ink-soft);font:inherit;font-size:.84rem;cursor:pointer;white-space:nowrap}
.hbtn:hover{border-color:var(--accent);color:var(--ink)}
.hbtn svg{width:15px;height:15px}
@media (max-width:560px){.hbtn span{display:none}.hbtn{padding:0 10px}}

/* ---------- ヘッダー ---------- */
.site-head{position:sticky;top:0;z-index:50;height:var(--head-h);display:flex;align-items:center;gap:12px;
  padding:0 clamp(12px,4vw,30px);background:color-mix(in srgb,var(--card) 90%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:baseline;gap:9px;min-width:0}
.brand-mark{font-family:var(--font-lat);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-ink);border:1px solid var(--line-2);padding:3px 7px 2px;border-radius:999px;white-space:nowrap}
.brand-name{font-family:var(--font-mc);font-weight:700;font-size:clamp(.9rem,2.4vw,1.05rem);letter-spacing:.03em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:680px){.brand-mark{display:none}}
.head-nav{display:flex;gap:2px;margin-left:8px}
.nav-tab{padding:7px 12px;border-radius:999px;font-size:.86rem;color:var(--ink-soft);white-space:nowrap}
.nav-tab.on{background:var(--accent-sf);color:var(--accent-ink);font-weight:600}
@media (max-width:760px){.head-nav{margin-left:auto;order:3;flex-basis:100%;justify-content:center;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:0}
  .site-head{height:auto;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}}
@media (max-width:420px){.head-nav{gap:0}.nav-tab{padding:6px 8px;font-size:.8rem}}
.head-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.acct{position:relative}
.acct-btn{max-width:44vw;overflow:hidden;text-overflow:ellipsis}
.demo-badge{background:var(--accent);color:var(--card);border-radius:4px;font-size:.68rem;padding:1px 5px;margin-left:4px}
.acct-menu{position:absolute;right:0;top:calc(100% + 8px);background:var(--card);border:1px solid var(--line-2);
  border-radius:12px;box-shadow:var(--shadow);padding:8px;min-width:200px;z-index:60;display:flex;flex-direction:column}
.acct-menu .am-name{margin:4px 8px 0;font-weight:700}
.acct-menu .am-mail{margin:0 8px 6px;font-size:.76rem;color:var(--muted)}
.acct-menu .am-demo{margin:0 8px 6px;font-size:.72rem;color:var(--accent-ink)}
.acct-menu button{text-align:left;background:none;border:0;font:inherit;font-size:.88rem;color:var(--ink);
  padding:9px 10px;border-radius:8px;cursor:pointer}
.acct-menu button:hover{background:var(--bg)}
#scrollProg{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%}

main.with-chrome{max-width:var(--maxw);margin:0 auto;padding:0 clamp(14px,5vw,36px)}
.page{padding:clamp(24px,5vw,44px) 0 30px}
.page-title{font-family:var(--font-mc);font-weight:700;font-size:clamp(1.4rem,4vw,1.9rem);letter-spacing:.03em;margin:0 0 18px}
.crumb{font-size:.82rem;color:var(--muted);margin:0 0 16px}
.crumb a{color:var(--accent-ink)}
.crumb span{margin:0 6px}

/* ---------- 認証画面 ---------- */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:36px 18px;
  background:radial-gradient(120% 80% at 50% 0%, color-mix(in srgb,var(--accent-sf) 60%,var(--bg)), var(--bg))}
.auth-card{width:100%;max-width:420px;background:var(--card);border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--shadow);padding:clamp(26px,5vw,40px)}
.auth-eyebrow{font-family:var(--font-lat);font-style:italic;letter-spacing:.1em;color:var(--accent-ink);margin:0 0 8px;font-size:.95rem}
.auth-title{font-family:var(--font-mc);font-weight:700;font-size:clamp(1.5rem,5vw,2rem);line-height:1.4;margin:0 0 4px;letter-spacing:.03em}
.auth-sub{font-family:var(--font-mc);color:var(--ink-soft);margin:0 0 18px;font-size:.98rem}
.auth-demo{background:var(--accent-sf);color:var(--accent-ink);border-radius:10px;padding:11px 13px;font-size:.8rem;line-height:1.7;margin:0 0 16px}
.auth-ms{font-size:.9rem;line-height:1.85;color:var(--ink-soft);margin:0 0 18px}
#btnMsSignin,#btnProvision{width:100%}
.auth-tabs{display:flex;gap:6px;background:var(--bg);border-radius:999px;padding:4px;margin:0 0 18px}
.auth-tabs a{flex:1;text-align:center;padding:8px;border-radius:999px;font-size:.88rem;color:var(--muted)}
.auth-tabs a.on{background:var(--card);color:var(--ink);font-weight:600;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.auth-form{display:flex;flex-direction:column;gap:12px}
.auth-form label{display:flex;flex-direction:column;gap:5px;font-size:.82rem;color:var(--ink-soft)}
.auth-form input{border:1px solid var(--line-2);background:var(--bg);color:var(--ink);border-radius:10px;
  padding:11px 13px;font:inherit;font-size:.95rem}
.auth-err{color:var(--ng);font-size:.82rem;margin:0;min-height:1em}
.auth-note,.auth-form + .auth-note{font-size:.78rem;color:var(--muted);margin:12px 0 0;text-align:center}
.auth-samples{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);text-align:center;display:flex;flex-direction:column;gap:2px}
.auth-samples p{font-size:.74rem;color:var(--muted);margin:0 0 4px}
.auth-samples .link-btn{font-size:.82rem}
.pending-msg{font-size:.92rem;line-height:1.9;margin:8px 0}
.pending-msg.dim{font-size:.84rem}

/* ---------- 目次・一覧 ---------- */
.list-hero{padding:clamp(22px,5vw,44px) 0 8px}
.lh-eyebrow{font-family:var(--font-lat);font-style:italic;letter-spacing:.08em;color:var(--accent-ink);margin:0 0 6px;font-size:1rem}
.lh-title{font-family:var(--font-mc);font-weight:700;font-size:clamp(1.8rem,6vw,2.8rem);margin:0 0 14px;letter-spacing:.04em}
.lh-stats{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:.86rem;color:var(--muted)}
.lh-stats b{color:var(--ink);font-family:var(--font-lat);font-size:1.15rem;font-variant-numeric:lining-nums}

.today-card{display:flex;align-items:center;gap:14px;margin:22px 0 8px;padding:16px 18px;border-radius:16px;
  background:linear-gradient(150deg,var(--panel),var(--panel-2));color:var(--panel-ink);box-shadow:var(--shadow)}
.today-badge{font-family:var(--font-lat);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(255,255,255,.16);padding:4px 9px;border-radius:999px;flex:none}
.today-n{font-family:var(--font-lat);font-size:2.4rem;line-height:1;flex:none;font-variant-numeric:lining-nums}
.today-t{font-weight:600;display:flex;flex-direction:column;min-width:0}
.today-full{font-weight:400;font-size:.78rem;color:var(--panel-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.today-go{margin-left:auto;font-size:.86rem;white-space:nowrap;flex:none}
@media (max-width:560px){.today-full{display:none}.today-go{display:none}}

.sec-label{display:flex;align-items:center;gap:12px;font-family:var(--font-mc);font-weight:700;font-size:1rem;
  letter-spacing:.1em;margin:30px 0 16px}
.sec-label::before{content:"";width:24px;height:1px;background:var(--accent)}
.sec-label .lat{font-style:italic;color:var(--muted);font-size:.9rem}

.toc-grid{list-style:none;margin:0;padding:0;display:grid;gap:9px;grid-template-columns:repeat(auto-fill,minmax(244px,1fr))}
.tc a{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);height:100%;transition:transform .13s,border-color .13s}
.tc a:hover{transform:translateY(-2px);border-color:var(--accent)}
.tc-n{flex:none;font-family:var(--font-lat);font-weight:600;font-size:1.3rem;color:var(--accent-ink);width:1.5em;text-align:center;font-variant-numeric:lining-nums}
.tc-body{display:flex;flex-direction:column;min-width:0}
.tc-t{font-size:.92rem;font-weight:500;line-height:1.4}
.tc-meta{font-size:.72rem;color:var(--muted)}
.tc.has-read a{background:color-mix(in srgb,var(--accent-sf) 45%,var(--card))}
.list-note{font-size:.8rem;color:var(--muted);margin-top:18px}

/* ---------- 項目ページ / chapter ---------- */
.chapter{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);
  overflow:hidden;display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr)}
@media (max-width:840px){.chapter{grid-template-columns:1fr}}
.chapter-aside{background:linear-gradient(160deg,var(--panel),var(--panel-2));color:var(--panel-ink);
  padding:clamp(22px,3.2vw,36px);display:flex;flex-direction:column}
.eyebrow{font-family:var(--font-lat);font-style:italic;letter-spacing:.13em;color:var(--panel-dim);margin:0;font-size:.92rem}
.chapter-num{font-family:var(--font-lat);font-weight:500;font-size:clamp(3rem,8vw,4.4rem);line-height:.9;
  margin:6px 0 12px;font-variant-numeric:lining-nums}
.chapter-title{font-family:var(--font-mc);font-weight:700;font-size:clamp(1.1rem,2.4vw,1.34rem);line-height:1.7;
  letter-spacing:.02em;margin:0 0 20px;text-wrap:balance}
.hero-art{margin:auto 0 0;align-self:center;width:clamp(120px,44%,168px);aspect-ratio:1;color:var(--panel-ink);
  background:color-mix(in srgb,var(--panel-ink) 12%,transparent);border-radius:16px;padding:14px}
.hero-art svg{width:100%;height:100%;display:block}
@media (max-width:840px){.chapter-aside{flex-direction:row;flex-wrap:wrap;align-items:center;gap:2px 16px}
  .chapter-num{margin:0;font-size:2.7rem}.chapter-title{flex-basis:100%;order:3;margin:10px 0 0}
  .eyebrow{order:1}.hero-art{order:4;margin:14px auto 0}}
.chapter-main{padding:clamp(20px,3.2vw,38px);min-width:0}
.lead{color:var(--ink-soft);font-size:.94rem}
.lead p{margin:0 0 1em}.lead p:last-child{margin:0}

.block{margin-top:clamp(24px,4vw,34px)}
.block-label{display:flex;align-items:center;gap:10px;font-family:var(--font-mc);font-weight:700;font-size:1rem;
  letter-spacing:.05em;margin:0 0 14px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.block-no{display:inline-grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%;background:var(--accent-sf);color:var(--accent-ink);font-size:.9em}
.pts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.pt{padding-left:15px;border-left:2px solid var(--line-2)}
.pt-h{margin:0 0 3px;font-weight:600;font-size:.93rem}
.pt-d{margin:0;color:var(--ink-soft);font-size:.87rem;line-height:1.8}
.note{margin:16px 0 0;padding:13px 15px;background:var(--accent-sf);color:var(--accent-ink);border-radius:10px;font-size:.84rem;line-height:1.8}

/* ---------- 図表 viz ---------- */
.viz{margin:clamp(20px,3.5vw,30px) 0;padding:clamp(16px,3vw,22px);background:var(--vz-bg);
  border:1px solid var(--line);border-radius:14px;color:var(--ink)}
.viz-cap{margin:0 0 14px;font-weight:700;font-size:.9rem;letter-spacing:.03em;display:flex;align-items:center;gap:8px}
.viz-cap::before{content:"";width:14px;height:2px;background:var(--accent);flex:none}
.viz-note{margin:12px 0 0;font-size:.78rem;color:var(--muted);line-height:1.7}
.ic{display:inline-flex}
.ic svg,.hero-art svg,.points-fig svg{width:100%;height:100%;display:block}
/* SVG 挿絵の共通スタイル（ヒーロー・図表アイコン共通） */
svg .ac{fill:var(--vz-accent)}
svg .ln{fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
svg .lna{fill:none;stroke:var(--vz-accent);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
svg .bg{fill:var(--vz-bg)}
svg .eyes2{fill:none;stroke:var(--vz-bg);stroke-width:2.6;stroke-linecap:round}
svg .okc,svg .okk{fill:none;stroke:var(--ok);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
svg .ngc,svg .ngk{fill:none;stroke:var(--ng);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
/* ヒーロー内：地色が明るいので調整 */
.hero-art .bg,.points-fig .bg{fill:none}
.hero-art .eyes,.points-fig .eyes{fill:none;stroke:var(--panel-2);stroke-width:2.4;stroke-linecap:round}
.hero-art .ac,.points-fig .ac{fill:var(--accent)}
.viz .eyes{fill:none;stroke:var(--vz-bg);stroke-width:2.4;stroke-linecap:round}

.steps{list-style:none;margin:0;padding:0;display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.step{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:13px 12px;display:flex;
  flex-direction:column;align-items:center;text-align:center;gap:8px;position:relative}
.step-n{width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--card);font-family:var(--font-lat);
  font-weight:600;font-size:.85rem;display:grid;place-items:center}
.step-ic{width:38px;height:38px;color:var(--ink)}
.step-t{font-size:.77rem;line-height:1.5;color:var(--ink-soft)}

.cmp{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:560px){.cmp{grid-template-columns:1fr}}
.cmp-col{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px}
.cmp-col p{margin:0;font-size:.83rem;line-height:1.75;color:var(--ink-soft)}
.cmp-h{font-weight:700 !important;font-size:.9rem !important;color:var(--ink) !important;display:flex;align-items:center;gap:7px;margin-bottom:6px !important}
.cmp-mark{width:20px;height:20px;flex:none}
.cmp-bad{border-color:color-mix(in srgb,var(--ng) 40%,var(--line))}
.cmp-good{border-color:color-mix(in srgb,var(--ok) 40%,var(--line))}

.conv{display:flex;flex-direction:column;gap:8px}
.conv-row{display:grid;grid-template-columns:1fr auto 1.3fr;gap:10px;align-items:center;background:var(--card);
  border:1px solid var(--line);border-radius:10px;padding:11px 13px}
@media (max-width:560px){.conv-row{grid-template-columns:1fr;text-align:center}}
.conv-from{font-size:.84rem;color:var(--muted);text-decoration:line-through}
.conv-arrow{width:26px;height:16px;color:var(--accent)}
.conv-arrow svg{width:100%;height:100%}
.conv-to{font-size:.86rem;font-weight:600;color:var(--ink)}
@media (max-width:560px){.conv-arrow{transform:rotate(90deg);margin:2px auto}}

.flow{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.flow-node{flex:1 1 150px;min-width:140px;background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:13px;display:flex;flex-direction:column;gap:6px;position:relative}
.flow-ic{width:34px;height:34px;color:var(--ink)}
.flow-l{font-weight:700;font-size:.86rem}
.flow-s{font-size:.76rem;color:var(--ink-soft);line-height:1.6}
.flow-arr{position:absolute;right:-9px;top:50%;transform:translateY(-50%);width:16px;height:12px;color:var(--accent);z-index:1}
.flow-arr svg{width:100%;height:100%}
@media (max-width:560px){.flow-node{flex-basis:100%}.flow-arr{right:50%;top:auto;bottom:-9px;transform:translateX(50%) rotate(90deg)}}

.spots{display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.spot{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:13px;display:flex;
  align-items:center;gap:11px;font-size:.83rem;color:var(--ink-soft)}
.spot-ic{width:34px;height:34px;flex:none;color:var(--ink)}

.cases{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.case{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:15px}
.case-ic{width:36px;height:36px;color:var(--ink);margin-bottom:8px}
.case p{margin:0;font-size:.82rem;line-height:1.7;color:var(--ink-soft)}
.case-h{font-weight:700 !important;color:var(--ink) !important;font-size:.9rem !important;margin-bottom:5px !important}

.points{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.points-fig{width:120px;height:120px;flex:none;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px}
.points-fig svg{width:100%;height:100%}
.points-list{margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:8px;font-size:.87rem;color:var(--ink-soft)}
.points-list li{padding-left:4px}

/* ---------- 記録 track ---------- */
.track{margin-top:clamp(26px,4vw,36px);padding:clamp(16px,3vw,22px);background:var(--accent-sf);border-radius:14px}
.track-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.track-row{grid-template-columns:1fr}}
.track-box{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.track-k{font-size:.76rem;color:var(--muted)}
.track-v{font-family:var(--font-lat);font-size:1.9rem;line-height:1;color:var(--ink);font-variant-numeric:lining-nums}
.track-v em{font-family:var(--font-jp);font-style:normal;font-size:.8rem;color:var(--muted)}
.btn-read,.btn-practice{margin-top:6px;border:1px solid var(--line-2);background:var(--bg);color:var(--ink);
  font:inherit;font-size:.84rem;font-weight:600;padding:9px 14px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.btn-read:hover,.btn-practice:hover{border-color:var(--accent)}
.btn-read:disabled,.btn-practice:disabled{opacity:.45;cursor:default}
.btn-read.done{opacity:1;background:var(--accent-sf);border-color:var(--ok);color:var(--ok);font-weight:700}
.btn-read .bi{width:16px;height:16px}
.track-sub{font-size:.7rem;color:var(--muted);margin-top:2px}
.track-note{font-size:.78rem;color:var(--muted);margin:12px 0 0}
.practice-form{margin-top:14px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px}
.practice-form label{display:flex;flex-direction:column;gap:6px;font-size:.82rem;color:var(--ink-soft)}
.practice-form textarea,.ml-edit-ta{border:1px solid var(--line-2);background:var(--bg);color:var(--ink);border-radius:10px;
  padding:10px 12px;font:inherit;font-size:.9rem;line-height:1.7;resize:vertical;width:100%}
.pf-actions{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.pf-photos{margin-top:10px}
.pf-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.pf-thumb{position:relative;width:76px;height:76px;border-radius:9px;overflow:hidden;border:1px solid var(--line-2)}
.pf-thumb img{width:100%;height:100%;object-fit:cover;display:block;background:var(--bg)}
.pf-thumb button{position:absolute;top:2px;right:2px;width:20px;height:20px;border:0;border-radius:50%;
  background:rgba(0,0,0,.62);color:#fff;font-size:.8rem;line-height:20px;text-align:center;cursor:pointer;padding:0}
.ml-editor{margin:6px 0 0}
.ml-editor .pf-thumbs{margin-top:8px}
.log-photos{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.log-photo{width:104px;height:104px;object-fit:cover;border-radius:9px;border:1px solid var(--line-2);
  background:var(--bg);cursor:zoom-in;display:block}
.photo-full{margin:0 0 14px}
.photo-full img{max-width:100%;max-height:72vh;border-radius:10px;display:block;margin:0 auto}
.mylogs{margin-top:16px}
.mylogs-h,.jr-item{font-weight:700}
.mylogs-h{font-size:.86rem;margin:0 0 8px}
.mylog-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.mylog-list li{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:11px 13px}
.ml-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ml-date{font-size:.76rem;color:var(--muted)}
.ml-actions button{background:none;border:0;color:var(--accent-ink);font:inherit;font-size:.76rem;cursor:pointer;padding:2px 5px}
.ml-note{margin:6px 0 0;font-size:.86rem;line-height:1.7;white-space:pre-wrap}

.chapter-nav{display:flex;justify-content:space-between;gap:12px;margin-top:26px;padding-top:16px;border-top:1px solid var(--line);font-size:.82rem}
.chapter-nav a{color:var(--accent-ink)}

/* ---------- ダッシュボード ---------- */
.dash-loading{color:var(--muted);padding:30px 0}
.stat-row{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));margin-bottom:8px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.stat-k{font-size:.76rem;color:var(--muted)}
.stat-v{font-family:var(--font-lat);font-size:1.7rem;line-height:1.1;color:var(--ink);font-variant-numeric:lining-nums}
.stat-v em{font-family:var(--font-jp);font-style:normal;font-size:.72rem;color:var(--muted)}
.dash-sec{margin-top:24px}
.dash-sec h2{font-family:var(--font-mc);font-weight:700;font-size:1.02rem;margin:0 0 12px;letter-spacing:.03em}
.dash-sec-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.dash-sec-head h2{margin:0;min-width:0}
.dash-sec-head>button,.dash-sec-head .btn-primary,.dash-sec-head .link-btn{white-space:nowrap;flex-shrink:0}
.at-dl-btns{display:flex;gap:14px;flex-shrink:0}

.ch-legend{display:flex;gap:16px;font-size:.76rem;color:var(--muted);margin-bottom:10px}
.ch-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:middle}
.lg-a{background:var(--accent)}.lg-b{background:var(--panel)}

.chart-h{display:flex;flex-direction:column;gap:4px}
.ch-row{display:grid;grid-template-columns:minmax(96px,160px) 1fr 52px;gap:10px;align-items:center;font-size:.75rem;padding:3px 0}
.ch-row.ch-zero{opacity:.5}
@media (max-width:560px){.ch-row{grid-template-columns:1fr auto;gap:3px 10px}.ch-lab{grid-column:1/-1}}
.ch-lab{color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-bars{display:flex;flex-direction:column;gap:3px}
.ch-track{background:var(--line-2);border-radius:4px;height:9px;overflow:hidden}
.ch-fill{display:block;height:100%;border-radius:4px;min-width:2px}
.ch-a{background:var(--accent)}.ch-b{background:var(--panel)}
.ch-zero .ch-fill{min-width:0}
.ch-nums{font-family:var(--font-lat);color:var(--muted);text-align:right;font-variant-numeric:lining-nums;white-space:nowrap}
.ch-nums b{color:var(--accent-ink)}

.chart-v{display:flex;align-items:flex-end;gap:4px;height:150px;padding-top:10px}
.cv-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;justify-content:flex-end;min-width:0}
.cv-stack{width:100%;max-width:26px;flex:1;display:flex;flex-direction:column;justify-content:flex-end}
.cv-seg{width:100%;display:block}
.cv-a{background:var(--accent)}
.cv-b{background:var(--panel)}
.cv-stack .cv-seg:first-child{border-radius:4px 4px 0 0}
.cv-lab{font-size:.66rem;color:var(--muted);white-space:nowrap}

.journal{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.journal li{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:13px 15px}
.journal p{margin:6px 0 0;font-size:.87rem;line-height:1.75;white-space:pre-wrap;color:var(--ink-soft)}
.jr-top{display:flex;justify-content:space-between;gap:10px;font-size:.8rem}
.jr-item a{color:var(--accent-ink)}
.jr-date{color:var(--muted);white-space:nowrap}

.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.mtbl{width:100%;border-collapse:collapse;font-size:.86rem;min-width:460px}
.mtbl th,.mtbl td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line)}
.mtbl th{background:var(--card);font-weight:600;color:var(--ink-soft);font-size:.78rem}
.grp-sort-th{font:inherit;font-weight:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;white-space:nowrap}
.grp-sort-th:hover{color:var(--accent-ink)}
.grp-sort-th.on{color:var(--accent-ink);font-weight:700}
.mtbl tbody tr:last-child td{border-bottom:0}
.mtbl td:nth-child(2),.mtbl td:nth-child(3),.mtbl td:nth-child(4),.mtbl td:nth-child(5){font-family:var(--font-lat);font-variant-numeric:lining-nums}
.mrow{cursor:pointer}
.mrow:hover td{background:var(--accent-sf)}
.role-badge{background:var(--accent-sf);color:var(--accent-ink);font-size:.68rem;padding:1px 6px;border-radius:5px;margin-left:5px}
.role-badge.stop{background:color-mix(in srgb,var(--ng) 22%,var(--card));color:var(--ng)}
.mrow.is-stopped td{opacity:.55}

.approve-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.approve-list li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:12px 14px}
.ap-name{font-weight:600}
.ap-mail{font-size:.8rem;color:var(--muted)}
.ap-date{font-size:.76rem;color:var(--muted)}
.ap-btns{margin-left:auto;display:flex;align-items:center;gap:8px}
.au-admin{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:6px 0 18px}
.au-roletag{font-size:.78rem;color:var(--muted)}
.au-roleselect{display:inline-flex;flex-wrap:wrap;gap:6px}
.role-opt{font:inherit;font-size:.82rem;padding:6px 12px;border-radius:99px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
.role-opt:hover{background:var(--accent-sf)}
.role-opt.on{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}
.role-opt:disabled{opacity:.5;cursor:default}
#grpSel{padding:7px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:.9rem;
  background:var(--card);color:var(--ink)}

/* ---------- toast / 検索 ---------- */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:var(--ink);color:var(--card);
  padding:11px 20px;border-radius:999px;font-size:.85rem;font-weight:600;box-shadow:var(--shadow);z-index:200;
  opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

.search-ov{position:fixed;inset:0;z-index:120;background:rgba(20,18,16,.44);display:flex;justify-content:center;align-items:flex-start}
.search-panel{width:min(620px,100%);max-height:88vh;background:var(--card);border-radius:0 0 18px 18px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.4);display:flex;flex-direction:column}
.search-bar{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.search-bar svg{width:17px;height:17px;color:var(--muted);flex:none}
.search-bar input{flex:1;border:0;background:transparent;color:var(--ink);font:inherit;font-size:.96rem;outline:none;min-width:0}
.search-close{border:0;background:transparent;color:var(--muted);font-size:1.4rem;line-height:1;cursor:pointer;padding:0 4px}
.search-results{overflow-y:auto;padding:12px 16px 22px}
.sr-count{font-size:.84rem;color:var(--ink-soft);margin:2px 0 12px}
.sr-count strong{color:var(--accent-ink);font-size:1.05rem}
.sr-item{display:grid;grid-template-columns:2em 1fr;gap:4px 12px;padding:11px 12px;border-radius:10px;border:1px solid var(--line);margin-bottom:6px}
.sr-item:hover{border-color:var(--accent);background:var(--bg)}
.sr-n{font-family:var(--font-lat);font-size:1.2rem;color:var(--accent-ink);text-align:center;font-variant-numeric:lining-nums}
.sr-t{font-weight:600;font-size:.9rem;display:block}
.sr-s{font-size:.78rem;color:var(--muted);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.site-foot{margin-top:44px;padding:30px 0 44px;border-top:1px solid var(--line);text-align:center;color:var(--muted);font-size:.78rem}
.site-foot .lat{letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:4px}
.site-foot p{margin:0}

/* ---------- 設定バナー（Firebase未設定＝デモ） ---------- */
.setup-banner{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
  padding:9px clamp(12px,4vw,30px);font-size:.8rem;line-height:1.6;
  background:var(--accent-sf);color:var(--accent-ink);border-bottom:1px solid var(--line)}
.setup-banner.warn{background:color-mix(in srgb,var(--ng) 16%,var(--card));color:var(--ng);border-bottom-color:color-mix(in srgb,var(--ng) 30%,var(--line))}
.setup-banner .sb-tag{font-weight:700;background:var(--accent-ink);color:var(--card);border-radius:5px;padding:2px 8px;font-size:.72rem;flex:none;white-space:nowrap}
.setup-banner.warn .sb-tag{background:var(--ng)}
.setup-banner code{background:rgba(0,0,0,.06);padding:1px 5px;border-radius:4px;font-size:.92em}
.setup-banner .sb-msg b{font-weight:700}

/* ---------- アバター ---------- */
.av{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;flex:none;
  background:var(--accent-sf);color:var(--accent-ink);font-weight:700;font-family:var(--font-jp);width:32px;height:32px;font-size:.8rem}
.av img{width:100%;height:100%;object-fit:cover;display:block}
.av-ini{text-transform:uppercase}
.av-xs{width:22px;height:22px;font-size:.6rem}
.av-sm{width:22px;height:22px;font-size:.6rem}
.av-lg{width:56px;height:56px;font-size:1.2rem}
.av-xl{width:72px;height:72px;font-size:1.5rem}
.acct-btn{gap:6px}
.acct-nm{max-width:32vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-card{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:16px 18px;box-shadow:var(--shadow);margin-bottom:12px}
.pc-name{font-family:var(--font-mc);font-weight:700;font-size:1.1rem;margin:0}
.pc-mail{font-size:.78rem;color:var(--muted);margin:2px 0 6px}
.pc-actions{display:flex;gap:12px}

/* ---------- ゲーミフィケーション共通 ---------- */
.flame{position:relative;display:inline-flex;align-items:center;gap:3px;color:var(--muted);font-size:.9em}
.flame.on{color:var(--accent-ink)}
.flame b{font-family:var(--font-lat);font-variant-numeric:lining-nums;font-size:1.1em;position:relative;z-index:1}
.flame .flm-ic{display:inline-block;line-height:1;position:relative;z-index:1;transform-origin:50% 80%}
/* tier ごとに炎を段階的に華やかに */
.flame.flm-t0 .flm-ic{filter:grayscale(1) opacity(.6)}
.flame.flm-t1 .flm-ic{filter:saturate(1.05)}
.flame.flm-t2 .flm-ic{filter:saturate(1.2) drop-shadow(0 0 3px rgba(240,140,50,.5))}
.flame.flm-t3 .flm-ic{filter:saturate(1.3) drop-shadow(0 0 5px rgba(233,110,40,.6));animation:flmpulse 2.4s ease-in-out infinite}
.flame.flm-t4 .flm-ic{filter:saturate(1.45) brightness(1.05) drop-shadow(0 0 7px rgba(220,80,45,.7));animation:flmpulse 1.9s ease-in-out infinite}
.flame.flm-t5 .flm-ic{filter:saturate(1.55) brightness(1.08) hue-rotate(-12deg) drop-shadow(0 0 9px rgba(150,60,210,.75));animation:flmpulse 1.5s ease-in-out infinite}
.flame.flm-t6 .flm-ic{filter:saturate(1.7) brightness(1.14) drop-shadow(0 0 12px rgba(240,200,70,.95)) drop-shadow(0 0 4px rgba(255,240,180,.9));animation:flmpulse 1.15s ease-in-out infinite}
.flame.flm-t4 b,.flame.flm-t5 b,.flame.flm-t6 b{background:linear-gradient(180deg,#f6b23a,#d9481f);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.flame.flm-t5 b{background:linear-gradient(180deg,#e6b3ff,#7c3ad4)}
.flame.flm-t6 b{background:linear-gradient(180deg,#fff2c0,#e0a92e);text-shadow:0 0 10px rgba(240,200,70,.5)}
.flame.flm-t3::after,.flame.flm-t4::after,.flame.flm-t5::after,.flame.flm-t6::after{content:"";position:absolute;left:-2px;top:50%;width:1.5em;height:1.5em;transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,170,80,.5),transparent 70%);z-index:0;pointer-events:none}
.flame.flm-t5::after{background:radial-gradient(circle,rgba(180,110,240,.5),transparent 70%);width:1.9em;height:1.9em}
.flame.flm-t6::after{background:radial-gradient(circle,rgba(255,215,110,.7),transparent 70%);width:2.2em;height:2.2em;animation:flmhalo 2s ease-in-out infinite}
.flame.flm-t5 .flm-ic::after,.flame.flm-t6 .flm-ic::after{content:"✨";position:absolute;right:-.55em;top:-.5em;font-size:.6em;filter:none;animation:flmspark 1.8s ease-in-out infinite}
@keyframes flmpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes flmhalo{0%,100%{opacity:.55;transform:translateY(-50%) scale(1)}50%{opacity:.9;transform:translateY(-50%) scale(1.15)}}
@keyframes flmspark{0%,100%{opacity:.4;transform:scale(.8) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(18deg)}}
.flm-mini{display:inline-flex;align-items:center;gap:2px;font-family:var(--font-lat);font-variant-numeric:lining-nums;font-size:.92em}
.flm-mini .flm-ic{font-size:.9em}
.flm-mini.flm-t3 .flm-ic,.flm-mini.flm-t4 .flm-ic{filter:saturate(1.3) drop-shadow(0 0 3px rgba(233,110,40,.6))}
.flm-mini.flm-t5 .flm-ic{filter:saturate(1.5) hue-rotate(-12deg) drop-shadow(0 0 4px rgba(150,60,210,.7))}
.flm-mini.flm-t6 .flm-ic{filter:saturate(1.7) brightness(1.12) drop-shadow(0 0 5px rgba(240,200,70,.9))}
@media (prefers-reduced-motion:reduce){.flame .flm-ic,.flame::after,.flame .flm-ic::after{animation:none!important}}

/* 称賛の演出 */
.cheer-pop{animation:cheerpop .42s cubic-bezier(.3,1.4,.5,1)}
@keyframes cheerpop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
.praise-burst{position:fixed;z-index:1200;pointer-events:none;transform:translate(-50%,-50%)}
.praise-burst span{position:absolute;left:0;top:0;font-size:1.1rem;will-change:transform,opacity;animation:praisefly .95s ease-out forwards}
@keyframes praisefly{0%{opacity:0;transform:translate(0,0) scale(.4)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.15)}}
@media (prefers-reduced-motion:reduce){.cheer-pop{animation:none}.praise-burst{display:none}}
.lchip{display:inline-flex;align-items:center;gap:6px}
.lchip-b{width:20px;height:20px;display:inline-block}
.lchip-b svg{width:100%;height:100%;display:block}
.lchip-n{font-size:.82rem;font-weight:600}
.lchip.lg .lchip-b{width:30px;height:30px}
.lchip.lg .lchip-n{font-size:1rem}
.pf-hint{font-size:.76rem;color:var(--muted);margin:6px 0 0}

/* 連続記録バナー */
.streak-banner{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:18px 0 6px;padding:14px 16px;
  border-radius:14px;background:var(--accent-sf);color:var(--accent-ink);font-size:.86rem;line-height:1.6}
.streak-banner.done{background:color-mix(in srgb,var(--ok) 18%,var(--card));color:var(--ink)}
.streak-banner b{font-weight:700}
.sb-flame{font-size:1.05rem}
.sb-txt{flex:1;min-width:160px}
.sb-go{white-space:nowrap;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.lh-league{margin-left:auto}

/* 7日ドット */
.dots7{display:flex;gap:5px;margin-top:8px}
.d7{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:.66rem;color:var(--muted)}
.d7 i{width:14px;height:14px;border-radius:50%;background:var(--line-2);display:block}
.d7.on i{background:var(--accent)}

/* リーグ セクション（リーグごとの全順位） */
.lg-intro{font-size:.82rem;color:var(--muted);margin:16px 0 6px;line-height:1.7}
.lg-sec{margin-top:18px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card)}
.lg-sec.is-mine{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-sf)}
.lg-sec-h{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--bg);border-bottom:1px solid var(--line)}
.lg-sec.is-mine .lg-sec-h{background:var(--accent-sf)}
.lg-sec-b{width:26px;height:26px;flex:none}
.lg-sec-b svg{width:100%;height:100%}
.lg-sec-t{font-family:var(--font-mc);font-weight:700;font-size:1rem}
.lg-sec-n{font-size:.76rem;color:var(--muted)}
.lg-sec-you{margin-left:auto;background:var(--accent);color:var(--card);font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:999px}
.lg-sec-empty{padding:16px 14px;font-size:.82rem;color:var(--muted)}
.lg-sec-note{margin:8px 14px 0;font-size:.76rem;color:var(--muted);background:var(--bg);border-radius:8px;padding:6px 10px}
.lg-sec .lb-list{border:0;border-radius:0}
.lg-sec .lb-head{background:var(--card)}

/* リーグ ヒーロー */
.league-hero{display:flex;gap:16px;align-items:center;padding:18px;border-radius:16px;
  background:linear-gradient(150deg,var(--panel),var(--panel-2));color:var(--panel-ink);box-shadow:var(--shadow)}
.lh-badge{width:64px;height:64px;flex:none}
.lh-badge svg{width:100%;height:100%}
.lh-info{min-width:0}
.lh-name{font-family:var(--font-mc);font-weight:700;font-size:1.2rem;margin:0}
.lh-sub{font-size:.8rem;color:var(--panel-dim);margin:2px 0 8px}
.lh-sub b,.lh-mine b{font-family:var(--font-lat);font-variant-numeric:lining-nums;font-size:1.15em;color:var(--panel-ink)}
.lh-mine{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:.82rem}
.lh-mine .flame{color:var(--panel-ink)}
.lh-promo{margin:8px 0 0;font-size:.8rem;background:rgba(255,255,255,.16);padding:5px 10px;border-radius:8px;display:inline-block}
.lh-promo.dim{background:none;padding:0;color:var(--panel-dim)}

/* 表彰台 */
.podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:8px;align-items:end;margin:16px 0}
.pod{display:flex;flex-direction:column;align-items:center;gap:3px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:12px 8px;text-align:center;box-shadow:var(--shadow)}
.pod2{order:1}.pod1{order:2;padding-top:20px;border-color:var(--accent)}.pod3{order:3}
.pod-medal{font-size:1.5rem}
.pod-name{font-size:.8rem;font-weight:600;line-height:1.3}
.pod-n{font-family:var(--font-lat);font-size:1.5rem;font-variant-numeric:lining-nums;color:var(--accent-ink)}
.pod-n em{font-family:var(--font-jp);font-style:normal;font-size:.6rem;color:var(--muted)}

/* リーダーボード */
.lb-list{list-style:none;margin:14px 0 0;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.lb-head,.lb-row a{display:grid;grid-template-columns:44px 1fr 52px 44px 70px;gap:8px;align-items:center;padding:11px 12px;font-size:.84rem}
.lb-head{background:var(--card);color:var(--muted);font-size:.72rem}
.lb-head span:last-child,.lb-row .lb-p{text-align:right}
.lb-row{border-top:1px solid var(--line)}
.lb-row a{color:inherit}
.lb-row:hover{background:var(--accent-sf)}
.lb-row.is-me{background:color-mix(in srgb,var(--accent-sf) 70%,var(--card))}
.lb-rank{font-family:var(--font-lat);font-size:1rem;text-align:center;font-variant-numeric:lining-nums}
.lb-name{display:flex;align-items:center;gap:8px;min-width:0;font-weight:600}
.lb-name>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-name em{font-style:normal;color:var(--accent-ink);font-weight:400;font-size:.8em}
.lb-lg{font-size:.68rem;color:var(--muted);border:1px solid var(--line-2);border-radius:5px;padding:0 4px}
.lb-streak,.lb-kudos{font-size:.76rem;color:var(--muted);text-align:center}
.lb-p b{font-family:var(--font-lat);font-size:1.15rem;font-variant-numeric:lining-nums;color:var(--accent-ink)}
.lb-p em{font-style:normal;font-size:.62rem;color:var(--muted)}
.lb-br{display:block;font-size:.58rem;color:var(--muted);font-family:var(--font-jp);white-space:nowrap}
.lh-br{font-size:.72rem;color:var(--panel-dim);font-weight:400}
.promo-line{list-style:none;text-align:center;font-size:.72rem;font-weight:700;padding:4px;letter-spacing:.06em}
.promo-line.up{background:var(--ok);color:#fff}
.promo-line.down{background:var(--ng);color:#fff}
.lh-promo.warn{background:rgba(255,255,255,.16);color:#fff}
.lb-foot{font-size:.78rem;color:var(--muted);margin:12px 2px 0}
@media (max-width:520px){
  .lb-head,.lb-row a{grid-template-columns:32px 1fr 40px 58px;gap:6px}
  .lb-head span:nth-child(4),.lb-row .lb-kudos{display:none}
}

/* 公開プロフィール */
.pub-hero{display:flex;gap:16px;padding:18px;border-radius:16px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.pub-badge{width:60px;height:60px;flex:none}
.pub-badge svg{width:100%;height:100%}
.pub-name{font-family:var(--font-mc);font-weight:700;font-size:1.3rem;margin:0}
.pub-league{font-size:.82rem;color:var(--muted);margin:2px 0 8px}
.pub-stats{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:.8rem;color:var(--ink-soft)}
.pub-stats b{font-family:var(--font-lat);font-variant-numeric:lining-nums;font-size:1.15em;color:var(--ink)}
.pub-cheer{margin-top:12px}
.pub-hint{margin:12px 0 0;font-size:.78rem;color:var(--muted);line-height:1.6}
.cheer-btn{border:1px solid var(--line-2);background:var(--card);color:var(--ink-soft);font:inherit;font-size:.82rem;
  padding:7px 14px;border-radius:999px;cursor:pointer}
.cheer-btn:hover{border-color:var(--accent)}
.cheer-btn.on{background:var(--accent-sf);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
.cheer-btn.big{padding:10px 20px;font-size:.9rem}

.pj-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.pj{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 15px}
.pj-top{display:flex;justify-content:space-between;gap:10px;font-size:.8rem}
.pj-item a{color:var(--accent-ink);font-weight:600}
.pj-date{color:var(--muted);white-space:nowrap}
.pj-note{margin:8px 0 0;font-size:.9rem;line-height:1.75;white-space:pre-wrap;color:var(--ink-soft)}
.pj-recv{margin:8px 0 0;font-size:.76rem;color:var(--accent-ink)}
.pj-react{display:flex;gap:8px;margin-top:10px}
.praise-toggle{border:0;background:none;color:var(--accent-ink);font:inherit;font-size:.8rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.praise-form{margin-top:10px}
.praise-form textarea{width:100%;border:1px solid var(--line-2);background:var(--bg);color:var(--ink);border-radius:10px;padding:9px 11px;font:inherit;font-size:.86rem;line-height:1.6;resize:vertical}
.pj-msgs{list-style:none;margin:10px 0 0;padding:10px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px;font-size:.82rem;color:var(--ink-soft)}
.pj-msgs b{color:var(--ink);display:block;margin-bottom:2px}
.pj-msgs span{white-space:pre-wrap;line-height:1.65}

/* みんなの実践（フィード） */
.feed-lead{background:var(--accent-sf);border-radius:12px;padding:13px 16px;margin:6px 0 12px}
.feed-lead p{margin:0;font-size:.88rem;line-height:1.8;color:var(--accent-ink)}
.feed-count{font-size:.78rem;margin:0 0 4px}
.feed-pj .feed-pj-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.feed-who{display:inline-flex;align-items:center;gap:8px;color:var(--ink)}
.feed-name{font-weight:700;font-size:.9rem}
.feed-pj .pj-item{margin:9px 0 0;font-size:.82rem}
.feed-pj .pj-item a{color:var(--accent-ink);font-weight:600}
.cheer-btn.is-self{cursor:default;opacity:.55;padding:6px 12px;border-radius:999px}
.pj-selftag{font-size:.76rem;color:var(--muted);align-self:center}
.feed-pager,.me-pager{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 2px}
.feed-pg,.me-pg{font:inherit;font-size:.86rem;color:var(--accent-ink);background:none;cursor:pointer;
  border:1px solid var(--line-2);border-radius:999px;padding:7px 16px;white-space:nowrap}
.feed-pg.off,.me-pg.off{opacity:.4;color:var(--muted);pointer-events:none;cursor:default}
.feed-pg-n,.me-pg-n{font-size:.82rem;color:var(--muted)}

/* 自分の記録 追加カード */
.me-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px}
@media (max-width:520px){.me-cards{grid-template-columns:1fr}}
.me-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:4px}
.mc-k{font-size:.76rem;color:var(--muted)}
.mc-flame{font-size:1.4rem;display:flex;align-items:center;gap:6px}
.mc-flame .flame{font-size:1em;gap:5px}
.mc-flame .flm-ic{font-size:1.5rem}
.mc-flame b{font-family:var(--font-lat);font-variant-numeric:lining-nums;font-size:1.5rem}
.mc-flame-u{font-size:.95rem;color:var(--muted)}
.mc-sub{font-size:.74rem;color:var(--muted)}
.league-card{text-decoration:none}
.mc-league{display:flex;align-items:center;gap:8px;font-family:var(--font-mc);font-weight:700;font-size:1.1rem}
.mc-league svg{width:28px;height:28px}

.freeze-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:14px}
.fz-head{display:flex;align-items:center;gap:8px}
.fz-ic{font-size:1.15rem}
.fz-title{font-weight:700;font-size:.92rem}
.fz-total{margin-left:auto;font-size:.82rem;color:var(--ink-soft)}
.fz-total b{font-family:var(--font-lat);font-variant-numeric:lining-nums;font-size:1.3em;color:var(--accent-ink)}
.fz-desc{font-size:.78rem;color:var(--muted);line-height:1.6;margin:7px 0 10px}
.fz-rows{display:flex;flex-direction:column;gap:7px}
.fz-row{display:grid;grid-template-columns:auto auto 1fr;align-items:baseline;gap:8px;font-size:.8rem;
  padding:8px 10px;background:var(--bg);border-radius:9px}
.fz-row>span{color:var(--ink-soft)}
.fz-row>b{font-family:var(--font-lat);font-variant-numeric:lining-nums;font-size:1.05rem}
.fz-row>em{font-style:normal;color:var(--muted);font-size:.72rem}
@media (max-width:520px){.fz-row{grid-template-columns:auto auto;gap:4px 8px}.fz-row>em{grid-column:1/-1}}

.badge-row{display:flex;flex-wrap:wrap;gap:12px}
.badge{display:inline-flex;align-items:center;gap:5px;background:var(--accent-sf);color:var(--accent-ink);
  border-radius:999px;padding:5px 12px;font-size:.8rem;font-weight:600}
.bdg-i{font-size:1rem}
/* 凝ったバッジ（SVG メダル） */
.badge-rich{flex-direction:column;gap:5px;background:none;padding:4px;width:88px;text-align:center;border-radius:14px}
.badge-rich .bdg-art{width:60px;height:60px;display:block;filter:drop-shadow(0 3px 6px rgba(0,0,0,.18))}
.badge-rich .bdg-art svg{width:100%;height:100%;display:block}
.badge-rich .bdg-i{font-size:2.2rem;line-height:1}
.badge-rich .bdg-lbl{font-size:.72rem;font-weight:600;color:var(--ink-soft);line-height:1.3}
.bdg-svg{overflow:visible}
.badge-pop{width:120px;height:120px;margin:0 auto;animation:pop .5s cubic-bezier(.3,1.4,.5,1)}
.badge-pop svg{width:100%;height:100%;filter:drop-shadow(0 6px 14px rgba(0,0,0,.22))}
.modal-medal{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.85rem;color:var(--accent-ink);font-weight:700;margin:0 0 16px}
.bdg-art-md{width:52px;height:52px;display:inline-block}
.bdg-art-sm{width:30px;height:30px;display:inline-block;vertical-align:middle}
.bdg-art-md svg,.bdg-art-sm svg{width:100%;height:100%;display:block}
@media (prefers-reduced-motion:reduce){.badge-pop{animation:none}}

/* リーグ対象外（本社スタッフ）の案内 */
.league-exempt-note{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:18px 18px;margin:4px 0}
.league-exempt-note .lx-ic{font-size:1.8rem;line-height:1}
.league-exempt-note .lx-h{font-weight:700;font-size:.98rem;margin:0 0 6px}
.league-exempt-note .lx-p{font-size:.85rem;line-height:1.75;color:var(--ink-soft);margin:0 0 4px}
.league-exempt-note .lx-p b{color:var(--ink)}

/* グループ管理：リーグ対象外トグル */
.grp-exempt{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;color:var(--ink-soft);white-space:nowrap}
.grp-exempt input{accent-color:var(--accent)}
.grp-exempt-hint{margin-top:10px;font-size:.76rem;line-height:1.7}
@media (max-width:560px){.grp-row{flex-wrap:wrap}.grp-exempt{order:3;width:100%;margin-top:2px}}
.recv-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:.85rem}
.recv-list li{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 13px;line-height:1.7}
.recv-list li.is-new{border-color:var(--ok);box-shadow:0 0 0 2px color-mix(in srgb,var(--ok) 18%,transparent);
  animation:recvin .5s cubic-bezier(.2,.9,.3,1) both;position:relative}
.recv-list li.is-new::after{content:"👏";position:absolute;right:10px;top:-10px;font-size:1rem;animation:recvclap 1s ease-out .15s both}
@keyframes recvin{0%{opacity:0;transform:translateY(8px) scale(.98)}100%{opacity:1;transform:none}}
@keyframes recvclap{0%{opacity:0;transform:translateY(6px) scale(.5)}30%{opacity:1}60%{transform:translateY(-4px) scale(1.1)}100%{opacity:0;transform:translateY(-12px) scale(1)}}
@media (prefers-reduced-motion:reduce){.recv-list li.is-new,.recv-list li.is-new::after{animation:none}.recv-list li.is-new::after{display:none}}
.rc-new{display:inline-block;background:var(--ok);color:#fff;font-size:.62rem;font-weight:700;padding:1px 6px;border-radius:999px;margin-right:6px;vertical-align:1px}
.rc-date{color:var(--muted);font-size:.74rem;margin-left:6px}

.league-dist{display:flex;flex-wrap:wrap;gap:8px}
.ld{display:inline-flex;flex-direction:column;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:9px 14px;font-size:.74rem;color:var(--muted)}
.ld b{font-family:var(--font-lat);font-size:1.3rem;color:var(--ink);font-variant-numeric:lining-nums}
.mtbl td:nth-child(2),.mtbl td:nth-child(3),.mtbl td:nth-child(4),.mtbl td:nth-child(5){font-family:var(--font-lat);font-variant-numeric:lining-nums}

/* モーダル */
.modal-ov{position:fixed;inset:0;z-index:150;background:rgba(20,18,16,.5);display:flex;padding:20px;overflow-y:auto;overscroll-behavior:contain}
.modal-card{background:var(--card);border-radius:20px;box-shadow:0 30px 80px -20px rgba(0,0,0,.5);
  padding:30px 26px;max-width:380px;width:100%;text-align:center;margin:auto;
  max-height:calc(100vh - 40px);overflow-y:auto;overscroll-behavior:contain}
.ok-anim{font-size:3rem;line-height:1;animation:pop .4s ease}
@keyframes pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.ok-anim{animation:none}}
.modal-h{font-family:var(--font-mc);font-weight:700;font-size:1.3rem;margin:12px 0 8px}
.modal-p{font-size:.88rem;line-height:1.8;color:var(--ink-soft);margin:0 0 18px}
.modal-p b{color:var(--ink)}
.modal-medal{font-size:.85rem;color:var(--accent-ink);font-weight:700;margin:0 0 16px}

/* ---------- 別冊 魔法のことば ---------- */
.nav-dot{display:inline-block;min-width:17px;height:17px;line-height:17px;padding:0 4px;border-radius:999px;
  background:var(--ng);color:#fff;font-size:.66rem;font-weight:700;text-align:center;vertical-align:1px}
.magic-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--accent-sf);border-bottom:1px solid var(--line);color:var(--accent-ink);
  padding:9px clamp(14px,4vw,32px);font-size:.82rem}
.magic-banner .mb-icon{font-size:1rem}
.magic-banner .mb-msg{flex:1;min-width:180px;line-height:1.5}
.magic-banner .mb-msg b{font-family:var(--font-lat);font-variant-numeric:lining-nums;font-size:1.1em}
.magic-banner .mb-go{font-weight:700;white-space:nowrap}
.magic-banner.kudos-banner{background:var(--ok-sf,color-mix(in srgb,var(--ok) 16%,var(--card)));color:var(--ok);border-bottom-color:color-mix(in srgb,var(--ok) 30%,var(--line))}
.mw-intro{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:clamp(18px,4vw,28px);margin-bottom:18px}
.mw-title{font-family:var(--font-mc);font-weight:700;font-size:clamp(1.4rem,4vw,1.9rem);margin:4px 0 10px;letter-spacing:.04em}
.mw-lead-h{font-family:var(--font-mc);font-size:1.02rem;color:var(--ink);margin:0 0 12px;line-height:1.7}
.mw-p{font-size:.88rem;line-height:1.95;color:var(--ink-soft);margin:0 0 10px}
.mw-p.mw-lead{color:var(--ink);font-weight:500}
.mw-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.mw-hint{font-size:.76rem;color:var(--muted)}
.mw-list{display:flex;flex-direction:column;gap:12px}
.mw-card{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:15px 17px}
.mw-card.is-new{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-sf)}
.mw-head{display:flex;align-items:baseline;gap:9px;margin-bottom:9px}
.mw-n{font-family:var(--font-lat);font-variant-numeric:lining-nums;font-size:1.05rem;color:var(--accent-ink);font-weight:600;flex:none}
.mw-scene{font-weight:700;font-size:.9rem;line-height:1.6;color:var(--ink)}
.mw-new{flex:none;margin-left:auto;background:var(--ng);color:#fff;font-size:.64rem;font-weight:700;
  padding:2px 7px;border-radius:999px;letter-spacing:.06em}
.mw-words{margin:0;padding:11px 14px;border-left:3px solid var(--accent);background:var(--bg);border-radius:0 9px 9px 0;
  font-family:var(--font-mc);font-size:.95rem;line-height:1.95;color:var(--ink);white-space:pre-wrap}
.mw-closing{font-size:.8rem;color:var(--muted);margin:7px 0 0}
.mw-note{font-size:.83rem;line-height:1.75;color:var(--ink-soft);margin:9px 0 0;white-space:pre-wrap}
.mw-meta{font-size:.74rem;color:var(--muted);margin:9px 0 0}
.mw-admin{display:flex;gap:12px;margin-top:9px}
.mw-form{display:flex;flex-direction:column;gap:12px;text-align:left}
.mw-form label{display:flex;flex-direction:column;gap:5px;font-size:.82rem;color:var(--ink-soft)}
.mw-form input,.mw-form textarea{border:1px solid var(--line-2);background:var(--bg);color:var(--ink);border-radius:10px;
  padding:10px 12px;font:inherit;font-size:.9rem;line-height:1.6;resize:vertical;width:100%}
.modal-card:has(.mw-form){max-width:540px;text-align:left}
.link-btn.danger{color:var(--ng)}
@media (max-width:560px){.mw-new,.magic-banner .mb-go{margin-left:0}}

/* コンテンツ管理（20の行動：短縮名・タイトル・アイコン・行動例） */
.cnt-list{display:flex;flex-direction:column;gap:12px}
.cnt-card{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:15px 17px}
.cnt-card-head{display:flex;align-items:baseline;gap:9px;margin-bottom:7px}
.cnt-card-n{font-family:var(--font-lat);font-variant-numeric:lining-nums;font-size:1.05rem;color:var(--accent-ink);font-weight:600;flex:none}
.cnt-card-t{font-weight:700;font-size:.92rem;color:var(--ink)}
.cnt-card-title{font-size:.85rem;line-height:1.75;color:var(--ink-soft);margin:0 0 7px}
.cnt-card-meta{font-size:.74rem;color:var(--muted);margin:0 0 9px}
.cf-icons{display:flex;flex-wrap:wrap;gap:8px}
.cf-icon-opt{width:44px;height:44px;padding:7px;border-radius:10px;border:1px solid var(--line-2);
  background:var(--bg);color:var(--ink-soft);cursor:pointer;display:flex;align-items:center;justify-content:center}
.cf-icon-opt svg{width:100%;height:100%}
.cf-icon-opt:hover{border-color:var(--accent)}
.cf-icon-opt.on{background:var(--accent-sf);border-color:var(--accent);color:var(--accent-ink)}
.cf-act-row,.cf-eff-row,.cf-lead-row{display:flex;flex-direction:column;gap:6px;padding:10px;border:1px solid var(--line-2);border-radius:10px;
  background:var(--bg);margin-bottom:8px}
.cf-act-row:last-child,.cf-eff-row:last-child,.cf-lead-row:last-child{margin-bottom:0}
.cf-act-h,.cf-eff-h{border:1px solid var(--line-2);background:var(--card);color:var(--ink);border-radius:8px;
  padding:8px 10px;font:inherit;font-size:.88rem;width:100%}
.cf-act-d,.cf-eff-d,.cf-lead-t{border:1px solid var(--line-2);background:var(--card);color:var(--ink);border-radius:8px;
  padding:8px 10px;font:inherit;font-size:.88rem;line-height:1.6;resize:vertical;width:100%}
.cf-act-del,.cf-eff-del,.cf-lead-del{align-self:flex-end}

/* 図解プレビュー：新しい2つの柔軟な型（表示側） */
.viz-list{display:flex;flex-direction:column}
.viz-litems{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.viz-litem{display:flex;align-items:center;gap:9px;flex:1 1 180px;min-width:150px;position:relative;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:11px 13px}
.viz-litem-steps{flex-direction:column;align-items:center;text-align:center}
.viz-step-n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;
  font-weight:700;font-size:.8rem;display:flex;align-items:center;justify-content:center}
.viz-licon{flex:none;width:28px;height:28px;color:var(--ink)}
.viz-licon svg{width:100%;height:100%}
.viz-litem-steps .viz-licon{width:36px;height:36px}
.viz-litem-steps .viz-lbody{align-items:center;text-align:center}
.viz-lbody{display:flex;flex-direction:column;gap:3px}
.viz-ltitle{font-size:.86rem;color:var(--ink)}
.viz-ltext{font-size:.8rem;color:var(--ink-soft);line-height:1.65}
.viz-arrow{position:absolute;right:-9px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--accent);z-index:1}
.viz-compare{display:flex;flex-direction:column}
.viz-cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.viz-cmp-col{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px}
.viz-cmp-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:.85rem;color:var(--ink-soft)}
.viz-cmp-label{margin:0 0 6px;font-weight:700;font-size:.86rem;color:var(--ink);display:flex;align-items:center;gap:6px}
.viz-cmp-icon{flex:none;width:18px;height:18px}
.viz-cmp-icon svg{width:100%;height:100%}

/* コンテンツ管理：図解の編集UI */
.cf-viz-mode{display:flex;gap:8px}
.cf-viz-mode-opt{padding:7px 14px;border-radius:99px;border:1px solid var(--line-2);background:var(--bg);
  color:var(--ink-soft);cursor:pointer;font-size:.84rem}
.cf-viz-mode-opt.on{background:var(--accent-sf);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
.cf-viz-sub{display:flex;flex-direction:column;gap:5px;font-size:.82rem;color:var(--ink-soft);margin-top:10px}
.cf-viz-sub input,.cf-viz-sub select{border:1px solid var(--line-2);background:var(--bg);color:var(--ink);
  border-radius:8px;padding:8px 10px;font:inherit;font-size:.88rem}
.cf-viz-row{display:flex;gap:10px;align-items:flex-start;padding:10px;border:1px solid var(--line-2);
  border-radius:10px;background:var(--bg);margin-top:8px}
.cf-viz-row-fields{flex:1;display:flex;flex-direction:column;gap:6px}
.cf-viz-title,.cf-viz-text{border:1px solid var(--line-2);background:var(--card);color:var(--ink);border-radius:8px;
  padding:7px 9px;font:inherit;font-size:.86rem;width:100%}
.cf-viz-text{line-height:1.6;resize:vertical}
.cf-viz-row-del{align-self:center;flex:none}
.cf-viz-icon-btn{flex:none;width:40px;height:40px;border-radius:9px;border:1px solid var(--line-2);
  background:var(--card);color:var(--ink-soft);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:6px}
.cf-viz-icon-btn svg{width:100%;height:100%}
.cf-viz-icon-empty{font-size:1.1rem;color:var(--muted)}
.cf-viz-iconpanel{margin-top:10px;padding:10px;border:1px solid var(--line-2);border-radius:10px;background:var(--bg);
  max-height:220px;overflow-y:auto}
.cf-viz-cmp-labels{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.cf-viz-cmp-labelrow{display:flex;gap:8px;align-items:center}
.cf-viz-cmp-labels input{border:1px solid var(--line-2);background:var(--bg);color:var(--ink);border-radius:8px;
  padding:8px 10px;font:inherit;font-size:.86rem;width:100%;flex:1}
.cf-viz-cmp-row{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:center;margin-top:8px}
.cf-viz-cmp-l,.cf-viz-cmp-r{border:1px solid var(--line-2);background:var(--bg);color:var(--ink);border-radius:8px;
  padding:7px 9px;font:inherit;font-size:.86rem;line-height:1.55;resize:vertical;width:100%}
.cf-viz-preview-wrap{margin-top:4px}
.cf-viz-preview{border:1px dashed var(--line-2);border-radius:12px;padding:4px}
.cf-viz-preview .viz{margin:8px}

/* コンテンツ編集：一覧カードをクリック可能に */
.cnt-card{cursor:pointer;transition:box-shadow .15s,border-color .15s}
.cnt-card:hover,.cnt-card:focus-visible{border-color:var(--accent);box-shadow:0 4px 16px rgba(0,0,0,.08)}
.cnt-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cnt-card-go{display:inline-block;margin-top:2px;font-size:.82rem;color:var(--accent-ink);font-weight:600}
.cnt-filter-tabs{display:flex;gap:8px;flex-wrap:wrap}
.cnt-filter-tab{padding:7px 14px;border-radius:99px;border:1px solid var(--line-2);background:var(--bg);
  color:var(--ink-soft);cursor:pointer;font-size:.84rem}
.cnt-filter-tab.on{background:var(--accent-sf);border-color:var(--accent);color:var(--accent-ink);font-weight:700}

/* コンテンツ編集：2カラムの編集ページ（プレビュー＋フォーム）
   position:sticky に頼らず、JavaScript（setupPreviewFollow）で追従を制御している。
   .cnt-edit-preview-pane は常に通常の流れに残る「枠」、.cnt-edit-preview-inner が
   実際に fixed/absolute に切り替わって動く要素。 */
main.with-chrome:has(.cnt-edit-page){max-width:1760px}
.cnt-edit-layout{display:flex;gap:28px;align-items:flex-start}
.cnt-edit-preview-pane{flex:1 1 0;min-width:0;position:relative}
.cnt-edit-preview-inner{max-height:calc(100vh - var(--head-h) - 32px);overflow-y:auto}
.cnt-edit-pane-label{font-size:.8rem;color:var(--muted);margin:0 0 8px;font-weight:700;letter-spacing:.03em}
.cnt-edit-preview .chapter{display:grid;grid-template-columns:180px 1fr;gap:18px;width:100%;margin:0}
.cnt-edit-form-pane{flex:1 1 0;min-width:0}
.cnt-edit-form-pane .mw-form{gap:16px}
@media (max-width:1240px){
  .cnt-edit-layout{display:block}
  .cnt-edit-preview-pane{margin-bottom:24px}
  .cnt-edit-preview-inner{max-height:none}
  .cnt-edit-preview .chapter{grid-template-columns:1fr}
}

/* 管理画面：掲載順の並び替え */
.mw-order-hint{font-size:.78rem;margin:0 0 10px}
#magicOrderSec.is-saving{opacity:.6;pointer-events:none}
.mw-order{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;counter-reset:mwo}
.mwo{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:9px 11px;font-size:.82rem}
.mwo::before{counter-increment:mwo;content:counter(mwo);font-family:var(--font-lat);font-variant-numeric:lining-nums;
  color:var(--muted);min-width:1.4em;text-align:right}
.mwo-h{cursor:grab;color:var(--muted);font-size:1rem;user-select:none;padding:0 2px}
.mwo-h:active{cursor:grabbing}
.mwo.dragging{opacity:.35;border-style:dashed}
.mwo-ph{height:38px;border:2px dashed var(--accent);border-radius:9px;background:var(--accent-sf);
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:.74rem;font-weight:700;color:var(--accent-ink);list-style:none}
.mwo-ph::before{content:"▸"}
.mwo-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.mwo-t b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mwo-t span{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mwo-btns{display:flex;gap:2px;flex:none}
.mwo-btns button{border:1px solid var(--line-2);background:var(--bg);color:var(--ink-soft);border-radius:7px;
  width:28px;height:28px;font-size:.7rem;cursor:pointer;padding:0}
.mwo-btns button:disabled{opacity:.3;cursor:default}
.mwo-btns button:not(:disabled):hover{border-color:var(--accent);color:var(--ink)}

/* ---------- 動画研修 ---------- */
.magic-banner.training-banner{background:color-mix(in srgb,var(--panel) 14%,var(--card));color:var(--panel-2);border-bottom-color:color-mix(in srgb,var(--panel) 30%,var(--line))}
.tr-intro{font-size:.86rem;line-height:1.8;margin:0 0 16px}
.tr-list{display:flex;flex-direction:column;gap:11px}
.tr-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:14px 16px}
.tr-card:hover{border-color:var(--accent)}
.tr-card-h{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.tr-ym{font-family:var(--font-lat);font-variant-numeric:lining-nums;font-size:.86rem;color:var(--muted)}
.tr-title{font-family:var(--font-mc);font-weight:700;font-size:1.05rem;margin:0 0 4px;line-height:1.5}
.tr-range{font-size:.78rem;color:var(--muted);margin:0}
.tr-steps-mini{font-size:.8rem;color:var(--ink-soft);margin:8px 0 0}
.tr-pt{color:var(--accent-ink);font-family:var(--font-lat);font-variant-numeric:lining-nums}
.tr-chip{font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap}
.tr-chip.open{background:var(--accent-sf);color:var(--accent-ink)}
.tr-chip.done{background:color-mix(in srgb,var(--ok) 20%,var(--card));color:var(--ok)}
.tr-chip.late{background:color-mix(in srgb,var(--ng) 18%,var(--card));color:var(--ng)}
.tr-chip.before{background:var(--line);color:var(--muted)}

.tr-hero{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:clamp(16px,4vw,24px);margin-bottom:16px}
.tr-hero-h{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.tr-d-title{font-family:var(--font-mc);font-weight:700;font-size:clamp(1.25rem,4vw,1.6rem);line-height:1.5;margin:0 0 6px}
.tr-desc{font-size:.88rem;line-height:1.85;color:var(--ink-soft);margin:10px 0 0;white-space:pre-wrap}
.tr-progress{height:8px;background:var(--bg);border-radius:999px;overflow:hidden;margin:14px 0 6px}
.tr-progress>span{display:block;height:100%;background:var(--accent);border-radius:999px;transition:width .3s}
.tr-progress-t{font-size:.8rem;color:var(--ink-soft);margin:0}
.ng-txt{color:var(--ng)}
.tr-notstarted{padding:20px;text-align:center}

.video-wrap{position:relative;width:100%;padding-bottom:56.25%;background:#000;border-radius:10px;overflow:hidden;margin:0 0 12px}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.tr-step{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:15px 16px;margin-bottom:12px}
.tr-step.done{border-color:color-mix(in srgb,var(--ok) 40%,var(--line))}
.tr-step.locked{opacity:.6}
.tr-step-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.tr-step-n{width:26px;height:26px;flex:none;border-radius:50%;background:var(--accent-sf);color:var(--accent-ink);
  font-weight:700;font-size:.82rem;display:flex;align-items:center;justify-content:center}
.tr-step.done .tr-step-n{background:var(--ok);color:#fff}
.tr-step-t{font-weight:700;font-size:.94rem}
.tr-step-kind{margin-left:auto;font-size:.7rem;color:var(--muted);background:var(--bg);border-radius:999px;padding:2px 8px;white-space:nowrap}
.tr-lock{font-size:.82rem;margin:0}
.tr-file{margin:0 0 10px}
.tr-file a{color:var(--accent-ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.tr-label{display:flex;flex-direction:column;gap:6px;font-size:.82rem;color:var(--ink-soft)}
.tr-label textarea{border:1px solid var(--line-2);background:var(--bg);color:var(--ink);border-radius:10px;
  padding:10px 12px;font:inherit;font-size:.9rem;line-height:1.7;resize:vertical;width:100%}
.tr-ok{color:var(--ok);font-weight:700;font-size:.86rem;margin:4px 0 0}
.tr-disc{background:var(--accent-sf);color:var(--accent-ink);border-radius:12px;padding:13px 15px;
  font-size:.88rem;line-height:1.7;margin:0 0 12px}

/* ===== 経営理念（ポスターの色合い：白地＋チャコール #36323e） ===== */
.rinen{
  --bg:#ffffff; --card:#ffffff; --panel:#36323e; --panel-2:#2f2b36;
  --panel-ink:#ffffff; --panel-dim:#d5d4d8;
  --ink:#181616; --ink-soft:#3d3a44; --muted:#8a888f;
  --line:#dedde1; --line-2:#cfced3;
  --accent:#36323e; --accent-ink:#36323e; --accent-sf:#f1f0f2;
  --ok:#4a6b52; --ng:#9a5a48;
  --shadow:0 1px 2px rgba(24,22,22,.05), 0 14px 34px -20px rgba(24,22,22,.25);
  background:#ffffff; color:#181616;
}
.rinen a{color:#36323e}
.rinen .crumb a{color:#6a6772}
.rinen-sub{text-align:center;font-size:.86rem;color:#8a888f;margin:0 0 20px}
.rinen-no{background:#36323e;color:#fff;border-radius:50%;width:1.6em;height:1.6em;flex:none;display:inline-flex;
  align-items:center;justify-content:center;font-size:.8rem;font-weight:700}
/* 経営理念ページ（縦スクロール・ポスター体裁） */
.rinen-doc{border:1px solid #d8d7db;border-radius:8px;background:#fff;overflow:hidden;
  max-width:720px;margin:0 auto;box-shadow:0 14px 34px -22px rgba(24,22,22,.22)}
.rinen-doc-head{background:#36323e;color:#fff;text-align:center;font-family:var(--font-mc);font-weight:700;
  letter-spacing:.3em;padding:16px 10px;font-size:clamp(1.05rem,3.5vw,1.3rem)}
.rinen-sec{padding:clamp(22px,5vw,34px) clamp(18px,5vw,40px);text-align:center;border-bottom:1px solid #ebeaec}
.rinen-sec:last-of-type{border-bottom:0}
.rinen-sec-label{display:inline-flex;align-items:baseline;gap:9px;border:1px solid #36323e;border-radius:2px;
  padding:5px 18px;margin-bottom:clamp(14px,3.5vw,22px)}
.rinen-sec-label b{font-family:var(--font-lat);font-weight:600;font-size:1.05rem;letter-spacing:.08em;color:#36323e}
.rinen-sec-label em{font-style:normal;font-size:.76rem;color:#8a888f}
.rinen-sec-body p{font-family:var(--font-mc);font-weight:600;color:#181616;margin:.3em 0;
  font-size:clamp(1.02rem,3vw,1.4rem);line-height:1.95;letter-spacing:.02em}
.rinen-sec-value{text-align:center}
.rinen-value-item{display:flex;gap:12px;align-items:flex-start;text-align:left;max-width:560px;margin:0 auto;
  padding:16px 0;border-top:1px solid #e3e2e5}
.rinen-value-item:first-of-type{border-top:0}
.rinen-value-lines p{font-family:var(--font-mc);font-weight:600;color:#181616;margin:.2em 0;
  font-size:clamp(.98rem,2.6vw,1.2rem);line-height:1.9}
.rinen-doc-foot{font-family:var(--font-lat);letter-spacing:.16em;text-align:center;color:#9b99a0;
  font-size:.8rem;padding:18px 10px 22px;margin:0}
.rinen-tr{margin-top:32px}
.rinen-h2{font-family:var(--font-mc);font-weight:700;font-size:1.15rem;color:#181616;border-top:1px solid #dedde1;padding-top:22px;margin:0 0 6px}
.rinen-note{font-size:.82rem;color:#8a888f;line-height:1.8;margin:0 0 14px}
/* 研修ステップに埋め込む理念の全文 */
.rinen-embed{margin:0 0 14px}
.rinen-full{border:1px solid #36323e;border-radius:6px;padding:18px 20px;background:#fff}
.rinen-full-h{font-family:var(--font-mc);font-weight:700;text-align:center;letter-spacing:.14em;color:#181616;
  border-bottom:1px solid #dedde1;padding-bottom:10px;margin-bottom:12px}
.rinen-block{padding:8px 0 8px 12px;border-left:3px solid #b8b6bb;margin-bottom:8px}
.rinen-block .rinen-cat{display:block;font-family:var(--font-lat);font-weight:600;letter-spacing:.06em;color:#36323e;font-size:.86rem;margin-bottom:2px}
.rinen-block .rinen-lines{margin:0;font-size:.92rem;line-height:1.85;color:#181616}
/* 理念研修バナー */
.rinen-banner{border-color:#36323e}

/* 研修管理リストの種別チップ */
.tra-kind{font-size:.68rem;font-weight:700;border-radius:4px;padding:2px 7px;background:var(--accent-sf);color:var(--accent-ink);white-space:nowrap}
.tra-kind.rinen{background:#36323e;color:#fff}

.tr-admin-list{display:flex;flex-direction:column;gap:8px}
.tra-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;background:var(--card);
  border:1px solid var(--line);border-radius:10px;padding:11px 13px}
.tra-main{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:.9rem}
.tra-range{font-size:.76rem;color:var(--muted);flex-basis:100%}
.tra-aud{font-size:.76rem;color:var(--accent-ink);flex-basis:100%}
.tra-btns{display:flex;gap:12px;align-items:center}
.tr-dates{display:flex;gap:12px}
.tr-dates label{flex:1}
.tr-dates input{width:100%}

/* 研修の配信先（グループ）ピッカー */
.tr-aud{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:2px 0 4px}
.tr-aud legend{font-size:.8rem;font-weight:700;color:var(--muted);padding:0 6px}
.tr-aud-r{display:block;font-size:.9rem;margin:3px 0;cursor:pointer}
.tr-aud-r input{margin-right:7px}
.tr-aud-groups{margin:6px 0 2px;padding:8px 10px;background:var(--bg-soft,rgba(0,0,0,.03));border-radius:8px;
  display:flex;flex-direction:column;gap:5px}
.tr-aud-g{font-size:.88rem;cursor:pointer}
.tr-aud-g input{margin-right:7px}
.tr-aud-tag{font-size:.72rem;background:var(--accent-sf);color:var(--accent-ink);border-radius:999px;padding:2px 9px;white-space:nowrap}
.tr-card-off{opacity:.62}

/* 研修のステップ（ブロック）ビルダー */
.tr-blk-fs #blkList{display:flex;flex-direction:column;gap:10px;margin:2px 0 10px}
.blk{border:1px solid var(--line-2);border-radius:10px;padding:10px 11px;background:var(--card)}
.blk-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.blk-badge{font-size:.72rem;font-weight:700;background:var(--accent-sf);color:var(--accent-ink);border-radius:6px;padding:2px 8px}
.blk-tools{display:flex;gap:3px}
.blk-tools button{font:inherit;font-size:.8rem;width:26px;height:26px;border:1px solid var(--line-2);
  background:var(--bg);color:var(--ink-soft);border-radius:6px;cursor:pointer;padding:0}
.blk-tools button:disabled{opacity:.3;cursor:default}
.blk-tools button.danger{color:var(--ng)}
.blk-title,.blk-url{width:100%;border:1px solid var(--line-2);background:var(--bg);color:var(--ink);
  border-radius:8px;padding:8px 10px;font:inherit;font-size:.86rem;margin-bottom:6px}
.blk-prompt,.blk-body{width:100%;border:1px solid var(--line-2);background:var(--bg);color:var(--ink);
  border-radius:8px;padding:8px 10px;font:inherit;font-size:.84rem;line-height:1.6;resize:vertical;margin-bottom:6px}
.blk-chk{display:block;font-size:.8rem;color:var(--ink-soft);margin-bottom:6px;cursor:pointer}
.blk-chk input{margin-right:6px}
.blk-pts{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--ink-soft)}
.blk-pts-n{width:64px;border:1px solid var(--line-2);background:var(--bg);color:var(--ink);border-radius:8px;padding:6px 8px;font:inherit}
.blk-add{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.blk-add-b{font:inherit;font-size:.8rem;border:1px dashed var(--line-2);background:var(--bg);color:var(--accent-ink);
  border-radius:999px;padding:6px 12px;cursor:pointer}
.blk-add-b:hover{border-color:var(--accent-ink)}

/* グループ管理（管理画面） */
.grp-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.grp-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--card);
  border:1px solid var(--line);border-radius:10px;padding:9px 12px}
.grp-name{font-weight:700;font-size:.92rem}
.grp-count{font-size:.78rem;color:var(--muted)}
.grp-btns{margin-left:auto;display:flex;gap:12px}
.au-groups .au-grp-boxes{display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:10px}
.au-grp{font-size:.9rem;cursor:pointer}
.au-grp input{margin-right:6px}
.grp-toggles{display:flex;flex-wrap:wrap;gap:8px}
.grp-toggle{font:inherit;font-size:.86rem;padding:7px 15px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--ink-soft);transition:background .12s,border-color .12s,color .12s}
.grp-toggle:hover{border-color:var(--accent-ink)}
.grp-toggle.on{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff;font-weight:700}
.grp-toggle:disabled{opacity:.5;cursor:default}

/* 管理画面：タブ */
.admin-tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--line);margin:0 0 16px}
.admin-tab{padding:8px 14px;font-size:.9rem;color:var(--muted);text-decoration:none;
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.admin-tab:hover{color:var(--ink)}
.admin-tab.on{color:var(--accent-ink);border-bottom-color:var(--accent-ink);font-weight:700}

/* 管理画面：メンバー一覧の絞り込み・一括操作 */
.mem-filter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.mem-filter input[type=search],.mem-filter select{padding:7px 10px;border:1px solid var(--line);
  border-radius:8px;font:inherit;font-size:.86rem;background:var(--card);color:var(--ink)}
.mem-filter input[type=search]{flex:1;min-width:160px}
.mem-hideoff{font-size:.82rem;color:var(--muted);white-space:nowrap;cursor:pointer}
.mtbl-sel th.c,.mtbl-sel td.c{text-align:center;width:34px}
.mem-sorthint{font-size:.78rem;margin:-4px 0 8px}
.th-sort{cursor:pointer;user-select:none;white-space:nowrap}
.th-sort:hover{color:var(--accent-ink)}
.th-sort.on{color:var(--accent-ink)}
.sort-ar{font-size:.72em;letter-spacing:-1px}
.mtbl-sel .memck,.mtbl-sel #selAll{width:16px;height:16px;cursor:pointer}
.gchips,.gcell{white-space:normal;min-width:150px}
.gchip{display:inline-block;font-size:.72rem;background:var(--accent-sf);color:var(--accent-ink);
  border-radius:999px;padding:1px 8px;margin:1px 3px 1px 0;white-space:nowrap}
.gcell-edit{font:inherit;font-size:.7rem;color:var(--muted);background:none;border:1px solid var(--line);
  border-radius:999px;padding:1px 8px;cursor:pointer;white-space:nowrap}
.gcell-edit:hover{border-color:var(--accent-ink);color:var(--accent-ink)}
.gcell-editor{display:flex;flex-wrap:wrap;gap:5px}
.gpill{font:inherit;font-size:.74rem;padding:3px 10px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--ink-soft)}
.gpill:hover{border-color:var(--accent-ink)}
.gpill.on{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff;font-weight:700}
.gpill:disabled{opacity:.5;cursor:default}
.gpill-done{font:inherit;font-size:.74rem;padding:3px 10px;border-radius:999px;cursor:pointer;
  border:1px solid var(--accent-ink);background:var(--accent-ink);color:#fff;font-weight:700}
.bulk-bar{position:sticky;bottom:0;z-index:5;display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  background:var(--card);border:1px solid var(--accent-ink);border-radius:12px;
  padding:10px 12px;margin:12px 0 0;box-shadow:0 6px 20px rgba(0,0,0,.12)}
.bulk-bar .bulk-n{font-weight:700;font-size:.86rem;margin-right:4px}
.bulk-bar select{padding:6px 9px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:.84rem;
  background:var(--bg);color:var(--ink)}
.at-rep{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.at-rep-h{font-weight:700;font-size:.82rem;color:var(--accent-ink);margin:0 0 4px}
.at-rep-h:not(:first-child){margin-top:14px}
.at-rep-b{font-size:.9rem;line-height:1.85;white-space:pre-wrap;margin:0;color:var(--ink-soft)}

@media print{
  .site-head,.site-foot,.track,.chapter-nav,.crumb,.streak-banner,.magic-banner,.video-wrap{display:none !important}
  .chapter{box-shadow:none;border:1px solid #ccc}
  body{background:#fff;color:#000}
}