/* BASIC css start */
@import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro:wght@400;700&family=Beth+Ellen&family=Courgette&family=Dancing+Script:wght@400..700&family=Nanum+Pen+Script&family=Playwrite+DE+SAS:wght@100..400&family=Josefin+Sans:wght@300;400;700&family=Hahmlet:wght@300;400;600&family=Noto+Sans+KR:wght@300;400;600&family=Noto+Serif+KR:wght@300;400;600&display=swap');

body {
    font-family: 'Pretendard', sans-serif;
    margin: 0;    
    color: #111111; 
    -webkit-text-size-adjust: none; /* iOS ÅؽºÆ® °­Á¦ È®´ë ¹æÁö */
}

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

/* [¼öÁ¤] HTML º¯°æ ¾øÀÌ ±âÁ¸ PC À̹ÌÁö Ŭ·¡½º¸¦ °¡·Îä¾î ¸ð¹ÙÀÏ ´ëÀÀ */
.personal_img img, .marking_img img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* ¸ÞÀÎ ·¹À̾ƿô: ¸ð¹ÙÀÏ¿¡¼­´Â Flex¸¦ È°¿ëÇØ »ó´Ü ¼³Á¤ ¹èÄ¡ ¹«µå ¿Ï¼º */
.main-layout {
    display: flex;
    flex-direction: column;   /* ¸ð¹ÙÀÏ ±âº» 1¿­ À§¿¡¼­ ¾Æ·¡·Î È帧 */
    align-items: center;
    margin: 20px auto;
    width: 100%;
}

/* ¸ð¹ÙÀÏ Àü¿ë ½Ã°¢ ¹èÄ¡ ¼ø¼­(Order) Á¦¾î°è */
.mobile-order-1 { order: 1; } /* ÆùÆ® ¼±Åà */
.mobile-order-2 { order: 2; } /* ¹ß¶õ½º */
.mobile-order-3 { order: 3; } /* Æ÷Áö¼Ç */
.mobile-order-4 { order: 4; margin: 15px 0; } /* ¹ÝÁö ¹Ì¸®º¸±â */
.mobile-order-5 { order: 5; } /* ÀÎDzâ (¹ÝÁö ¹Ù·Î ¹Ø¿¡ ¹ÐÂø) */
.mobile-order-6 { order: 6; width: 100%; } /* ½Ã±×´Ïó ½Éº¼ Æеå */

.preview-area {
    width: 100%;
    max-width: 320px;         /* ¹ÝÁö ÁýÁßµµ¸¦ À§ÇØ ¹Ì¼¼ Ãà¼Ò Á¶À² */
    display: flex;
    justify-content: center;
    align-items: center;
}

.parent_warp { width: 100%; max-width: 1480px; position: relative; margin: 0 auto; }
.craftsman_img { width: 100%; }

.marking_img { }

/* [¼öÁ¤] ¹Ì¸®º¸±â ¹ÝÁö Å©±â ¸ð¹ÙÀÏ ÃÖÀûÈ­ ´Ù¿î»çÀÌ¡ (¸Æ½º 250px) */
.ring-wrapper { width:100%; max-width:250px; margin:0 auto; }
.ring-preview-container { width:100%; padding-top:100%; position:relative; }

/* ¹ÝÁö ¿ÀºêÁ¦ */
.ring-outer { position:absolute; inset:0; border: 1px solid #ddd6ce; border-radius:50%; background-color: #ffffff; box-shadow: 0 10px 30px rgba(0,0,0,0.015); }
.ring-inner {width:78%; height:78%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border: 1px solid #ddd6ce; border-radius:50%; z-index:1; }
.engraving-overlay { position:absolute; inset:0; pointer-events:none; z-index:2; font-weight:500; color:#3a3a3a; }

.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-family: 'Noto Serif KR', serif !important; font-size: 1.6rem; text-align: center; letter-spacing: -0.01em; line-height: 1.3; padding: 40px 0px 0px 0px; font-weight: 600; }
.option_subname { font-size: 0.85rem; text-align: center; line-height: 1.6; letter-spacing: initial; padding: 20px 10px 35px 10px; word-break: keep-all; }
.simulator_title { padding: 80px 0px 0px 0px; font-size: 0.9rem; line-height: 1.6; letter-spacing: 0.03em; word-break: keep-all; font-weight:500; font-family: 'Josefin Sans', sans-serif; }


.custom_warp { margin: 20px 0px 100px 0px; }

.panel-area { width: 100%; margin: 0; }
.options-area { width:100%; }
.option-group { display: flex; align-items: center; justify-content: space-between; width: 100%; } 
.option-group label { width: 70px; flex-shrink: 0; margin-bottom: 0px; font-family: 'Josefin Sans', sans-serif;  font-size: 13px; letter-spacing: 0.05em; color: #8e8171; font-weight: 400; }

.font-select-group, .slider-group { padding: 8px 0px; }

.engraving-input-group {
    display: flex;
    flex-direction: column;   
    align-items: stretch !important;
    width: 100%;
    padding-top: 15px;
}

.engraving-header {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    width: 100%;
    margin-bottom: 8px; 
}

/* RESET ¹öÆ° ½ºÅ¸ÀÏ */
.engraving-header .clear_btn {
    position: static !important;
    font-family: 'Josefin Sans', sans-serif; 
    font-size: 11px; 
    letter-spacing: 0.05em; 
    color: #999999; 
    text-decoration: underline; 
    text-underline-offset: 3px;
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
    transition: color 0.2s ease; 
}

.engraving-header .clear_btn:hover { 
    color: #111111 !important; 
}

.engraving-header label {
    margin: 0 !important;
    width: auto !important;
}

.engraving-input-group .input-wrapper {
    width: 100%;
}

/* ÀÎDzâ Å׵θ® ÇÏ´Ü ½Ç¼± Æ÷ÀÎÆ® ¹«µå Àû¿ë */
#custom-engraving { 
    width: 100%; 
    font-family: 'Pretendard', sans-serif; 
    padding: 12px 0px 8px 0px; 
    border: none !important; 
    border-bottom: 1px solid #111111 !important;
    border-radius: 0px; 
    font-size: 14px; 
    box-sizing: border-box;
    letter-spacing: 0.1em;
    background: transparent; 
    color: #111111; 
    outline: none;
}

#custom-engraving:focus {
    outline: none !important;
    border-bottom: 1px solid #111111 !important;
}

/* Á¤°¥ÇÑ ¿øÇü ¹Ì´Ï¸Ö Ĩ ½ºÅ¸ÀÏ */
.symbol-grid { display:flex; flex-wrap:wrap; gap:6px; }

.symbol-btn { 
    padding: 0; margin: 0; border: none; background: #ffffff; border-radius: 50%; cursor: pointer; width: 100%; min-width: 0; 
    aspect-ratio: 1 / 1; height: auto; font-size: 12px; color: #444444; text-align: center; display: flex; align-items: center; justify-content: center; 
    line-height: 1; box-shadow: 0 2px 5px rgba(0,0,0,0.03); border: 1px solid #f0eae1; box-sizing: border-box;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; 
}

/* ALL ÇÁ¸®¼Â ¹öÆ° ½ºÅ¸ÀÏ */
.all-btn { 
    padding: 0; margin: 0; width: 100%; min-width: 0; aspect-ratio: 1 / 1;  height: auto; font-size: 10px; font-weight: 600; font-family: 'Josefin Sans', sans-serif; text-transform: uppercase; color: #111111; background:#f4f0ea; border: none; 
    border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 2px 5px rgba(0,0,0,0.03); box-sizing: border-box;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; 
}

.symbol-btn i { font-size: 11px; padding: 0 !important; }

/* ·¹À̾ƿô °ÝÀÚ ¹Ì¼¼ Á¶À²: Á¡(.) Ãß°¡ ´ëÀÀÀ» À§ÇØ 9¿­ ¹èÄ¡ ±¸Á¶·Î È®Àå º¯°æ */
.number-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 8px;
    margin-top: 6px;
    width: 100%;
}
.roman-label { font-family: 'Josefin Sans', sans-serif; font-size: 13px; letter-spacing: 0.05em; color: #8e8171; font-weight: 400; margin: 35px 0px 8px 0px;}


/* ==========================================
   Á¶ÀÛ ¿µ¿ª UI µðÅ×Àϸµ ¼±¾ð (·°¼Å¸® ¹Ì´Ï¸Ö ¹«µå ¿Ïº® º¹¿ø)
   ========================================== */
.option-group .font-choise { 
    flex: 1; 
    height: 35px; 
    border: none; 
    border-bottom: 1px solid #111; 
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 10px center;
    background-size: 14px;
    font-size: 14px; 
    margin-left: 20px; 
    outline: none; 
    -webkit-appearance: none; 
    -moz-appearance: none;
    appearance: none;
    padding-right: 30px;      
}

.only_anniversary { font-size: 0.7rem; color: #8e8171; letter-spacing: 0.05em; padding: 0px 0px 0px 0px; font-style: italic; word-break: keep-all; }

/* 1. ¸¶½ºÅÍ Æ®·¢ ÃÖÀûÈ­ ÄÚ¾î (½Ã½ºÅÛÀÌ ºÎ¿©ÇÏ´Â µÐŹÇÑ ¹è°æ»ö°ú Å׵θ®¸¦ ¿Ïº®ÇÏ°Ô ÆøÆÄ Ã³¸®) */
.option-group input[type="range"] { 
    -webkit-appearance: none !important; 
    appearance: none !important; 
    flex: 1 !important; 
    height: 30px !important;              /* ¼Õ°¡¶ô ÅÍÄ¡ ¾ÈÁ¤ ¿µ¿ª */
    outline: none !important; 
    margin: 0 0 0 20px !important; 
    padding: 0 !important; 
    cursor: pointer !important; 
    touch-action: none !important; 

    /* »óÀ§ °øÅë º£ÀÌÁö À½¿µÀ» °­Á¦·Î Åõ¸í ó¸®ÇÏ¿© ¼Ò¸ê½ÃÅ´ */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    /* ¼öÁ÷ 30pxÀÇ ¿Ïº®ÇÑ 50% Á¤Áß¾Ó ÁöÁ¡¿¡ 1.5px ±½±âÀÇ ´ÙÅ© º£ÀÌÁö ½Ç¼± ±¸Ãà */
    background-image: linear-gradient(to bottom, #a6a29e, #a6a29e) !important;
    background-size: 100% 1.5px !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

/* 2. À¥Å°Æ® ±â¹Ý ºê¶ó¿ìÀú¿ë Á¶Àý ´ÜÃß (Á¤Áß¾Ó ÀÚ¼®½Ä Ãà Á¤·Ä ¹× ¹Ì´Ï¸Ö ¼­Å¬ Ĩ) */
.option-group input[type="range"]::-webkit-slider-thumb { 
    -webkit-appearance: none !important; 
    appearance: none !important; 
    width: 14px !important;                /* Á¤°¥ÇÏ°í ¼¼·ÃµÈ ÇÁ¸®¹Ì¾ö ´ÜÃß Å©±â */
    height: 14px !important; 
    border-radius: 50% !important;         /* ¿Ïº®ÇÑ ¿øÇü ¼­Å¬ */
    background: #ffffff !important;        /* ±ú²ýÇÑ ¼ø¹é»ö ¾Ë¸ÍÀÌ */
    border: 1px solid #bda385 !important;  /* ºê·£µå °¨¼º¿¡ ¸ÂÃá ÀºÀºÇÑ °ñµåº£ÀÌÁö Å׵θ® */
    cursor: pointer !important; 
    
    /* °¡·Î ½Ç¼±ÀÇ Á¤Áß¾Ó ´Ü¸é°ú ´ÜÃßÀÇ ¹«°ÔÁß½ÉÀ» ¿ÀÂ÷ ¾øÀÌ ¿Ïº® ¸ÅĪ */
    margin-top: 0 !important; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important; 
    
    /* Åõ¹ÚÇÑ ¿Ü°û »ç°¢Çü ÀÜ»óÀ» Æı«ÇÏ°í ÅÍÄ¡ ¹Ý°æ¸¸ »ç¹æ 10px È®Àå Á¦¾î */
    outline: 10px solid transparent !important; 
    background-clip: padding-box !important;
    transition: transform 0.1s ease !important; 
}

/* ÅÍÄ¡ ÁßÀÏ ¶§ ¹ÝÀÀ Çǵå¹é */
.option-group input[type="range"]::-webkit-slider-thumb:active {
    transform: scale(1.15) !important; 
    border-color: #111111 !important; 
    background: #fbfbf9 !important;
}

/* 3. ÆÄÀ̾îÆø½º ºê¶ó¿ìÀú¿ë ¼±¸íµµ ¹× Ãà ¿Ïº® µ¿±âÈ­ */
.option-group input[type="range"]::-moz-range-track {
    height: 1.5px !important;
    background: #a6a29e !important;
    border: none !important;
}
.option-group input[type="range"]::-moz-range-thumb { 
    width: 14px !important; 
    height: 14px !important; 
    border-radius: 50% !important; 
    background: #ffffff !important; 
    border: 1px solid #bda385 !important; 
    cursor: pointer !important; 
    box-sizing: border-box !important; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important; 
    outline: 10px solid transparent !important;
}
.option-group input[type="range"]::-moz-range-thumb:active {
    transform: scale(1.15) !important;
    border-color: #111111 !important;
}


/* »ó´Ü ¹è³Ê ¼³¸í ¹× ±âŸ ÇÏ´Ü ¿ä¼Ò */
.anniversary_btn_wrap { text-align: center; }
.anniversary_btn_wrap a { display: inline-block; text-decoration: none; }
.visit_btn_wrap { text-align: center; }
.visit_btn_wrap a { display: inline-block; text-decoration: none; }
.kakao_btn_wrap { text-align: center; }
.kakao_btn_wrap a { display: inline-block; text-decoration: none; }

.personal_warp { }
.personal_img { position: relative; }
.personal_textbox { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #fff; width: 90%; }
.personal_title { font-family: 'Josefin Sans', sans-serif; letter-spacing: 0.12em; font-size: 1.5rem; font-weight: 500; text-align:center; }
.personal_subtitle { font-size: 0.8rem; padding: 8px 0px 0px 0px; line-height: 1.4; word-break: keep-all; }

.anniversary_btn { min-width: 180px; text-align: center; padding: 15px; display: block; margin: 0 auto; font-size: 0.85rem; border: 1px solid #111; background-color: #111; color: #fff; box-sizing: border-box; }

.marking_img { position: relative; }
.marking_textbox { text-align: center; width: 100%; }
.marking_title { font-family: 'Noto Serif KR', serif !important; font-size: 1.6rem; text-align: center; letter-spacing: -0.01em; line-height: 1.3; padding: 40px 0px 0px 0px; font-weight: 600; }
.marking_subtitle { font-size: 0.85rem; text-align: center; line-height: 1.6; letter-spacing: initial; padding: 20px 10px 35px 10px; word-break: keep-all; }


.craftsman_top_warp { display: flex; width: 100%; margin: 0px auto; }
.craftsman_group { padding: 20px 15px 0px 15px; }
.craftsman_img { flex-basis: 50%; max-width: 50%; }
.craftsman_title { letter-spacing: 0.2em; font-size: 1.5rem; font-weight: 500; }
.craftsman_subtitle { text-align: center; font-size: 1.15em; line-height: 1.5rem; word-break: keep-all;  letter-spacing: 0.02em;}
.memorable_warp { position: relative; flex-basis: 50%; max-width: 50%; top: 70px; font-family: 'Josefin Sans', sans-serif; padding-left: 8%; }
.memorable_title { font-family: 'Josefin Sans', sans-serif; letter-spacing: 0.08em; font-size: 3rem; font-weight: 400; line-height: 1.15; }
.memorable_sub { padding: 60px 0px 60px 0px; font-size: 0.9rem; line-height: 1.5rem; }
.memorable_sub p { padding: 20px 0px; }
.experience_title { font-family: 'Josefin Sans', sans-serif; letter-spacing: 0.2em; font-size: 1.2rem; font-weight: 500; }
.awesome_icon { color: #c2b8a6; font-size: 2.8rem; padding: 30px 0px 5px 0px; }
.awesome_text { font-family: 'Pretendard', sans-serif; font-size: 0.9rem; font-weight: 500; color: #5e5c5a; letter-spacing: 0.05em; word-break: keep-all; }
.experience_warp ul li { width: 20%; text-align: center; display: inline-block; list-style: none; margin: 0px 10px; }

/* ź»ý¼® */
.birth_warp { padding:0; }
.birth_title { position:relative; font-size:1.4rem; letter-spacing:0.15em; font-family:'Josefin Sans', sans-serif; padding:40px 0px 15px 0px; border-bottom:2px solid #111; }
.birth_sub { font-size:0.85rem; line-height:1.5; padding:15px 0; }
.birth_box { display:grid; grid-template-columns:repeat(2, 1fr); gap:25px 15px; background:#fff; padding:30px 0px; text-align:center; }
.birth_item { display:flex; flex-direction:column; align-items:center; }
.birth_item img { width:45px; height:45px; object-fit:contain; margin-bottom:10px; }
.birth_date { font-family:'Josefin Sans', sans-serif; font-size:12px; color:#c39562; margin-bottom:3px; }
.birth_name { font-family:'Josefin Sans', sans-serif; font-size:12px; color:#111111; }

@media (max-width:1024px) {
.birth_box { grid-template-columns:repeat(4, 1fr); gap:25px 15px; padding:30px 15px; }
}

@media (max-width:768px) {
.birth_box { grid-template-columns:repeat(4, 1fr); gap:25px 15px; padding:30px 15px; }
.birth_item img { width:20px; height:20px; }
}

/* À¥ÆùÆ® ŸÀÌÇÎ */ 
.webfont-warp { display: grid; grid-template-columns: 1fr; gap: 15px; width: 100%; margin: 0 auto; padding: 20px 0; }
.master-typing-area { width: 100%; margin: 0 auto 30px; }
.master-typing-area input { width: 100%; padding: 10px 0px; border: none !important; border-bottom: 1px solid #111111 !important; border-radius: 0px; font-size: 14px; box-sizing: border-box; background: transparent; color: #111111; }
.webfont_title { font-family: 'Noto Serif KR', serif !important; font-size: 1.6rem; text-align: center; font-weight: 600; line-height: 1.3; padding: 100px 0px 0px 0px; }
.webfont_detail { font-size: 0.85rem; text-align: center; line-height: 1.5; padding: 20px 10px 35px 10px; word-break: keep-all; }
.font-warp .font-type .font-typing input { width: 100%; font-size: 15px; color: #c2935f; line-height: 35px; border: 1px solid #d4d0cd; margin-bottom: 10px; text-indent: 10px; }
.font-type { height:120px; margin-bottom:20px; }
.font-warp { border-bottom: none; padding: 20px; background-color: #fbfbf9; border-radius: 4px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; min-height: 110px; transition: all 0.2s ease; }
.font-warp:hover { transform: translateY(-2px); background: #ffffff; }
.font-warp [id^="preview-"] { display: block !important; margin-top: auto !important; word-break: break-all !important; }
.font-typing { padding: 10px 0px 0px 0px; }
.font-preview-1 { font-family: 'Courgette', cursive !important; font-size: 20px; padding-left:10px; letter-spacing: 0.00em; }
.font-preview-2 { font-family: 'Dancing Script', cursive !important; font-size: 21px; padding-left:10px; letter-spacing: 0.03em; }
.font-preview-3 { font-family: 'Hahmlet', serif !important; font-size: 18px; padding-left:10px; letter-spacing: -0.04em; }
.font-preview-4 { font-family: 'Noto Serif KR', serif !important; font-size: 18px; padding-left:10px; letter-spacing: -0.01em; }
.font-preview-5 { font-family: 'Noto Sans KR', sans-serif !important; font-size: 18px; padding-left:10px; letter-spacing: 0.02em; }
.font-preview-6 { font-family: 'Nanum Pen Script', cursive !important; font-size: 26px; padding-left:10px; letter-spacing: 0.01em; }
.font-preview-7 { font-family: 'Josefin Sans', sans-serif !important; font-size: 20px; padding-left:10px; letter-spacing: 0.01em; }
.font-preview-8 { font-family: 'Playwrite DE SAS', cursive !important; font-size: 17px; padding-left:10px; letter-spacing: 0.01em; }
.font-preview-9 { font-family: 'Beth Ellen', cursive !important; font-size: 16px; padding-left:10px; letter-spacing: -0.01em; }
.font_typesize { display: flex; align-items: center; font-family: 'Josefin Sans', sans-serif; font-size: 12px; padding-bottom: 20px; }
.font-typ { padding-right: 10px; }
.font-name { padding-right: 10px; }
.font-face-s { font-family: 'Lato', 'Noto Sans KR', sans-serif; line-height: 1; font-size: 12px; vertical-align: middle; color: #444746; }
.font-face-s:before { content: "|"; margin-right: 10px; }

/* WHAT TO KNOW */ 
.what_title { font-family: 'Noto Serif KR', serif !important; font-size: 1.6rem; text-align: center; font-weight: 600; line-height: 1.3; padding: 100px 0px 0px 0px; }
.what_detail { font-size: 0.85rem; text-align: center; line-height: 1.6; letter-spacing: initial; padding: 20px 10px 35px 10px; word-break: keep-all; }
.what_title_warp { margin: 0px 0px 100px 0px; }

.visit_btn { min-width: 180px; text-align: center; padding: 15px; display: block; margin: 0 auto; font-size: 0.85rem; border: 1px solid #111; position: relative; overflow: hidden; background-color: #fff; color: #fff; z-index: 1; transition: color 0.4s ease; box-sizing: border-box; }
.visit_btn::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #111; z-index: -1; transform: scaleY(1); transform-origin: top; transition: transform 0.4s ease; }
.visit_btn:hover { color: #111; }
.visit_btn:hover::before { transform: scaleY(0); }

.kakao_info { letter-spacing: 0.02em; font-size: 0.85rem; text-align: center; line-height: 1.5; padding: 0px 0px 20px 0px; margin: 50px 0px 0px 0px; }
.kakao_btn_wrap { text-align: center; }
.kakao-link { display: inline-block; text-decoration: none; }
.kakao_btn { position: relative; display: inline-block; text-align: center; padding-bottom: 4px; color: #111; letter-spacing: 0.02em; font-size: 0.85rem; }
.kakao_btn::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #c7a97b; transform: scaleX(1); transform-origin: left; transition: transform 0.35s ease; }
.kakao-link:hover .kakao_btn::after { transform: scaleX(0); }


/* ==========================================
   ÅÂºí¸´ ¹× µ¥½ºÅ©Åé ´ëÈ­¸é ·¹À̾ƿô º¹¿ø (CSS Grid ¼³°è)
   ========================================== */
@media (min-width: 769px) {
    .main-layout { 
        display: grid;
        grid-template-columns: 1fr 1fr; /* Á¿ì 2¿­ ¹èÄ¡ ±ÕÇü */
        gap: 45px; 
        margin: 50px auto 50px auto; 
    }
    
    /* PC Àüȯ ½Ã ¿ø·¡ÀÇ 2´Ü ±¸Á¶·Î ÀÚ¿¬½º·´°Ô Á¤·Ä º¹¿ø */
    .mobile-order-1 { grid-column: 2; grid-row: 1; } /* ÆùÆ® */
    .mobile-order-2 { grid-column: 2; grid-row: 2; } /* ¹ß¶õ½º */
    .mobile-order-3 { grid-column: 2; grid-row: 3; } /* Æ÷Áö¼Ç */
    .preview-area.mobile-order-4 { 
        grid-column: 1; 
        grid-row: 1 / span 6; /* ÁÂÃø °ø°£ Àüü Â÷Áö */
        max-width: 420px;
        margin: 0;
    }
    .mobile-order-5 { grid-column: 2; grid-row: 4; } /* ÀÎDzâ */
    .mobile-order-6 { grid-column: 2; grid-row: 5; } /* ½Éº¼ Æеå */

    .option_titlename { font-size: 2.2rem; padding: 100px 0px 0px 0px; }
    .option_subname { font-size: 1rem; line-height: 1.8rem; padding: 30px 0px 50px 0px; }
    .custom_warp { padding: 50px 0px; }
    .option-group label { width: 20%; font-size: 14px; letter-spacing: 0.08em; }
    /* ÅÂºí¸´/PC ȯ°æ °ÝÀÚ´Â ±âº» 16¿­·Î °ÝÀÚ º¹¿ø */
    .number-grid { grid-template-columns: repeat(16, minmax(0, 1fr)); gap: clamp(4px, 0.8vw, 10px); }
    .roman-label { font-size: 14px; letter-spacing: 0.08em; margin: 35px 0px 12px 0px; }
    .option-group input[type="range"]::-webkit-slider-thumb { width: 12px; height: 12px; }
    .option-group input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; }
    .personal_textbox { top: 25%; }
    .personal_title { font-size: 3.0rem; letter-spacing: 0.2em; }
    .personal_subtitle { font-size: 0.9rem; padding: 10px 0px 0px 0px; line-height: 1.5rem; }
    .anniversary_btn { min-width: 200px; padding: 1.2em; font-size: 0.9rem; background-color: #fff; }
    .anniversary_btn::before { transform: scaleY(1); }
    .anniversary_btn:hover { color: #111; }
    .anniversary_btn:hover::before { transform: scaleY(0); }
    .marking_textbox { top: 65%; }
    .marking_title { font-size: 2.2rem; }
    .marking_subtitle { font-size: 1.0rem; padding: 10px 0px 0px 0px; line-height: 1.8rem; }
    .craftsman_group { padding: 50px 100px 0px 100px; }
    .birth_title { font-size: 1.8rem; letter-spacing: 0.2em; padding: 80px 0px 20px 0px; }
    .birth_sub { font-size: 1rem; line-height: 1.7rem; padding: 20px 0px 50px 0px; }
    .birth_box { grid-template-columns: repeat(4, 1fr); gap: 55px 30px; padding: 70px 60px; }
    .birth_item img { width: 30px; height: 30px; margin-bottom: 18px; }
    .birth_date { font-size: 11px; letter-spacing: 0.18em; }
    .birth_name { font-size: 12px; letter-spacing: 0.08em; }
    .webfont-warp { grid-template-columns: repeat(3, 1fr); gap: 40px 30px; padding: 40px 0; }
    .master-typing-area { width: 70%; margin: 0 auto 70px; }
    .master-typing-area input { padding: 12px 0px 8px 0px; font-size: 14px; }
    .webfont_title { font-size: 2.2rem; padding: 100px 0px 0px 0px; }
    .webfont_detail { font-size: 1rem; line-height: 1.8rem; padding: 30px 0px 70px 0px; }
    .font-warp { padding: 25px; min-height: 140px; }
    .font-preview-1 { font-size: 24px; }
    .font-preview-2 { font-size: 25px; }
    .font-preview-3 { font-size: 23px; }
    .font-preview-4 { font-size: 23px; }
    .font-preview-5 { font-size: 23px; }
    .font-preview-6 { font-size: 33px; }
    .font-preview-7 { font-size: 25px; }
    .font-preview-8 { font-size: 20px; }
    .font-preview-9 { font-size: 19px; }
    .font_typesize { font-size: 14px; padding-bottom: 20px; }
    .font-face-s { font-size: 12px; }
    .font-face-s:before { margin-right: 10px; }
    .what_title { font-size: 2.2rem; padding: 100px 0px 0px 0px; }
    .what_detail { font-size: 1rem; line-height: 1.8rem; padding: 30px 0px 30px 0px; }
    .visit_btn { min-width: 200px; padding: 1.2em; font-size: 0.9rem; background-color: #fff; }
    .visit_btn::before { transform: scaleY(1); }
    .visit_btn:hover { color: #111; }
    .visit_btn:hover::before { transform: scaleY(0); }
    .kakao_info { letter-spacing: 0.1em; font-size: 0.9rem; line-height: 1.8rem; padding: 0px 0px 20px 0px; margin: 100px 0px 0px 0px; }
    .kakao_btn { font-size: 0.9rem; }
}
/* BASIC css end */