/* BASIC css start */
      /* ==========================================
           CSS 영역 (모바일 디자인 유지 및 PC 수준 고도화)
           ========================================== */
        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;
        }

        /* 현욱수정 */        
        .craftsman_group { padding: 40px 15px 0px 15px; }
        .right_fixed { display: none; }


        /* 메인 레이아웃: 모바일 1열 배치 흐름 */
        .main-layout {
            display: flex;
            flex-direction: column;   
            align-items: center;
            margin: 20px auto;
            width: 100%;
        }

        /* 모바일 전용 시각 배치 순서(Order) 제어 */
        .mobile-order-1 { order: 1; } /* FONT 선택 */
        .mobile-order-2 { order: 2; } /* BALANCE 슬라이더 */
        .mobile-order-3 { order: 3; } /* POSITION 슬라이더 */
        .mobile-order-4 { order: 4; margin: 20px 0; width: 100%; } /* 미리보기 (RING/PENDANT 탭 포함) */
        .mobile-order-5 { order: 5; width: 100%; } /* MESSAGE 입력창 */
        .mobile-order-6 { order: 6; width: 100%; } /* 시그니처 심볼 패드 */

        /* 미리보기 영역 컨테이너 구조화 (크기 가변 시 하단 요소 튕김 방지) */
        .preview-area {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .preview-container-box {
            width: 100%;
            max-width: 320px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* 크기 가변 시 다른 요소가 흔들리지 않게 높이 축을 고정 */
        .ring-display-area {
            width: 100%;
            height: 250px; /* 모바일 시뮬레이터 뷰포트 고정 */
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 35px;
        }

        /* 반지/펜던트 공용 반응형 체급 설정 */
        .ring-wrapper { 
            width: 100%; 
            max-width: 250px; 
            margin: 0 auto; 
            transition: max-width 0.35s cubic-bezier(0.25, 1, 0.5, 1); 
        }

        /* 펜던트 모드 전환 시 축소 체급 */
        .ring-wrapper.pendant-mode {
            max-width: 160px;
        }

        .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); 
        }

        /* [반지 기본 내부선 폭] 250px 기준 내경 78% 지정 */
        .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; 
            transition: width 0.35s ease, height 0.35s ease;
        }

        /* [두께 동결 역산] 외경이 160px로 줄어들어도 실물 폭 두께 비율이 정교하게 동결되도록 유지 */
        .ring-wrapper.pendant-mode .ring-inner {
            width: 65.56%;
            height: 65.56%;
        }

        /* 각인 글자 오버레이 */
        .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 {
            position: absolute;
            left: 50%; 
            top: 50%;
            transform: translate(-50%,-50%);
            line-height: 1;
        }

        /* [해결] parent의 width:0 수축에 의해 보석 이미지가 0px로 짓눌리는 것을 방지하는 핵심 가드 */
        .char-wrapper > img {
            position: absolute;
            left: 50%; 
            top: 50%;
            transform: translate(-50%,-50%);
            line-height: 1;
            max-width: none !important;
        }

        /* 타이틀 및 서브 설명 */
        .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: 0px 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: 75px 0px 0px 0px;
           font-size: 1.1rem;
           line-height: 1.6;
           letter-spacing: 0.03em;
           word-break: keep-all;
           font-weight: 500;
           font-family: 'Josefin Sans', sans-serif;
        }

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

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

        /* 제어 패널 그룹 */
        .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; 
        }

        .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%;
        }

        #custom-engraving { 
            width: 100%; 
            font-family: 'Pretendard', sans-serif; 
            padding: 12px 0px 8px 0px; 
            border: none !important; 
            border-bottom: 1px solid #a6a29e !important;
            border-radius: 0px; 
            font-size: 14px; 
            box-sizing: border-box;
            letter-spacing: 0.1em;
            background: transparent; 
            color: #111111; 
            outline: none;
        }

        #custom-engraving:focus,
        .master-typing-area input:focus {
            outline: none !important;
            border: none !important;
            border-bottom: 1px solid #111111 !important;
            box-shadow: none !important;
        }

        /* 심볼 및 숫자 그리드 배열 (모바일 최적화 8열) */
        .number-grid {
            display: grid;
            grid-template-columns: repeat(8, minmax(0, 1fr));
            gap: 8px;
            margin-top: 6px;
            width: 100%;
        }

        .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; 
        }
        
        .symbol-btn:active {
            background: #111111;
            color: #ffffff;
        }

        .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; 
        }
        
        .all-btn:active {
            background: #111111;
            color: #ffffff;
        }

        .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;}

        /* 셀렉트박스 브라우저 기본 무드 최적화 제거 */
        .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;      
        }

        /* 슬라이더(레인지) 디자인 프리미엄 가공 */
        .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;
            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;
        }

        .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; 
            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;
        }

        .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;
        }

        /* 모바일 전용 RING / PENDANT 탭 버튼 스타일링 */
        .preview-tabs {
            display: flex;
            gap: 15px;
            justify-content: center;
            width: 100%;
            margin-top: 5px;
        }
        
        .preview-tabs .tab-btn {
            flex: 1;
            padding: 12px 0;
            font-size: 12px;
            font-family: 'Josefin Sans', sans-serif;
            font-weight: 400;
            letter-spacing: 0.12em;
            color: #111111;
            background-color: #ffffff;
            border: 1px solid #e8e5e0;
            cursor: pointer;
            text-align: center;
            position: relative;
            overflow: hidden;
            z-index: 1;
            transition: color 0.4s ease, border-color 0.4s ease;
        }

        .preview-tabs .tab-btn::before {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #f3efe9; /* 연베이지 단색 배경 */
            z-index: -1;
            transform: scaleY(0);
            transform-origin: bottom;
            transition: transform 0.4s ease;
        }

        .preview-tabs .tab-btn:not(.active):hover {
            border-color: #f3efe9;
        }

        .preview-tabs .tab-btn:hover::before {
            transform: scaleY(1);
        }

        .preview-tabs .tab-btn.active {
            color: #111111;
            background-color: #f3efe9;
            border-color: #f3efe9;
        }

        .preview-tabs .tab-btn.active::before {
            transform: scaleY(1);
        }

        /* 기념일 / 상담예약 Sweep Up 채우기 버튼 효과 */
        .anniversary_btn_wrap, .visit_btn_wrap, .kakao_btn_wrap { text-align: center; }
        .anniversary_btn_wrap a, .visit_btn_wrap a, .kakao_btn_wrap a { display: inline-block; text-decoration: none; }

        .anniversary_btn, .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: #111111;
            color: #fff; 
            z-index: 1;
            transition: color 0.4s ease;
            box-sizing: border-box; 
        }
        
        .anniversary_btn::before, .visit_btn::before {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #fff;
            z-index: -1;
            transform: scaleY(0);
            transform-origin: bottom;
            transition: transform 0.4s ease;
        }

        .anniversary_btn:hover, .visit_btn:hover {
            color: #111;
        }

        .anniversary_btn:hover::before, .visit_btn:hover::before {
            transform: scaleY(1);
        }

        /* 퍼스널 비주얼 헤더 */
        .personal_img { position: relative; }
        .personal_img img { width: 100%; display: block; height: calc(100vh); object-fit: cover; }
        .marking_img img { width: 100%; height: auto; display: block; object-fit: cover; }
        .personal_textbox { position: absolute; top: 27%; left: 53%; transform: translate(-50%, -50%); text-align: left; color: #fff; width: 90%; }
        .personal_title { font-family: 'Josefin Sans', sans-serif; letter-spacing: 0.02rem; font-size: 1.5rem; font-weight: 500; text-align:left; }
        .personal_subtitle { font-size: 0.85rem; padding: 20px 0px 0px 0px; line-height: 1.6; word-break: keep-all; letter-spacing: initial; }

        /* 탄생석 */
        .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; }

        .birth_warp { padding: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: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 0px 50px 0px; }
        .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 #a6a29e !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 { 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-preview-1 { font-family: 'Courgette', cursive !important; font-size: 20px; padding-left:10px; }
        .font-preview-2 { font-family: 'Dancing Script', cursive !important; font-size: 21px; padding-left:10px; }
        .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; }
        .font-preview-5 { font-family: 'Noto Sans KR', sans-serif !important; font-size: 18px; padding-left:10px; }
        .font-preview-6 { font-family: 'Nanum Pen Script', cursive !important; font-size: 26px; padding-left:10px; }
        .font-preview-7 { font-family: 'Josefin Sans', sans-serif !important; font-size: 20px; padding-left:10px; }
        .font-preview-8 { font-family: 'Playwrite DE SAS', cursive !important; font-size: 17px; padding-left:10px; }
        .font-preview-9 { font-family: 'Beth Ellen', cursive !important; font-size: 16px; padding-left:10px; }
        
        .font_typesize { display: flex; align-items: center; font-family: 'Josefin Sans', sans-serif; font-size: 12px; padding-bottom: 20px; }
        .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_title { font-family: 'Noto Serif KR', serif !important; font-size: 1.6rem; text-align: center; font-weight: 600; line-height: 1.3; padding: 50px 0px 0px 0px; border-top: 1px solid #c7c7c7; }
        .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; }

        .kakao_info { letter-spacing: 0.02em; font-size: 0.85rem; text-align: center; line-height: 1.5; padding: 50px 0px 20px 0px; border-top: 1px solid #c7c7c7; margin-top: 50px;  }
        .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); }

        /* 하단 고정 바 */
        body .shop-fixed-bottom-bar { 
            position: fixed; 
            bottom: 0; 
            left: 0; 
            width: 100%; 
            padding: 12px 16px;  
            box-sizing: border-box; 
            z-index: 99999; 
            display: flex; 
            gap: 10px; 
            background: #fff; 
            border-top: 1px solid #eaeaea;           
        }
        body .shop-fixed-bottom-bar a { 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            height: 54px; 
            font-size: 0.8rem; 
            text-decoration: none; 
            font-weight: 500; 
        }
        body .shop-fixed-bottom-bar .shop-btn-talk { 
            width: 80px; 
            flex-shrink: 0; 
            color: #3A1D1D; 
            background-color: #f4f0ea; 
        }
        body .shop-fixed-bottom-bar .shop-btn-naver { 
            flex-grow: 1; 
            color: #fff; 
            background: #000; 
        }
      
        
        /* 기념일 아이콘 */        
        .anniversary-icon { 
            margin: 30px 0px 30px 0px;
            font-size: 27px; 
            font-weight: 600; 
            color: #706a60; 
            position: relative; 
            text-align: center;
            display: block; 
            letter-spacing: -0.15rem; 
            line-height: 1; /* 추가 */
        }
        .anniversary-icon::after {
            content: "◆";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 11px; 
            line-height: 1;
            color: #7a6f5d; 
            -webkit-text-stroke: 1px #ffffff; 
            paint-order: stroke fill; 
        }        

/* 태블릿 및 대화면 매핑 (숫자 패드 뒤틀림 완전 방어) */
@media (min-width: 769px) {
    .main-layout { 
        display: grid; grid-template-columns: 1fr 1fr; gap: 45px; margin: 50px auto; 
    }
    .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; }
    .mobile-order-6 { grid-column: 2; grid-row: 5; }
    .number-grid { grid-template-columns: repeat(16, minmax(0, 1fr)); } /* 태블릿 이상에서만 16열 확장 */
}
/* BASIC css end */