/* BASIC css start */
.parent-container { display:flex; justify-content:center; width:100%; }
.ss-engraving-wrap { max-width:1100px; width:100%; margin:0 auto; font-family:'Josefin Sans',sans-serif; color:#333; }
.ss-top-section { background-color:#f8f9fb; padding:35px 50px 20px 50px; margin:50px 0px 50px 0px; max-width:1100px; }
.ss-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.ss-title { font-size:17px; letter-spacing:1px; }
.ss-controls { display:flex; align-items:center; gap:8px; }
.ss-symbols { display:flex; align-items:center; gap:6px; }
.symbol-text { font-size:13px; color:#555; margin-right:4px; }
.ss-symbol-btn { padding:7px 7px; border-radius:20px; background:#eaeef7; cursor:pointer; border:1px solid #eaeef7; transition:background-color 0.2s,border-color 0.2s; display:flex; justify-content:center; align-items:center; }
.ss-symbol-btn:hover { background:#dbe2f1; border-color:#dbe2f1; }
.dia-symbol i { font-size:12px; }
.heart-symbol i, .empty-heart-symbol i { font-size:15px; }
.ss-symbol-btn.active { background:#222; color:#fff; border-color:#222; }
.ss-reset { margin-left:20px; padding:6px 25px; border-radius:20px; background:#efefef; cursor:pointer; font-family:'Josefin Sans',sans-serif; border:1px solid #ddd; transition:background-color 0.2s,border-color 0.2s; }
.ss-reset:hover { background:#e0e0e0; border-color:#e0e0e0; }
.ss-input-area { margin:16px 0 26px; text-align:center; }
#engravingInput { width:100%; height:45px; padding:0 0 0 10px; border:1px solid #eee; background:#efefef; font-size:15px; font-family:"Outfit",sans-serif; display:inline-block; }
.ss-text-btns { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:10px; }
.ss-engraving-btn { padding:6px 12px; border-radius:20px; background:#f7f7f7; border:1px solid #ddd; cursor:pointer; letter-spacing:0.5px; font-family:'Noto Serif KR'; font-size:13px; transition:background-color 0.2s; }
.ss-engraving-btn:hover { background:#e0e0e0; }
.ss-font-grid { display:grid; grid-template-columns:repeat(3,1fr); column-gap:45px; row-gap:0; }
.font-item { padding:15px 0; text-align:left; }
.font-name { font-size:13px; margin-bottom:6px; color:#333; text-transform:uppercase; }
.font-preview { display:flex; align-items:center; border:1px solid #efefef; padding:0 0 0 10px; height:35px; background:#fff; }
.font-item[data-font="Courgette"] .font-preview { font-size:15px; }
.font-item[data-font="Dancing Script"] .font-preview { font-size:16px; }
.font-item[data-font="Hahmlet"] .font-preview { font-size:14px; }
.font-item[data-font="Noto Serif KR"] .font-preview { font-size:15px; }
.font-item[data-font="Noto Sans KR"] .font-preview { font-size:15px; }
.font-item[data-font="Nanum Pen Script"] .font-preview { font-size:22px; }
.font-item[data-font="Josefin Sans"] .font-preview { font-size:16px; }
.font-item[data-font="Playwrite Deutschland"] .font-preview { font-size:13px; }
.font-item[data-font="Beth Ellen"] .font-preview { font-size:12px; }
.font-preview .fa-gem, .font-preview .fa-heart, .font-preview .fa-regular.fa-heart { color:#333333; font-size:1.0rem; }
.font-preview span { white-space:pre-wrap; }
/* BASIC css end */