*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{--hour:60px;--head:42px}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif;color:#1e293b;background:#f7f8fa;overflow:hidden}
button,input,textarea,select{font:inherit}button{cursor:pointer;touch-action:manipulation;border:1px solid #cbd5e1;border-radius:8px;background:#fff;padding:8px 11px}
.login{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#475569dd;z-index:1000}.login-card{width:min(380px,90vw);background:#fff;border-radius:18px;padding:30px;text-align:center}.login-card button{display:block;width:100%;margin-top:10px}
.app{display:flex;height:100dvh}aside{width:230px;background:#fff;border-right:1px solid #e2e8f0;padding:15px;display:flex;flex-direction:column;gap:8px;z-index:100}aside button{text-align:left}main{flex:1;min-width:0;display:flex;flex-direction:column}
header{height:55px;background:#fff;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;padding:8px;gap:8px}.view{display:none;flex:1;overflow:auto}.view.active{display:block}
.week-grid{display:flex;min-width:800px;min-height:942px;background:#fff}.time-col{width:52px;flex:none}.time-head,.day-head{height:var(--head);position:sticky;top:0;background:#fff;z-index:30;border-bottom:1px solid #ddd;text-align:center;padding:10px 2px;font-size:11px;font-weight:700}.time-slot{height:var(--hour);border-bottom:1px solid #eef2f7;text-align:center;font-size:10px;color:#64748b;padding-top:4px}
.day-col{position:relative;flex:1;min-width:0;border-left:1px solid #e2e8f0;background:repeating-linear-gradient(to bottom,transparent 0,transparent 59px,#eef2f7 60px);touch-action:pan-x pan-y}
.card{position:absolute;left:4px;right:4px;border-radius:9px;border:1px solid #bbb;padding:6px;overflow:hidden;font-size:11px;font-weight:700;white-space:normal;box-shadow:0 1px 4px #0002;user-select:none;-webkit-user-select:none;touch-action:none;z-index:10}
.schedule-card{background:#fff;color:#2563eb;border:1px solid #93c5fd}.schedule-time{font-size:9px;margin-bottom:2px;color:#2563eb}
.task-card{min-height:42px}.task-card.selected{outline:2px solid #475569;outline-offset:1px;z-index:25}
.resize-handle{position:absolute;left:20%;right:20%;bottom:0;height:14px;cursor:ns-resize;touch-action:none}.resize-handle:after{content:"";position:absolute;left:25%;right:25%;bottom:4px;height:3px;border-radius:3px;background:#47556988}
.yellow{background:#fff3a6}.pink{background:#fbd4e5}.blue{background:#ccecff}.green{background:#cdf5d8}.purple{background:#e9ddff}.white{background:#fff;color:#2563eb;border-color:#93c5fd}
.now{position:absolute;left:0;right:0;height:2px;background:#ef4444;z-index:20;pointer-events:none}.now:before{content:"";position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:#ef4444}
#inbox{padding:18px}.inbox-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}.inbox-card{min-height:105px;border-radius:10px;padding:9px;border:1px solid #bbb}.mini{float:right;font-size:10px;padding:3px 6px;margin-left:3px}
.view#month.active{display:grid;grid-template-columns:repeat(7,minmax(100px,1fr));min-width:720px;background:#ddd;gap:1px}.month-head,.month-cell{background:#fff;padding:6px;min-height:38px}.month-cell{min-height:110px}.month-item{font-size:10px;border-radius:4px;padding:3px;margin-top:3px}.month-item.white{background:#fff;color:#2563eb;border:0}
.placeholder{margin:40px auto;max-width:500px;text-align:center;background:#fff;border:2px dashed #ccc;border-radius:15px;padding:40px}
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:#0f172a88;z-index:1200;padding:15px}.modal.open{display:flex}.modal-card{background:#fff;border-radius:15px;width:min(440px,100%);max-height:92dvh;overflow:auto;padding:18px}.modal-card label{display:block;font-size:12px;font-weight:700;margin:10px 0}.modal-card textarea,.modal-card select,.modal-card input{width:100%;padding:8px;margin-top:4px}#schedule-times{display:grid;grid-template-columns:1fr 1fr;gap:8px}#colors{display:flex;gap:6px;flex-wrap:wrap}#colors button.selected{outline:3px solid #334155}#help,#task-position-note{font-size:11px;color:#64748b}.check{display:flex!important;gap:7px;align-items:center}.check input{width:auto!important}.actions{display:flex;justify-content:space-between;gap:8px;margin-top:16px}.actions span{display:flex;gap:5px;flex-wrap:wrap}#delete{color:#dc2626}
@media(max-width:760px){aside{position:fixed;inset:0 auto 0 0;transform:translateX(-105%);transition:.2s;box-shadow:5px 0 20px #0003}aside.open{transform:translateX(0)}.week-grid{min-width:760px}.modal{align-items:flex-end;padding:0}.modal-card{border-radius:16px 16px 0 0}.resize-handle{height:20px;left:10%;right:10%}}

.schedule-card{touch-action:none}.schedule-card.selected{outline:2px solid #2563eb;outline-offset:1px;z-index:26}
.schedule-resize{position:absolute;left:8%;right:8%;height:14px;z-index:3;touch-action:none}.schedule-resize.top{top:0;cursor:ns-resize}.schedule-resize.bottom{bottom:0;cursor:ns-resize}
.schedule-resize:after{content:"";position:absolute;left:30%;right:30%;height:3px;border-radius:3px;background:#2563eb99}.schedule-resize.top:after{top:3px}.schedule-resize.bottom:after{bottom:3px}
@media(max-width:760px){.schedule-resize{height:20px;left:4%;right:4%}}

/* Ver 3.4.1 — iPhone/Safari interaction fixes */
.drawer-backdrop{display:none}
@media(max-width:760px){
 body.drawer-open .drawer-backdrop{display:block;position:fixed;inset:0;background:#0f172a66;z-index:90}
 body.drawer-open aside{transform:translateX(0)}
 .modal{align-items:flex-end;padding:0;overflow:hidden}
 .modal-card{width:100%;max-height:92dvh;display:flex;flex-direction:column;padding:18px 18px max(18px,env(safe-area-inset-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch}
 .modal-card .actions{position:sticky;bottom:calc(-1 * max(18px,env(safe-area-inset-bottom)));background:#fff;padding:12px 0 max(10px,env(safe-area-inset-bottom));margin-top:16px;border-top:1px solid #e2e8f0;z-index:10}
 .modal-card button{min-height:42px}
 #save,#cancel{min-width:76px}
}

/* Ver 3.4.2 — keep modal actions clear of hosting/browser overlays on iPhone */
@media(max-width:760px){
  .modal-card{
    padding-bottom:180px;
  }
  .modal-card .actions{
    position:sticky;
    bottom:100px;
    min-height:64px;
    padding:10px 0;
    margin-top:18px;
    background:#fff;
    border-top:1px solid #e2e8f0;
    box-shadow:0 -8px 16px #fff;
    z-index:50;
  }
  .modal-card .actions span:last-child{
    margin-left:auto;
  }
  #cancel,#save{
    min-width:92px;
    min-height:48px;
    font-weight:700;
  }
}

/* Ver 3.6 — responsive week grid + reliable stock placement */
#week{overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.week-grid{width:100%;min-width:800px}
.placement-banner{display:none;position:sticky;left:0;top:0;z-index:80;background:#fff7cc;border-bottom:1px solid #eab308;padding:10px 12px;font-size:13px;font-weight:700}
.placement-banner.show{display:block}

/* Desktop: use the available width for all seven days. */
@media(min-width:761px){
  .week-grid{width:100%;min-width:800px}
  .day-col{flex:1 1 0;min-width:105px}
}

/* Phone: show about three days at once, while keeping horizontal swipe. */
@media(max-width:760px){
  #week{overflow-x:auto;overflow-y:auto;touch-action:pan-x pan-y}
  .week-grid{width:max-content;min-width:0}
  .time-col{position:sticky;left:0;z-index:40;background:#fff}
  .time-head{z-index:50}
  .day-col{flex:0 0 calc((100vw - 52px) / 3);width:calc((100vw - 52px) / 3);min-width:calc((100vw - 52px) / 3);touch-action:pan-x pan-y}
  .day-head{font-size:10px;padding-left:1px;padding-right:1px}
}


/* Ver 4.0 — XPPEN / stylus-first handwriting notebook */
#notes{background:#eef1f5;overflow:auto}
.note-toolbar{
  position:sticky;top:0;z-index:70;display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:8px 10px;background:#fff;border-bottom:1px solid #dbe2ea
}
.note-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.note-tools button.active{background:#334155;color:#fff;border-color:#334155}
.pen-size{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700}
.pen-size input{width:110px}
#note-status{font-size:11px;color:#64748b;white-space:nowrap}
.note-stage{
  position:relative;width:min(1100px,calc(100% - 24px));height:1400px;margin:12px auto 40px;
  background:
    linear-gradient(#e9eef5 1px,transparent 1px),
    linear-gradient(90deg,#e9eef5 1px,transparent 1px),
    #fff;
  background-size:24px 24px;
  border:1px solid #d8dee8;border-radius:10px;box-shadow:0 2px 10px #0001;overflow:hidden
}
#note-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-x pan-y}
.note-stage.pen-active #note-canvas{touch-action:none}
.pen-hint{
  position:absolute;left:50%;top:18px;transform:translateX(-50%);pointer-events:none;
  padding:7px 11px;border-radius:999px;background:#fffbe8dd;border:1px solid #f1d56b;
  font-size:11px;color:#64748b;transition:opacity .25s
}
.note-stage.has-ink .pen-hint{opacity:0}
@media(max-width:760px){
  .note-toolbar{align-items:flex-start}
  .note-tools{gap:5px}
  .note-tools button{padding:7px 9px}
  .pen-size input{width:80px}
  #note-status{display:none}
  .note-stage{width:calc(100% - 12px);height:1200px;margin:6px auto 30px;border-radius:6px}
}

/* Ver 4.0.1 XPPEN/Android stylus fix */
#note-canvas{touch-action:none;overscroll-behavior:none}
.note-stage{overscroll-behavior:contain}

/* Ver 4.1 pen colors */
.ink-colors{display:flex;align-items:center;gap:6px;padding:2px 3px}.ink-dot{width:30px;height:30px;min-width:30px;padding:0;border-radius:50%;border:2px solid #cbd5e1;background:var(--ink);box-shadow:inset 0 0 0 2px #fff}.ink-dot[data-ink="#172033"]{--ink:#172033}.ink-dot[data-ink="#2563eb"]{--ink:#2563eb}.ink-dot[data-ink="#dc2626"]{--ink:#dc2626}.ink-dot[data-ink="#15803d"]{--ink:#15803d}.ink-dot.selected{outline:3px solid #64748b;outline-offset:1px}@media(max-width:760px){.ink-dot{width:34px;height:34px;min-width:34px}}

/* Ver 4.2.2 handwritten sticky UI — notebook gesture CSS untouched */
.hand-card{width:min(720px,100%);max-height:94vh;overflow:auto}
.hand-colors,.hand-tools{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:10px 0}
.hand-paper{padding:7px 11px}
.hand-paper[data-paper="yellow"]{background:#fff0a6}.hand-paper[data-paper="pink"]{background:#f6d3df}
.hand-paper[data-paper="blue"]{background:#d4eafb}.hand-paper[data-paper="green"]{background:#d7f2dc}
.hand-paper[data-paper="purple"]{background:#e4d9f8}.hand-paper.selected{outline:3px solid #475569;outline-offset:1px}
.hand-stage{position:relative;height:280px;border:1px solid #cbd5e1;border-radius:12px;background:#fff0a6;overflow:hidden}
#hand-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;overscroll-behavior:none}
@media(max-width:760px){.hand-card{padding:16px}.hand-stage{height:250px}.hand-tools .pen-size{width:100%}}

/* Ver 4.2.3 — XPPEN: finger scroll + pen draw */
#note-canvas{touch-action:pan-x pan-y !important}
#note-canvas.stylus-writing{touch-action:none !important}


/* Ver 4.2.4 — handwritten sticky restored + compact preview */
.hand-text-label{display:block;font-size:12px;font-weight:700;margin:8px 0}
#hand-text{width:100%;min-height:58px;resize:vertical;padding:8px;margin-top:4px}
.hand-thumb{display:block;width:100%;height:auto;max-height:78px;object-fit:contain;object-position:left top;border-radius:5px;pointer-events:none}
.inbox-card .hand-thumb{max-height:72px;margin-top:26px}
.task-card .hand-thumb{max-height:calc(100% - 4px)}
.task-text{position:relative;z-index:1;margin-top:3px;overflow:hidden}

/* Ver 4.2.5 — keep handwriting readable when a week sticky is resized.
   The card clips the drawing instead of scaling the whole drawing smaller. */
.task-card .hand-thumb{
  width:100%;
  height:auto;
  max-height:none;
  object-fit:initial;
  object-position:initial;
  margin:0;
}
.task-card{overflow:hidden}

/* Ver 4.2.6 — handwritten sticky modal polish */
#hand-inks .ink-dot[data-hand-ink="#172033"]{--ink:#172033}
#hand-inks .ink-dot[data-hand-ink="#2563eb"]{--ink:#2563eb}
#hand-inks .ink-dot[data-hand-ink="#dc2626"]{--ink:#dc2626}
#hand-inks .ink-dot[data-hand-ink="#15803d"]{--ink:#15803d}
#hand-inks .ink-dot{background:var(--ink)}

/* Keep the modal buttons outside the sticky-paper drawing area. */
.hand-card>.actions{position:static;bottom:auto;background:#fff;padding:12px 0 0;margin-top:12px;border-top:1px solid #e2e8f0;box-shadow:none;z-index:auto}
@media(max-width:760px){
  .hand-card{padding-bottom:max(16px,env(safe-area-inset-bottom))}
  .hand-card>.actions{position:static;bottom:auto;min-height:0;padding:12px 0 0;margin-top:12px;box-shadow:none}
}