/* ============================================================
   AI Interviewer 2 — 墨と朱
   音声を文書に変える製品なので、和文組版の佇まいを基準にする。
   余白で構造を作り、罫線は細く、朱は印のように最小限に使う。
   ============================================================ */

:root{
  /* 面 */
  --paper:#faf9f6;          /* 紙 */
  --surface:#ffffff;        /* 前面 */
  --surface-2:#f4f2ed;      /* 沈める面 */
  /* 墨 */
  --ink:#1a1a1c;
  --ink-2:#4c4a47;
  --ink-3:#7b7772;
  --ink-4:#a8a39c;
  /* 罫 */
  --rule:#e8e4dc;
  --rule-2:#d6d0c6;
  /* 朱 */
  --shu:#c0392b;
  --shu-ink:#a5301f;
  --shu-wash:#fbeeea;
  /* 状態 */
  --ok:#2b6b4f;   --ok-wash:#eaf3ee;
  --warn:#8a6410; --warn-wash:#fbf3e0;
  --bad:#a8322a;  --bad-wash:#fbecea;

  --sh-1:0 1px 1px rgba(28,24,18,.04);
  --sh-2:0 1px 2px rgba(28,24,18,.05), 0 6px 20px -6px rgba(28,24,18,.10);
  --sh-3:0 2px 4px rgba(28,24,18,.06), 0 16px 40px -12px rgba(28,24,18,.18);

  --r-s:7px; --r-m:11px; --r-l:16px;
  --sb:232px;                /* サイドバー幅 */
  --gut:clamp(1rem,4vw,2.5rem);
}

@media (prefers-color-scheme:dark){
  :root{
    --paper:#131315; --surface:#1b1b1e; --surface-2:#232326;
    --ink:#eceae6; --ink-2:#bdb9b3; --ink-3:#8d8983; --ink-4:#66625d;
    --rule:#2b2b2f; --rule-2:#3c3b40;
    --shu:#e8836d; --shu-ink:#f0977f; --shu-wash:#2c1a15;
    --ok:#74c79b; --ok-wash:#16241c;
    --warn:#dcb45f; --warn-wash:#241d0e;
    --bad:#ef8a7d; --bad-wash:#281513;
    --sh-1:0 1px 1px rgba(0,0,0,.3);
    --sh-2:0 1px 2px rgba(0,0,0,.4), 0 6px 20px -6px rgba(0,0,0,.5);
    --sh-3:0 2px 4px rgba(0,0,0,.4), 0 16px 40px -12px rgba(0,0,0,.6);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans",system-ui,-apple-system,
    "Segoe UI","Noto Sans JP",sans-serif;
  font-size:15px;line-height:1.85;letter-spacing:.01em;
  font-feature-settings:"palt" 1;   /* 和文の詰め */
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
}
::selection{background:var(--shu-wash);color:var(--shu-ink)}

/* ---------- 骨格 ---------- */
.shell{display:grid;grid-template-columns:var(--sb) 1fr;min-height:100dvh}

aside.rail{
  border-right:1px solid var(--rule);background:var(--surface);
  display:flex;flex-direction:column;position:sticky;top:0;height:100dvh;
  padding:1.4rem 0 .8rem;
}
.mark{display:flex;align-items:baseline;gap:.5rem;padding:0 1.25rem 1.3rem;
  font-size:1.12rem;font-weight:700;letter-spacing:.02em}
.mark .seal{width:22px;height:22px;border-radius:5px;background:var(--shu);
  color:#fff;display:grid;place-items:center;font-size:.72rem;font-weight:700;
  letter-spacing:0;transform:translateY(2px);flex:none;
  box-shadow:0 1px 3px color-mix(in srgb,var(--shu) 40%,transparent)}
.rail nav{display:flex;flex-direction:column;gap:1px;padding:0 .7rem;flex:1}
.rail nav button{
  display:flex;align-items:center;gap:.65rem;width:100%;text-align:left;
  background:none;border:none;color:var(--ink-2);font:inherit;font-size:.9rem;
  padding:.52rem .6rem;border-radius:var(--r-s);cursor:pointer;position:relative;
  transition:background .13s,color .13s}
.rail nav button:hover{background:var(--surface-2);color:var(--ink)}
.rail nav button.on{color:var(--shu-ink);font-weight:650;background:var(--shu-wash)}
.rail nav button.on::before{content:"";position:absolute;left:-.7rem;top:20%;bottom:20%;
  width:2.5px;border-radius:0 2px 2px 0;background:var(--shu)}
.rail .foot{padding:.8rem 1.25rem 0;border-top:1px solid var(--rule);margin-top:.6rem}
.rail .who{font-size:.8rem;color:var(--ink-2);line-height:1.5}
.rail .who b{display:block;font-weight:650;color:var(--ink)}

.stage{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:15;height:56px;display:flex;align-items:center;
  gap:.6rem;padding:0 var(--gut);border-bottom:1px solid var(--rule);
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(180%) blur(14px)}
.topbar h1{font-size:.95rem;font-weight:650;margin:0;letter-spacing:.02em}
.wrap{padding:1.6rem var(--gut) 5rem;max-width:70rem;width:100%}
.wrap.narrow{max-width:48rem}
.spacer{flex:1}

/* ---------- 文字 ---------- */
h2{font-size:1.5rem;font-weight:700;letter-spacing:.01em;margin:.1rem 0 .2rem;
  line-height:1.45}
h3{font-size:1rem;font-weight:650;margin:0 0 .5rem;letter-spacing:.02em}
.eyebrow{font-size:.72rem;font-weight:650;color:var(--ink-3);letter-spacing:.12em;
  margin-bottom:.3rem}
.lead{color:var(--ink-2);font-size:.92rem;margin:.15rem 0 0}
.meta{color:var(--ink-3);font-size:.81rem;line-height:1.7}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
a{color:var(--shu-ink);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
hr{border:none;border-top:1px solid var(--rule);margin:1.6rem 0}

/* ---------- 部品 ---------- */
button{font:inherit;font-size:.87rem;padding:.44rem .85rem;border-radius:var(--r-s);
  border:1px solid var(--rule-2);background:var(--surface);color:var(--ink);
  cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;
  transition:.13s;box-shadow:var(--sh-1)}
button:hover{border-color:var(--ink-4);box-shadow:var(--sh-2)}
button:active{transform:translateY(.5px)}
button:focus-visible{outline:2px solid var(--shu);outline-offset:2px}
button.primary{background:var(--shu);color:#fff;border-color:transparent;font-weight:650;
  box-shadow:0 1px 2px color-mix(in srgb,var(--shu) 35%,transparent)}
button.primary:hover{background:var(--shu-ink)}
button.quiet{border-color:transparent;background:none;color:var(--ink-2);box-shadow:none}
button.quiet:hover{background:var(--surface-2);color:var(--ink);box-shadow:none}
button.danger{color:var(--bad);border-color:var(--rule-2)}
button.danger:hover{background:var(--bad-wash);border-color:currentColor}
button.sm{font-size:.78rem;padding:.24rem .55rem}
button:disabled{opacity:.38;cursor:not-allowed;transform:none;box-shadow:none}
/* hidden 属性を、クラス側の display 指定より優先させる。
   これが無いと .field{display:flex} のような一行でログイン画面の
   「パスワード（確認）」が出てしまう（実際に起きた）。 */
[hidden]{display:none !important}

.icon{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

input[type=text],input[type=search],input[type=password],input[type=file],
textarea,select{
  font:inherit;font-size:.9rem;padding:.5rem .7rem;border:1px solid var(--rule-2);
  border-radius:var(--r-s);background:var(--surface);color:var(--ink);width:100%;
  transition:.13s}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--shu);
  box-shadow:0 0 0 3px var(--shu-wash)}
textarea{resize:vertical;line-height:1.8}
::placeholder{color:var(--ink-4)}
.field{margin:.75rem 0}
.field>span{display:block;font-size:.78rem;color:var(--ink-3);margin-bottom:.25rem;
  font-weight:600}
label{font-size:.86rem;color:var(--ink-2)}
label select,label input{width:auto;display:inline-block;margin:0 .3rem}

.panel{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-m);
  padding:1.15rem 1.3rem;margin:.9rem 0;box-shadow:var(--sh-1)}
.panel.flat{box-shadow:none;background:none;border-style:dashed}
.row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-top:.75rem}
.row.tight{margin-top:.4rem}

.chip{font-size:.72rem;padding:.1rem .5rem;border-radius:999px;border:1px solid var(--rule-2);
  color:var(--ink-3);display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap;
  line-height:1.7}
.chip.ok{color:var(--ok);background:var(--ok-wash);border-color:transparent}
.chip.bad{color:var(--bad);background:var(--bad-wash);border-color:transparent}
.chip.warn{color:var(--warn);background:var(--warn-wash);border-color:transparent}
.chip.shu{color:var(--shu-ink);background:var(--shu-wash);border-color:transparent}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

.note{border-left:2px solid var(--rule-2);padding:.6rem 0 .6rem .9rem;
  font-size:.87rem;margin:.8rem 0;color:var(--ink-2)}
.note b{color:var(--ink)}
.note.warn{border-color:var(--warn)}
.note.bad{border-color:var(--bad)}
.note.ok{border-color:var(--ok)}
.must{font-size:.68rem;color:var(--shu-ink);background:var(--shu-wash);
  border-radius:3px;padding:.1rem .45rem;margin-left:.5rem;font-weight:650;
  vertical-align:.1em;letter-spacing:.02em}

table{border-collapse:collapse;width:100%;font-size:.86rem}
th,td{border-bottom:1px solid var(--rule);padding:.5rem .6rem;text-align:left;
  vertical-align:top}
th{color:var(--ink-3);font-weight:650;font-size:.74rem;letter-spacing:.06em;
  border-bottom-color:var(--rule-2)}
tbody tr:hover{background:var(--surface-2)}
tr:last-child td{border-bottom:none}
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- 統計 ---------- */
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));
  border:1px solid var(--rule);border-radius:var(--r-m);overflow:hidden;
  background:var(--surface);margin:.2rem 0 1.5rem}
.fig{padding:.85rem 1rem;border-right:1px solid var(--rule)}
.fig:last-child{border-right:none}
.fig b{display:block;font-size:1.55rem;font-weight:700;letter-spacing:-.02em;
  line-height:1.25;font-variant-numeric:tabular-nums}
.fig span{font-size:.73rem;color:var(--ink-3);letter-spacing:.06em}

/* ---------- 一覧 ---------- */
.bar{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:1rem 0 .5rem}
.bar input[type=search]{max-width:20rem}
.roll{border-top:1px solid var(--rule)}
.rec-row{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:center;
  padding:.85rem .3rem;border-bottom:1px solid var(--rule);cursor:pointer;
  transition:background .12s}
.rec-row:hover{background:var(--surface)}
.rec-row.on{background:var(--shu-wash)}
.rec-row .ttl{font-weight:650;font-size:.95rem;line-height:1.5;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rec-row .sub{color:var(--ink-3);font-size:.78rem;display:flex;gap:.55rem;
  flex-wrap:wrap;align-items:center;margin-top:.1rem;font-variant-numeric:tabular-nums}
.rec-row .acts{display:flex;gap:.25rem;opacity:0;transition:opacity .12s}
.rec-row:hover .acts,.rec-row.on .acts{opacity:1}
@media (hover:none){.rec-row .acts{opacity:1}}
.tick{width:16px;height:16px;accent-color:var(--shu);cursor:pointer}
.void{padding:3.5rem 1rem;text-align:center;color:var(--ink-3)}
.void .big{font-size:1rem;color:var(--ink-2);margin-bottom:.3rem;font-weight:600}

/* ---------- 録音 ---------- */
.studio{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-l);
  padding:2rem 1.5rem 1.6rem;box-shadow:var(--sh-2);text-align:center;
  position:relative;overflow:hidden}
.studio::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 60% at 50% -10%,var(--shu-wash),transparent 70%);
  opacity:.7}
.studio>*{position:relative;z-index:1}
#level{width:100%;height:72px;display:block;margin-bottom:.3rem}
.clock{font-size:3rem;font-weight:250;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums;margin:.2rem 0 1.1rem}
.trigger{width:5.2rem;height:5.2rem;border-radius:50%;border:none;background:var(--shu);
  color:#fff;display:grid;place-items:center;padding:0;margin:0 auto;
  box-shadow:0 4px 18px -2px color-mix(in srgb,var(--shu) 45%,transparent)}
.trigger:hover{background:var(--shu-ink);box-shadow:0 6px 24px -2px
  color-mix(in srgb,var(--shu) 55%,transparent)}
.trigger .icon{width:28px;height:28px;stroke-width:1.9}
.trigger.live{background:var(--bad);animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--bad) 40%,transparent)}
  50%{box-shadow:0 0 0 14px transparent}
}
.script{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-m);
  padding:.4rem 1.15rem;margin-top:1rem;overflow:auto;
  /* 画面の高さに応じて広げる。24rem固定では窮屈だった。
     つまんで縦に伸縮できる（overflow:auto が resize の前提）。 */
  height:clamp(20rem,58vh,48rem);min-height:12rem;resize:vertical;
  box-shadow:var(--sh-1)}
.script .utt{font-size:.95rem}
.utt{padding:.42rem 0;border-bottom:1px solid var(--rule);font-size:.92rem;
  line-height:1.8}
.utt:last-child{border-bottom:none}
.utt time{color:var(--ink-4);font-size:.74rem;font-variant-numeric:tabular-nums;
  margin-right:.5rem;cursor:pointer}
.utt time:hover{color:var(--shu-ink)}
.utt .who{font-weight:650;font-size:.8rem;color:var(--ink-2);margin-right:.4rem}
.utt .tr{display:block;margin:.25rem 0 0 3.4rem;font-size:.86rem;
  color:var(--ink-3);border-left:2px solid var(--rule-2);padding-left:.6rem}
.utt.draft{color:var(--ink-4);font-style:italic}

.asrpick{max-width:30rem;margin:.9rem auto 0;text-align:left}
.asrpick .opts{display:flex;gap:.35rem;flex-wrap:wrap;justify-content:center}
.asrpick .opts button{padding:.3rem .8rem;font-size:.82rem;min-height:32px;
  background:var(--surface)}
.asrpick .opts button.on{border-color:var(--shu);font-weight:650;
  background:color-mix(in srgb,var(--shu) 10%,var(--surface))}
.asrpick .opts button:disabled{opacity:.45}
.asrpick label.chk{display:flex;gap:.4rem;align-items:center;justify-content:center;
  margin-top:.5rem;font-size:.82rem;color:var(--ink-2)}
.warn-text{color:var(--shu-ink);font-weight:650}
.asrpick .why{font-size:.76rem;color:var(--ink-4);text-align:center;margin-top:.3rem}

/* ---------- 声の設定 ---------- */
.voicebox{border-top:1px solid var(--rule);margin-top:1rem;padding-top:.9rem}
.voicebox .head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  margin-bottom:.7rem}
.voicebox .head b{font-size:.9rem}
.sexpick{display:inline-flex;border:1px solid var(--rule);border-radius:var(--r-s);
  overflow:hidden}
.sexpick button{border:none;border-radius:0;box-shadow:none;background:none;
  padding:.32rem .8rem;font-size:.84rem;color:var(--ink-3);min-height:32px;
  white-space:nowrap}
.sexpick button.on{background:var(--shu);color:#fff;font-weight:650}
.sexpick button:hover:not(.on){background:var(--surface-2);box-shadow:none}
.vlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));
  gap:.4rem;max-height:13rem;overflow:auto;padding:.15rem}
.vlist button{justify-content:space-between;padding:.4rem .6rem;font-size:.85rem;
  background:var(--surface);text-align:left;min-height:38px}
.vlist button.on{border-color:var(--shu);background:color-mix(in srgb,var(--shu) 10%,var(--surface));
  font-weight:650}
.vlist button .hz{font-size:.7rem;color:var(--ink-4);font-variant-numeric:tabular-nums}
.tune{display:grid;grid-template-columns:5.5rem 1fr 3rem;gap:.5rem .7rem;
  align-items:center;margin-top:.9rem}
.tune label{font-size:.83rem;color:var(--ink-2)}
.tune input[type=range]{width:100%;accent-color:var(--shu);padding:0;min-height:0}
.tune .val{font-size:.8rem;color:var(--ink-3);text-align:right;
  font-variant-numeric:tabular-nums}

.axes{display:grid;grid-template-columns:6.5rem 1fr;gap:.5rem .7rem;align-items:center}
.axes .opts{display:flex;gap:.3rem;flex-wrap:wrap}
.axes .opts button{padding:.3rem .7rem;font-size:.82rem;min-height:32px;
  background:var(--surface);white-space:nowrap}
.axes .opts button.on{border-color:var(--shu);font-weight:650;
  background:color-mix(in srgb,var(--shu) 10%,var(--surface))}
.axes label{font-size:.83rem;color:var(--ink-2)}
.axes .note{grid-column:2;font-size:.76rem;color:var(--ink-4);margin-top:-.2rem}

.sample{margin-top:.8rem;padding:.7rem .9rem;border-radius:var(--r-s);
  background:var(--surface-2);border:1px solid var(--rule)}
.sample .ask{font-size:.82rem;color:var(--ink-3);margin-bottom:.3rem}
.sample .ask::before{content:"Q ";color:var(--shu);font-weight:700}
.sample .ans{font-size:.92rem;line-height:1.75;margin-bottom:.35rem}
.sample .ans::before{content:"A ";color:var(--shu);font-weight:700}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1rem}
@media (max-width:52rem){.grid2{grid-template-columns:1fr}}

/* ---------- タブ ---------- */
.tabs{display:flex;gap:.1rem;border-bottom:1px solid var(--rule);margin:1.3rem 0 1.1rem}
.tabs button{border:none;background:none;box-shadow:none;border-radius:0;
  border-bottom:2px solid transparent;padding:.5rem .85rem;color:var(--ink-3);
  font-size:.89rem;margin-bottom:-1px}
.tabs button:hover{color:var(--ink);background:none;box-shadow:none}
.tabs button.on{color:var(--shu-ink);border-bottom-color:var(--shu);font-weight:650}

/* ---------- 文書（議事録・評価レポート） ---------- */
.doc{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-m);
  padding:2.4rem clamp(1.2rem,4vw,3rem);box-shadow:var(--sh-2);
  max-width:46rem;line-height:2}
.doc h1{font-size:1.45rem;font-weight:700;margin:0 0 .3rem;letter-spacing:.01em;
  padding-bottom:.7rem;border-bottom:2px solid var(--ink)}
.doc h2{font-size:1.05rem;font-weight:700;margin:2.2rem 0 .7rem;letter-spacing:.04em;
  padding-left:.7rem;border-left:3px solid var(--shu)}
.doc h3{font-size:.94rem;margin:1.4rem 0 .5rem;color:var(--ink-2)}
.doc p{margin:.7rem 0}
.doc ul,.doc ol{margin:.5rem 0;padding-left:1.4rem}
.doc li{margin:.32rem 0}
.doc li::marker{color:var(--ink-4)}
.doc table{margin:.9rem 0;font-size:.85rem}
.doc th{background:var(--surface-2)}
.doc blockquote{margin:1rem 0;padding:.7rem 1rem;background:var(--surface-2);
  border-left:3px solid var(--rule-2);border-radius:0 var(--r-s) var(--r-s) 0;
  color:var(--ink-2);font-size:.88rem}
.doc code{background:var(--surface-2);padding:.1rem .35rem;border-radius:4px;
  font-size:.85em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.doc a.cite{font-size:.78rem;color:var(--shu-ink);text-decoration:none;
  border-bottom:1px dotted currentColor;font-variant-numeric:tabular-nums;
  margin:0 .12rem;white-space:nowrap}
.doc a.cite:hover{background:var(--shu-wash)}
.doc hr{margin:2rem 0}
.doc .anchor{scroll-margin-top:5rem}
.doc mark{background:var(--shu-wash);color:inherit;padding:.05rem .2rem;border-radius:3px}

/* ---------- 面接 ---------- */
.trail{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:1.2rem}
.stp{font-size:.76rem;color:var(--ink-3);border:1px solid var(--rule-2);
  border-radius:999px;padding:.2rem .8rem;display:flex;align-items:center;gap:.35rem}
.stp .n{width:1.1rem;height:1.1rem;border-radius:50%;background:var(--surface-2);
  display:grid;place-items:center;font-size:.68rem;font-weight:700;color:var(--ink-3)}
.stp.active{color:var(--shu-ink);border-color:transparent;background:var(--shu-wash);
  font-weight:650}
.stp.active .n{background:var(--shu);color:#fff}
.stp.done{color:var(--ok);border-color:transparent;background:var(--ok-wash)}
.stp.done .n{background:var(--ok);color:#fff}

.duo{display:grid;grid-template-columns:1fr 20rem;gap:1.1rem;align-items:start}
@media (max-width:60rem){.duo{grid-template-columns:1fr}}
.aside{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-m);
  padding:.9rem 1.1rem;position:sticky;top:4.6rem;max-height:80vh;overflow:auto;
  box-shadow:var(--sh-1)}
.aside h4{font-size:.72rem;color:var(--ink-3);letter-spacing:.1em;font-weight:650;
  margin:1.2rem 0 .4rem;padding-bottom:.25rem;border-bottom:1px solid var(--rule)}
.aside h4:first-child{margin-top:0}
.tip{border:1px solid var(--rule-2);border-radius:var(--r-s);padding:.6rem .75rem;
  margin:.45rem 0;font-size:.86rem;background:var(--paper);line-height:1.75}
.tip .why{color:var(--ink-3);font-size:.75rem;margin-top:.3rem}
.cov{display:flex;justify-content:space-between;gap:.5rem;font-size:.82rem;
  padding:.32rem 0;border-bottom:1px solid var(--rule)}
.cov:last-child{border-bottom:none}
.state{font-size:.73rem;white-space:nowrap;font-weight:600}
.state.confirmed{color:var(--ok)} .state.partial{color:var(--warn)}
.state.asked{color:var(--ink-3)} .state.unasked{color:var(--ink-4)}

/* ---------- モーダル・その他 ---------- */
.veil{position:fixed;inset:0;background:rgba(24,20,16,.42);display:grid;place-items:center;
  z-index:60;padding:1rem;backdrop-filter:blur(3px);animation:fade .15s}
@keyframes fade{from{opacity:0}}
.veil .panel{max-width:29rem;width:100%;margin:0;box-shadow:var(--sh-3);
  animation:rise .18s cubic-bezier(.2,.9,.3,1)}
@keyframes rise{from{transform:translateY(10px);opacity:0}}
.bone{background:linear-gradient(90deg,var(--rule) 25%,var(--surface-2) 50%,var(--rule) 75%);
  background-size:200% 100%;animation:sweep 1.3s infinite;border-radius:5px;
  height:.9rem;margin:.5rem 0}
@keyframes sweep{to{background-position:-200% 0}}
.whirl{width:13px;height:13px;border:2px solid var(--rule-2);border-top-color:var(--shu);
  border-radius:50%;animation:turn .7s linear infinite;display:inline-block;
  vertical-align:-2px}
@keyframes turn{to{transform:rotate(360deg)}}
audio{width:100%;height:36px}

/* ============================================================
   スマートフォン
   ============================================================ */
@media (max-width:52rem){
  body{font-size:16px}                 /* iOSで入力時に拡大されない */
  .shell{grid-template-columns:1fr}
  aside.rail{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;
    flex-direction:row;border-right:none;border-top:1px solid var(--rule);
    padding:0 0 env(safe-area-inset-bottom);z-index:40;
    background:color-mix(in srgb,var(--surface) 96%,transparent);
    backdrop-filter:saturate(180%) blur(14px)}
  .rail .mark,.rail .foot{display:none}
  .rail nav{flex-direction:row;padding:0;gap:0;width:100%}
  .rail nav button{flex-direction:column;gap:.15rem;font-size:.67rem;
    padding:.45rem .2rem;border-radius:0;min-height:56px;justify-content:center;
    align-items:center;text-align:center}
  .rail nav button.on{background:none}
  .rail nav button.on::before{left:50%;transform:translateX(-50%);top:0;bottom:auto;
    width:26px;height:2.5px;border-radius:0 0 2px 2px}
  .rail nav button .icon{width:21px;height:21px}

  .topbar{padding:0 1rem;height:52px}
  .wrap{padding:1.1rem 1rem 6rem}
  h2{font-size:1.28rem}
  .figs{grid-template-columns:repeat(2,1fr)}
  .fig{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
  .fig:nth-child(2n){border-right:none}
  button{min-height:42px;padding:.5rem .9rem}
  button.sm{min-height:34px}
  .panel{padding:.95rem 1rem;border-radius:var(--r-m)}
  .doc{padding:1.4rem 1.15rem;border-radius:var(--r-m);line-height:1.95}
  .doc h1{font-size:1.25rem}
  .doc h2{font-size:1rem;margin:1.7rem 0 .6rem}

  .rec-row{grid-template-columns:auto 1fr;gap:.7rem;padding:.8rem .2rem;
    grid-template-areas:"tick body" ". acts"}
  .rec-row .tick{grid-area:tick}
  .rec-row .body{grid-area:body;min-width:0}
  .rec-row .acts{grid-area:acts;opacity:1;margin-top:.45rem}
  .rec-row .acts button{flex:1;justify-content:center}

  .bar input[type=search]{max-width:none;flex:1 1 100%}
  .script{height:clamp(16rem,52vh,34rem);padding:.3rem .85rem}
  .vlist{grid-template-columns:repeat(auto-fill,minmax(8rem,1fr));max-height:11rem}
  .tune{grid-template-columns:4.6rem 1fr 2.8rem}
  .axes{grid-template-columns:1fr;gap:.2rem}
  .axes .note{grid-column:1}
  .script .utt{font-size:.94rem}
  .clock{font-size:3.4rem}
  .trigger{width:5.8rem;height:5.8rem}
  .trigger .icon{width:32px;height:32px}
  .script{max-height:17rem}
  .duo{grid-template-columns:1fr}
  .aside{position:static;max-height:none;order:-1}
  .tabs{overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .tabs button{min-height:40px}
  .trail{overflow-x:auto;white-space:nowrap;flex-wrap:nowrap;padding-bottom:.3rem;
    -webkit-overflow-scrolling:touch}
  .veil{align-items:flex-end}
  .veil .panel{border-radius:var(--r-l) var(--r-l) 0 0;max-width:none;
    padding-bottom:calc(1.15rem + env(safe-area-inset-bottom))}
  table{font-size:.82rem}
}

@media (min-width:52.01rem){
  .only-mobile{display:none}
}
@media (max-width:52rem){
  .only-desktop{display:none}
}

@media print{
  aside.rail,.topbar,.bar,.tabs,button,audio,.figs{display:none !important}
  body{background:#fff;color:#000}
  .shell{display:block}
  .doc{border:none;box-shadow:none;padding:0;max-width:none}
  .wrap{padding:0}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}


/* ---------- LetsTalk ---------- */
.langs{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.6rem;
  margin:1rem 0 .3rem}
.lang{border:1px solid var(--rule-2);border-radius:var(--r-m);padding:.9rem 1rem;
  background:var(--surface);cursor:pointer;text-align:left;transition:.13s;
  display:flex;flex-direction:column;gap:.1rem;align-items:flex-start;box-shadow:var(--sh-1)}
.lang:hover{border-color:var(--ink-4)}
.lang.on{border-color:var(--shu);background:var(--shu-wash);
  box-shadow:0 0 0 3px var(--shu-wash)}
.lang b{font-size:1.02rem;font-weight:650;letter-spacing:.02em}
.lang span{font-size:.75rem;color:var(--ink-3)}
.lang.on b{color:var(--shu-ink)}

/* ---------- 一覧の切り替え ---------- */
.seg-ctl{display:inline-flex;border:1px solid var(--rule-2);border-radius:var(--r-s);
  overflow:hidden;margin-bottom:.9rem;background:var(--surface)}
.seg-ctl button{border:none;border-radius:0;box-shadow:none;background:none;
  color:var(--ink-2);padding:.4rem 1.1rem;font-size:.86rem;border-right:1px solid var(--rule)}
.seg-ctl button:last-child{border-right:none}
.seg-ctl button:hover{background:var(--surface-2);box-shadow:none}
.seg-ctl button.on{background:var(--shu-wash);color:var(--shu-ink);font-weight:650}
#tlevel{width:100%;height:72px;display:block;margin-bottom:.3rem}
@media (max-width:52rem){
  .langs{grid-template-columns:1fr}
  .lang{padding:.8rem .9rem}
}


/* ---------- LetsTalk 会話中 ---------- */
.halo{position:relative;width:7.5rem;height:7.5rem;margin:.2rem auto 1rem;
  display:grid;place-items:center;font-size:.78rem;color:var(--ink-3)}
.halo .ring{position:absolute;inset:0;border-radius:50%;
  border:1.5px solid var(--rule-2);transition:.3s}
.halo .ring.r2{inset:.6rem;border-color:transparent}
.halo.listen .ring{border-color:var(--ok)}
.halo.listen .ring.r2{border-color:color-mix(in srgb,var(--ok) 35%,transparent);
  animation:ripple 2.4s ease-out infinite}
.halo.speak .ring{border-color:var(--shu)}
.halo.speak .ring.r2{border-color:color-mix(in srgb,var(--shu) 45%,transparent);
  animation:ripple 1.3s ease-out infinite}
.halo.think .ring{border-color:var(--warn);border-style:dashed;
  animation:spin 3.5s linear infinite}
@keyframes ripple{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.25);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
.utt.bot{background:var(--shu-wash);margin:.3rem -1.15rem;padding:.42rem 1.15rem;
  border-bottom:none;border-radius:6px}
.utt.bot .who{color:var(--shu-ink)}
.utt.back{opacity:.65;font-size:.85rem}

/* 自分の声の登録。ふだんは畳んでおき、録音中は読む文を大きめに出す */
#mineBox summary{display:flex;align-items:center;gap:.6rem;cursor:pointer;
  list-style:none;padding:.15rem 0;font-size:.9rem}
#mineBox summary::-webkit-details-marker{display:none}
#mineBox summary::before{content:"";width:0;height:0;flex:none;
  border-left:5px solid var(--ink-4);border-top:4px solid transparent;
  border-bottom:4px solid transparent;transition:transform .12s}
#mineBox details[open]>summary::before{transform:rotate(90deg)}
#mineBox .body{padding-top:.5rem}
#mineBox .row.tight{gap:.4rem;margin:.5rem 0 .2rem}
#mineBox .rec{display:flex;align-items:center;gap:.6rem;font-size:.9rem;
  color:var(--shu);font-weight:650}
#mineBox .rec .dot{width:9px;height:9px;animation:breathe 1.4s infinite}
#mineBox .rec .spacer,#mineBox .rec button{margin-left:auto}
#mineBox .read{margin:.6rem 0 .3rem;font-size:1rem;line-height:1.9;
  padding:.7rem .9rem;border-radius:var(--r-s);background:var(--surface)}

/* 調べたときの出典。発言より小さく、脇に添える扱い */
.src{display:flex;flex-wrap:wrap;gap:.3rem .7rem;align-items:center;
  margin:.1rem 0 .5rem;padding:.35rem .6rem;border-left:2px solid var(--rule-2);
  font-size:.76rem;color:var(--ink-4)}
.src .q{display:inline-flex;align-items:center;gap:.25rem;color:var(--ink-3)}
.src .q .icon{width:12px;height:12px}
.src a{color:var(--ink-3);text-decoration:underline;text-underline-offset:2px;
  max-width:16rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.src a:hover{color:var(--shu)}

/* 定型の面接に出す共有リンク */
.linkrow{display:flex;gap:.4rem;align-items:center;margin:.45rem 0 .1rem;flex-wrap:wrap}
.linkrow input{flex:1 1 18rem;min-width:12rem;font-size:.78rem;padding:.3rem .5rem;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-s);
  color:var(--ink-2)}