/* 練習ノート（practicenoteui.js）の見た目。編集の画面の外枠は指導案（lesson.css の .lp-root・.lp-top・.lp-f）と同じ、
   一覧は作成済み練習メニュー一覧（app.css の .dg-*）と同じ部品。app.css の変数（--gold など）を使う */

/* ---------- 編集 ---------- */
.pn-body>*{max-width:900px}
.pn-head{display:grid;grid-template-columns:180px minmax(0,1fr);gap:8px}
.pn-head .pn-memo{grid-column:1/-1}
.lp-f textarea,.pn-root textarea{background:var(--chip);border:1px solid var(--line);border-radius:8px;padding:9px 10px;font-size:16px;line-height:1.5;color:var(--txt);min-width:0;width:100%;resize:vertical;font-family:inherit}
.pn-root textarea:focus,.pn-root input:focus{outline:none;border-color:var(--gold)}
.pn-sec h4{font-size:14px;color:var(--gold);letter-spacing:.04em;margin-bottom:8px}
.pn-sec h4 small{font-weight:600;color:var(--txt-dim);font-size:11px;margin-left:6px}
.pn-items,.pn-players{display:flex;flex-direction:column;gap:10px}
.pn-empty{font-size:12.5px;color:var(--txt-dim);line-height:1.6;padding:10px 12px;border:1px dashed var(--line);border-radius:10px}
.pn-add{margin-top:10px;min-height:44px;width:100%;border-style:dashed;font-weight:800}
.pn-hint{font-size:11px;color:var(--txt-dim);margin-top:6px;line-height:1.5}
.pn-item{display:flex;flex-direction:column;gap:8px;background:#101b14;border:1px solid var(--line);border-radius:12px;padding:10px}
.pn-ih{display:flex;align-items:center;gap:8px;min-width:0}
.pn-no{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--gold);color:#12200f;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.pn-type{flex:0 0 auto;font-size:11px;font-weight:700;color:var(--txt-dim);border:1px solid var(--line);border-radius:999px;padding:3px 8px;white-space:nowrap}
.pn-iname{flex:1 1 auto;min-width:0;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-ibtns{display:flex;gap:4px;flex:0 0 auto}
.pn-ib{min-width:36px;min-height:36px;border-radius:8px;border:1px solid var(--line);background:var(--chip);color:var(--txt);font-size:15px;font-weight:800;line-height:1}
.pn-ib:disabled{opacity:.35}
.pn-ib.x{color:var(--txt-dim)}
.pn-ib.x:hover{color:var(--danger);border-color:rgba(255,128,128,.5)}
.pn-ibody{display:grid;grid-template-columns:220px minmax(0,1fr);gap:10px;align-items:start}
.pn-ithumb.dg-thumb{max-width:none;aspect-ratio:4/3}
.pn-icom{display:flex;flex-direction:column;gap:6px}
.pn-cf{display:flex;flex-direction:column;gap:2px;font-size:11px;font-weight:700;color:var(--txt-dim)}
.pn-cf textarea{font-size:15px;padding:7px 9px}
.pn-ifoot{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pn-ifoot .hbtn{min-height:36px;font-size:12.5px}
.pn-gone{font-size:12px;color:var(--txt-dim);border:1px dashed var(--line);border-radius:8px;padding:6px 10px}
.pn-when{margin-left:auto;font-size:11px;color:var(--txt-dim)}
.pn-prow{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:8px;align-items:start;background:#101b14;border:1px solid var(--line);border-radius:12px;padding:8px}
.pn-pwho{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0;padding-top:6px}
.pn-pwho b{font-size:15px;overflow-wrap:anywhere}
.pn-pwho small{font-size:10.5px;color:var(--txt-dim)}
.pn-pnum{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;border-radius:7px;background:var(--gold);color:#12200f;font-weight:800;font-size:13px;padding:0 4px}
.pn-pnum:empty{display:none}

/* ---------- 選ぶ窓 ---------- */
.pn-pick .dg-tabs{padding:10px 14px 0}
.pn-pick .dg-tab:nth-child(3){border-radius:0 10px 10px 0}
.pn-pcard.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.pn-pmodes{display:flex;gap:8px;padding:10px 14px 0}
.pn-pmodes:empty{display:none}
.pn-pmodes .chip{min-height:38px;padding:0 14px}
.pn-plist{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;padding:10px 14px 16px;overflow-y:auto;min-height:0}
.pn-pbtn{display:flex;align-items:center;gap:8px;min-height:48px;padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:var(--chip);color:var(--txt);text-align:left;min-width:0}
.pn-pbtn b{font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-pbtn small{margin-left:auto;color:var(--gold);font-weight:800}
.pn-pbtn.on{border-color:var(--gold);background:rgba(217,182,74,.12)}
.pn-plist .lp-pempty{grid-column:1/-1;line-height:2}

/* ---------- 一覧 ---------- */
.pn-noimg{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:40px;opacity:.6}
.pn-card .dg-thumb{aspect-ratio:4/3}

@media (max-width:700px){
  .pn-lt{display:none}
  .pn-head{grid-template-columns:1fr}
  .pn-ibody{grid-template-columns:1fr}
  .pn-ithumb.dg-thumb{max-height:200px;aspect-ratio:16/10}
  .pn-prow{grid-template-columns:minmax(0,1fr) auto}
  .pn-prow .pn-pwho{grid-column:1;padding-top:0}
  .pn-prow textarea{grid-column:1/-1;grid-row:2}
  .pn-prow .pn-ib{grid-column:2;grid-row:1}
  .pn-type{display:none}
  .pn-plist{grid-template-columns:repeat(2,minmax(0,1fr))}
}