/* 絵の予定表メーカー。色・文字は DESIGN.md */
.tool-top{max-width:760px;padding-top:clamp(24px,5vw,56px)}
.tool-top h1{font-size:clamp(36px,5vw,60px)}
.maker{margin-top:28px;background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(18px,3vw,28px)}
.maker-label{display:block;font-weight:600;margin-bottom:10px}
.maker textarea{width:100%;border:1px solid var(--line);border-radius:var(--r-s);padding:14px 16px;font:inherit;font-size:18px;resize:vertical;background:var(--paper);min-height:110px}
.maker textarea::placeholder{color:var(--ink-3)}
.maker-row{display:flex;gap:10px;margin-top:14px;justify-content:flex-end}
.mic-btn{width:56px;height:56px;flex:none;border-radius:50%;border:0;background:var(--coral);color:#fff;font-size:26px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.mic-btn.on{animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,107,74,.45)}50%{box-shadow:0 0 0 14px rgba(255,107,74,0)}}
.examples{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px;color:var(--ink-2);font-size:15px}
.chip{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--sheet);cursor:pointer;font-size:15px;color:var(--ink)}
.chip:hover{border-color:#CFC8BC}

.sheet-wrap{padding-top:40px}
.sheet-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.seg{display:flex;background:var(--sheet);border:1px solid var(--line);border-radius:999px;padding:3px}
.seg button{border:0;background:transparent;min-height:44px;padding:0 16px;border-radius:999px;cursor:pointer;color:var(--ink-2);font-size:15px}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--sheet)}
.sheet-tools .btn{margin-left:auto;display:inline-flex;align-items:center;gap:8px;height:48px}
.t-sheet{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--lift);padding:clamp(24px,4vw,48px)}
.t-title{font:700 clamp(40px,5vw,60px)/1.1 var(--hand);text-align:center;margin:0 auto 28px;width:fit-content;padding:0 10px;background:linear-gradient(transparent 60%,var(--coral-soft) 60%);outline-offset:6px}
html[lang=ja] .t-title{font-weight:600;font-size:clamp(32px,4vw,48px)}
.t-items{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:16px 4px}
.t-item{position:relative;display:flex;flex-direction:column;align-items:center;width:clamp(120px,15vw,170px);text-align:center}
.t-art{position:relative;width:clamp(84px,10vw,120px);height:clamp(84px,10vw,120px);display:flex;align-items:center;justify-content:center}
.t-art img{width:100%;height:100%}
.t-art i{font-size:clamp(70px,8vw,100px)}
.t-letter{width:80%;height:80%;border-radius:50% 46% 52% 48%;border:4px solid var(--c);color:var(--c);display:flex;align-items:center;justify-content:center;font:700 48px Caveat,cursive}
.t-x{position:absolute;inset:0;width:100%;height:100%}
.t-item.cancel img,.t-item.cancel i{opacity:.4}
.t-text b{display:block;font:700 clamp(28px,2.8vw,36px)/1.1 var(--hand);color:var(--c);margin-top:6px}
html[lang=ja] .t-text b{font-weight:600;font-size:clamp(22px,2.2vw,28px);line-height:1.3}
.t-text small{display:block;font:700 22px/1.2 Caveat,"Klee One",cursive;color:var(--ink-2)}
.t-arrow{width:44px;flex:none;margin-top:clamp(36px,4vw,52px)}
.t-del{position:absolute;top:-6px;right:0;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--sheet);color:var(--ink-2);font-size:18px;cursor:pointer;opacity:.75}
.t-del:hover,.t-del:focus-visible{opacity:1}
.t-brand{text-align:right;color:var(--ink-3);font-size:14px;margin-top:24px}

/* たて並び */
.sheet-wrap[data-dir=down] .t-items{flex-direction:column;flex-wrap:nowrap;align-items:flex-start;max-width:520px;margin:0 auto}
.sheet-wrap[data-dir=down] .t-item{flex-direction:row;width:auto;gap:18px;text-align:left}
.sheet-wrap[data-dir=down] .t-text b{margin-top:0}
.sheet-wrap[data-dir=down] .t-arrow{rotate:90deg;margin:0 0 0 30px;width:36px}
.sheet-wrap[data-dir=down] .t-del{position:static;margin-left:8px}
/* 大きい文字だけ */
.sheet-wrap[data-mode=words] .t-art{display:none}
.sheet-wrap[data-mode=words] .t-text b{font:700 clamp(36px,5vw,56px)/1.15 var(--body);color:var(--ink)}
.sheet-wrap[data-mode=words] .t-item.cancel .t-text b{text-decoration:line-through;text-decoration-color:#D93F3F;text-decoration-thickness:5px;color:var(--ink-3)}
.sheet-wrap[data-mode=words] .t-text small{font:600 24px var(--body)}
.sheet-wrap[data-mode=words] .t-arrow{margin-top:18px}
.sheet-wrap[data-mode=words][data-dir=down] .t-arrow{margin-top:0}

.tool-cta{max-width:760px;background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(24px,4vw,40px);margin-top:var(--section)}
.tool-cta h2{font-size:clamp(26px,3vw,34px)}
.tool-cta p{color:var(--ink-2);margin:10px 0 20px}
.tool-cta .btn{display:inline-flex;align-items:center;text-decoration:none}
.tool-tips{max-width:760px}
.tool-tips h2{font-size:clamp(26px,3vw,34px);margin-bottom:16px}
.tool-tips li{color:var(--ink-2);margin-top:10px}

@media (max-width:640px){
  .t-arrow{display:none}
  .sheet-tools .btn{margin-left:0}
}
/* 印刷は予定表だけ */
@media print{
  @page{margin:12mm}
  body{background:#fff}
  .nav,.tool-top,.sheet-tools,.sheet-wrap>.fine,.tool-cta,.tool-tips,.foot,.t-del{display:none!important}
  main{padding:0}
  .sheet-wrap{padding:0}
  .t-sheet{border:0;box-shadow:none;padding:0}
  .t-art img,.t-x{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .t-title{print-color-adjust:exact;-webkit-print-color-adjust:exact}
}
html[lang=ja] .t-text{word-break:keep-all;overflow-wrap:anywhere}
.t-note{color:var(--ink-3)!important}
.t-q{position:absolute;top:-4px;right:-4px;width:36px;height:36px;border-radius:50%;background:var(--amber);color:#fff;font:700 28px/36px Caveat,cursive;text-align:center;rotate:8deg}
.maker .btn:disabled{opacity:.7;cursor:progress}
/* 右下のバッジ（「英語の勉強」の ABC など）。主役は大きい絵のまま */
.t-badge{position:absolute;right:-6px;bottom:-4px;width:46%;height:46%;border-radius:50%;background:var(--sheet);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(30,29,26,.12)}
.t-badge img{width:72%;height:72%}
.t-badge i{font-size:clamp(26px,3vw,36px);color:var(--ink-2)}
.t-badge-text{font:700 clamp(15px,1.8vw,20px)/1 var(--body);color:var(--ink);letter-spacing:.02em}
.sheet-wrap[data-mode=words] .t-badge{display:none}
@media print{.t-badge{print-color-adjust:exact;-webkit-print-color-adjust:exact}}