/* BASIC css start */
<!-- Pretendard + Google Fonts -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css" />
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700&family=Nanum+Myeongjo:wght@400;700&family=Nanum+Pen+Script&family=Courgette&family=Anonymous+Pro:wght@400;700&family=Beth+Ellen&display=swap" rel="stylesheet">


body {
    font-family: 'Pretendard', sans-serif;
    margin: 0;    
    color: #333;
}

h1 {
    margin: 0 0 18px 0;
    font-size: 20px;
    text-align: left;
    max-width: 980px;
    margin-left: 24px;
}

.main-layout {
    display: flex;
    gap: 28px;
    align-items: center;
    max-width: 1100px;
    margin: 50px auto 50px auto;
}

.preview-area {
    flex: 1 1 0;
    min-width: 360px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ring-wrapper { width:100%; max-width:420px; margin:0 auto; }
.ring-preview-container { width:100%; padding-top:100%; position:relative; }

.ring-outer {
    position:absolute; inset:0;
    border:1px solid #cfcfcf; border-radius:50%;        
}

.ring-inner {
    width:78%; height:78%;
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    border:1px solid #cfcfcf; border-radius:50%;
    z-index:1;
}

.engraving-overlay {
    position:absolute; inset:0; pointer-events:none; z-index:2;
    font-weight:500;
    color:#333;
}

.char-wrapper {
    position:absolute;
    left:50%; top:50%;
    width:0; height:0;
    transform-origin:center center;
}
.char-wrapper > span,
.char-wrapper > img {
    position:absolute;
    left:50%; top:50%;
    transform:translate(-50%,-50%);
    line-height:1;
}

.option_titlename { font-size: 18px; margin-bottom: 30px; letter-spacing: 0.5px; font-family: 'Josefin Sans', sans-serif; }
.clear_btn { 
    border: 1px solid #ccc; 
    background: #fff; 
    padding: 3px 10px 1px 10px; 
    border-radius:6px;
    cursor:pointer;
    position: absolute;
    top: -28px;
    right: 0;
    font-family: 'Josefin Sans', sans-serif;
}
.clear_btn:hover { background:#f2f6fb; border-color:#d6e3fb; }

.panel-area { width:550px; flex: 0 0 550px; margin-right: 0px 20px 0px 20px; }
.options-area { width:100%; }
.option-group { margin-bottom:10px; position: relative; }
.option-group label { width: 120px; display: inline-block; margin-bottom:8px; font-family: 'Josefin Sans', sans-serif; }

.engraving-input-group { position: relative; }
.input-wrapper { position: relative; display: flex; flex-direction: column; }
#custom-engraving {
    font-family: 'Josefin Sans', sans-serif;
    flex:1;
    padding:10px 12px;
    border:1px solid #ddd;
    border-radius:6px;
    font-size:14px;
    box-sizing: border-box;
}

.symbol-grid { display:flex; flex-wrap:wrap; gap:5px; }
.symbol-btn {
    margin: 5px 3px 5px 0px;
    border:1px solid #ccc;
    background:#fff;    
    border-radius:6px;
    cursor:pointer;
    width:27px; height:27px;
    font-size:11px;
    text-align:center;
    line-height:1.9;
}
.symbol-btn:hover { background:#f2f6fb; border-color:#d6e3fb; }

/* ALL ¹öÆ° ½ºÅ¸ÀÏ */
.all-btn {
    margin: 5px 3px 5px 0px;
    width:27px;
    height:27px;
    font-size:11px;
    background:#f0f4ff;
    border:1px solid #99aaff;
    border-radius:6px;
    cursor:pointer;
}
.all-btn:hover { background:#e0e8ff; }

/* ¼ýÀÚ ¹öÆ° ·¹À̾ƿô */
.number-grid { display:grid; grid-template-columns: repeat(16, 1fr); gap:2px; }
.roman-label { display:block; margin-bottom:6px; font-family: 'Josefin Sans', sans-serif; margin-top: 15px;}

/* BASIC css end */