:root{
  --blue:#1D4ED8; --blue-d:#143EA8;
  --green:#10B981; --green-d:#0B8E6A;
  --border:#E5E7EB; --bg:#F9FAFB; --text:#111827; --muted:#6B7280;
  --bar:#BFDBFE; --bar-fg:#0B1220;
}

.subcalc-outer{ width:100%; max-width:1440px; margin:0 auto; padding:0 8px; }
.subcalc-wrap{ display:grid; grid-template-columns: minmax(0,1fr) 340px; gap:24px; align-items:start; }
.subcalc-aside{ background:#fff; border:1px solid var(--border); border-radius:8px; padding:16px; }
.subcalc-sidebar{ position:sticky; top:16px; background:#fff; border:1px solid var(--border); border-radius:8px; padding:16px; }
.subcalc-sidebar h3.no-top-gap{ margin-top:0; }

.subcalc-controls label{ display:block; font-size:12px; color:var(--muted); margin-top:8px; }
.subcalc-controls input,.subcalc-controls select{ width:100%; padding:10px; border:1px solid var(--border); border-radius:8px; }

/* 5→4→3→2 列 */
.subcalc-grid{ display:grid; gap:16px; margin-top:16px; grid-template-columns: repeat(5,1fr); align-items:stretch; }
@media (max-width:1279.98px){ .subcalc-grid{ grid-template-columns: repeat(4,1fr);} }
@media (max-width:1023.98px){ .subcalc-grid{ grid-template-columns: repeat(3,1fr);} }
@media (max-width:767.98px){  .subcalc-grid{ grid-template-columns: repeat(2,1fr);} }

/* カード */
.sc-card{ border:1px solid var(--border); border-radius:8px; padding:12px; background:#fff; display:flex; flex-direction:column; height:100%; }
.sc-card.selected{ outline:2px solid var(--blue); background:#EEF2FF; }

/* PCサムネ縮小（60%） */
.sc-thumb{ width:100%; aspect-ratio:1/1; background:#E5E7EB center/cover no-repeat; border-radius:8px; }
@media (min-width:1024px){ .sc-thumb{ width:60%; margin:0 auto; } }
.sc-name{ margin-top:8px; font-size:14px; color:var(--text); }

/* プラン */
.sc-plans{ margin-top:8px; display:grid; gap:6px; }
.sc-plan{ display:grid; grid-template-columns:18px 1fr; align-items:center; gap:8px; padding:8px; border:1px solid var(--border); border-radius:8px; background:#fff; }
.sc-plan input{ appearance:auto; width:18px; height:18px; margin:0; accent-color:var(--blue); }
.sc-plan-text{ font-size:13px; color:var(--text); cursor:pointer; }

/* 選択内容 */
.subcalc-total .price{ font-size:32px; font-weight:700; color:var(--blue); }
.subcalc-breakdown{ margin-top:12px; border-top:1px solid var(--border); }
.sc-row{ display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--border); }
.sc-row-name{ font-size:14px; color:var(--text);}
.sc-row-plan{ font-size:12px; color:var(--muted);}
.sc-row-price{ font-size:14px; color:var(--text);}

/* ボタン */
.subcalc-actions{ display:grid; gap:10px; margin-top:12px; }
.btn{ height:40px; border-radius:8px; border:1px solid transparent; font-weight:600; cursor:pointer; transition:background-color .15s,border-color .15s,box-shadow .15s,color .15s; }
.btn.green{ background:var(--green); color:#fff; }
.btn.green:hover{ background:var(--green-d); }
.btn.outline{ background:#fff; border-color:var(--border); color:#222; }
.btn.outline.hover-blue:hover{ border-color:var(--blue); box-shadow:0 0 0 2px rgba(29,78,216,.15) inset; color:var(--blue); }
.btn.small{ font-size:13px; min-height:36px; }

/* ページャ */
.subcalc-pager{ display:flex; justify-content:center; gap:12px; margin-top:16px; }
.subcalc-pager .btn{ width:56px; }

/* モバイル下バー */
.subcalc-mobilebar{ display:none; position:fixed; left:0; right:0; bottom:0; padding:12px; background:var(--bar); border-top:1px solid var(--border); justify-content:space-between; align-items:center; z-index:9999; color:var(--bar-fg); padding-bottom: calc(12px + env(safe-area-inset-bottom,0px)); }
@media (max-width:1023.98px){ .subcalc-mobilebar{ display:flex; } }
.subcalc-open .subcalc-mobilebar{ display:none !important; }
.mobile-sum{ font-size:16px; }
.mobile-total-big{ font-size:32px; color:var(--blue); }
.mobile-actions{ display:flex; gap:10px; }

/* モバイル1カラム */
@media (max-width:1023.98px){
  .subcalc-wrap{ grid-template-columns: 1fr !important; gap:16px; }
  .subcalc-sidebar{ position:static !important; top:auto !important; margin-top:8px; width:100%; max-width:none; }
  .subcalc-outer{ padding-bottom: calc(96px + env(safe-area-inset-bottom,0px)) !important; }
}

/* モーダル */
.subcalc-modal[aria-hidden="true"]{ display:none; }
.subcalc-modal{ position:fixed; inset:0; z-index:100001; display:flex; align-items:flex-start; justify-content:center; }
.subcalc-modal .modal-backdrop{ position:fixed; inset:0; background:rgba(17,24,39,.6); }
.subcalc-modal .modal-body{
  position:relative; max-width:720px; width:clamp(300px, 90vw, 720px);
  max-height: min(90dvh, calc(100svh - 24px)); margin:12px;
  background:#fff; border:1px solid var(--border); border-radius:12px; padding:16px;
  display:grid; grid-template-columns: 1fr; gap:8px; overflow:auto; z-index:100002; -webkit-overflow-scrolling:touch;
}
.modal-close-x{ position:absolute; top:8px; right:8px; height:36px; border-radius:8px; border:1px solid var(--border); background:#fff; cursor:pointer; font-size:16px; line-height:1; display:flex; align-items:center; gap:6px; padding:0 10px; z-index:100003; }
.modal-close-x:hover{ background:#F3F4F6; border-color:#9CA3AF; color:#111; }
.close-text{ font-size:12px; }

.form-note{ font-size:13px; color:#4B5563; line-height:1.7; margin:4px 0 8px; }
.modal-actions.single{ display:flex; justify-content:center; margin-top:8px; }
.subcalc-modal label{ display:grid; gap:6px; font-size:14px; color:var(--text); }
.subcalc-modal input,.subcalc-modal textarea{ width:100%; padding:10px; border:1px solid var(--border); border-radius:8px; }
.subcalc-modal .req{ color:#B91C1C; margin-left:4px; }
.subcalc-modal .sel-summary{ margin-top:4px; padding:8px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.subcalc-modal .sel-summary .summary-total{ margin-top:4px; font-weight:700; color:#1F2937; text-align:right; font-size:14px; }
.subcalc-modal .sel-summary .summary-notice{ margin-top:2px; font-size:12px; color:#6B7280; }
.subcalc-modal h4{ margin:0 0 8px 0; }

/* プライバシー同意（文言→チェック→テキストリンク） */
.privacy-inline{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.privacy-inline .privacy-row{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.privacy-inline input[type="checkbox"]{ width:18px; height:18px; margin:0; }
.privacy-inline .privacy-btn{ font-size:13px; color:var(--blue); text-decoration:underline; border:none; background:transparent; padding:0; }
.privacy-inline .privacy-btn:hover{ color:var(--blue-d); text-decoration:none; }