/* Friendly, high-clarity design system for My 探究ジャーナル. */
:root{--ink:#132b29;--muted:#63716c;--paper:#fffdf7;--sand:#f8f2e7;--lime:#f5c84b;--coral:#ef7057;--blue:#c9e7e0;--line:#d9ded5;--green:#197664;--green-dark:#103f38;--soft-green:#edf6ee;--type-display:29px;--type-heading:17px;--type-input:17px;--type-body:15px;--type-support:13px;--type-label:11px;--type-micro:10px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:40px}
body,body *{font-family:"Noto Sans JP",sans-serif!important}body{background:#fff;letter-spacing:.01em}.app-shell{max-width:1240px;box-shadow:none}.topbar{height:72px;padding:0 4%;border-bottom:2px solid var(--ink);gap:16px}.brand{font-size:17px;letter-spacing:.04em;margin-right:0}.brand-mark{display:inline-grid;place-items:center;width:25px;height:25px;border-radius:50%;color:var(--ink);background:var(--lime);font-size:16px;margin-right:4px}.header-steps{display:flex;gap:5px;list-style:none;margin:0;padding:0}.header-steps li{display:grid;place-items:center;min-width:32px;height:28px;border:1px solid #aebbb4;border-radius:4px;color:#71807a;font-size:11px}.header-steps li.active{background:var(--green-dark);border-color:var(--green-dark);color:#fff;font-weight:700}.student-identity{margin-left:auto;display:flex;gap:13px;align-items:center;font-size:12px;color:var(--muted)}.student-identity b{color:var(--ink)}.student-identity strong{padding-left:13px;border-left:1px solid var(--line);color:var(--ink)}
.student-layout{display:block;min-height:0}.journal-page{max-width:1180px;margin:auto;padding:40px 4.5% 58px}.lesson-header h2{font-size:29px;letter-spacing:.02em;line-height:1.35}.eyebrow{font-size:10px;letter-spacing:.13em;font-weight:700}.eyebrow.coral{color:#c24e3d}.due{background:#fff;border:1px solid #aebbb4;border-radius:6px;min-width:104px;padding:8px 12px;color:#41534d}.due strong{font-size:14px}.intro-card{background:#f6faf5;border:1px solid #b9d9bf;border-left:5px solid var(--green);border-radius:5px;padding:14px 17px;line-height:1.7;margin:20px 0 24px}.spark{color:var(--green);font-size:19px}.journal-page form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:34px;align-items:start}.form-section,.actions{grid-column:1/-1}.form-section{margin-top:22px}.question{padding:18px 0;border-top:1px solid var(--line)}.question legend{font-size:14px;line-height:1.55}.question legend span{font-size:10px;background:var(--green-dark);border-radius:3px;padding:4px 6px}.question em{font-size:9px;background:#ffe5df;color:#ad4637;border-radius:3px;font-weight:700}.help{font-size:11px;margin:5px 0 8px}.question textarea{min-height:76px;border:1px solid #bfcac0;border-radius:5px;padding:10px 12px;font-size:12px;line-height:1.6;background:#fff;transition:border-color .15s,box-shadow .15s}.question textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px #1976641a}.input-foot{margin-top:4px}.char-count{font-size:10px}.actions{border-top:1px solid var(--line);padding-top:20px}.primary,.secondary{border-radius:5px;padding:11px 15px;font-size:12px}.primary{background:var(--green);border:1px solid var(--green);box-shadow:none}.primary:hover{transform:translateY(-1px);box-shadow:0 2px 0 var(--green-dark)}.secondary{background:#fff;border:1px solid #b8c4b9}
.form-section{padding:9px 13px;background:#f3f7f2;border-left:4px solid var(--lime);border-radius:0 5px 5px 0}.section-label{margin:0;font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--green-dark)}.section-note{margin:3px 0 0;font-size:11px;color:var(--muted)}.short-answer{width:100%;border:1px solid #bfcac0;border-radius:5px;background:#fff;padding:9px 11px;font:12px "Noto Sans JP",sans-serif;outline-color:var(--green)}
dialog{border:2px solid var(--ink);border-radius:8px;padding:38px;background:var(--paper)}blockquote{background:#fff3d2;border-left:5px solid var(--lime);border-radius:4px;font-size:16px}.celebrate{color:var(--green)}.teacher-wrap{max-width:1140px;padding-top:60px}.teacher-head h1{font-size:34px}.stat-row{gap:16px;margin:38px 0}.stat-row article{border:2px solid var(--ink);border-radius:7px;padding:22px;background:#fff8e9;box-shadow:3px 3px 0 var(--ink)}.stat-row article:nth-child(2){background:#eaf5ee}.stat-row article:nth-child(3){background:#fff0e9}.stat-row strong{font-size:34px}.class-board{border:2px solid var(--ink);border-radius:8px}.board-top{padding:23px 25px;background:#fffefa;border-bottom:2px solid var(--ink)}.board-top h2{font-size:19px}.filters{border:1px solid #ddd8cf;background:#eeece5}.filter{font-weight:700}.student-row{padding:16px 24px;border-bottom:1px solid #dde4dc}.student-row:hover{background:#f6faf5}.student-avatar{background:var(--lime);border:1px solid var(--ink);font-weight:700}.status{font-weight:700;padding:5px 9px}.submitted{background:#dff0d6;color:#285d38}.draft{background:#fff1c7;color:#755600}.not-started{background:#e9ece7;color:#69736e}.row-action{border:1px solid var(--ink);background:#fffefa;border-radius:4px;font-weight:700}.row-action:hover{background:var(--lime)}
/* Screen spacing: title → guidance → section → questions. */
.lesson-header{margin-bottom:var(--space-5)}.intro-card{margin:0 0 var(--space-7)}.journal-page form{row-gap:0}.form-section{margin:var(--space-6) 0 var(--space-2);padding:var(--space-3) var(--space-4)}.journal-page form>.form-section:first-child{margin-top:0}.form-section+.question{margin-top:var(--space-2)}.question{padding:var(--space-4) 0}.question legend{margin-bottom:var(--space-2)}.help{margin:0 0 var(--space-2)}.question textarea{margin-top:var(--space-1)}
/* Screen typography: the student's writing is the visual priority. */
body{font-size:var(--type-body);line-height:1.6}.lesson-header h2{font-size:var(--type-display)}.student-identity{font-size:var(--type-support)}.header-steps li,.eyebrow,.section-label{font-size:var(--type-label)}.intro-card{font-size:var(--type-body)}.question legend{font-size:var(--type-heading);font-weight:700}.help,.section-note{font-size:var(--type-support);line-height:1.55}.question textarea{font-size:var(--type-input);line-height:1.65;min-height:104px}.short-answer{font-size:var(--type-input);line-height:1.45;padding:13px 14px}.question em{font-size:var(--type-micro)}.primary,.secondary{font-size:var(--type-support)}
/* Guidance cards use one visual language, whether they introduce the page or a step. */
.intro-card,.form-section{background:#f6faf5;border:1px solid #b9d9bf;border-left:5px solid var(--green);border-radius:5px;min-height:140px;padding:14px 17px}.form-section{margin:var(--space-6) 0 0;display:flex;flex-direction:column;justify-content:center}.section-label{font-size:var(--type-body);line-height:1.7}.section-note{font-size:var(--type-body);line-height:1.7;margin:0}.form-section+.question{margin-top:0;padding-top:var(--space-5)}
.intro-card{min-height:0;margin:0 0 var(--space-7);padding:14px 17px}.form-section{min-height:0;margin:var(--space-6) 0 0;padding:0 0 0 var(--space-3);background:transparent;border:0;border-left:3px solid var(--green);border-radius:0;display:block}.section-label{font-size:var(--type-heading);line-height:1.45}.section-note{margin:2px 0 0;font-size:var(--type-support);line-height:1.55}.form-section+.question{padding-top:var(--space-4)}
@media print{@page{size:A4 portrait;margin:8mm}body{background:#fff}.app-shell{width:100%;max-width:none}.topbar{height:10mm;padding:0 1mm;border-bottom:1px solid var(--ink)}.brand{font-size:11px}.brand-mark{width:16px;height:16px;font-size:10px}.header-steps{gap:3px}.header-steps li{min-width:20px;height:17px;font-size:7px}.student-identity{font-size:8px;gap:6px}.student-identity strong{padding-left:6px}.journal-page{max-width:none;padding:3mm 0 0}.lesson-header{margin-bottom:2mm}.lesson-header h2{font-size:16px}.eyebrow{font-size:7px}.intro-card{margin:2.5mm 0;padding:6px 8px;font-size:8px;line-height:1.4;min-height:auto}.spark{font-size:12px}.journal-page form{column-gap:5mm}.form-section{margin-top:2mm;padding:3px 6px;min-height:auto}.form-section+.question{margin-top:0;padding-top:1.8mm}.section-label{font-size:7px}.section-note,.help{font-size:7px}.question{padding:1.8mm 0}.question legend{font-size:8px;line-height:1.3}.question legend span{font-size:6px;padding:2px 3px}.question em{font-size:6px}.question textarea{min-height:10mm;padding:3px 5px;font-size:7px;line-height:1.3;border:1px solid #bfcac0}.short-answer{padding:3px 5px;font-size:7px}.input-foot{display:none}.actions{display:none}.teacher-wrap,dialog{display:none!important}}
@media(max-width:760px){.topbar{height:auto;min-height:66px;padding:10px 18px;flex-wrap:wrap;gap:8px}.brand{font-size:15px}.header-steps{order:3;width:100%}.student-identity{font-size:11px}.journal-page{padding:30px 22px 50px}.lesson-header h2{font-size:25px}.journal-page form{display:block}.teacher-head h1{font-size:27px}.stat-row article{box-shadow:2px 2px 0 var(--ink)}}
.actions .primary,.actions .secondary{width:120px;min-height:42px;padding:9px 12px}
.lesson-header{align-items:center}.teacher-comment-trigger{align-self:flex-end;border:1px solid var(--green);border-radius:5px;background:#fff;color:var(--green-dark);min-height:38px;padding:8px 12px;font-size:var(--type-support);font-weight:700;cursor:pointer}.teacher-comment-trigger:hover{background:var(--soft-green)}#teacher-feedback-dialog{width:min(680px,calc(100vw - 48px));max-width:none;min-height:380px;padding:48px}#teacher-feedback-dialog h2{margin:0 0 var(--space-5);font-size:20px}#teacher-feedback-text{margin:0;font-size:22px;line-height:1.8;white-space:pre-wrap}
/* Screen spacing is intentionally defined in one place: 8px base unit. */
@media screen{.lesson-header{margin:0 0 16px}.intro-card{margin:0 0 32px;padding:16px;min-height:0}.journal-page form{row-gap:0}.form-section{margin:32px 0 24px;padding:0;background:transparent;border:0;min-height:0}.section-label{margin:0;font-size:17px;line-height:1.45}.section-note{margin:4px 0 0;font-size:13px;line-height:1.55}.form-section+.question{margin-top:0;padding-top:16px}.question{padding:16px 0}.question legend{margin:0 0 8px}.help{margin:0 0 8px}.question textarea{margin-top:0}}
.header-steps a{display:grid;place-items:center;min-width:32px;height:28px;color:inherit;text-decoration:none}.header-steps li{padding:0}.header-steps li.active a{color:#fff}
.teacher-topbar{height:auto;min-height:72px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}.teacher-topbar .brand{margin-right:auto}.teacher-controls{display:flex;align-items:end;gap:12px}.teacher-controls label{display:grid;gap:3px;color:var(--muted);font-size:10px;font-weight:800}.teacher-controls select{height:30px;min-width:46px;border:1px solid #bfcac0;border-radius:4px;background:#fff;color:var(--ink);font:700 13px "Noto Sans JP",sans-serif}.number-picker{display:flex;align-items:center;height:30px;border:1px solid #bfcac0;border-radius:4px;overflow:hidden;background:#fff}.number-picker button{width:25px;height:100%;border:0;background:#f3f7f2;color:var(--green-dark);font-size:20px;cursor:pointer}.number-picker output{display:grid;place-items:center;min-width:34px;color:var(--ink);font:700 13px "Noto Sans JP",sans-serif}.teacher-journal-page{padding-top:32px}.teacher-record{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:34px}.teacher-record-section{display:contents}.teacher-record-section .form-section{grid-column:1/-1}.teacher-answer{margin:0;padding:16px 0;border-top:1px solid var(--line)}.teacher-answer h3{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:17px;line-height:1.45}.teacher-answer h3 span{display:grid;place-items:center;min-width:36px;height:36px;border-radius:4px;background:var(--green-dark);color:#fff;font-size:11px}.teacher-answer p{min-height:82px;margin:0;padding:14px;border:1px solid #bfcac0;border-radius:5px;background:#fff;font-size:17px;line-height:1.65}.student-float-nav{position:fixed;top:50%;z-index:5;display:grid;place-items:center;width:46px;height:52px;padding:0;border:1px solid #19766455;border-radius:6px;background:#ffffffa8;color:var(--green-dark);font:700 26px/1 "Noto Sans JP",sans-serif;cursor:pointer;box-shadow:0 2px 8px #132b2914;backdrop-filter:blur(3px)}.student-float-nav--previous{left:16px}.student-float-nav--next{right:16px}.student-float-nav span{display:none}.student-float-nav:hover{background:#edf6eee0}#teacher-comment-dialog{width:min(680px,calc(100vw - 48px));max-width:none;min-height:430px;padding:48px}#teacher-comment-dialog h2{margin:0 0 8px;font-size:20px}.comment-target{margin:0 0 22px;color:var(--muted);font-size:13px}#teacher-comment{width:100%;min-height:190px;padding:14px;border:1px solid #bfcac0;border-radius:5px;font-size:17px;line-height:1.65;resize:vertical}.comment-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.comment-actions .primary,.comment-actions .secondary{width:120px;min-height:42px}.comment-status{min-height:20px;margin:10px 0 0;color:var(--green);font-size:13px}
.teacher-lesson-steps{align-self:end}.teacher-lesson-steps button{display:grid;place-items:center;width:100%;height:100%;padding:0;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer}.teacher-lesson-steps li.active button{color:#fff}
.teacher-topbar .brand{margin-right:0}.teacher-controls{flex:1}.teacher-controls .teacher-lesson-steps{margin-right:auto}
@media(max-width:760px){.teacher-controls{width:100%;justify-content:space-between;gap:6px}.teacher-controls label{flex:1}.teacher-controls select{width:100%}.teacher-record{display:block}.student-float-nav{top:auto;bottom:18px}.student-float-nav span{display:none}.student-float-nav--previous{left:14px}.student-float-nav--next{right:14px}}
.login-page{min-height:100vh;background:#fff;color:var(--ink);display:grid;place-items:center}.login-shell{width:min(100%,560px);min-height:100vh;padding:44px 24px 36px;display:flex;flex-direction:column;align-items:stretch}.login-brand{display:flex;align-items:center;justify-content:center;gap:8px;font-size:18px;font-weight:800;letter-spacing:.04em}.login-card{margin:64px 0 0;padding:32px;border:1px solid var(--line);border-top:5px solid var(--green);border-radius:7px;background:#fff}.login-card h1{margin:6px 0 8px;font-size:26px;line-height:1.4}.login-lead{margin:0;color:var(--muted);font-size:15px;line-height:1.7}.login-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:28px 0 12px}.login-fields label{display:grid;grid-template-columns:1fr auto;gap:4px;align-items:end;color:var(--muted);font-size:13px;font-weight:700}.login-fields input{grid-column:1/-1;width:100%;height:54px;border:1px solid #bfcac0;border-radius:5px;padding:8px;text-align:center;font:700 22px "Noto Sans JP",sans-serif;color:var(--ink);outline-color:var(--green)}.login-message{min-height:20px;margin:0 0 8px;color:#ad4637;font-size:12px}.login-submit{display:grid;place-items:center;width:100%;min-height:50px;text-decoration:none;font-size:15px}.teacher-login{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;margin-top:48px;min-height:50px;border:1px solid var(--ink);border-radius:5px;background:var(--lime);color:var(--ink);font-size:15px;font-weight:700;text-decoration:none}.teacher-login span{color:var(--ink)}
/* --- live同期版で追加した要素 --- */
.load-status{margin:8px 0 16px;padding:10px 14px;border-radius:5px;background:#f3f7f2;border:1px solid #b9d9bf;color:var(--green-dark);font-size:13px}
.empty-record{grid-column:1/-1;margin:8px 0;padding:20px;border:1px dashed #bfcac0;border-radius:6px;color:var(--muted);font-size:14px;text-align:center;background:#fbfbf8}
.unfilled{color:#9aa39d;font-weight:400}
.teacher-existing-comment h3 span{background:var(--coral)!important}
.teacher-existing-comment p{background:#fff0e9;border-color:#f0b7a6}
.teacher-key{height:30px;min-width:44px;border:1px solid #bfcac0;border-radius:4px;background:#fff;color:var(--ink);font:700 13px "Noto Sans JP",sans-serif;text-align:center;padding:0 6px}
.number-picker .number-input{width:42px;height:100%;border:0;text-align:center;font:700 13px "Noto Sans JP",sans-serif;background:#fff;color:var(--ink);outline:none}

/* ===== A4タテ 印刷（新レイアウト・生徒/先生 共通） 2026-09-01 ===== */
@media print{
  @page{size:A4 portrait;margin:12mm}
  html,body{background:#fff!important}
  .app-shell{max-width:none!important;width:100%!important;box-shadow:none!important;margin:0}
  /* ヘッダーは「誰の・どの回か」だけ残して圧縮 */
  .topbar,.teacher-topbar{height:auto!important;min-height:0!important;padding:0 0 4mm!important;margin:0 0 5mm!important;border-bottom:1.5px solid var(--ink)!important;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
  .brand{font-size:12pt!important}
  #session-steps,.header-steps,.teacher-controls,.student-float-nav{display:none!important}
  .student-identity{margin-left:auto!important;font-size:11pt!important;gap:10px!important}
  .student-identity strong{border-left:1px solid #999;padding-left:8px}
  /* 画面専用UI・案内は印刷しない */
  .actions,#load-status,.intro-card,.teacher-comment-trigger,#open-comment,dialog,.empty-record{display:none!important}
  /* セッション見出し */
  .lesson-header{margin:0 0 5mm!important}
  .lesson-header h2{font-size:16pt!important;line-height:1.35!important}
  .eyebrow{font-size:9pt!important}
  .journal-page{max-width:none!important;padding:0!important}
  /* A4タテは1カラム（横並びは窮屈なので縦積み） */
  .journal-page form,.teacher-record{display:block!important}
  .form-section{margin:5mm 0 1mm!important;padding:0 0 0 3mm!important;border-left:3px solid var(--green)!important;background:transparent!important;break-after:avoid;page-break-after:avoid}
  .section-label{font-size:11pt!important}
  .section-note,.help{font-size:8.5pt!important;color:#555!important}
  /* 設問＋回答は途中で改ページしない */
  .question,.teacher-answer{break-inside:avoid;page-break-inside:avoid;padding:2.5mm 0!important;border-top:1px solid #ccc!important;margin:0!important}
  .question legend,.teacher-answer h3{font-size:11pt!important;margin:0 0 1.5mm!important;font-weight:700}
  .question legend span,.teacher-answer h3 span{background:#333!important;color:#fff!important;padding:1px 5px!important;font-size:8pt!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .question em{display:none!important}   /* 「必須」バッジは紙では不要 */
  /* 回答欄：中身を全部見せる（切らない） */
  .question textarea,.short-answer,.teacher-answer p{
    width:100%!important;box-sizing:border-box;border:1px solid #bbb!important;border-radius:3px!important;
    padding:2mm!important;font-size:10.5pt!important;line-height:1.6!important;background:#fff!important;color:#000!important;
    min-height:0!important;overflow:visible!important;resize:none!important;white-space:pre-wrap;word-break:break-word
  }
  .teacher-answer .unfilled{color:#999!important}
  .teacher-existing-comment p{background:#fff!important;border-color:#e0b4a0!important}
}