:root{
  --bg:#f7f5f1;--panel:#fff;--text:#252525;--muted:#6f6b66;--line:#ded9d1;
  --accent:#8a6b55;--accent2:#b3947d;--soft:#f1ebe5;--good:#277451;
  --warn:#a66b1f;--bad:#a43c3c;--shadow:0 10px 28px rgba(0,0,0,.06);
  --radius:18px;--max:1120px;
}
body[data-product="BABY"]{--bg:#fbf7f5;--accent:#a46977;--accent2:#d7a9b4;--soft:#f6e9ed}
body[data-product="GUARDIAN"]{--bg:#111722;--panel:#19212d;--text:#f4f1ea;--muted:#bcb8b0;--line:#34404f;--accent:#c6a76b;--accent2:#8f7544;--soft:#292b29;--shadow:0 10px 30px rgba(0,0,0,.22)}
body[data-product="BUSINESS"]{--bg:#f3f6f8;--accent:#315f73;--accent2:#6b91a2;--soft:#e7f0f4}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;line-height:1.7}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.wrap{width:min(calc(100% - 28px),var(--max));margin:0 auto}
.hero{padding:42px 0 24px;background:
  radial-gradient(circle at 10% 10%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 35%),
  radial-gradient(circle at 90% 0%,color-mix(in srgb,var(--accent2) 12%,transparent),transparent 32%)}
.eyebrow{font-size:.8rem;letter-spacing:.12em;color:var(--accent);font-weight:800}
h1{font-size:clamp(1.8rem,4vw,2.8rem);margin:.2em 0}
.lead{max-width:760px;color:var(--muted);margin:0}
.product-chip{display:inline-block;margin-top:10px;border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:5px 10px;font-size:.8rem}
main{padding:10px 0 36px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin:16px 0;box-shadow:var(--shadow)}
.panel h2{margin:0 0 8px;font-size:1.15rem}
.panel-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px}
.status{border-radius:999px;padding:4px 9px;font-size:.78rem;background:var(--soft);border:1px solid var(--line)}
.status.ok{color:var(--good)}
.status.warn{color:var(--warn)}
.status.bad{color:var(--bad)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
label{font-weight:700;font-size:.92rem;display:block;margin:0 0 5px}
input[type=text],input[type=date],select,textarea{width:100%;border:1px solid var(--line);border-radius:11px;padding:11px 12px;background:var(--panel);color:var(--text)}
textarea{min-height:88px;resize:vertical}
.hint,.small{font-size:.8rem;color:var(--muted)}
.checks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.check{border:1px solid var(--line);background:var(--soft);border-radius:10px;padding:8px 10px}
.check label{font-weight:500;margin:0}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.btn{border:0;border-radius:12px;padding:11px 16px;background:var(--accent);color:white;font-weight:800}
.btn.secondary{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.notice{border-left:4px solid var(--accent);background:var(--soft);border-radius:10px;padding:11px 13px;margin:12px 0}
.notice.warn{border-left-color:var(--warn)}
.notice.bad{border-left-color:var(--bad)}
.patterns,.candidates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.card{border:1px solid var(--line);background:var(--bg);border-radius:14px;padding:14px}
.card .name{font-size:1.5rem;font-weight:900;letter-spacing:.05em}
.card .reading{font-size:.85rem;color:var(--muted);margin-bottom:8px}
.score{font-weight:900;color:var(--accent)}
.pills{display:flex;gap:6px;flex-wrap:wrap;margin:7px 0}
.pill{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:3px 8px;font-size:.76rem}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;font-size:.86rem}
th,td{border-bottom:1px solid var(--line);padding:8px 7px;text-align:left;vertical-align:top}
th{color:var(--muted)}
.hidden{display:none!important}
.final-box{border:2px solid var(--accent);border-radius:16px;padding:18px;background:var(--soft)}
.final-name{font-size:2rem;font-weight:900;letter-spacing:.08em}
.footer{text-align:center;color:var(--muted);font-size:.78rem;padding:12px 0 30px}
a{color:inherit}
@media(max-width:820px){
  .grid2,.grid3,.checks,.patterns,.candidates{grid-template-columns:1fr}
  .panel-head{display:block}
}

/* ==========================================================
   BABY V4 smartphone / MakeShop mobile layout
   Desktop layout is unchanged.
========================================================== */
@media (max-width:600px){
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  body[data-product="BABY"]{
    margin:0;
    padding:0;
  }

  body[data-product="BABY"] .wrap{
    width:100%;
    max-width:none;
    margin:0;
    padding-left:10px;
    padding-right:10px;
  }

  body[data-product="BABY"] .hero{
    padding:20px 0 14px;
  }

  body[data-product="BABY"] .hero h1{
    font-size:1.65rem;
    line-height:1.35;
  }

  body[data-product="BABY"] .lead{
    font-size:.9rem;
    line-height:1.65;
  }

  body[data-product="BABY"] main{
    padding:4px 0 22px;
  }

  body[data-product="BABY"] .panel{
    width:100%;
    margin:10px 0;
    padding:14px 12px;
    border-radius:12px;
    box-shadow:0 4px 14px rgba(0,0,0,.04);
  }

  body[data-product="BABY"] .panel h2{
    font-size:1.05rem;
  }

  body[data-product="BABY"] .panel-head{
    display:block;
  }

  body[data-product="BABY"] .panel-head > div{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:7px;
  }

  body[data-product="BABY"] .grid2,
  body[data-product="BABY"] .grid3,
  body[data-product="BABY"] .checks,
  body[data-product="BABY"] .patterns,
  body[data-product="BABY"] .candidates{
    grid-template-columns:1fr;
    gap:10px;
  }

  body[data-product="BABY"] input[type=text],
  body[data-product="BABY"] input[type=date],
  body[data-product="BABY"] select,
  body[data-product="BABY"] textarea{
    width:100%;
    min-width:0;
    min-height:44px;
    font-size:16px; /* iPhoneの入力時自動ズームを防ぐ */
    padding:10px 11px;
  }

  body[data-product="BABY"] .actions{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    margin-top:12px;
  }

  body[data-product="BABY"] .btn{
    width:100%;
    min-height:46px;
    padding:11px 12px;
  }

  body[data-product="BABY"] .notice{
    padding:10px 11px;
    margin:10px 0;
    font-size:.88rem;
  }

  body[data-product="BABY"] .selector-intro{
    padding:11px 12px;
    margin:9px 0 13px;
    font-size:.9rem;
  }

  body[data-product="BABY"] .pill{
    font-size:.74rem;
    padding:4px 7px;
  }

  body[data-product="BABY"] .footer{
    padding:10px 8px 20px;
  }
}

@media (max-width:380px){
  body[data-product="BABY"] .wrap{
    padding-left:7px;
    padding-right:7px;
  }

  body[data-product="BABY"] .panel{
    padding-left:10px;
    padding-right:10px;
  }
}