/* BASIC css start */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro&family=Beth+Ellen&family=Cedarville+Cursive&family=Courgette&family=Hahmlet:wght@100..900&family=Josefin+Sans&family=Nanum+Pen+Script&family=Noto+Sans+KR:wght@400&family=Noto+Serif+KR:wght@400&family=Outfit:wght@100..900&family=Playwrite+DE+SAS:wght@100..400&display=swap');
       
/* -------------------- °øÅë ½ºÅ¸ÀÏ -------------------- */
       
.parent-container {
    display: flex;
    justify-content: center;
    width: 100%;
}
.ss-engraving-wrap {
    max-width: 1100px;
    width: 100%; /* ºÎ¸ð ³Êºñ¿¡ ¸ÂÃç ³Êºñ¸¦ 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 */