*{box-sizing:border-box}
body{margin:0;font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;background:#f8f4f2;color:#5a3d33}
main{min-height:100vh}

.builderWrap{padding:24px}
.builder{max-width:920px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:24px;background:#fff;border:1px solid #efd7d0;border-radius:28px;padding:24px}
.leftCol{display:grid;gap:18px}
.rightCol{border-left:1px solid #f1e2dc;padding-left:20px;display:grid;align-content:start;gap:14px}
.brand{color:#cc9386;font-style:italic;margin:0}
header h1{font-size:clamp(34px,5vw,58px);margin:.2rem 0;line-height:1.2}
.lead{margin:0;color:#6d5348}
h2{font-size:28px;margin:0 0 10px}
h3{font-size:28px;margin:0}

.templateCard{display:flex;gap:14px;align-items:center;background:#fff7f5;border:2px solid #ef8f9e;border-radius:18px;padding:12px;width:100%;text-align:left}
.templatePreview{width:96px;height:130px;object-fit:cover;border-radius:12px;border:1px solid #ecd5cf}
.templateName{color:#513b33}

.formPanel{background:#fff;border:1px solid #f2e1dc;border-radius:18px;padding:16px;display:grid;gap:12px}
label{display:grid;gap:6px;font-weight:700}
.limitNote{font-size:13px;color:#8a6d63;font-weight:500}
.inlineChoices label{display:flex;align-items:center;gap:8px;font-weight:700}
.inlineChoices input[type="radio"]{margin:0}
input,textarea,button{font:inherit;padding:11px 12px;border-radius:12px;border:1px solid #ddcdc6;background:#fff}
button{cursor:pointer;background:linear-gradient(90deg,#f096a7,#ea7f95);color:#fff;border:none;font-weight:700}

.seg{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.seg label{border:2px solid #e8d8d2;border-radius:14px;padding:16px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:30px;font-weight:700;background:#fff}
.seg .girl{color:#de6f85}
.seg .boy{color:#5d90d4}
.seg .picked.girl{border-color:#eb7f95;background:#fff6f8}
.seg .picked.boy{border-color:#9cc0ea;background:#f3f8ff}

.result{background:#fff;border:1px solid #f2e1dc;border-radius:18px;padding:16px;display:grid;gap:12px}
.result ul{margin:0;padding-left:18px;display:grid;gap:6px}
.result li{white-space:pre-wrap}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.actions a{color:#9f5d4f;text-decoration:none;font-weight:700}
.err{color:#b00020;font-weight:700;margin:0}

.phoneMock{background:#fffaf6;border:1px solid #ebd8ce;border-radius:28px;padding:12px}
.phoneMock img{width:100%;display:block;border-radius:20px}

.revealView{display:grid;place-items:center;background:#f6efe8;padding:20px}
.imageStage{position:relative;width:min(520px,92vw);cursor:pointer;user-select:none;outline:none}
.imageStage img{width:100%;display:block;border-radius:20px;box-shadow:0 12px 40px #0002}
.overlayMessage{position:absolute;left:50%;top:33%;transform:translate(-50%,-50%);width:85%;text-align:center;color:#8a5a42;font-size:clamp(24px,4vw,40px);font-weight:700;line-height:1.35;font-family:"YuMincho","Hiragino Mincho ProN",serif;text-shadow:0 2px 8px #fff8;white-space:pre-wrap}
.imageStage[data-stage="reveal"] .overlayMessage{top:27%}
.imageStage[data-stage="final"] .overlayMessage{top:50%;transform:translate(-50%,calc(-50% - 2em))}
.tapHint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);background:#fff9;padding:6px 12px;border-radius:999px;font-size:13px;color:#6b4a3f}

@media (max-width: 980px){
  .builder{grid-template-columns:1fr;padding:16px}
  .rightCol{border-left:none;border-top:1px solid #f1e2dc;padding-left:0;padding-top:16px}
  h1{font-size:44px}
  h2,h3{font-size:24px}
  .seg label{font-size:24px}
}