/* 基本（モックは公開環境が用意していた部分） */
[hidden]{display:none!important}
html,body{margin:0}
img{max-width:100%}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
/* アプリ用の追加スタイル（style.css はモックと共通） */
.phone{max-width:420px}
@media (min-width:561px){ .wrap{padding-block:24px} }
.login{display:flex;flex-direction:column;gap:14px;padding-top:24px}
.login h2{font-size:24px}
.err{color:#c0392b;font-size:13px;margin:0;min-height:1.2em}
.toast{position:absolute;left:50%;bottom:84px;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:8px 14px;border-radius:99px;font-size:13px;z-index:9;max-width:90%}
.empty{border:1.5px dashed var(--line);border-radius:14px;padding:16px;color:var(--muted);font-size:14px;display:flex;flex-direction:column;gap:10px}
.row2{display:flex;gap:8px;flex-wrap:wrap}
.row2>button{flex:1}
.plist{display:flex;flex-direction:column;gap:6px}
.prow{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 12px;width:100%;text-align:left}
.prow .code{margin-left:auto}
.danger{border:1px solid var(--line);background:none;border-radius:12px;padding:10px;color:#c0392b;font-weight:500}
.answer{white-space:pre-wrap;line-height:1.8;font-size:14px}
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--gold);border-radius:50%;animation:sp 1s linear infinite;vertical-align:middle}
@keyframes sp{to{transform:rotate(360deg)}}
.sel{font:inherit;font-size:16px;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%}

/* 人の検索・並べ替え */
.findbox{font:inherit;font-size:16px;width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}
.ptools{display:flex;flex-direction:column;gap:8px}
.sortsel{flex-direction:row;align-items:center;gap:8px}
.sortsel .sel{width:auto;flex:1;padding:7px 10px}

/* コードのベクトル表示（919 E　108 H） */
.vl{font-size:.78em;margin-left:.25em;font-weight:700;opacity:.9}
.csep{display:inline-block;width:.7em}
/* 立場の分野分け */
.posrow{display:flex;flex-direction:column;gap:4px}
.posg{font-size:11px;color:var(--muted);letter-spacing:.04em}

/* この場面で出てくる精神性 */
.mindbox{border:1.5px solid var(--gold)}
table.cmp{border-collapse:collapse;width:100%;font-size:13px}
table.cmp th,table.cmp td{padding:6px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
table.cmp thead th{font-size:11px;color:var(--muted);font-weight:500}
table.cmp tbody th{font-size:12px;color:var(--muted);font-weight:500;width:42%}
table.cmp td.chg{background:var(--gold-soft)}

/* カードの3つのスタイル */
.layer .sty{display:flex;flex-direction:column;gap:1px;margin:3px 0 2px}
.layer .sty i{font-style:normal;font-size:11px;font-weight:700;line-height:1.35}
.layer .sty i.chg{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:2px}
.layer .sty i.chg::after{content:" ●";font-size:8px;vertical-align:middle}

/* 2人をくらべる */
table.cmp3 td{vertical-align:top;font-size:12px;border-radius:8px}
table.cmp3 .sty i{font-style:normal;font-size:11px;display:block}
table.mtx td{text-align:center;padding:6px 2px;border:1px solid var(--line)}
table.mtx td.diag{outline:2px solid var(--gold);outline-offset:-2px}
table.mtx td small{display:block;font-size:10px;color:var(--muted)}
.score.shi{color:var(--h)} .score.smid{color:var(--gold)} .score.slo{color:var(--e)}
table.cgrid td{font-size:11px;text-align:center;padding:5px 2px;border:1px solid var(--line);line-height:1.35}
table.cgrid td span{display:block}
table.cgrid td .vs{color:var(--muted);font-size:10px}
table.cgrid td.diff{background:var(--gold-soft);font-weight:700}
.cmpdl .who2{display:flex;flex-direction:column;gap:2px;padding:6px 0;border-bottom:1px dashed var(--line)}
.cmpdl .who2 b{font-size:11px;color:var(--muted)}

/* 人を選ぶボタン */
.pickerbtn{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:8px 12px}
.pickerbtn .pn{font-weight:700;flex:1;min-width:0}
.pickerbtn .code{margin-left:auto}
.pickerbtn .caret{color:var(--muted);font-size:12px}
.cmppick{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.cmppick>.mut{align-self:center}
#pk-list .prow[aria-pressed="true"]{border-color:var(--gold);background:var(--gold-soft)}
#pk-list{max-height:55vh;overflow-y:auto}

/* グループの動き方・決め方・伝え方 */
.gsrow{display:flex;gap:10px;align-items:flex-start;padding:6px 0;border-bottom:1px dashed var(--line)}
.gslab{display:flex;flex-direction:column;min-width:7.5em}
.gslab small{font-size:11px;color:var(--muted)}
.gsn{display:flex;flex-wrap:wrap;gap:4px;flex:1}
.pill{font-size:12px;background:var(--gold-soft);color:var(--ink);border-radius:99px;padding:1px 9px}

/* 会う前メモ */
.bdiff{padding:8px 0;border-bottom:1px dashed var(--line)}
.bdiff:last-child{border-bottom:0}
.bdiff p{margin:2px 0 4px}

/* 試しに入れる・外す */
.pick.off{opacity:.55;text-decoration:line-through}
.pick.plus,.pick.plus[aria-pressed="true"]{border-color:var(--gold);background:var(--gold-soft);color:var(--ink)}
.simt td,.simt th{text-align:center}
.simrow{display:flex;gap:8px;align-items:baseline;padding:4px 0;border-bottom:1px dashed var(--line)}
.simrow span:first-child{flex:1}
.up{color:var(--h)}
.down{color:#B4452F}

/* 関係メモ */
.note{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 12px;margin:6px 0}
.note-h{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.note p{margin:4px 0 0;white-space:normal}
.ndel{margin-left:auto;background:none;border:0;color:var(--muted);font-size:13px;padding:2px 6px}
.ndel.sure{color:#B4452F;font-weight:700}
.lab{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted);margin:8px 0}

/* 一覧から会う前メモへ */
.prow-w{display:flex;gap:6px;align-items:stretch}
.prow-w .prow{flex:1;min-width:0}
.qbrief{flex:none;width:4.2em;font-size:11px;line-height:1.3;border:1px solid var(--gold);background:var(--gold-soft);color:var(--ink);border-radius:12px;padding:4px}

/* 関係メモの振り返り */
.rrow{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px dashed var(--line);width:100%;background:none;border-left:0;border-right:0;border-top:0;text-align:left;color:inherit;font:inherit}
.rrow{flex-wrap:wrap;row-gap:4px}
.rrow .rl{flex:1;font-size:13px;min-width:0}
.rbar{order:3;flex:0 0 100%;height:8px;background:var(--e-soft);border-radius:99px;overflow:hidden}
.rbar i{display:block;height:100%;background:var(--h)}
.rrow small{flex:none}

/* 年表で確かめられない誕生日 */
.chk{display:inline-block;font-size:10px;font-weight:700;color:#B4452F;border:1px solid #B4452F;border-radius:6px;padding:0 5px;vertical-align:1px}
.chknote{font-size:12px;color:var(--muted);background:var(--e-soft);border-radius:10px;padding:8px 10px}

.nmore{font-size:12px;color:var(--muted);margin-top:4px}

/* ログイン履歴 */
.llrow{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 12px}
.ll-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ll-b{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px;margin-top:2px}

.kick{margin-top:6px;font-size:12px;padding:4px 10px}
.kick.sure{font-weight:700}