/* ============================================================
   保育参観予約システム — 保護者向けスタイル  v1.7.0
   ============================================================ */

#sk-root {
  --sk-g:   #4a7c59;  --sk-gl: #eaf4ed;
  --sk-co:  #d96b4a;  --sk-col:#fdf0eb;
  --sk-gy:  #6b7280;  --sk-gyl:#f3f4f6;
  --sk-tx:  #1f2937;  --sk-bd: #e5e7eb;
  --sk-rad: 11px;     --sk-red:#dc2626;
  --sk-amb: #d97706;

  font-family:'Noto Sans JP','Hiragino Sans','Meiryo',sans-serif;
  font-size:15px; line-height:1.6; color:var(--sk-tx);
  max-width:600px; margin:0 auto; box-sizing:border-box;
}
#sk-root *,#sk-root *::before,#sk-root *::after{box-sizing:border-box;}
#sk-root button,#sk-root input,#sk-root select{font-family:'Noto Sans JP','Hiragino Sans','Meiryo',sans-serif;}

/* ── タブ ────────────────────────────── */
#sk-root .sk-tabs{display:flex;border-bottom:2px solid var(--sk-gl);margin-bottom:20px;}
#sk-root .sk-tab{flex:1;padding:12px 6px;border:none;background:none;font-size:.88rem;font-weight:500;color:var(--sk-gy);cursor:pointer;border-bottom:3px solid transparent;transition:.2s;}
#sk-root .sk-tab.on{color:var(--sk-g);border-bottom-color:var(--sk-g);}

/* ── ステップ ────────────────────────── */
#sk-root .sk-step{display:none;}
#sk-root .sk-step.on{display:block;}
#sk-root .sk-si{display:flex;align-items:center;gap:4px;margin-bottom:16px;}
#sk-root .sk-sd{width:8px;height:8px;border-radius:50%;background:var(--sk-bd);transition:.2s;}
#sk-root .sk-sd.done{background:var(--sk-g);}
#sk-root .sk-sd.cur{background:var(--sk-g);width:22px;border-radius:4px;}
#sk-root .sk-sl{font-size:.73rem;color:var(--sk-gy);margin-left:auto;}
#sk-root .sk-h3{font-size:1.08rem;font-weight:700;margin:0 0 13px;}
#sk-root .sk-sub{font-size:.82rem;color:var(--sk-gy);margin:0 0 13px;}
#sk-root .sk-back{display:flex;align-items:center;gap:4px;background:none;border:none;color:var(--sk-g);font-size:.87rem;font-weight:500;cursor:pointer;margin-bottom:12px;padding:0;}
#sk-root .sk-loading{text-align:center;padding:32px;color:var(--sk-gy);font-size:.88rem;}

/* ── グループカード ──────────────────── */
#sk-root .sk-gg{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px;}
#sk-root .sk-gc{background:#fff;border:2px solid var(--sk-bd);border-radius:var(--sk-rad);padding:16px 10px;cursor:pointer;text-align:center;transition:.2s;}
#sk-root .sk-gc:hover,#sk-root .sk-gc.on{border-color:var(--sk-g);background:var(--sk-gl);}
#sk-root .sk-gc .ge{font-size:2rem;margin-bottom:5px;}
#sk-root .sk-gc .gn{font-size:.78rem;font-weight:700;color:var(--sk-g);line-height:1.4;}
#sk-root .sk-gc .gs{font-size:.68rem;color:var(--sk-gy);margin-top:3px;line-height:1.4;}

/* ── チップ ──────────────────────────── */
#sk-root .sk-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:15px;}
#sk-root .sk-chip{padding:8px 15px;border:2px solid var(--sk-bd);border-radius:100px;background:#fff;font-size:.88rem;cursor:pointer;transition:.2s;}
#sk-root .sk-chip:hover,#sk-root .sk-chip.on{border-color:var(--sk-g);background:var(--sk-gl);color:var(--sk-g);}

/* ══════════════════════════════════════
   保護者向けカレンダー（Step 3）
══════════════════════════════════════ */

#sk-root .sk-pcal{border:2px solid var(--sk-gl);border-radius:var(--sk-rad);overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.06);background:#fff;margin-bottom:14px;}
#sk-root .sk-pcal-nav{display:flex;align-items:center;justify-content:space-between;background:var(--sk-g);color:#fff;padding:11px 14px;}
#sk-root .sk-pcal-title{font-size:1rem;font-weight:700;letter-spacing:.02em;}
#sk-root .sk-pcal-nav-btn{background:rgba(255,255,255,.2);border:none;color:#fff;width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:1.15rem;display:flex;align-items:center;justify-content:center;transition:background .15s;line-height:1;}
#sk-root .sk-pcal-nav-btn:hover{background:rgba(255,255,255,.35);}

#sk-root .sk-pcal-legend{display:flex;gap:8px;flex-wrap:wrap;padding:9px 12px;background:#f9fafb;border-bottom:1px solid var(--sk-bd);}
#sk-root .sk-pcal-leg{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;color:#555;}
#sk-root .sk-pcal-leg::before{content:'';width:11px;height:11px;border-radius:3px;flex-shrink:0;}
#sk-root .sk-pcal-leg-ok::before{background:#d1fae5;border:1.5px solid var(--sk-g);}
#sk-root .sk-pcal-leg-wl::before{background:#fef3c7;border:1.5px solid var(--sk-amb);}
#sk-root .sk-pcal-leg-full::before{background:#fee2e2;border:1.5px solid var(--sk-red);}

#sk-root .sk-pcal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;padding:10px 8px;background:#fff;}
#sk-root .sk-pcal-dow{text-align:center;font-size:.7rem;font-weight:700;padding:4px 0 6px;color:#888;}
#sk-root .sk-pcal-dow.sun{color:var(--sk-red);}
#sk-root .sk-pcal-dow.sat{color:#2563eb;}

#sk-root .sk-pcal-cell{border-radius:8px;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border:2px solid transparent;transition:transform .12s,box-shadow .12s,border-color .12s;position:relative;cursor:default;}
#sk-root .sk-pcal-cell.empty,#sk-root .sk-pcal-cell.past{background:#f9fafb;}
#sk-root .sk-pcal-cell.none{background:#f9fafb;}
#sk-root .sk-pcal-cell.past .sk-pcal-num,#sk-root .sk-pcal-cell.none .sk-pcal-num{color:#d1d5db;}

#sk-root .sk-pcal-cell.avail{background:#d1fae5;border-color:#a7f3d0;cursor:pointer;}
#sk-root .sk-pcal-cell.avail:hover{transform:scale(1.06);box-shadow:0 3px 10px rgba(74,124,89,.25);border-color:var(--sk-g);z-index:1;}
#sk-root .sk-pcal-cell.avail .sk-pcal-num{color:#065f46;font-weight:700;}

#sk-root .sk-pcal-cell.waitlist{background:#fef3c7;border-color:#fde68a;cursor:pointer;}
#sk-root .sk-pcal-cell.waitlist:hover{transform:scale(1.06);box-shadow:0 3px 10px rgba(217,119,6,.2);border-color:var(--sk-amb);z-index:1;}
#sk-root .sk-pcal-cell.waitlist .sk-pcal-num{color:#92400e;font-weight:700;}

#sk-root .sk-pcal-cell.full{background:#fee2e2;border-color:#fca5a5;cursor:pointer;}
#sk-root .sk-pcal-cell.full:hover{transform:scale(1.05);box-shadow:0 2px 8px rgba(220,38,38,.15);border-color:var(--sk-red);z-index:1;}
#sk-root .sk-pcal-cell.full .sk-pcal-num{color:#991b1b;font-weight:700;}

#sk-root .sk-pcal-cell.selected{border-color:#1d4ed8!important;box-shadow:0 0 0 3px rgba(29,78,216,.2)!important;transform:scale(1.06);z-index:2;}

#sk-root .sk-pcal-cell.avail.sun .sk-pcal-num,#sk-root .sk-pcal-cell.avail.sat .sk-pcal-num{color:inherit;}
#sk-root .sk-pcal-cell.none.sun .sk-pcal-num,#sk-root .sk-pcal-cell.past.sun .sk-pcal-num{color:#fca5a5;}
#sk-root .sk-pcal-cell.none.sat .sk-pcal-num,#sk-root .sk-pcal-cell.past.sat .sk-pcal-num{color:#bfdbfe;}

#sk-root .sk-pcal-num{font-size:.9rem;font-weight:600;line-height:1;}
#sk-root .sk-pcal-badge{font-size:.62rem;font-weight:700;line-height:1;padding:1px 4px;border-radius:3px;}
#sk-root .sk-pcal-badge.ok{background:rgba(74,124,89,.15);color:#065f46;}
#sk-root .sk-pcal-badge.wl{background:rgba(217,119,6,.15);color:#92400e;}
#sk-root .sk-pcal-badge.full{background:rgba(220,38,38,.12);color:#991b1b;}
/* ★ カレンダーセル内のカフェアイコン */
#sk-root .sk-pcal-cafe{font-size:.6rem;line-height:1;opacity:.8;}

/* 詳細パネル */
#sk-root .sk-pcal-detail{background:#fff;border:2px solid var(--sk-bd);border-radius:var(--sk-rad);padding:16px;margin-bottom:14px;animation:skDetailIn .18s ease;}
@keyframes skDetailIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
#sk-root .sk-pcal-det-date{font-size:1rem;font-weight:700;margin-bottom:4px;}
#sk-root .sk-pcal-det-time{font-size:.88rem;color:var(--sk-gy);margin-bottom:4px;}
/* ★ カフェ情報バナー */
#sk-root .sk-pcal-det-cafe{font-size:.82rem;background:#fef3c7;color:#92400e;border:1px solid #fde68a;padding:6px 10px;border-radius:7px;margin-bottom:8px;}
#sk-root .sk-pcal-det-note{font-size:.8rem;color:var(--sk-gy);margin-bottom:10px;}
#sk-root .sk-pcal-det-status{font-size:.85rem;font-weight:500;padding:8px 12px;border-radius:7px;margin-bottom:12px;}
#sk-root .sk-pcal-det-status.ok{background:var(--sk-gl);color:#065f46;}
#sk-root .sk-pcal-det-status.wl{background:#fef3c7;color:#92400e;}
#sk-root .sk-pcal-det-status.full{background:#fee2e2;color:#991b1b;}

/* ══════════════════════════════════════
   ★ サポーターズカフェ質問（Step 4）
══════════════════════════════════════ */

#sk-root .sk-cafe-q{
  background:#fffbeb;
  border:2px solid #fde68a;
  border-radius:var(--sk-rad);
  padding:14px 16px;
  margin-bottom:16px;
}

#sk-root .sk-cafe-q-header{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:12px;
}
#sk-root .sk-cafe-icon-big{font-size:1.6rem;line-height:1;flex-shrink:0;}
#sk-root .sk-cafe-qlabel{font-size:.9rem;font-weight:700;color:#78350f;margin-bottom:3px;}
#sk-root .sk-cafe-qtime{font-size:.78rem;color:#92400e;}

#sk-root .sk-cafe-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;}

#sk-root .sk-cafe-opt{
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 10px;
  border:2px solid #fde68a;
  border-radius:9px;
  background:#fff;
  cursor:pointer;
  font-size:.9rem;
  font-weight:500;
  color:#78350f;
  transition:background .15s,border-color .15s;
}
#sk-root .sk-cafe-opt input[type="radio"]{
  width:16px;height:16px;margin:0;flex-shrink:0;accent-color:var(--sk-g);cursor:pointer;
}
#sk-root .sk-cafe-opt:hover{background:#fef3c7;border-color:var(--sk-amb);}
#sk-root .sk-cafe-opt.on{
  background:var(--sk-gl);
  border-color:var(--sk-g);
  color:var(--sk-g);
  font-weight:700;
}

#sk-root .sk-cafe-err{
  font-size:.78rem;color:var(--sk-red);margin-top:8px;
}

/* ── フォーム ────────────────────────── */
#sk-root .sk-fg{margin-bottom:14px;}
#sk-root .sk-fg label{display:block;font-size:.82rem;font-weight:700;margin-bottom:5px;}
#sk-root .sk-req{color:var(--sk-co);margin-left:2px;}
#sk-root .sk-fg input,#sk-root .sk-fg select{width:100%;padding:11px 13px;border:2px solid var(--sk-bd);border-radius:8px;font-size:.93rem;outline:none;transition:.2s;background:#fff;-webkit-appearance:none;appearance:none;}
#sk-root .sk-fg input:focus,#sk-root .sk-fg select:focus{border-color:var(--sk-g);}
#sk-root .sk-fn{font-size:.73rem;color:var(--sk-gy);margin-top:4px;display:block;}
#sk-root .sk-sibnote{font-size:.77rem;color:var(--sk-gy);background:#f9fafb;border-radius:8px;padding:9px 12px;margin:-6px 0 14px;border-left:3px solid var(--sk-bd);}

/* ── サマリー ────────────────────────── */
#sk-root .sk-sbox{background:var(--sk-gl);border-radius:var(--sk-rad);padding:14px;margin-bottom:16px;}
#sk-root .sk-sr{display:flex;font-size:.86rem;margin-bottom:7px;}
#sk-root .sk-sr:last-child{margin-bottom:0;}
#sk-root .sk-sl2{color:var(--sk-gy);width:82px;flex-shrink:0;font-size:.79rem;}
#sk-root .sk-sv{font-weight:500;}

/* ── ボタン ──────────────────────────── */
#sk-root .sk-btn{width:100%;padding:12px;border:none;border-radius:8px;font-size:.95rem;font-weight:700;cursor:pointer;transition:.2s;margin-bottom:9px;display:block;text-align:center;}
#sk-root .sk-btn:last-child{margin-bottom:0;}
#sk-root .sk-bp{background:var(--sk-g);color:#fff;}
#sk-root .sk-bp:hover{background:#3a6547;}
#sk-root .sk-bp:disabled{background:#9ca3af;cursor:not-allowed;}
#sk-root .sk-bs{background:#fff;color:var(--sk-g);border:2px solid var(--sk-g);}
#sk-root .sk-bc{background:var(--sk-amb);color:#fff;}
#sk-root .sk-bc:hover{background:#b45309;}
#sk-root .sk-bo{background:#fff;color:var(--sk-gy);border:2px solid var(--sk-bd);}
#sk-root .sk-bo:hover{border-color:var(--sk-g);color:var(--sk-g);}

/* ── アラート ────────────────────────── */
#sk-root .sk-al{padding:10px 13px;border-radius:8px;font-size:.82rem;margin-bottom:13px;}
#sk-root .sk-a-ok{background:var(--sk-gl);color:#2d6a31;border-left:4px solid var(--sk-g);}
#sk-root .sk-a-err{background:#fee2e2;color:#991b1b;border-left:4px solid var(--sk-red);}
#sk-root .sk-a-info{background:#eff6ff;color:#1e40af;border-left:4px solid #3b82f6;}

/* ── 予約確認タブ ────────────────────── */
#sk-root .sk-sect-title{font-size:.78rem;font-weight:700;color:var(--sk-gy);margin-bottom:8px;}
#sk-root .sk-rc{background:#fff;border:2px solid var(--sk-bd);border-radius:var(--sk-rad);padding:14px;margin-bottom:10px;}
#sk-root .sk-rc h4{font-size:.9rem;margin:0 0 7px;color:var(--sk-g);}
#sk-root .sk-rc .rd{font-size:.81rem;color:var(--sk-gy);margin-bottom:3px;}
#sk-root .sk-rc .rd span{color:var(--sk-tx);font-weight:500;}
#sk-root .sk-rc.wl{border-color:var(--sk-co);}
#sk-root .sk-rc.wl h4{color:var(--sk-co);}
#sk-root .sk-empty{text-align:center;padding:18px 0;color:var(--sk-gy);font-size:.85rem;}

/* ── 完了画面 ────────────────────────── */
#sk-root .sk-cmp{text-align:center;padding:8px 0 20px;}
#sk-root .sk-ci{font-size:3.2rem;margin-bottom:8px;}
#sk-root .sk-ct{font-size:1.15rem;font-weight:700;margin:0 0 6px;}
#sk-root .sk-cs{font-size:.82rem;color:var(--sk-gy);margin:0 0 18px;}

/* ── レスポンシブ ────────────────────── */
@media(max-width:420px){
  #sk-root .sk-gg{grid-template-columns:1fr 1fr;}
  #sk-root .sk-pcal-cell{min-height:44px;}
  #sk-root .sk-pcal-badge{display:none;}
  #sk-root .sk-pcal-num{font-size:.82rem;}
  #sk-root .sk-cafe-opts{grid-template-columns:1fr;}
}