/* ============================================================
   lobby nailschool 生徒・講師用アプリ
   株式会社conacona

   配色は lobby のロゴから起こしたもの。
   テラコッタが唯一の色味で、あとは焦げ茶と生成りのベージュ。
   来校条件（素爪／ジェルあり／モデル同伴）だけ、見分けるための色を別に持つ。
   ============================================================ */

:root{
  --bg:#f6f0ea;
  --card:#ffffff;
  --ink:#3a2a22;
  --sub:#9a8576;
  --line:#e3d6cb;
  --alt:#ede2d8;
  --accent:#c4806e;
  --accent-d:#a9654f;
  --accent-soft:#f5e8e2;
  --warn:#9c4a3c;
  --warn-soft:#f7e6e2;
  --ok:#6f8f7f;
  --ok-soft:#eff4f1;
  /* 来校条件。生徒が間違えると授業が成立しないので、区分ごとに色を変える */
  --bare:#73836f;
  --bare-soft:#eef1ec;
  --gel:#c4806e;
  --gel-soft:#f5e8e2;
  --model:#7a6a93;
  --model-soft:#efebf4;
  --shadow:0 1px 2px rgba(58,42,34,.06), 0 6px 16px rgba(58,42,34,.05);
  --serif:"Hiragino Mincho ProN","Yu Mincho",Georgia,serif;
  /* 下のタブの高さ。**JS（app.js）が起動時に実物を測って上書きする。**
     ここに書いてあるのは、測る前に一瞬だけ使われる見込みの値。
     iPhone の下の帯（ホームバー）のぶんも含める。 */
  --nav:calc(62px + env(safe-area-inset-bottom));
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
/* ★ body は height ではなく min-height にする。
   height:100% にすると、box-sizing:border-box のせいで
   下の余白（--nav のぶん）が画面の内側に入ってしまい、
   中身が画面より長いときに**いちばん下のボタンが下のタブに隠れる**。
   2026-09-23、業務委託の方から「稼働申請のボタンが押せない」と報告があって分かった。 */
html{height:100%}
body{margin:0;padding:0;min-height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
  background:var(--bg); color:var(--ink); font-size:15px; line-height:1.55;
  padding-bottom:calc(var(--nav) + 24px);
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font-family:inherit;font-size:16px;color:inherit}
button{cursor:pointer;border:none;background:none;padding:0}
a{color:var(--accent-d)}

/* ---- ロゴの字組み（明朝＋広い字間の小文字） ---- */
.wordmark{font-family:var(--serif);font-size:26px;font-weight:400;
  letter-spacing:.34em;text-indent:.34em;color:var(--ink);margin:0}
.wordmark-sub{font-family:var(--serif);font-size:11px;letter-spacing:.28em;
  text-indent:.28em;color:var(--sub);margin:5px 0 0}

/* ============================================================
   ログイン
   ============================================================ */
#login{position:fixed;inset:0;background:var(--bg);z-index:100;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px;overflow-y:auto}
#login[hidden]{display:none}
#login .mark{margin-bottom:32px;text-align:center}
#login .step{width:100%;max-width:320px;text-align:center}
#login .step[hidden]{display:none}
#login p.lead{color:var(--sub);font-size:13px;margin:0 0 18px;letter-spacing:.04em}
#login input[type=password],#login input[type=text]{
  width:100%;text-align:center;font-size:20px;padding:14px;
  border:1px solid var(--line);border-radius:2px;background:#fff}
#login input.pin{letter-spacing:.6em;text-indent:.6em;font-size:26px}
#login .btn{margin-top:14px}
#login .back{margin-top:16px;color:var(--sub);font-size:13px;text-decoration:underline}

/* スタッフ選択 */
.stafflist{display:flex;flex-direction:column;gap:7px;margin-top:4px;
  max-height:52vh;overflow-y:auto;text-align:left}
.staffbtn{display:flex;align-items:center;gap:10px;width:100%;
  padding:13px 14px;background:#fff;border:1px solid var(--line);border-radius:3px;
  box-shadow:var(--shadow)}
.staffbtn b{font-weight:600;font-size:15px}
.staffbtn span{margin-left:auto;font-size:12px;color:var(--sub)}
.storehead{font-size:12px;font-weight:700;color:var(--sub);letter-spacing:.08em;
  margin:12px 0 2px;padding-left:2px}
.storehead:first-child{margin-top:0}

/* ============================================================
   ヘッダー・ナビ
   ============================================================ */
header{position:sticky;top:0;z-index:20;background:rgba(246,247,248,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
  padding:calc(8px + env(safe-area-inset-top)) 14px 8px}
header .hrow{display:flex;align-items:baseline;gap:10px;max-width:720px;margin:0 auto}
header .title{font-family:var(--serif);font-size:17px;letter-spacing:.18em;
  text-indent:.18em;font-weight:400}
header .who{margin-left:auto;font-size:12px;color:var(--sub);text-align:right;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:48%}

nav{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);border-top:1px solid var(--line);
  display:flex;padding-bottom:env(safe-area-inset-bottom)}
nav button{flex:1;padding:8px 2px 7px;font-size:10.5px;color:var(--sub);
  display:flex;flex-direction:column;align-items:center;gap:3px;font-weight:600}
nav button.on{color:var(--accent)}
/* ★ nav は display:flex なので、hidden だけでは消えない。
   暗証番号を決める画面でタブを押せてしまい、先に進めなくなる */
nav[hidden]{display:none}
nav svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* ============================================================
   共通の部品
   ============================================================ */
.wrap{padding:14px 14px 24px;max-width:720px;margin:0 auto}
.muted{color:var(--sub);font-size:13px}
.sectitle{font-size:12px;font-weight:700;color:var(--sub);margin:20px 0 8px;
  letter-spacing:.08em}
.sectitle:first-child{margin-top:2px}
.pagetitle{font-family:var(--serif);font-size:20px;font-weight:600;
  letter-spacing:.06em;margin:2px 0 14px}

.card{background:var(--card);border:1px solid var(--line);border-radius:4px;
  box-shadow:var(--shadow);overflow:hidden}
.card + .card{margin-top:9px}
.card .pad{padding:13px 14px}

.row{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:12px 14px;border-bottom:1px solid var(--line);width:100%;text-align:left}
.row:last-child{border-bottom:none}
.row .grow{flex:1;min-width:0}
.row b{font-weight:600;display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row small{display:block;font-size:12px;color:var(--sub);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .chev{color:var(--line);font-size:18px;flex:none}

.field{margin:12px 0}
.field label{display:block;font-size:12px;color:var(--sub);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;padding:11px;
  border:1px solid var(--line);border-radius:3px;background:#fff}
.field textarea{min-height:90px;resize:vertical}

.btn{display:block;width:100%;padding:14px;border-radius:3px;background:var(--accent);
  color:#fff;font-size:15px;font-weight:600;text-align:center;letter-spacing:.06em}
.btn:active{background:var(--accent-d)}
.btn.sub{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.danger{background:var(--warn)}
.btn:disabled{opacity:.45}
.btn + .btn{margin-top:8px}

.badge{font-size:11px;padding:2px 8px;border-radius:999px;font-weight:600;
  white-space:nowrap;flex:none}
.badge.admin{background:var(--ink);color:#fff}
.badge.manager{background:var(--accent);color:#fff}
.badge.warn{background:var(--warn);color:#fff}
.badge.off{background:var(--line);color:var(--sub)}

.empty{text-align:center;color:var(--sub);padding:48px 20px;font-size:14px}
.notice{background:var(--warn-soft);border:1px solid #e0cbc6;border-radius:4px;
  padding:12px 14px;font-size:13px;color:var(--ink);margin-bottom:12px}
.notice.ok{background:var(--ok-soft);border-color:#c9dcd1}

/* ---- ボトムシート（追加・編集画面） ---- */
#sheet{position:fixed;inset:0;z-index:60;display:none}
#sheet.on{display:block}
#sheet .bg{position:absolute;inset:0;background:rgba(46,50,56,.34)}
#sheet .panel{position:absolute;left:0;right:0;bottom:0;background:var(--bg);
  border-radius:10px 10px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));
  max-height:88vh;overflow-y:auto}
.sheet-h{font-family:var(--serif);font-size:18px;font-weight:600;
  letter-spacing:.04em;margin:0 0 4px}

/* ---- 読み込み中・お知らせ ---- */
#toast{position:fixed;left:50%;bottom:calc(var(--nav) + 24px);
  transform:translateX(-50%) translateY(12px);
  background:var(--ink);color:#fff;padding:11px 20px;border-radius:3px;font-size:14px;
  opacity:0;transition:.25s;z-index:80;pointer-events:none;max-width:88vw;text-align:center}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.warn{background:var(--warn)}

#busy{position:fixed;inset:0;z-index:70;display:none;
  align-items:center;justify-content:center;background:rgba(246,247,248,.6)}
#busy.on{display:flex}
.spinner{width:30px;height:30px;border:2px solid var(--line);
  border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* 準備中の画面 */
.soon{text-align:center;padding:56px 20px;color:var(--sub)}
.soon .big{font-family:var(--serif);font-size:17px;letter-spacing:.08em;
  color:var(--ink);margin-bottom:8px}

/* ============================================================
   第1段で足した部品
   ============================================================ */

/* ---- 切り替えタブ（お知らせ／メッセージ など） ---- */
.seg{display:flex;background:var(--accent-soft);border-radius:3px;padding:3px;margin-bottom:12px}
.seg button{flex:1;padding:9px 4px;border-radius:2px;font-size:14px;font-weight:600;color:var(--sub)}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.06)}

/* ---- 未読の印 ---- */
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--warn);margin-right:6px;vertical-align:1px;flex:none}
.count{background:var(--warn);color:#fff;font-size:11px;font-weight:700;
  border-radius:999px;padding:1px 7px;min-width:20px;text-align:center;flex:none}
nav .count{position:absolute;transform:translate(12px,-6px)}
nav button{position:relative}

/* ---- お知らせ・メッセージ ---- */
.unreadrow{background:var(--warn-soft)}
.metaline{font-size:12px;color:var(--sub);margin-top:2px;
  display:flex;gap:4px 10px;flex-wrap:wrap;align-items:center}
.metaline span{white-space:nowrap}
.bodytext{white-space:pre-wrap;word-break:break-word;line-height:1.7}
.cmt{padding:11px 14px;border-bottom:1px solid var(--line)}
.cmt:last-child{border-bottom:none}
.cmt .h{font-size:12px;color:var(--sub);margin-bottom:3px}
.cmt .b{white-space:pre-wrap;word-break:break-word}
.writebox{display:flex;gap:8px;align-items:flex-end;margin-top:10px}
.writebox textarea{flex:1;min-height:44px;max-height:140px;padding:11px;
  border:1px solid var(--line);border-radius:3px;background:#fff;resize:none}
.writebox button{flex:none;padding:12px 16px;border-radius:3px;
  background:var(--accent);color:#fff;font-weight:600;font-size:14px}
.writebox button:disabled{opacity:.4}

/* ---- チェックリスト ---- */
.chk{display:flex;align-items:center;gap:12px;padding:12px 14px;
  border-bottom:1px solid var(--line);width:100%;text-align:left}
.chk:last-child{border-bottom:none}
.chk .box{width:24px;height:24px;border:1.5px solid var(--line);border-radius:4px;
  flex:none;display:flex;align-items:center;justify-content:center;
  background:#fff;font-size:15px;color:#fff}
.chk.on .box{background:var(--ok);border-color:var(--ok)}
.chk .t{flex:1;min-width:0}
.chk.on .t{color:var(--sub);text-decoration:line-through}
.chk .who{font-size:11px;color:var(--sub);flex:none;text-align:right}
.progress{height:4px;background:var(--line);border-radius:999px;overflow:hidden;margin:8px 0 2px}
.progress i{display:block;height:100%;background:var(--ok);transition:width .3s}

/* ---- チャット ---- */
#chatscroll{padding-bottom:8px}
.bub{max-width:78%;margin-bottom:10px;display:flex;flex-direction:column}
.bub .n{font-size:11px;color:var(--sub);margin-bottom:3px;padding:0 2px}
.bub .t{padding:9px 13px;border-radius:14px;background:#fff;border:1px solid var(--line);
  white-space:pre-wrap;word-break:break-word;line-height:1.6}
.bub .w{font-size:10px;color:var(--lite,#aaa);margin-top:3px;padding:0 3px}
.bub.me{margin-left:auto;align-items:flex-end}
.bub.me .t{background:var(--accent);border-color:var(--accent);color:#fff}
.bub.gone .t{background:transparent;border-style:dashed;color:var(--sub);font-size:13px}
.daysep{text-align:center;font-size:11px;color:var(--sub);margin:14px 0 10px}
.chatbar{position:fixed;left:0;right:0;bottom:var(--nav);
  background:rgba(246,247,248,.97);backdrop-filter:blur(8px);
  border-top:1px solid var(--line);padding:8px 12px;z-index:40}
.chatbar .inner{display:flex;gap:8px;align-items:flex-end;max-width:720px;margin:0 auto}
.chatbar textarea{flex:1;min-height:40px;max-height:120px;padding:10px 12px;
  border:1px solid var(--line);border-radius:20px;background:#fff;resize:none}
.chatbar button{flex:none;width:40px;height:40px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:17px;
  display:flex;align-items:center;justify-content:center}
.chatbar button:disabled{opacity:.35}
body.chatting{padding-bottom:calc(var(--nav) + 68px)}

/* ============================================================
   画像・デザイン共有・表彰
   ============================================================ */

/* ---- 画像 ---- */
.photo{background:var(--accent-soft);border-radius:6px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  min-height:60px;font-size:12px;color:var(--sub)}
.photo img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .25s}
.photo.ready img{opacity:1}
.photo.gone{padding:16px;text-align:center}
/* チャットと大きい表示は、写真の縦横比をそのまま保つ。
   読み込み中だけ場所を取っておき、届いたら本来の形に戻す。 */
.photo.chat{max-width:220px;border-radius:12px}
.photo.chat:not(.ready){min-height:130px}
.photo.chat img{width:100%;height:auto;object-fit:contain}

.photo.wide{width:100%;background:#fff}
.photo.wide:not(.ready){min-height:180px;background:var(--accent-soft)}
.photo.wide img{width:100%;height:auto;max-height:56vh;object-fit:contain}

/* 一覧のカードだけは、大きさを揃えたいので正方形に切り取る */
.photo.card-img{width:100%;aspect-ratio:1/1}
.photo.card-img img{height:100%;object-fit:cover}

.zoom{position:fixed;inset:0;z-index:120;background:rgba(20,22,25,.94);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;padding:16px}
.zoom img{max-width:100%;max-height:84vh;object-fit:contain}
.zoom-hint{color:rgba(255,255,255,.5);font-size:12px}

.photo-add{display:flex;align-items:center;gap:10px;padding:12px;border:1px dashed var(--line);
  border-radius:4px;background:#fff;width:100%;color:var(--sub);font-size:14px;justify-content:center}

/* ---- デザイン共有 ---- */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.dcard{background:var(--card);border:1px solid var(--line);border-radius:5px;
  overflow:hidden;box-shadow:var(--shadow);text-align:left;width:100%}
.dcard .t{padding:8px 10px 10px}
.dcard .t b{display:block;font-size:13px;font-weight:600;line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical}
.dcard .t small{display:block;font-size:11px;color:var(--sub);margin-top:3px}
.dcard .noimg{aspect-ratio:1/1;background:var(--accent-soft);
  display:flex;align-items:center;justify-content:center;color:var(--sub);font-size:12px}
.seenmark{position:absolute;top:6px;right:6px;background:var(--ok);color:#fff;
  font-size:10px;font-weight:700;border-radius:999px;padding:2px 7px}
.dwrap{position:relative}
/* 商材の置き場所（2026-09-19に追加）。長い名前でも1行に収める */
.dcard .t small.place{color:var(--accent);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
/* 商材と置き場所の組（デザインの中身）*/
.kv{margin-bottom:10px}
.kv>div{display:flex;gap:10px;padding:5px 0;border-bottom:1px dashed var(--line)}
.kv>div:last-child{border-bottom:none}
.kv span{flex:0 0 72px;font-size:12px;color:var(--sub);padding-top:1px}
.kv b{font-size:13px;font-weight:600;word-break:break-all}

/* ---- 表彰 ---- */
.rankrow{display:flex;align-items:center;gap:10px;padding:10px 14px;
  border-bottom:1px solid var(--line)}
.rankrow:last-child{border-bottom:none}
.rankrow.me{background:var(--accent-soft)}
.rankno{width:26px;height:26px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;background:var(--line);color:var(--sub)}
.rankno.g1{background:#c9a961;color:#fff}
.rankno.g2{background:#b6bcc2;color:#fff}
.rankno.g3{background:#c0a08a;color:#fff}
.rankbody{flex:1;min-width:0}
.rankbody b{font-weight:600;font-size:14px;display:block}
.rankbar{height:5px;background:var(--line);border-radius:999px;overflow:hidden;margin-top:5px}
.rankbar i{display:block;height:100%;background:var(--accent)}
.rankval{flex:none;text-align:right;font-size:13px;font-weight:700;
  font-variant-numeric:tabular-nums;min-width:64px}
.rankval small{display:block;font-size:10px;font-weight:400;color:var(--sub)}
.votebtn{flex:none;font-size:12px;padding:6px 11px;border-radius:999px;
  border:1px solid var(--line);background:#fff;color:var(--sub);font-weight:600}
.votebtn.on{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---- チャットの写真ボタンと送信前のプレビュー ---- */
.chatbar .photobtn{background:#fff;border:1px solid var(--line);color:var(--accent);
  font-size:20px;font-weight:400}
.chatpreview{display:none;align-items:center;gap:10px;
  max-width:720px;margin:0 auto 8px;padding:0 2px}
.chatpreview.on{display:flex}
.bub .photo.chat{margin-bottom:4px}
.bub.me .photo.chat{margin-left:auto}

/* ---- 横に並ぶ絞り込み（カテゴリ・タグ） ---- */
.chips{display:flex;gap:7px;overflow-x:auto;padding-bottom:10px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{white-space:nowrap;flex:none;padding:7px 13px;border:1px solid var(--line);
  border-radius:999px;background:#fff;font-size:13px;color:var(--sub)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---- 検索欄 ---- */
.search{width:100%;padding:12px 14px;border:1px solid var(--line);
  border-radius:3px;background:#fff;margin-bottom:10px}

/* ---- チャンネル ---- */
.chanhead{padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:12px}
.chantitle{font-family:var(--serif);font-size:18px;font-weight:600;
  letter-spacing:.04em;margin:6px 0 2px}

/* ---- ありがとう ---- */
.thx-head{margin-bottom:14px}
.thx-dots{display:flex;justify-content:center;gap:10px}
.thx-dot{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);
  background:#fff;display:block}
.thx-dot.used{background:var(--accent);border-color:var(--accent)}

/* ---- 権限の一覧表 ---- */
.permwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  background:var(--card);border:1px solid var(--line);border-radius:4px;
  box-shadow:var(--shadow)}
.permtable{min-width:460px}
.permrow{display:grid;grid-template-columns:1.6fr .9fr .9fr .9fr;
  align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--line);
  font-size:12px}
.permrow:last-child{border-bottom:none}
.permhead{font-weight:700;color:var(--sub);background:var(--accent-soft);
  position:sticky;top:0}
.permhead div{text-align:center}
.permname{font-size:13px;color:var(--ink)}
.permrow > div:not(.permname){text-align:center;font-size:11px;line-height:1.4}
.permgroup{padding:8px 12px 4px;font-size:11px;font-weight:700;
  color:var(--sub);letter-spacing:.06em;background:var(--bg)}
.permyes{color:var(--ok);font-weight:700;font-size:14px !important}
.permno{color:var(--line);font-weight:700;font-size:14px !important}
.permpart{color:var(--accent-d)}
.permnote{font-size:13px;line-height:1.7;padding:6px 0;
  border-bottom:1px solid var(--line)}
.permnote:last-child{border-bottom:none}

/* ============================================================
   売上（第2段）
   ============================================================ */

/* 右下に浮かぶ「＋」。下のタブに重ならない位置に置く。 */
.fab{position:fixed;right:16px;bottom:calc(var(--nav) + 12px);width:52px;height:52px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:26px;line-height:52px;text-align:center;
  box-shadow:0 3px 10px rgba(0,0,0,.18);z-index:40}
.fab:active{background:var(--accent-d)}

/* 急ぐときの連絡先（遅刻・欠勤の画面）。押すとそのままかけられる */
.telrow{display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;text-decoration:none;color:var(--ink)}
.telrow-label{font-size:13px;color:var(--sub)}
.telrow-num{font-size:19px;font-weight:600;letter-spacing:.04em;color:var(--accent-d)}
.telrow:active{background:var(--accent-soft)}

/* 大きく出す金額 */
.salesnum{margin-bottom:12px}
.salesnum-label{font-size:12px;color:var(--sub)}
.salesnum-big{font-size:30px;font-weight:600;letter-spacing:.02em;margin:2px 0 3px}
.salesnum-sub{font-size:12.5px;color:var(--sub)}
.salesnum.sub .salesnum-big{font-size:22px;color:var(--sub)}

/* 目標の帯 */
.bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.bar-in{height:100%;background:var(--accent);border-radius:3px}
.goal{margin-top:12px}
.goal-top{display:flex;justify-content:space-between;align-items:baseline;
  font-size:12px;color:var(--sub);margin-bottom:5px}
.goal-pct{font-weight:700;color:var(--ink)}
.goal-sub{font-size:11.5px;color:var(--sub);margin-top:4px}

/* 月の送り */
.monthnav{display:flex;align-items:center;justify-content:center;gap:18px;margin:4px 0 12px}
.monthnav span{font-size:15px;font-weight:600}
.monthnav button{width:34px;height:34px;border-radius:50%;font-size:18px;color:var(--sub)}
.monthnav button:active{background:var(--line)}

/* スタッフ別（売上用。表彰の .rankrow とは別物） */
.srank{padding:11px 14px;border-bottom:1px solid var(--line)}
.srank:last-child{border-bottom:none}
.srank-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.srank-name{font-size:14px;font-weight:600}
.srank-amt{font-size:14px;font-weight:600}
.srank-sub{font-size:11.5px;color:var(--sub);margin-top:5px}

/* 日ごと */
.daily-row{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.daily-row:last-child{margin-bottom:0}
.daily-d{flex:none;width:34px;font-size:11.5px;color:var(--sub);text-align:right}
.daily-row .bar{flex:1}
.daily-v{flex:none;width:76px;font-size:11.5px;text-align:right}

/* 一覧の金額 */
.salesamt{font-size:14px;font-weight:600;white-space:nowrap}

/* 入力シート */
.checkline{display:flex;align-items:center;gap:9px;margin:14px 0;font-size:14px}
.checkline input{width:19px;height:19px}

/* ボタンを2つ横に並べる（2026-09-19：シフトの「自動で組む」用）*/
.row2{display:flex;gap:8px}
.row2>.btn{flex:1;margin:0}

/* 稼働申請（業務委託の方の「働ける日」。2026-09-19）*/
.wdrow{display:flex;align-items:center;gap:7px;padding:7px 12px;
  border-bottom:1px solid var(--line);font-size:13px;flex-wrap:wrap}
.wdrow:last-child{border-bottom:none}
.wdrow.sun b{color:var(--warn)}
.wdrow.sat b{color:var(--accent-d)}
.wdrow select{padding:5px 6px;font-size:13px;width:86px}
.wdday{display:flex;align-items:center;gap:7px;flex:0 0 96px}
.wdday input{width:19px;height:19px;flex:none}
.wdreason{padding:0 12px 8px 108px;font-size:12px;color:var(--warn)}
/* 小さいボタン（通す／断る）*/
.mini{border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:4px;padding:4px 10px;font-size:12px;font-weight:600}
.mini.danger{border-color:var(--warn);color:var(--warn)}

/* 曜日ごとの人数（シフトの自動生成）*/
.needrow{display:flex;align-items:center;gap:7px;padding:7px 0;
  border-bottom:1px solid var(--line);font-size:13px;flex-wrap:wrap}
.needrow:last-of-type{border-bottom:none}
.needrow>b{flex:0 0 22px;font-size:14px;font-weight:600}
.needrow>b.sun{color:var(--warn)}
.needrow>b.sat{color:var(--accent-d)}
.needrow input[type=time]{width:88px;padding:5px 6px;font-size:13px}
.needrow input[type=number]{padding:5px 6px;font-size:13px;text-align:center}
.needrow>small{color:var(--sub);font-size:11px;margin-left:auto}
.totalline{display:flex;justify-content:space-between;align-items:baseline;
  margin:16px 0 4px;padding-top:12px;border-top:1px solid var(--line)}
.totalline span{font-size:13px;color:var(--sub)}
.total{font-size:24px;font-weight:600}
.total.minus{color:var(--warn)}

/* 目標までの道のり（売上の「今日」） */
.pace{margin-bottom:12px}
.pace-line{display:flex;justify-content:space-between;align-items:baseline;
  margin-top:12px;font-size:14px;font-weight:600}
.pace-line.done{color:var(--ok);font-weight:600}
.pace-day{font-size:12px;font-weight:400;color:var(--sub)}
.pace-today{margin-top:7px;font-size:12.5px;color:var(--warn)}
.pace-today.ok{color:var(--ok)}
.pace-note{margin-top:9px;font-size:11px;color:var(--sub);line-height:1.5}
.salesamt.off{color:var(--sub);text-decoration:line-through}

/* みんなの達成率 */
.bd{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;
  border-bottom:1px solid var(--line)}
.bd:last-child{border-bottom:none}
.bd.me{background:var(--accent-soft)}
.bd-no{flex:none;width:24px;height:24px;border-radius:50%;margin-top:2px;
  display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:700;background:var(--line);color:var(--sub)}
.bd-no.g1{background:#c9a961;color:#fff}
.bd-no.g2{background:#b6bcc2;color:#fff}
.bd-no.g3{background:#c0a08a;color:#fff}
.bd-body{flex:1;min-width:0}
.bd-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;gap:8px}
.bd-name{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-rate{font-size:14px;font-weight:700;flex:none}
.bd-rate.done{color:var(--ok)}
.bd-rate.none{font-size:11.5px;font-weight:400;color:var(--sub)}
.bd-sub{font-size:11.5px;color:var(--sub);margin-top:5px}
.bar-in.done{background:var(--ok)}

/* オプションの選び方 */
.opts{border:1px solid var(--line);border-radius:3px;overflow:hidden}
.opt{display:flex;align-items:center;gap:8px;padding:9px 11px;
  border-bottom:1px solid var(--line);background:#fff}
.opt:last-child{border-bottom:none}
.opt.on{background:var(--accent-soft)}
.opt-name{flex:1;min-width:0;display:flex;justify-content:space-between;gap:10px;
  font-size:13.5px;cursor:pointer}
.opt-price{color:var(--sub);font-size:12px;flex:none}
.opt-btns{flex:none;display:flex;align-items:center;gap:2px}
.opt-btns button{width:30px;height:30px;border-radius:3px;font-size:17px;
  color:var(--sub);background:var(--bg)}
.opt-btns button:active{background:var(--line)}
.opt-n{width:22px;text-align:center;font-size:13.5px;font-weight:600}

/* 合計の内訳 */
.breakdown{font-size:11.5px;color:var(--sub);text-align:right;margin-top:3px}

/* ============================================================
   シフト（第3段）
   ============================================================ */

/* 月カレンダー */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:12px}
.cal-h{text-align:center;font-size:11px;font-weight:700;padding:4px 0;color:var(--sub)}
.cal-h.sun{color:var(--warn)}
.cal-h.sat{color:var(--accent-d)}
.cal-d{min-height:40px;border:1px solid var(--line);border-radius:3px;background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:4px 2px;font-size:12px;cursor:pointer;gap:2px}
.cal-d.wide{min-height:56px}
.cal-d.on{background:var(--warn-soft);border-color:var(--warn);color:var(--warn);font-weight:700}
.cal-d.ok{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-d)}
.cal-d.has{border-color:var(--accent)}
.cal-d.warn{background:#fdfaf3}
.cal-mark{font-size:8px;line-height:1}
.cal-n{font-size:9px;color:var(--accent-d);font-weight:700;line-height:1}
.cal-off{font-size:9px;color:var(--warn);line-height:1}
.cal-busy{display:block;width:80%;height:3px;border-radius:2px;background:var(--line)}
.cal-busy-in{display:block;height:100%;border-radius:2px;background:var(--accent)}
.offcount{font-size:12.5px;color:var(--sub);text-align:right;margin:-6px 0 10px}
.legend{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--sub);margin-bottom:12px}

/* 時間の2つ並び */
.timepair{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* シフトを決める行 */
.shiftrow{padding:10px 14px;border-bottom:1px solid var(--line)}
.shiftrow:last-child{border-bottom:none}
.shiftrow.off{background:#fdfaf3}
.shiftrow-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px}
.shifttime{display:flex;align-items:center;gap:6px;margin-top:8px}
.shifttime input{flex:1;padding:8px;border:1px solid var(--line);border-radius:3px;background:#fff}
.shifttime.hide,.field.hide{display:none}
.offnote{font-size:12px;color:var(--warn);background:var(--warn-soft);
  border-radius:3px;padding:8px 10px;margin-bottom:10px}
.offnote.ok{color:var(--accent-d);background:var(--accent-soft)}

/* ============================================================
   現場運用（第4段）
   ============================================================ */

/* 目立たせたいお知らせ（緊急・承認待ち） */
.alertbox{background:var(--warn-soft);border:1px solid var(--warn);border-radius:3px;
  padding:11px 13px;margin-bottom:12px;font-size:13px;font-weight:600;color:var(--warn)}

/* お客様の情報。見てよい人にしか出ないが、見た目でも区別する */
.privatebox{background:var(--warn-soft);border-left:3px solid var(--warn);
  border-radius:3px;padding:10px 12px;font-size:13.5px;line-height:1.7}

/* シフトの段階（作成中 → 承認待ち → 確定） */
.stage{display:flex;justify-content:space-between;align-items:center;
  padding:11px 13px;background:#fff;border:1px solid var(--line);border-radius:3px;
  margin-bottom:12px;font-size:13px;color:var(--sub)}
.offcount.over{color:var(--warn);font-weight:700}

/* ------------------------------------------------------------
   リアクション（印）2026-09-24
   押していないものは薄く、押したものははっきり出す。
   指で押す的は44pxを下回らないようにする（押し間違いを防ぐため）。
   ------------------------------------------------------------ */
.rbar{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.rbtn{display:inline-flex;align-items:center;gap:4px;
  min-height:32px;padding:5px 10px;border-radius:16px;
  background:var(--card);border:1px solid var(--line);
  font-size:15px;line-height:1;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.rbtn .rmark{font-size:15px}
.rbtn .rnum{font-size:12px;color:var(--sub);font-weight:600;
  font-variant-numeric:tabular-nums}
.rbtn.zero{opacity:.45}
.rbtn.on{background:var(--accent-soft);border-color:var(--accent)}
.rbtn.on .rnum{color:var(--accent-d)}
.rbtn:active{transform:scale(.94)}
/* 押した人の名前は title で出す。狭い画面では出ないので、数だけで足りる作りにする。 */

/* ------------------------------------------------------------
   会話の見た目（個人メッセージの返信）2026-09-24
   自分の発言を右、相手を左に寄せる。
   ------------------------------------------------------------ */
.talk{display:flex;flex-direction:column;gap:12px;padding:14px}
.talk .turn{max-width:82%;display:flex;flex-direction:column;gap:3px}
.talk .turn.me{align-self:flex-end;align-items:flex-end}
.talk .turn.you{align-self:flex-start;align-items:flex-start}
.talk .who{font-size:11px;color:var(--sub);padding:0 2px}
.talk .say{padding:10px 13px;border-radius:14px;
  white-space:pre-wrap;word-break:break-word;font-size:14px;line-height:1.65}
.talk .turn.you .say{background:var(--bg);border:1px solid var(--line);
  border-bottom-left-radius:4px}
.talk .turn.me .say{background:var(--accent-soft);border:1px solid var(--accent-soft);
  border-bottom-right-radius:4px}
.talk .rbar{margin-top:2px}
.talk .turn.me .rbar{justify-content:flex-end}
/* チャットの中の印。発言のすぐ下に、小さく出す。 */
.bub .rbar{margin:4px 0 0}
.bub.me .rbar{justify-content:flex-end}
.rbtn.add{opacity:.3;padding:4px 8px;min-height:28px}
.rbtn.add .rmark{font-size:13px;color:var(--sub)}
.rbtn.add:active{opacity:.7}

/* ------------------------------------------------------------
   つながらなかったときの画面（2026-09-30）
   ログインの記録は消していないので、電波が戻れば「もう一度」で入れる。
   ------------------------------------------------------------ */
.offline{position:fixed;inset:0;z-index:200;background:var(--bg);
  display:flex;align-items:center;justify-content:center;padding:24px}
.offbox{width:100%;max-width:340px;text-align:center}
.offbox h2{font-size:18px;margin-bottom:10px;letter-spacing:.08em}
.offbox p{color:var(--sub);font-size:14px;margin-bottom:8px}
.offbox .offnote{font-size:12px;margin-bottom:20px}

/* ------------------------------------------------------------
   チャットの返信（2026-10-24）
   返信先は発言の上に小さく添える。押すと元の発言まで飛ぶ。
   ------------------------------------------------------------ */
.bub{position:relative}

/* 発言の上に出す、返信先の帯 */
.quote{display:block;width:100%;text-align:left;margin:0 0 5px;
  padding:5px 8px;border-radius:3px;border-left:2px solid var(--accent);
  background:rgba(0,0,0,.04);font-size:12px;line-height:1.45}
.bub.me .quote{background:rgba(255,255,255,.22);border-left-color:rgba(255,255,255,.65)}
.quote .qn{display:block;font-weight:600;opacity:.85}
.quote .qb{display:block;opacity:.75;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quote.dim{opacity:.55}
.quote:active{opacity:.6}

/* 飛んだ先を一瞬光らせる */
.bub.flash{animation:bubflash 1.2s ease-out}
@keyframes bubflash{
  0%{box-shadow:0 0 0 3px rgba(110,136,160,.55)}
  100%{box-shadow:0 0 0 3px rgba(110,136,160,0)}
}

/* 吹き出しの隅に出す「返信」 */
.replybtn{position:absolute;top:2px;right:6px;
  padding:2px 7px;font-size:11px;border-radius:10px;
  background:rgba(0,0,0,.06);color:var(--sub);opacity:0;transition:opacity .15s}
.bub.me .replybtn{right:auto;left:6px;background:rgba(255,255,255,.25);color:#fff}
.bub:hover .replybtn{opacity:1}
.replybtn:active{opacity:1}
/* 指で触る端末では、わずかに見えるようにしておく（hoverが無いため） */
@media (hover:none){ .replybtn{opacity:.45} }

/* 入力欄の上に出す、返信先の控え */
.replying{display:none;align-items:center;gap:8px;
  padding:8px 10px;border-bottom:1px solid var(--line);background:var(--bg)}
.replying.on{display:flex}
.replying .rq{flex:1;min-width:0;border-left:2px solid var(--accent);padding-left:8px}
.replying .rqname{font-size:11px;color:var(--sub)}
.replying .rqbody{font-size:13px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.replying .rqx{flex:none;width:28px;height:28px;border-radius:50%;
  background:rgba(0,0,0,.06);color:var(--sub);font-size:15px;line-height:1}

/* ============================================================
   次の来校のカード（lobby nailschool）

   受講生のホームのいちばん上に出す。
   来校条件を間違えるとその日の授業が成立しないので、
   このアプリでいちばん大きく、いちばん上に出す。
   条件の区分（素爪／ジェルあり／モデル同伴）で色を変える。
   ============================================================ */

.vcard{background:var(--card);box-shadow:var(--shadow);overflow:hidden;margin-bottom:6px}
.vtop{padding:16px 16px 14px}
.vlabel{font-size:12px;color:var(--sub);letter-spacing:.08em;margin:0 0 2px}
.vdate{font-size:23px;font-weight:600;letter-spacing:.02em;margin:0;line-height:1.3}
.vdate .vtoday{font-size:12px;font-weight:600;color:#fff;background:var(--accent);
  padding:3px 8px;margin-left:8px;vertical-align:middle;letter-spacing:.06em}
.vtime{font-size:13px;color:var(--sub);margin:5px 0 0}
.vtitle{font-size:16px;font-weight:600;margin:12px 0 0;line-height:1.5}
.vbody{font-size:13px;color:var(--sub);margin:5px 0 0;line-height:1.7}

/* 来校条件。ここがこの画面の主役 */
.vcond{padding:14px 16px 16px;border-top:1px solid var(--line)}
.vcond-label{font-size:11px;letter-spacing:.14em;margin:0 0 6px;font-weight:600}
/* 来校条件の文。折り返すときに1文字だけ次の行に落ちると読みにくいので、
   text-wrap:balance で行の長さをそろえる。
   句読点や括弧の前で切れないよう、word-break は既定のままにしておく。 */
.vcond-text{font-size:17px;font-weight:600;line-height:1.6;margin:0;
  letter-spacing:-.01em;text-wrap:balance}
.vcond-note{font-size:12px;margin:7px 0 0;line-height:1.7;opacity:.85}

.vcond[data-kind="素爪"]{background:var(--bare-soft)}
.vcond[data-kind="素爪"] .vcond-label,
.vcond[data-kind="素爪"] .vcond-text{color:var(--bare)}
.vcond[data-kind="ジェルあり"]{background:var(--gel-soft)}
.vcond[data-kind="ジェルあり"] .vcond-label,
.vcond[data-kind="ジェルあり"] .vcond-text{color:var(--gel)}
.vcond[data-kind="モデル同伴"]{background:var(--model-soft)}
.vcond[data-kind="モデル同伴"] .vcond-label,
.vcond[data-kind="モデル同伴"] .vcond-text{color:var(--model)}

.vmemo{font-size:12px;color:var(--sub);line-height:1.7;padding:12px 16px;
  border-top:1px solid var(--line)}

/* 全13回の一覧 */
.vrow{display:flex;align-items:flex-start;gap:11px;padding:13px 14px;width:100%;
  text-align:left;border-bottom:1px solid var(--line);background:none}
.vrow:last-child{border-bottom:none}
.vrow.done{opacity:.5}
.vrow.now{background:var(--accent-soft)}
.vno{flex:0 0 42px;font-size:11px;color:var(--sub);padding-top:2px;line-height:1.5}
.vno b{display:block;font-size:15px;color:var(--ink);font-weight:600}
.vmain{flex:1;min-width:0}
.vmain b{display:block;font-size:14px;font-weight:600;line-height:1.5}
.vmain small{display:block;font-size:12px;color:var(--sub);margin-top:3px;line-height:1.6}
.vtag{display:inline-block;font-size:11px;font-weight:600;padding:2px 7px;margin-top:5px;
  letter-spacing:.04em}
.vtag[data-kind="素爪"]{background:var(--bare-soft);color:var(--bare)}
.vtag[data-kind="ジェルあり"]{background:var(--gel-soft);color:var(--gel)}
.vtag[data-kind="モデル同伴"]{background:var(--model-soft);color:var(--model)}
.vtag.off{background:var(--alt);color:var(--sub)}

/* 行の2行目を折り返したいとき。
   ふだんの .row small は1行で切る決まり（一覧がそろって見えるため）だが、
   クラスの行のように、どうしても2行ぶんの説明が要るところで使う。 */
/* pre-line にするのは、改行をそのまま行の切れ目にするため（normal だと詰められる）*/
.row small.two{white-space:pre-line;overflow:visible;text-overflow:clip;line-height:1.65}

/* ------------------------------------------------------------
   予習動画
   ------------------------------------------------------------ */
.vprog{background:var(--card);border:1px solid var(--line);padding:14px 14px 12px;margin-bottom:12px}
.vprog-top{display:flex;align-items:baseline;justify-content:space-between}
.vprog-top b{font-size:20px;font-weight:600;letter-spacing:-.01em}
.vprog-top span{font-size:13px;color:var(--sub);font-weight:600}
.vbar{height:6px;background:var(--alt);margin:9px 0 8px}
.vbar i{display:block;height:100%;background:var(--accent);transition:width .25s}
.vprog-note{font-size:12px;color:var(--sub);line-height:1.7}

/* 第11回の課題の本数 */
.vtask{font-size:17px;font-weight:600;margin-top:9px;color:var(--accent-d)}

/* 動画の1行。左に見るボタン、右に見た印 */
.card.now{border-color:var(--accent)}
.vmovie{flex:0 0 46px;padding-top:2px}
.vplay{display:block;text-align:center;font-size:11px;font-weight:600;padding:7px 0;
  background:var(--accent);color:#fff;letter-spacing:.04em}
.vplay.off{background:var(--alt);color:var(--sub)}
.vseen{flex:0 0 auto;align-self:center;font-size:11px;font-weight:600;padding:7px 9px;
  border:1px solid var(--line);background:var(--card);color:var(--sub);white-space:nowrap}
.vseen.on{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.vseen-at{color:var(--ok) !important}

/* ------------------------------------------------------------
   出欠と進み具合
   ------------------------------------------------------------ */
/* 進み具合の一覧に出す、出欠の印 */
.ast{flex:0 0 auto;align-self:center;font-size:11px;font-weight:600;padding:4px 8px;
  color:var(--sub);background:var(--alt);white-space:nowrap}
.ast[data-state="出席"]{background:var(--ok-soft);color:var(--ok)}
.ast[data-state="振替済"]{background:var(--ok-soft);color:var(--ok)}
.ast[data-state="欠席"]{background:var(--warn-soft);color:var(--warn)}
.ast[data-state="振替申込"]{background:var(--accent-soft);color:var(--accent-d)}

/* 出欠を付ける行。名前の下に4つのボタンを並べる */
.arow{padding:12px 14px;border-bottom:1px solid var(--line)}
.arow:last-child{border-bottom:none}
.abtns{display:flex;gap:6px;margin-top:9px}
.abtn{flex:1;font-size:11px;font-weight:600;padding:9px 2px;line-height:1.3;
  border:1px solid var(--line);background:var(--card);color:var(--sub);white-space:pre-line}
.abtn.on{background:var(--accent);border-color:var(--accent);color:#fff}
.abtn:disabled{opacity:.45}

/* 出欠の画面のいちばん上に出す日付 */
.bigdate{font-size:23px;font-weight:600;letter-spacing:-.01em;margin:2px 0 4px}

/* みんなの進み具合の1行 */
.rrow{padding:13px 14px;border-bottom:1px solid var(--line)}
.rrow:last-child{border-bottom:none}
.rtop{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.rtop b{font-size:15px;font-weight:600}
.rtop span{font-size:11px;color:var(--sub)}
.rrow .vbar{margin:8px 0 6px}

/* 一覧の行の右はしに出す、別の画面へ行く小さなボタン */
.gobtn{flex:0 0 auto;align-self:center;font-size:11px;font-weight:600;padding:7px 10px;
  background:var(--alt);color:var(--ink);white-space:nowrap;cursor:pointer}

/* ------------------------------------------------------------
   予約
   ------------------------------------------------------------ */
.srow{display:flex;align-items:flex-start;gap:11px;padding:13px 14px;
  border-bottom:1px solid var(--line)}
.srow:last-child{border-bottom:none}
.srow.done{opacity:.5}
.srow.mine{background:var(--accent-soft)}
.sday{flex:0 0 52px;font-size:11px;color:var(--sub);padding-top:2px;line-height:1.5}
.sday b{display:block;font-size:15px;color:var(--ink);font-weight:600}
.sbtn{flex:0 0 auto;align-self:center;font-size:12px;font-weight:600;padding:9px 13px;
  border:1px solid var(--accent);background:var(--accent);color:#fff;white-space:nowrap}
.sbtn.on{background:var(--card);color:var(--accent-d)}
.sbtn:disabled{background:var(--alt);border-color:var(--line);color:var(--sub)}
.whynot{color:var(--warn) !important}

/* ------------------------------------------------------------
   提出と写真
   ------------------------------------------------------------ */
.prow{display:flex;align-items:flex-start;gap:11px;padding:13px 14px;
  border-bottom:1px solid var(--line)}
.prow:last-child{border-bottom:none}
.prow.done{opacity:.6}
.photo{flex:0 0 72px;width:72px;height:72px;object-fit:cover;background:var(--alt);
  display:block}
.photo.nophoto{opacity:.3}
.pbtns{display:flex;flex-direction:column;gap:6px;flex:0 0 auto}
.pcomment{margin-top:7px;padding:8px 10px;background:var(--ok-soft);font-size:12.5px;
  line-height:1.7;color:var(--ink)}
.pcomment span{display:block;font-size:10.5px;color:var(--ok);font-weight:600;
  letter-spacing:.04em;margin-bottom:2px}
.vmain small.two{white-space:pre-line;line-height:1.7}
.bigphoto{margin:4px 0 10px}
.bigphoto .photo{width:100%;height:auto;flex:none;max-height:50vh;object-fit:contain}

/* 画面いっぱいに大きく出す */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.9);
  display:flex;align-items:center;justify-content:center;padding:16px}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain}

/* ------------------------------------------------------------
   卒業実技試験
   ------------------------------------------------------------ */
.exam{background:var(--card);border:1px solid var(--line);padding:18px 16px;
  margin-bottom:12px;text-align:center}
.exam.pass{background:var(--ok-soft);border-color:var(--ok)}
.exam-label{font-size:12px;color:var(--sub);letter-spacing:.04em}
.exam-result{font-size:28px;font-weight:600;letter-spacing:.02em;margin:6px 0 2px}
.exam.pass .exam-result{color:var(--ok)}
.exam-score{font-size:13px;color:var(--sub)}

.erow{display:flex;align-items:center;gap:11px;padding:12px 14px;
  border-bottom:1px solid var(--line)}
.erow:last-child{border-bottom:none}
.epoint{flex:0 0 auto;font-size:14px;font-weight:600;white-space:nowrap}
.etotal{font-size:15px;font-weight:600;padding:10px 2px 4px;color:var(--accent-d)}

/* 月ごとの数字 */
.krow{display:flex;align-items:flex-start;gap:11px;padding:12px 14px;
  border-bottom:1px solid var(--line)}
.krow:last-child{border-bottom:none}
.kval{flex:0 0 auto;font-size:15px;font-weight:600;white-space:nowrap;padding-top:1px}
.kval.none{color:var(--sub);font-weight:400}
.knote{color:var(--warn) !important}

/* お知らせと通知 */
.nrow{display:flex;align-items:flex-start;gap:11px;padding:13px 14px;width:100%;
  text-align:left;border-bottom:1px solid var(--line);background:none}
.nrow:last-child{border-bottom:none}
.nrow.done{opacity:.6}
.nrow b{color:var(--ink)}
.prow2{display:flex;align-items:center;gap:11px;padding:13px 14px;
  border-bottom:1px solid var(--line)}
.prow2:last-child{border-bottom:none}
.prow2 input[type=checkbox]{width:22px;height:22px;flex:0 0 auto;accent-color:var(--accent)}