/* 論評シート（論評シートのフォーム化 変更仕様書 X13）。
 * 会員ページ・ゲストページ・管理画面で共有する。既存の画面に影響しないよう、es- で始まるクラスにだけ効かせる。
 * スマホ幅の体裁もここに持つ（mobile.css は変えない）。 */

/* ── コメントタブの見出しのボタン・印（E1〜E4） ── */
.es-slot-h{display:flex;align-items:center;flex-wrap:nowrap;white-space:nowrap;min-width:0}
.es-slot-h .comment-slot-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.es-eb{flex-shrink:0;margin-left:6px;font-size:10px;font-weight:bold;color:#fff;background:#7b1e2b;padding:2px 6px;border-radius:9px;line-height:1.3}
.es-sb{margin-left:auto;flex-shrink:0;white-space:nowrap;height:28px;padding:0 10px;border-radius:14px;font-size:12px;font-weight:bold;display:inline-flex;align-items:center;gap:3px;border:1.5px solid #7b1e2b;color:#7b1e2b;background:#fff;cursor:pointer;font-family:inherit}
.es-sb.es-dr{border-color:#ef6c00;color:#ef6c00;background:#fff8f0}
.es-sb.es-ok{border-color:#2e7d32;color:#2e7d32;background:#f1f8f3}
.es-sb.es-off{border-color:#d5d9de;color:#b0b6bd;background:#f7f8f9;cursor:default}
.es-sb.es-g{border-color:#0f766e;color:#0f766e}
.es-sb.es-g.es-dr{border-color:#ef6c00;color:#ef6c00}
.es-sb.es-g.es-ok{border-color:#2e7d32;color:#2e7d32}
.es-sb.es-g.es-off{border-color:#d5d9de;color:#b0b6bd}
.es-cnt{position:absolute;top:2px;right:6px;background:#7b1e2b;color:#fff;font-size:9px;font-weight:bold;min-width:15px;height:15px;padding:0 3px;border-radius:8px;display:flex;align-items:center;justify-content:center;line-height:1}

/* 付け替え前の宛先・受信箱の行 */
.es-orph{background:#fff;border:1.5px dashed #c9a2a8;border-radius:8px;padding:12px 14px;margin-bottom:16px}
.es-orph-t{font-size:14px;font-weight:bold;color:#7b1e2b;margin-bottom:6px}
.es-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid #f1f1f1}
.es-row:last-child{border-bottom:none}
.es-row-h{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;font-weight:bold}
.es-row-s{font-size:12px;color:#666;margin-top:3px}
.es-row .es-btn{flex-shrink:0;white-space:nowrap}
.es-grp{font-size:12px;color:#555;font-weight:bold;margin:8px 0 2px}
.es-grp:first-child{margin-top:0}
.es-bdg{font-size:10px;font-weight:bold;padding:2px 7px;border-radius:9px;line-height:1.3;white-space:nowrap}
.es-bdg-ev{background:#7b1e2b;color:#fff}
.es-bdg-mem{background:#e8eef5;color:#0b3d5c}
.es-bdg-g{background:#e6f4f1;color:#0f766e}
.es-bdg-new{background:#e53935;color:#fff}
.es-bdg-upd{background:#e8f0fe;color:#1a4fa0}
.es-bdg-dr{background:#fef3e0;color:#ef6c00}
.es-bdg-ok{background:#e6f4ea;color:#2e7d32}
.es-bdg-hid{background:#eceff1;color:#546e7a}
.es-note{font-size:12px;line-height:1.6;border-radius:8px;padding:8px 10px;margin-bottom:10px;background:#e8f0fe;border:1px solid #c6d8fa;color:#1a4fa0}
.es-note.es-w{background:#fff8e1;border-color:#f0e2b0;color:#7a5a00}
.es-empty{color:#888;font-size:13px;padding:4px 0}

/* ── 共通のボタン ── */
.es-btn{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 14px;border-radius:8px;font-size:13px;font-weight:bold;cursor:pointer;border:1.5px solid #1a73e8;background:#fff;color:#1a73e8;font-family:inherit}
.es-btn.es-pri{background:#1a73e8;color:#fff}
.es-btn.es-red{background:#c62828;border-color:#c62828;color:#fff}
.es-btn:disabled{opacity:.45;cursor:default}
.es-g-theme .es-btn{border-color:#0f766e;color:#0f766e}
.es-g-theme .es-btn.es-pri{background:#0f766e;color:#fff}
.es-g-theme .es-btn.es-red{background:#c62828;border-color:#c62828;color:#fff}

/* ── 重ねて開く画面（E5・E8） ── */
body.es-open{overflow:hidden}
.es-ov{position:fixed;inset:0;z-index:2000;background:#f0f2f5;overflow-y:auto;-webkit-overflow-scrolling:touch;color:#333;font-size:14px;font-family:inherit}
.es-ov *{box-sizing:border-box}
.es-hd{position:sticky;top:0;z-index:3;background:#1a73e8;color:#fff;height:48px;padding:0 12px;display:flex;align-items:center;justify-content:space-between}
.es-g-theme .es-hd{background:#0f766e}
.es-hd b{font-size:15px}
.es-hd-r{display:flex;gap:8px;align-items:center}
.es-hd-r button{background:rgba(255,255,255,.22);color:#fff;border:none;font-size:13px;padding:6px 11px;border-radius:6px;cursor:pointer;font-family:inherit}
.es-wrap{max-width:1100px;margin:0 auto;padding:12px 12px 90px}
.es-card{background:#fff;border-radius:10px;box-shadow:0 1px 4px rgba(0,0,0,.08);padding:12px;margin-bottom:12px}
.es-ct{font-size:14px;font-weight:bold;color:#444;padding-bottom:6px;margin-bottom:6px;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.es-link{font-size:12px;color:#1a73e8;border:1px solid #c6d8fa;border-radius:12px;padding:3px 9px;background:#f5f9ff;text-decoration:none;font-weight:normal;white-space:nowrap}
.es-ct .es-link{border:none;background:none;padding:0}

/* スピーチの情報（I1〜I3） */
.es-info{background:#fff;border-radius:10px;box-shadow:0 1px 4px rgba(0,0,0,.08);margin-bottom:12px;overflow:hidden}
.es-info-top{background:#0b3d5c;color:#fff;padding:8px 12px;display:flex;align-items:center;gap:8px}
.es-info-top .es-blk{width:6px;height:28px;background:#7b1e2b;border-radius:2px;flex-shrink:0}
.es-info-top b{font-size:14px}
.es-info-top small{display:block;font-size:11px;opacity:.85}
.es-info-top .es-pj{margin-left:auto;font-size:11px;background:rgba(255,255,255,.18);padding:3px 8px;border-radius:9px;text-align:right}
.es-info-bd{padding:8px 12px;font-size:13px;line-height:1.6;overflow-wrap:anywhere}
.es-info-bd .es-sp{font-size:15px;font-weight:bold}
.es-info-bd .es-sub{color:#666;font-size:12px}
.es-seg{display:flex;align-items:center;gap:6px;border-top:1px solid #eef0f3;padding:7px 12px;font-size:12px;color:#555}
.es-seg small{font-size:10.5px;color:#888;display:block;margin-top:2px}
.es-sg{display:flex;border:1.5px solid #0b3d5c;border-radius:8px;overflow:hidden;margin-left:auto;flex-shrink:0}
.es-sg button{padding:6px 12px;font-size:13px;font-weight:bold;color:#0b3d5c;background:#fff;border:none;cursor:pointer;font-family:inherit}
.es-sg button.es-on{background:#0b3d5c;color:#fff}
.es-lk{display:flex;gap:6px;flex-wrap:wrap;border-top:1px solid #eef0f3;padding:7px 12px}

/* 入力（I4〜I9） */
.es-gl{font-size:12px;font-weight:bold;color:#7b1e2b;margin:10px 0 4px}
.es-gl:first-of-type{margin-top:2px}
.es-ta{display:block;width:100%;border:1px solid #cfd5dc;border-radius:8px;padding:8px 10px;font-size:16px;line-height:1.5;min-height:64px;resize:vertical;font-family:inherit;color:#333;background:#fff}
.es-ta:focus{outline:none;border-color:#1a73e8}
.es-ta.es-sm{min-height:40px;font-size:16px;margin:4px 0 8px}
.es-rhdr,.es-it{display:grid;grid-template-columns:minmax(0,1fr) repeat(5,42px);gap:4px;align-items:center}
.es-rhdr{font-size:9.5px;color:#888;text-align:center;padding-bottom:3px;border-bottom:1px solid #eef0f3}
.es-rhdr b{display:block;font-size:12px;color:#0b3d5c}
.es-rhdr .es-cmh{display:none}
.es-it{border-bottom:1px solid #eef0f3;padding-top:6px}
.es-it:last-child{border-bottom:none}
.es-it .es-ta{grid-column:1 / -1}
.es-it2{border-bottom:1px solid #eef0f3;padding-top:8px}
.es-it2:last-child{border-bottom:none}
.es-nm{font-size:12.5px;font-weight:bold;color:#7b1e2b;line-height:1.25;overflow-wrap:anywhere}
.es-nm.es-add{color:#0b3d5c}
.es-nm.es-add::after{content:"＊";color:#e65100;font-size:10px}
.es-b{height:40px;border:1.5px solid #c9d3dd;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:bold;color:#0b3d5c;font-size:15px;background:#fff;cursor:pointer;font-family:inherit;padding:0}
.es-b.es-on{background:#0b3d5c;border-color:#0b3d5c;color:#fff}
.es-plain{font-size:12px;color:#666;line-height:1.6}

/* 画面下の帯（D1） */
.es-bar{position:fixed;left:0;right:0;bottom:0;z-index:4;background:#fff;border-top:1px solid #dfe3e8;padding:9px 12px;display:flex;gap:8px;align-items:center;box-shadow:0 -2px 8px rgba(0,0,0,.06)}
.es-bar .es-st{flex:1;font-size:12px;color:#666;min-width:0}
.es-bar-in{max-width:1100px;margin:0 auto;width:100%;display:flex;gap:8px;align-items:center}

/* 「…」メニュー・確認ダイアログ・短いメッセージ */
.es-menu{position:fixed;right:10px;top:46px;background:#fff;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.25);width:190px;z-index:2101;overflow:hidden}
.es-menu button{display:block;width:100%;text-align:left;padding:12px 14px;font-size:14px;border:none;border-bottom:1px solid #f0f0f0;background:#fff;cursor:pointer;font-family:inherit;color:#333}
.es-menu button.es-del{color:#c62828}
.es-dim{position:fixed;inset:0;z-index:2100;background:rgba(0,0,0,.35)}
.es-dlg-ov{position:fixed;inset:0;z-index:2200;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:16px}
.es-dlg{background:#fff;border-radius:12px;width:100%;max-width:380px;padding:16px;color:#333;font-size:14px}
.es-dlg h4{font-size:15px;margin:0 0 8px}
.es-dlg p{font-size:13px;color:#555;line-height:1.6;margin:0 0 12px}
.es-dlg .es-sum{background:#f7f9fb;border:1px solid #e3e8ef;border-radius:8px;padding:8px 10px;font-size:12.5px;line-height:1.7;margin-bottom:10px}
.es-dlg .es-sum b{color:#2e7d32}
.es-dlg-f{display:flex;gap:8px;justify-content:flex-end}
.es-toast{position:fixed;left:50%;transform:translateX(-50%);bottom:84px;z-index:2300;background:#323232;color:#fff;border-radius:8px;padding:10px 16px;font-size:13px;max-width:calc(100% - 48px);text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.25)}

/* 閲覧画面（R4） */
.es-evhead{background:#0b3d5c;color:#fff;border-radius:10px 10px 0 0;padding:10px 12px;display:flex;align-items:center;gap:10px}
.es-evhead .es-blk{width:8px;height:32px;background:#7b1e2b;border-radius:2px}
.es-evhead b{font-size:15px}
.es-evhead small{display:block;font-size:11px;opacity:.85}
.es-kv{display:grid;grid-template-columns:96px 1fr;gap:4px 8px;font-size:13px;overflow-wrap:anywhere}
.es-kv .es-k{color:#7b1e2b;font-size:12px}
.es-sec{font-size:13px;font-weight:bold;color:#7b1e2b;margin:12px 0 4px}
.es-txt{font-size:13px;color:#444;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.es-txt.es-none{color:#aaa}
.es-ro{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0 4px;font-size:13px}
.es-ro b{color:#7b1e2b}
.es-dots{display:flex;gap:4px;flex-shrink:0}
.es-dots i{width:22px;height:22px;border-radius:50%;border:1.5px solid #c9d3dd;font-style:normal;font-size:11px;display:flex;align-items:center;justify-content:center;color:#0b3d5c;font-weight:bold}
.es-dots i.es-on{background:#0b3d5c;color:#fff;border-color:#0b3d5c}
.es-rcm{font-size:12.5px;color:#555;padding:0 0 8px;border-bottom:1px solid #eef0f3;white-space:pre-wrap;overflow-wrap:anywhere}
.es-unr{color:#999;font-size:12px}

/* パソコン幅：左に情報・全般的なコメント、右に評価の表（D2） */
@media (min-width: 900px){
  .es-grid{display:grid;grid-template-columns:400px minmax(0,1fr);gap:14px;align-items:start}
  .es-grid .es-card,.es-grid .es-info{margin-bottom:12px}
  .es-ta{font-size:14px}
  .es-ta.es-sm{font-size:13px;min-height:36px;margin:0}
  .es-rhdr,.es-it{grid-template-columns:140px repeat(5,40px) minmax(0,1fr);gap:4px}
  .es-rhdr .es-cmh{display:block;text-align:left;padding-left:6px}
  .es-it{padding:5px 0}
  .es-it .es-ta{grid-column:auto;margin:0}
  .es-b{height:34px}
  .es-view{max-width:760px;margin:0 auto}
}

/* 印刷（R5）：論評シートだけを A4 縦に */
@media print{
  @page{size:A4 portrait;margin:12mm}
  body.es-printing{overflow:visible !important;background:#fff !important}
  body.es-printing > *:not(.es-ov){display:none !important}
  body.es-printing .es-ov{position:static;overflow:visible;background:#fff;inset:auto}
  body.es-printing .es-hd,body.es-printing .es-bar,body.es-printing .es-noprint{display:none !important}
  body.es-printing .es-wrap{padding:0;max-width:none}
  body.es-printing .es-card{box-shadow:none;border:1px solid #ddd;break-inside:auto}
  body.es-printing .es-ro,body.es-printing .es-rcm{break-inside:avoid}
  body.es-printing .es-evhead,body.es-printing .es-dots i.es-on{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}