@charset "utf-8";

/******************* font ******************/
@import url('https://fonts.googleapis.com/css?family=Lato');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900');
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Black+Han+Sans&display=swap');
@import url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSans.css');
/*****************************************/

:root {
    /* [Common Core Colors] */
    --cm-color-primary: #E35826;
    --cm-color-blue: #2563EB;
    --cm-color-blue-hover: #1D4ED8;
    --cm-color-blue-focus: #558ab7;
    --cm-color-blue-glow: #9ED4FF;
    
    --cm-color-red: #EF4444;
    --cm-color-red-hover: #DC2626;
    --cm-color-red-check: #fb084d;
    
    --cm-color-teal: #0D9488;
    --cm-color-teal-hover: #0F766E;
    
    --cm-color-purple: #933FBE;
    --cm-color-purple-hover: #7A2CA2;
    
    --cm-color-slate: #475569;
    --cm-color-slate-hover: #334155;
    --cm-color-slate-dark: #0F172A;
    
    /* [Text Colors] */
    --cm-text-black: #000000;
    --cm-text-main: #222222;
    --cm-text-sub: #334155;
    --cm-text-muted: #475569;
    --cm-text-light: #94A3B8;
    --cm-text-placeholder: #AAAAAA;
    
    /* [Backgrounds & Scrollbar] */
    --cm-bg-white: #FFFFFF;
    --cm-bg-light: #F8FAFC;
    --cm-bg-track: #F1F1F1;
    --cm-bg-thumb: #474747;
    --cm-bg-check: #e9ecee;
    
    /* [Borders & Radius] */
    --cm-border-color: #CBD5E1;
    --cm-border-light: #CCCCCC;
    --cm-border-check: #CACECE;
    --cm-border-check-active: #adb8c0;
    
    --cm-radius-sm: 3px;
    --cm-radius-md: 8px;
    --cm-radius-pill: 2em;
    
    /* [Transitions & Shadows] */
    --cm-transition-fast: all 0.2s ease;
    --cm-transition-normal: all 0.3s ease-in-out;
    --cm-transition-btn: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --cm-shadow-btn: 0 4px 12px rgba(50, 50, 50, 0.2);
}


/* ==========================================================================
   1. 기본 초기화 및 전역 설정 (Reset & Global)
   ========================================================================== */
html { overflow-y: scroll; }
body { 
    margin: 0; 
    padding: 0; 
    font-size: 15px; 
    background: var(--cm-bg-white); 
    -webkit-text-size-adjust: 100%; 
    -moz-text-size-adjust: 100%; 
    -ms-text-size-adjust: 100%; 
    text-size-adjust: 100%; 
}

html, h1, h2, h3, h4, h5, h6, form, fieldset, img { margin: 0; padding: 0; border: 0; }
h1, h2, h3, h4, h5, h6 { font-size: 1em; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

ul, dl, dt, dd { margin: 0; padding: 0; list-style: none; }
legend { position: absolute; margin: 0; padding: 0; font-size: 0; line-height: 0; text-indent: -9999em; overflow: hidden; }

label, input, button, select, img { vertical-align: middle; font-size: 1em; }
input, button { margin: 0; padding: 0; font-size: 1em; }
input[type="submit"], button { cursor: pointer; }

textarea, select { font-size: 15px; }
select { margin: 0; }
p { margin: 0; padding: 0; word-break: break-all; }
hr { display: none; }
pre { overflow-x: scroll; font-size: 1.1em; }
a { color: var(--cm-text-black); text-decoration: none; }

*, :after, :before { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}


/* ==========================================================================
   2. 레이아웃 및 컨테이너 공통 (Layout & Containers)
   ========================================================================== */
#wrapper {}
#container_wr:after,
#container:after { display: block; visibility: hidden; clear: both; content: ""; }

#container_wr { z-index: 5; margin: 0 auto; height: 100%; zoom: 1; }
#container { z-index: 4; position: relative; float: left; min-height: 500px; margin: 20px 0; font-size: 1em; width: 875px; zoom: 1; }

#container_title { font-size: 1.333em; margin: 0 auto; font-weight: bold; }
#container_title span { margin: 0 auto 10px; display: block; line-height: 30px; }


/* ==========================================================================
   3. 숨김 처리 및 접근성 (Hidden & Sound Only)
   ========================================================================== */
#hd_login_msg { position: absolute; top: 0; left: 0; font-size: 0; line-height: 0; overflow: hidden; }
.msg_sound_only, .sound_only { display: inline-block !important; position: absolute; top: 0; left: 0; margin: 0 !important; padding: 0 !important; font-size: 0; line-height: 0; border: 0 !important; overflow: hidden !important; }
.fa-heart { display: none !important; }


/* ==========================================================================
   4. 폼 입력 요소 공통 (Inputs, Selects & Textareas)
   ========================================================================== */
input[type=text], 
input[type=password], 
textarea, 
select { 
    padding: 10px 12px; 
    box-sizing: border-box; 
    font-size: 15px; 
    line-height: 1.4; 
    transition: var(--cm-transition-normal); 
    outline: none; 
}

input[type=text]:focus, 
input[type=password]:focus, 
textarea:focus, 
select:focus { 
    border: 1px solid var(--cm-color-blue-focus) !important; 
    box-shadow: 0 0 5px var(--cm-color-blue-glow); 
}

.placeholdersjs { color: var(--cm-text-placeholder) !important; }
*:focus { outline: none; }

/* 기본 베이직 폼 */
.input_basic { 
    height: 44px; 
    padding: 0 14px; 
    border: 1px solid var(--cm-border-color); 
    border-radius: var(--cm-radius-md); 
    font-size: 15px; 
    color: var(--cm-text-main); 
    background-color: var(--cm-bg-white); 
    box-sizing: border-box; 
    transition: var(--cm-transition-fast); 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
}
.input_basic[readonly] { background-color: var(--cm-bg-white); }
.input_basic::placeholder { color: var(--cm-text-light); }

.select_basic { 
    height: 44px; 
    padding: 0 36px 0 14px; 
    border: 1px solid var(--cm-border-color); 
    border-radius: var(--cm-radius-md); 
    font-size: 15px; 
    color: var(--cm-text-main); 
    background-color: var(--cm-bg-white); 
    background-image: url("/images/goods/ico_select.png"); 
    background-repeat: no-repeat; 
    background-position: right 12px center; 
    box-sizing: border-box; 
    outline: none; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    transition: var(--cm-transition-fast); 
}

.textarea_basic,
.textarea_order { 
    width: 100%; 
    padding: 14px 14px; 
    font-size: 15px; 
    font-family: inherit; 
    line-height: 1.6; 
    color: var(--cm-text-main); 
    background-color: var(--cm-bg-white); 
    border: 1px solid var(--cm-border-color); 
    border-radius: var(--cm-radius-md); 
    box-sizing: border-box; 
    transition: var(--cm-transition-fast); 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
}
.textarea_basic { min-height: 180px; }
.textarea_order { min-height: 100px; }

.textarea_basic[readonly],
.textarea_order[readonly] { background-color: var(--cm-bg-white); }
.textarea_basic::placeholder,
.textarea_order::placeholder { color: var(--cm-text-light); }

.input_basic:focus, .select_basic:focus, .textarea_basic:focus, .textarea_order:focus { 
    outline: none; 
    border-color: var(--cm-color-blue); 
}


/* ==========================================================================
   5. 커스텀 체크박스 및 라디오 버튼 (Checkboxes & Radios)
   ========================================================================== */
.radio-item { display: inline-flex; align-items: center; cursor: pointer; margin-right: 16px; user-select: none; font-size: 15px; color: var(--cm-text-main); transition: color 0.2s ease; }
.radio-item input[type="radio"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 2px solid var(--cm-border-light); border-radius: 50%; outline: none; cursor: pointer; margin: 0 6px 0 0; position: relative; transition: var(--cm-transition-fast); }
.radio-item:hover input[type="radio"] { border-color: var(--cm-text-muted); }
.radio-item:hover .radio-label-text { color: var(--cm-text-muted); }
.radio-item input[type="radio"]:checked { border-color: var(--cm-text-muted); background-color: var(--cm-bg-white); }
.radio-item input[type="radio"]:checked::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 9px; height: 9px; background-color: var(--cm-text-muted); border-radius: 50%; }
.radio-item input[type="radio"]:checked + .radio-label-text { color: var(--cm-text-muted); font-weight: 500; }
.radio-label-text { display: inline-block; vertical-align: middle; line-height: 1; }

.checks { position: relative; } 
.checks input[type="checkbox"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } 
.checks input[type="checkbox"] + label { display: inline-flex; align-items: center; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } 
.checks input[type="checkbox"] + label:before { content: ' '; display: inline-block; width: 21px; height: 21px; line-height: 19px; margin-right: 8px; text-align: center; vertical-align: middle; background: var(--cm-bg-white); border: 1px solid var(--cm-border-check); border-radius: var(--cm-radius-sm); box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05); flex-shrink: 0; } 
.checks input[type="checkbox"] + label:active:before, 
.checks input[type="checkbox"]:checked + label:active:before { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); } 
.checks input[type="checkbox"]:checked + label:before { content: '\2714'; color: var(--cm-color-red-check); text-shadow: 1px 1px var(--cm-bg-white); background: var(--cm-bg-check); border-color: var(--cm-border-check-active); box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1); } 

.checks_txt { font-size: 17px; font-weight: 500; cursor: pointer; user-select: none; vertical-align: middle; }


/* ==========================================================================
   6. 버튼 및 하단 버튼 그룹 (Buttons & Actions)
   ========================================================================== */
a.btn, .btn { line-height: 35px; height: 35px; padding: 0 10px; text-align: center; font-weight: bold; border: 0; transition: background-color 0.3s ease-out; }

.botton_ic * { box-sizing: border-box; }
.botton_ic { max-width: 1200px; width: 100%; margin: 30px auto 0px auto; }
.botton_ic .btn_r { list-style: none; padding: 0; margin: 0; display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; }
.botton_ic .btn_r li { margin: 0; }
.botton_ic .btn_r li a { display: inline-flex; align-items: center; justify-content: center; min-width: 120px; height: 50px; padding: 0 20px; font-size: 15px; font-weight: 700; text-decoration: none; border-radius: var(--cm-radius-md); letter-spacing: -0.3px; transition: var(--cm-transition-btn); cursor: pointer; user-select: none; white-space: nowrap; }
.botton_ic .btn_r li a span { color: inherit; }

/* 개별 버튼 컬러 스타일 통합 */
.botton_ic .btn-cancel a { background-color: var(--cm-bg-white); border: 1px solid var(--cm-border-color); color: var(--cm-text-sub); }
.botton_ic .btn-cancel a:hover { background-color: var(--cm-bg-light); border-color: var(--cm-text-light); color: var(--cm-color-slate-dark); transform: translateY(-2px); box-shadow: var(--cm-shadow-btn); }

.botton_ic .btn_r li.color a,
.botton_ic .btn-submit a { background-color: var(--cm-color-blue); border: 1px solid var(--cm-color-blue); color: var(--cm-bg-white); }
.botton_ic .btn_r li.color a:hover,
.botton_ic .btn-submit a:hover { background-color: var(--cm-color-blue-hover); border-color: var(--cm-color-blue-hover); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2); }

.botton_ic .btn-submit_red a { background-color: var(--cm-color-red); border: 1px solid var(--cm-color-red); color: var(--cm-bg-white); }
.botton_ic .btn-submit_red a:hover { background-color: var(--cm-color-red-hover); border-color: var(--cm-color-red-hover); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2); }

.botton_ic .btn-submit_gre a { background-color: var(--cm-color-teal); border: 1px solid var(--cm-color-teal); color: var(--cm-bg-white); }
.botton_ic .btn-submit_gre a:hover { background-color: var(--cm-color-teal-hover); border-color: var(--cm-color-teal-hover); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(13, 148, 136, 0.2); }

.botton_ic .btn-cardpay a { background-color: var(--cm-color-purple); border: 1px solid var(--cm-color-purple); color: var(--cm-bg-white); }
.botton_ic .btn-cardpay a:hover { background-color: var(--cm-color-purple-hover); border-color: var(--cm-color-purple-hover); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(147, 63, 190, 0.2); }

.botton_ic .btn-schedule a { background-color: var(--cm-color-slate); border: 1px solid var(--cm-color-slate); color: var(--cm-bg-white); }
.botton_ic .btn-schedule a:hover { background-color: var(--cm-color-slate-hover); border-color: var(--cm-color-slate-hover); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(71, 85, 105, 0.2); }

.botton_ic .btn_r li a:active { transform: translateY(0); }

/* 디바이스 변경 버튼 */
#device_change { display: block; margin: 0.3em; padding: 0.5em 0; border: 1px solid #eee; border-radius: var(--cm-radius-pill); background: var(--cm-bg-white); color: var(--cm-text-black); font-size: 2em; text-decoration: none; text-align: center; }


/* ==========================================================================
   7. 스크롤바 커스텀 (Scrollbar)
   ========================================================================== */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background-color: var(--cm-bg-track); }
::-webkit-scrollbar-thumb { background-color: var(--cm-bg-thumb); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--cm-color-primary); }
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment { width: 0px; height: 0px; background: var(--cm-bg-white); }


/* ==========================================================================
   8. 테스트 및 컬러 클래스 (Test Classes)
   ========================================================================== */
.color_1 { background: #169dd6; }
.color_2 { background: #14d53d; }
.color_3 { background: #3814ff; }
.color_4 { background: #7520c5; }


/* ==========================================================================
   9. 패딩 및 마진 유틸리티 (Spacing Utilities)
   ========================================================================== */
.pa0{ padding:0 } .pa3{ padding:3px } .pa5{ padding:5px } .pa10{ padding:10px } .pa20{ padding:20px } .pa30{ padding:30px } .pa40{ padding:40px } .pa50{ padding:50px } .pa60{ padding:60px } .pa70{ padding:70px }
.prl5{ padding:0 5px } .prl10{ padding:0 10px } .prl20{ padding:0 20px } .prl30{ padding:0 30px } .prl40{ padding:0 40px } .prl50{ padding:0 50px } .prl60{ padding:0 60px } .prl70{ padding:0 70px }
.pr5 { padding-right: 5px; }

.pt3{ padding-top:3px } .pt5{ padding-top:5px } .pt10{ padding-top:10px } .pt15{ padding-top:15px } .pt20{ padding-top:20px } .pt25{ padding-top:25px } .pt30{ padding-top:30px } .pt35{ padding-top:35px } .pt40{ padding-top:40px } .pt50{ padding-top:50px } .pt60{ padding-top:60px } .pt70{ padding-top:70px } .pt80{ padding-top:80px } .pt90{ padding-top:90px } .pt100{ padding-top:100px } .pt110{ padding-top:110px } .pt120{ padding-top:120px }

.pb3{ padding-bottom:3px } .pb5{ padding-bottom:5px } .pb10{ padding-bottom:10px } .pb15{ padding-bottom:15px } .pb20{ padding-bottom:20px } .pb30{ padding-bottom:30px } .pb40{ padding-bottom:40px } .pb50{ padding-bottom:50px } .pb60{ padding-bottom:60px } .pb70{ padding-bottom:70px } .pb80{ padding-bottom:80px } .pb90{ padding-bottom:90px } .pb100{ padding-bottom:100px }

.ma0{ margin:0 } .ma3{ margin:3px } .ma5{ margin:5px } .ma10{ margin:10px } .ma20{ margin:20px } .ma30{ margin:30px } .ma40{ margin:40px } .ma50{ margin:50px } .ma60{ margin:60px } .ma70{ margin:70px }
.mt3{ margin-top:3px } .mt5{ margin-top:5px } .mt10{ margin-top:10px } .mt15{ margin-top:15px } .mt20{ margin-top:20px } .mt30{ margin-top:30px } .mt40{ margin-top:40px } .mt50{ margin-top:50px } .mt60{ margin-top:60px } .mt70{ margin-top:70px }
.mr3{ margin-right:3px } .mr5{ margin-right:5px } .mr10{ margin-right:10px } .mr15{ margin-right:15px } .mr20{ margin-right:20px } .mr30{ margin-right:30px } .mr40{ margin-right:40px } .mr50{ margin-right:50px } .mr60{ margin-right:60px } .mr70{ margin-right:70px }
.mb3{ margin-bottom:3px } .mb5{ margin-bottom:5px } .mb10{ margin-bottom:10px } .mb15{ margin-bottom:15px } .mb20{ margin-bottom:20px } .mb30{ margin-bottom:30px } .mb40{ margin-bottom:40px } .mb50{ margin-bottom:50px } .mb60{ margin-bottom:60px } .mb70{ margin-bottom:70px }
.ml3{ margin-left:3px } .ml5{ margin-left:5px } .ml10{ margin-left:10px } .ml15{ margin-left:15px } .ml20{ margin-left:20px } .ml30{ margin-left:30px } .ml40{ margin-left:40px } .ml50{ margin-left:50px } .ml60{ margin-left:60px } .ml70{ margin-left:70px }

.dif { display: flex; }


/* ==========================================================================
   10. 미디어 쿼리 (Media Queries)
   ========================================================================== */
@media screen and (max-width: 768px) {
    #pc-only { display: none !important; }

    .input_basic { max-width: 100%; font-size: 16px !important; -webkit-text-size-adjust: 100%; }
    .select_basic { max-width: 100%; font-size: 16px !important; }
    .textarea_basic { min-height: 140px; padding: 12px 12px; font-size: 16px !important; }
    .textarea_order { min-height: 100px; padding: 12px 12px; font-size: 16px !important; }

    .botton_ic { margin: 20px 0; }
    .botton_ic .btn_r { justify-content: space-between; gap: 8px; }
    .botton_ic .btn_r li { flex: 1; }
    .botton_ic .btn_r li a { width: 100%; min-width: auto; height: 46px; padding: 0 10px; font-size: 14px; }

    .checks_txt { font-size: 15px; font-weight: 500; cursor: pointer; user-select: none; vertical-align: middle; }
}