/* =========================================================================
   管理アプリの見た目：角丸をやめて、影で面を浮かせる
   -------------------------------------------------------------------------
   のびしろ測定会のLP・成績表と同じ考え方にそろえる。
     ・面（カード・パネル・入力・ボタン・タブ…）は角丸なし
     ・丸いのは「印」だけ＝円（アバター・点・スピナー）とピル（バッジ・ラベル）
     ・角丸をなくしたぶん、影で板を立たせる

   app.css には border-radius が575か所あり、うち大半が直書き。
   1つずつ直すと抜けが出るので、ここでまとめて四角にし、
   丸のまま残すものだけを拾い直している（下の2つの並びは
   app.css と index.html から機械的に集めたもの）。

   ★このファイルは app.css のあとに読むこと（後勝ちで効かせている）
   ========================================================================= */

/* 角の丸みは1か所で決める。ここを変えると全体の印象が変わる。
   0＝完全な直角、4px＝角を落としつつ、まだ「板」に見えるくらい */
:root { --sq-r: 4px; }

/* 面はこの丸みにそろえる。直書き（!important でない指定）も含めて上書きする */
*, *::before, *::after { border-radius: var(--sq-r) !important; }

/* ここから下は「丸のまま残すもの」 */

/* 円（アバター・状態の点・スピナー・丸い印） */
.accent-swatch,
.sb-store-row .sr-dot,
.lesson-stu-photo,
.lesson-stu-photo-init,
#demo-switch-overlay .dso-spin,
.nt-swatch,
.nt-img-h,
.nt-img-del,
.nt-dw-sw,
.nt-dw-cursor,
.ofn-home .ic-wrap,
#owner-footer-nav.ofn-editing .ofn-item::after,
.ms-circle,
.tl-dot,
.n-dot,
.cw-avatar,
.ph-kid-avatar,
.prx-hero::after,
.prx-trophy::after,
.browser-dot,
.appdemo-spinner,
.stu-cdot,
.cls-dot,
/* 一斉送信の添付画像を外す × （印なので丸）2026-09-23 */
.bc-img-x,
/* 「ひとつだけ」の見本の丸。四角にすると「複数」の見本と区別が付かなくなる（2026-09-16） */
.tf-pv-mk.is-r,
.pf-slider::before,
.guide-search-clear,
.guide-situation-step-num,
.knt-lv-dot,
.rg-chip,
.sc-guide-num,
.sc-guide-list li::before,
.knt-level-badge,
.knt-item-seal,
.knt-cel-badge,
.knt-ed-color,
.knt-color-grid button,
.op-ms-node,
.sch-notif-dot,
.stu-dot,
.stu-leg-dot,
.cal-cav,
.lm-empty-ic,
.sh-os-arow .dot,
.sh-badge,
.sh-chip .dot,
.sh-coach-pill .av,
.sh-dot-on,
.sh-dot-off,
.notif-bell-badge,
.notif-dot,
.msg-status-dot,
.thread-newdot,
.svc-dot,
/* 下に引っ張ったときの印（丸い札）。面ではなく「印」なので丸のまま */
#ptr .ptr-in,
/* .fb-spinner は廃止（読み込み中の画面は index.html の <head> に直接書いた・2026-09-12） */
.adv-rank-crest,
.adv-badge-circle,
.todo-check-box,
.pgg-ul li::before,
.pgg-dot,
.albx-num,
.pmx-hero::before,
.pmx-hero::after,
.pmx-crown,
.plxp-check,
.plan-badge-name .plan-badge-dot,
.plx-opt-plus,
.plx-opt2-check,
.gv-steps li::before,
.dw-remove,
.dw-feat-av
{ border-radius: 50% !important; }

/* スライダーのつまみ（円）
   ベンダー固有の擬似要素は、並びに混ぜるとルールごと捨てられるので分ける */
.sim-slider::-webkit-slider-thumb { border-radius: 50% !important; }
.sim-slider::-moz-range-thumb { border-radius: 50% !important; }


/* ピル（バッジ・ラベル・トグル）。**進捗バーは四角**にするので、ここには入れない */
.sb-plan-badge,
.nav-item .nbadge,
.plan-banner-btn,
.coach-badge,
#demo-switcher,
#demo-switcher .ds-btn,
#demo-stage .dst-phone::before,
.pmenu-grip,
.pmenu-item .pmenu-badge,
.nt-share,
.pfn-badge,
.kpi-badge,
.pill,
.thread-unread,
.cw-count,
.prsvp-btn,
.prx-kidchip,
.prx-cat-dot,
.prx-hrow-badge,
.prx-vid,
.prx-lv-badge,
.prx-best,
.pa-lock-badge,
.appdemo-badge,
.sim-slider,
.cap-toggle,
.pf-slider,
.sc-test-badge,
.sc-game-saved,
.sc-guide-unit,
.sc-hist-badge,
.cal-mark,
.cal-pop-chip,
.cal-pop-cnt,
.knt-lv-complete-badge,
.knt-lv-medal-badge,
.knt-lv-trophy-badge,
.knt-cat-trophy-badge,
.knt-imp-all,
.knt-ed-cat-head .del,
.op-card-status-pill,
.equip-priority,
.stu-leg-btn,
.tl-card-storechip,
.tl-coach-chip,
.tl-sec-edit,
.tl-ed-addsub,
.tl-tpl-badge,
.lm-card-dot,
.lm-card-min,
.tl-ed-coach-btn,
.sh-os-badge,
.ff-rule-st,
.site-badge,
.sh-status-pill,
.sh-shortage-flag,
.sh-cs-dleft,
.sh-cs-submitted,
.sh-cs-qbtn,
.sh-cs-daygroup .dq,
.sh-chip,
.sh-coach-pill,
.sh-count,
.sh-cchip,
.sh-help-badge,
.sh-role-pill,
.notif-tag,
.notif-new,
.msg-tag,
.msg-status-tag,
.msg-type-line,
.bc-pill,
.bc-ev-sent,
.guide-tag,        /* 関連ワードの札（ピル） */
.guide-step-n,     /* 手順の番号（丸） */
.bc-hist-tag,
.growth-badge,
.login-role-badge,
.svc-badge,
.svc-dot.is-active,
.role-badge,
.adv-path-bg,
.bfc-badge,
.todo-n,
.todo-badge,
.pgg-skip,
.pgg-badge,
.pgg-item-tag,
.pgg-nav,
.pgg-dot.is-active,
.albx-pill,
.pmx-badge,
.plxp-rec,
.plxp-cur,
.plx-price-pill,
.plx-opt-badge,
.pb2-tag,
.pb2-up,
.plx-prem-badge,
.bill-status,
.bill-prem-on,
.bill-prem-off,
.bill-hist-st,
.msg-like,
.ch-note-tag,
/* 過去のお知らせの札（2026-09-17）。ピルなので丸のまま残す */
.nh-tag,
.guide-role-tag,
.sw-num,
.sw-chip,
.nh-new,
.ch-tag,
.dw-handle,
.dw-launch-badge,
.nbb-eyebrow,
.nbb-cta,
.dw-feat-badge,
.psx-badge,
.psx-chip,
.psx-bang,
.psx-chg,
.tl-chg,
.am-tag,
.am-au-btn,
.bs-say,
.ev-kind,
.sch-ev-kind
{ border-radius: 999px !important; }


/* =========================================================================
   角丸をなくしたぶん、影で面を立たせる
   -------------------------------------------------------------------------
   カード類はどれも box-shadow に --shadow-sm / --shadow / --shadow-md を
   使っているので、トークンを差し替えるだけで全体に効く。
   色は青みを抜いてスレート系に寄せた（青い影は滲んで見えるため）。
   ========================================================================= */
:root, [data-theme="light"] {
  /* ふだんの面。浮かせすぎず、輪郭は影で示す */
  --shadow-sm: 0 10px 24px -16px rgba(15,23,42,.30), 0 2px 6px -3px rgba(15,23,42,.07);
  /* 手前に来る面（ホバー・選択中） */
  --shadow:    0 20px 44px -22px rgba(15,23,42,.34), 0 5px 14px -8px rgba(15,23,42,.10);
  /* いちばん手前（モーダル・ポップ） */
  --shadow-md: 0 34px 70px -26px rgba(15,23,42,.40), 0 10px 24px -14px rgba(15,23,42,.14);
}
[data-theme="dark"] {
  --shadow-sm: 0 12px 28px -18px rgba(0,0,0,.80), 0 2px 8px -4px rgba(0,0,0,.55);
  --shadow:    0 24px 52px -24px rgba(0,0,0,.88), 0 7px 18px -10px rgba(0,0,0,.65);
  --shadow-md: 0 38px 78px -28px rgba(0,0,0,.92), 0 12px 28px -16px rgba(0,0,0,.75);
}

/* カード（.card / .kpi / .panel …）は、トークンではなく「ガラス面」の指定で
   影が付いている（app.css の .app .card ほか → --glass-shadow）。
   浮かせるにはこちらを差し替える必要がある。
   ライトは青みを抜き、面が地から持ち上がって見えるところまで濃くする。 */
:root, [data-theme="light"] {
  --glass-shadow:
    0 18px 40px -20px rgba(15,23,42,.30),
    0 4px 10px -5px rgba(15,23,42,.10),
    inset 0 1px 0 rgba(255,255,255,.75);
}
[data-theme="dark"] {
  --glass-shadow:
    0 22px 50px -22px rgba(0,0,0,.85),
    0 6px 16px -8px rgba(0,0,0,.60),
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* 手前に来たとき（ホバー）は、もう一段持ち上げる */
.app .card:hover, .app .kpi:hover, .app .panel:hover {
  box-shadow: var(--shadow);
}

/* 進捗バー・ゲージのたぐいは四角のまま（上の `*` の指定に任せる）。
   ピルから外したもの：
   #demo-trial-bar .dtb-btn, .prog-wrap, .prog-bar, .pr-cat-bar, .pr-cat-fill, .sim-bep-track, .sim-bep-fill, .op-ms-overall-bar, .op-ms-overall-fill, .op-row-prog-bar, .op-row-prog-fill, .sh-os-bar, .sh-cs-prog, .sh-cs-prog > i, .sh-progress, .sh-progress > i, .bc-read-bar, .bc-read-bar > i, .adv-path-fill, .adv-quest-bar-bg, .adv-quest-bar-fill, .plx-opt2-pricebar, .cls-stu-summary-bar, .cls-stu-summary-fill, .cls-stu-bar, .cls-stu-bar-fill, .dw-feat-bar-track, .dw-feat-bar-fill
   ＝ 面と同じで、角を立てたほうが締まって見えるため。 */

/* カードの枠線はやめて、影だけで面を示す（線と影の二重掛けをしない）。
   .app 配下のガラス面だけが対象。入力・ボタンの枠線はそのまま残す。 */
.app .card, .app .card-sm, .app .kpi, .app .panel {
  border: none;
}

/* デモのスマホ端末モックアップは「物」なので、角は丸いまま。
   ここを四角にすると端末に見えなくなる（枠・ノッチ）。
   ⚠ 画面そのもの（中の iframe）は四角でよい。枠が overflow:hidden で丸く切る。 */
#demo-stage .dst-phone { border-radius: 48px !important; }

/* 入口（ログイン前）の機能紹介に出す端末モックアップも同じ。
   四角にすると「板に貼った画像」に見えて、端末に見えなくなる。
   下は切らずに伸ばしている作りなので、上の2つの角だけ丸める */
.svc-phone { border-radius: 26px 26px 0 0 !important; }

/* =========================================================================
   保護者のフッターメニュー（左＝成長記録／中央＝ホーム／右＝アルバム）
   -------------------------------------------------------------------------
   これまでは非表示（ハンバーガーのメニューだけ）だった。
   スマホで見るものなので、下に固定した3つのメニューにする。
   ・中央のホームは、教室からのお知らせとメッセージが載る画面
   ・左右は教室が表示ON/OFFを選べる。両方OFFならメニューごと出さない
     （body.parent-nav-off。ホームだけの1画面になる）
   ========================================================================= */
body.role-parent #parent-footer-nav {
  display: flex !important;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  align-items: stretch; gap: 0;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -10px 30px -18px rgba(15,23,42,.35);
}
[data-theme="dark"] body.role-parent #parent-footer-nav {
  box-shadow: 0 -12px 32px -18px rgba(0,0,0,.8);
}
/* 左右が両方とも非表示のときは、メニュー自体を出さない */
body.role-parent.parent-nav-off #parent-footer-nav { display: none !important; }
/* メニューの高さぶん、中身の下に余白を作る（最後の行が隠れないように） */
body.role-parent .content { padding-bottom: 92px; }
body.role-parent.parent-nav-off .content { padding-bottom: 40px; }
/* 中央のホームは、少しだけ主役に見せる */
body.role-parent #parent-footer-nav .pfn-home.active { color: var(--primary); }

/* =========================================================================
   生徒名簿：カードの右上を斜めに欠けさせる
   -------------------------------------------------------------------------
   角を落とした面にひと癖つけて、名簿だけ表情を持たせる。

   ■ 枠線を斜めの辺にも通すために2枚重ねにしている
     clip-path で切ると、border は斜めの辺だけ消えてしまう（切り口は「素の断面」）。
     そこで **カード自身を枠の色で塗り、内側に 1.5px 小さい面を重ねて**、
     はみ出したぶんが枠線に見えるようにする。斜めの辺にも同じ太さで線が通る。
   ■ 影は filter: drop-shadow
     clip-path は box-shadow も一緒に切ってしまうため。
     drop-shadow なら欠けた形のとおりに落ちる。
   ■ 右上にはクラスの色ドットとステータスが入るので、その列だけ少し内側へ寄せる
   ========================================================================= */
.stu-card {
  --notch: 16px;
  --bw: 1.5px;
  /* clip-path で切る形が優先されるので、角丸はここでは効かない。
     欠けのある右上以外も直角のままになるが、それがこのカードの表情 */
  position: relative; z-index: 0;
  border: none !important;
  background: var(--border);          /* ← これが枠線の色になる */
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
  box-shadow: none !important;
  filter: drop-shadow(0 8px 18px rgba(15,23,42,.14)) drop-shadow(0 1px 2px rgba(15,23,42,.08));
  transition: filter .18s, background .18s, transform .18s;
}
/* 内側の面。枠の太さぶん小さくして重ねる（中身より後ろ＝z-index:-1） */
.stu-card::before {
  content: ''; position: absolute; inset: var(--bw); z-index: -1;
  background: var(--bg);
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
}
[data-theme="dark"] .stu-card {
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.6)) drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.stu-card:hover {
  background: var(--primary);         /* 枠線の色が変わる */
  transform: translateY(-1px);
  filter: drop-shadow(0 14px 28px rgba(15,23,42,.20)) drop-shadow(0 2px 4px rgba(15,23,42,.10));
}
[data-theme="dark"] .stu-card:hover {
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.7)) drop-shadow(0 2px 5px rgba(0,0,0,.55));
}
/* 選択中：枠を主色に、中を淡い主色に */
.stu-card.selected { background: var(--primary); }
.stu-card.selected::before { background: var(--primary-light); }
/* 欠けの下に潜り込まないよう、右上の列を少しだけ内側へ */
.stu-card .stu-card-rt { padding-top: 4px; padding-right: 2px; }

/* =========================================================================
   保護者連絡：対応状況のワンタップ2ボタン
   -------------------------------------------------------------------------
   何もしていなければ「未対応」なのは当たり前なので、選択肢には置かない。
   押されているほうをもう一度押すと未対応に戻る（取り消し）。
   ========================================================================= */
.thread-status-btns { display: inline-flex; gap: 6px; }
.thread-status-btns .tsb {
  font: inherit; font-size: 12px; font-weight: 800; cursor: pointer;
  padding: 7px 14px; white-space: nowrap;
  color: var(--text-2); background: var(--surface);
  border: 1px solid var(--border);
  transition: background .14s, color .14s, border-color .14s;
}
.thread-status-btns .tsb:hover { border-color: var(--primary); color: var(--primary); }
/* 対応中＝進行中の色 */
.thread-status-btns .tsb.on {
  color: #fff; background: var(--warning); border-color: var(--warning);
}
/* 対応済み＝片付いた色 */
.thread-status-btns .tsb-done.on {
  background: var(--success); border-color: var(--success);
}
@media (max-width: 520px) {
  .thread-status-btns .tsb { padding: 7px 10px; font-size: 11.5px; }
}

/* 切り替えタブは丸めない（2026-09-29・ユーザー指示「切り替えタブ、丸っこいところ全部角丸かなり抑えてシャープな印象に」）。
   拠点タブ（.site-tab）・2つくっつけた切り替え（.nb-seg）・店舗の切り替え（.store-tab）・連絡のタブ（.comms-tab）・
   送信先の札（.bc-mode）は、上の「丸のまま残すもの」から外して、面と同じ --sq-r（4px）にした。
   ⚠ .nb-seg の中のボタンは直線にする（外枠が overflow:hidden で角を切る。中まで丸いと継ぎ目にくぼみが出る） */
.nb-seg .nb-seg-btn { border-radius: 0 !important; }