/**
 * 파일명: bugo-common.css
 * 파일경로: /home/freebugocokr/public_html/css/bugo-common.css
 * 기능: 부고장 서비스 공통 레이아웃, 폼, 카드, 기본 UI 스타일 정의
 * 작성일: 2026-05-09
 * 수정일: 2026-05-09
 */

:root{
    --bugo-btn-bg:       #f0f7f3;
    --bugo-btn-bg-hover: #d8ede2;
    --bugo-btn-color:    #4a7c59;
    --bugo-btn-border:   #7aab8a;
}
body{margin:0;background:#e8e8e0;color:#1a1a1a;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.page{max-width:1080px;margin:0 auto;padding:34px 18px 110px}
.intro{margin-bottom:22px}
.eyebrow{margin:0 0 8px;color:#4a7c59;font-weight:800;letter-spacing:.04em}
h1{font-size:30px;line-height:1.22;margin:0 0 10px}
h2{font-size:20px;margin:0 0 12px}
p{line-height:1.65}
.muted{color:#666}
.section-card,.form-card,.bugo-card{background:#fff;border:1px solid #d0d0c8;border-radius:18px;padding:20px;margin:16px 0;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.section-head{margin-bottom:16px}
.section-head p{margin:0;color:#666}
.image-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.select-card{position:relative;display:block;border:1px solid #d0d0c8;border-radius:16px;background:#fafafa;padding:12px;cursor:pointer;transition:.18s ease}
.select-card:hover{border-color:#4a7c59;transform:translateY(-1px)}
.select-card.is-selected{border-color:#4a7c59;background:#f3faf5;box-shadow:0 0 0 3px rgba(74,124,89,.14)}
.select-card input{position:absolute;opacity:0;pointer-events:none}
.check{position:absolute;top:10px;right:10px;background:#fff;border:1px solid #d0d0c8;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:800;color:#666;z-index:2}
.select-card.is-selected .check{background:#4a7c59;border-color:#4a7c59;color:#fff}
.thumb{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;background:#fff;border-radius:12px;overflow:hidden;border:1px solid #e5e5dd}
.text-grid .thumb{aspect-ratio:4/3}
.thumb img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.title{display:block;margin-top:10px;font-size:14px;font-weight:700;line-height:1.45}
.empty{grid-column:1/-1;color:#666}
.form-grid{display:grid;grid-template-columns:1fr;gap:14px}
label{display:block;font-weight:800;font-size:14px}
label b{color:#dc3545}
input,select,textarea{width:100%;box-sizing:border-box;margin-top:7px;border:1px solid #d0d0c8;border-radius:12px;background:#fff;padding:12px 13px;font-size:16px;font-family:inherit}
textarea{resize:vertical}
.sticky-cta{position:fixed;left:0;right:0;bottom:0;background:rgba(232,232,224,.92);backdrop-filter:blur(10px);border-top:1px solid #d0d0c8;padding:12px 16px}
.sticky-cta button{display:block;width:min(1040px,100%);height:52px;margin:0 auto;border:1.5px solid var(--bugo-btn-border);border-radius:14px;background:var(--bugo-btn-bg);color:var(--bugo-btn-color);font-weight:600;font-size:16px;cursor:pointer}
.sticky-cta button:hover{background:var(--bugo-btn-bg-hover)}
.back-link{display:inline-flex;margin-top:10px;color:#4a7c59;font-weight:800;text-decoration:none}
.bugo-card{max-width:620px;margin:0 auto;text-align:center}
.bugo-visual{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:20px;min-height:110px}
.profile-symbol{max-width:110px;max-height:110px}
.text-symbol{max-width:180px;max-height:110px}
.info-list{margin:24px 0;text-align:left;border-top:1px solid #e5e5dd}
.info-list div{display:grid;grid-template-columns:74px 1fr;gap:12px;padding:13px 0;border-bottom:1px solid #e5e5dd}
dt{font-weight:900;color:#4a7c59}
dd{margin:0;line-height:1.6}
.sub-section{text-align:left;margin-top:22px;padding-top:18px;border-top:1px solid #e5e5dd}
.sub-section ul{margin:0;padding-left:20px;line-height:1.8}
.share-actions{display:grid;grid-template-columns:1fr;gap:10px;margin-top:26px}
.share-actions button,.share-actions a{height:48px;border-radius:12px;border:0;background:#4a7c59;color:#fff;font-weight:900;font-size:16px;text-decoration:none;display:flex;align-items:center;justify-content:center;cursor:pointer}
.share-actions a{background:#fff;color:#4a7c59;border:1px solid #4a7c59}
@media (min-width:720px){
    .page{padding-top:54px}
    h1{font-size:38px}
    .image-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
    .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}