/* 2026-10-10 현장 설문: 사진 타일 · 봉투 조합 · 이벤트 A/B · 선택 연락처. 색·간격은 styles.css/experience.css 값을 그대로 쓴다. */

/* 사진 */
.item-grid { grid-template-columns: repeat(5, 1fr); }
.item-picture.photo { position: relative; height: 168px; overflow: hidden; background: #dfe4ee; }
.item-picture.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.item-tag { position: absolute; top: 8px; left: 8px; background: #354873; color: #fff; font-size: 10px; font-weight: 650; padding: 3px 8px; border-radius: 999px; }
.phone-illustration.photo { padding: 0; overflow: hidden; }
.phone-illustration.photo img { width: 100%; height: 128px; object-fit: cover; object-position: 50% 62%; display: block; }
.door-scene.photo img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 92%; display: block; }
.photo-credit { font-size: 10px; }

/* 4봉투 조합 예시 · 승인 전 표시 */
.bundle-examples { background: #fff; border: 1px solid #d2d8e7; border-radius: 12px; padding: 18px 20px; margin: 0 0 16px; }
.bundle-examples-title { font-weight: 650; font-size: 14px; margin: 0 0 12px; }
.bundle-examples ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.bundle-examples li { background: #e4eaf7; border-radius: 9px; padding: 12px; }
.bundle-examples b { display: block; font-size: 14px; }
.bundle-examples span { font-size: 11px; color: #54607b; }
.bundle-examples-note { font-size: 12px; color: #54607b; margin: 12px 0 0; }
.approval-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 20px; }
.approval-list div { border: 1px dashed #a6b0c6; border-radius: 9px; padding: 12px 14px; }
.approval-list dt { font-size: 12px; font-weight: 650; }
.approval-list dd { margin: 4px 0 0; font-size: 12px; color: #54607b; line-height: 1.6; word-break: keep-all; }

/* 이벤트 B */
.event-box-b { background: #fff; border: 1px solid var(--line); }

/* 설문 */
.choice-list { display: grid; gap: 0; }
.building-pick select { padding: 12px; border: 1px solid #a2a7b2; border-radius: 6px; min-height: 48px; width: 100%; background: #fff; font-size: 15px; }
.bundle-row { margin: 18px 0 0; }
.bundle-label { font-size: 13px; font-weight: 650; margin: 16px 0 8px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
label.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: 14px; background: #fff; }
label.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
label.chip:has(input:checked) { border-color: #101522; background: #e5ebf8; font-weight: 650; }
label.chip:has(input:focus-visible) { outline: 3px solid #4d5975; outline-offset: 2px; }
.preset { min-height: 44px; padding: 8px 14px; border: 1px solid #a6b0c6; border-radius: 8px; background: #e4eaf7; font-size: 13px; color: var(--ink); }
.stepper-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid #e2e6f0; padding-top: 6px; }
.stepper-row .bundle-label { margin: 10px 0; }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; font-size: 20px; color: var(--ink); }
.stepper output { min-width: 34px; text-align: center; font-size: 18px; font-weight: 650; }
.bundle-total { margin: 14px 0 0; padding: 12px 14px; border-radius: 8px; background: #e4eaf7; font-size: 13px; font-weight: 600; }
.bundle-total.over { background: #f8e9e7; color: #9b2929; }
.contact-skip { display: block; margin: 14px auto 0; background: none; border: 0; text-decoration: underline; text-underline-offset: 4px; color: var(--muted); font-size: 14px; min-height: 44px; }

/* 완료 · 선택 연락처 */
#done-extra { margin: 18px 0; }
.contact-card { border: 1px solid var(--line); border-radius: 10px; padding: 20px; background: #f8f9fc; margin-bottom: 18px; }
.contact-card h4 { font-size: 17px; margin: 0 0 6px; }
.contact-card .muted.small { font-size: 12px; }
.contact-card .privacy-box { margin: 12px 0 4px; }
.contact-card > a { font-size: 12px; color: var(--muted); }
.contact-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.form-error { color: #9b2929; font-size: 14px; }
.contact-done { background: #e7eaf2; border-radius: 10px; padding: 16px 18px; font-size: 14px; margin: 0 0 18px; }
.contact-done p { margin: 6px 0 0; color: #33456f; }
.kakao-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.kakao-add { background: #fff; border: 1px solid #e3cf3a; }
.kakao-add .chat-symbol { font-size: 15px; font-weight: 700; }
.contact-showcase .kakao-actions { margin-top: 6px; }

@media (max-width: 900px) {
  .item-grid { grid-template-columns: repeat(3, 1fr); }
  .bundle-examples ul { grid-template-columns: repeat(2, 1fr); }
  .approval-list { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .item-grid { grid-template-columns: 1fr 1fr; }
  .item-picture.photo { height: 120px; }
  .item-tile:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 5px); }
  .bundle-examples { padding: 14px; }
  .bundle-examples b { font-size: 13px; }
  .contact-card { padding: 16px 14px; }
  .contact-actions .button, .kakao-actions .kakao-link { width: 100%; }
  .event-box-b { padding: 22px 18px; }
}

/* 인쇄 설문지(최종 v4)와 맞춘 첫 화면: 11월 오픈 배지 · 내림이 · 핵심 4가지 */
.open-badge { display: inline-block; margin: 0 0 14px; padding: 6px 14px; border-radius: 999px; background: #e8eefc; color: #2f5be3; font-size: 13px; font-weight: 700; }
.h1-accent { color: #2f5be3; }
.key-facts { list-style: none; padding: 0; margin: 20px 0 6px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.key-facts li { padding: 12px 10px; border-left: 1px solid var(--line); }
.key-facts li:first-child { border-left: 0; padding-left: 0; }
.key-facts b { display: block; font-size: 16px; }
.key-facts span { font-size: 12px; color: var(--muted); }
.key-facts-note { font-size: 11px; color: var(--muted); margin: 0 0 18px; }
.hero-head { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; }
.hero-head h1 { word-break: keep-all; }
.naerimi-tile { width: 132px; height: 120px; border-radius: 22px; background: #e8eefc; display: grid; place-items: center; }
.naerimi-tile img { width: 96px; height: auto; image-rendering: pixelated; }
.event-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.event-pair .event-box { display: block; margin: 0 0 16px; }
.event-pair h3 { font-size: 17px; word-break: keep-all; }
.done-naerimi { width: 72px; height: auto; image-rendering: pixelated; display: block; margin: 0 0 8px; }
@media (max-width: 700px) {
  .key-facts { grid-template-columns: 1fr 1fr; }
  .key-facts li:nth-child(3) { border-left: 0; padding-left: 0; }
  .key-facts li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .hero-head { display: block; position: relative; }
  .naerimi-tile { position: absolute; top: 0; right: 0; width: 76px; height: 70px; border-radius: 16px; }
  .naerimi-tile img { width: 56px; }
  .event-pair { grid-template-columns: 1fr; gap: 0; }
}