@charset "UTF-8";

/** color, button, input, table 등 전체 공통으로 가져갈 디자인 스타일 */

:root{
	--color-main : #E37661;
	--color-sub : #B35F4E;
	--color-sub2 : #F5C2B7;
	--color-point: #F96B4B;

	--color-p10: #3B1B13;
	--color-p20: #632F22;
	--color-p30: #8B432F;
	--color-p40: #B35640;
	--color-p50: #E67B63;
	--color-p60: #EA917E;
	--color-p70: #F0AA9A;
	--color-p80: #F5C4B7;
	--color-p90: #FADED4;
	--color-p95: #FDEDE8;
	--color-p99: #FFF9F7;

	--color-s10 : #1A1A1A;
	--color-s20 : #333333;
	--color-s30 : #4D4D4D;
	--color-s40 : #666666;
	--color-s50 : #808080;
	--color-s60 : #999999;
	--color-s70 : #B3B3B3;
	--color-s80 : #CCCCCC;
	--color-s90 : #E6E6E6;
	--color-s95 : #F2F2F2;
	--color-s99 : #FCFCFC;

	--color-t10 : #0F1324;
	--color-t20 : #1F2547;
	--color-t30 : #2E386B;
	--color-t40 : #3D4B8F;
	--color-t50 : #4D5EB2;
	--color-t60 : #6F7CC1;
	--color-t70 : #949ED1;
	--color-t80 : #B8BEE0;
	--color-t90 : #DBDFF0;
	--color-t95 : #EDEFF7;
	--color-t99 : #FBFCFD;

	--color-g0 : #fbfbfb;
	--color-g1 : #f5f5f5;
	--color-g2 : #e9e9e9;
	--color-g3 : #e5e5e5;
	--color-g4 : #dbdbdb;
	--color-g5 : #ccc;
	--color-g6 : #767676;
	--color-g7 : #444;
	--color-g8 : #111;

	--color-red : #D00000;
	--color-yellow : #FF8F0C;
	--color-green : #04B800;
	--color-blue : #0079D1;

	--fz-displayL : 5.7rem;
	--fz-displayM : 4.5rem;
	--fz-displayS : 3.6rem;
	--fz-headlineL : 3.2rem;
	--fz-headlineM : 2.8rem;
	--fz-headlineS : 2.4rem;
	--fz-titleL : 2.2rem;
	--fz-titleM : 2.0rem;
	--fz-titleS : 1.8rem;
	--fz-body : 1.6rem;
	--fz-bodyM : 1.4rem;
	--fz-labelXL : 1.6rem;
	--fz-labelL : 1.4rem;
	--fz-labelM : 1.2rem;
	--fz-labelS : 1.1rem;

	--bold : 500;
    --btnHS : 32px;
    --btnHM : 48px;
    --btnHL : 56px;

    --border : 0 24px 0 24px;
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 62.5%; scroll-behavior: smooth; }
body { font-family: 'Pretendard', 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif; font-size: 1.6rem; color: #111; background: #fff; line-height: 1.6; word-break: keep-all; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, select, textarea { font-family: inherit; }
table { border-collapse: collapse; width: 100%; }

@media all and (max-width:768px){
    :root{
        --btnHM : 40px;
        --btnHL : 48px;
    }
}

/* ===== 공통 레이아웃 ===== */
.inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section { padding: 100px 0; }

/* ===== 색상 유틸 ===== */
.red{color:var(--color-red) !important;}
.yellow{color:var(--color-yellow) !important;}
.green{color:var(--color-green) !important;}
.blue{color:var(--color-blue) !important;}
.color-main { color: var(--color-main); }
.color-point { color: var(--color-point); }

/* ===== 타이포그래피 ===== */
.style-font{font-family: 'locus_sangsang' !important;}
.display-l{font-size: var(--fz-displayL);}
.display-m{font-size: var(--fz-displayM);}
.display-s{font-size: var(--fz-displayS);}
.headline-l{font-size: var(--fz-headlineL); font-weight:500;}
.headline-m{font-size: var(--fz-headlineM); font-weight:500;}
.headline-s{font-size: var(--fz-headlineS); font-weight:500;}
.title-l{font-size: var(--fz-titleL); font-weight:500;}
.title-m{font-size: var(--fz-titleM); font-weight:500;}
.title-s{font-size: var(--fz-titleS); font-weight:500;}
.body-l{font-size: var(--fz-body);}
.body-m{font-size: var(--fz-bodyM);}
.label-xl{font-size: var(--fz-labelXL); font-weight:500;}
.label-l{font-size: var(--fz-labelL); font-weight:500;}
.label-m{font-size: var(--fz-labelM); font-weight:500;}
.label-s{font-size: var(--fz-labelS); font-weight:500;}

@media all and (max-width:425px){
    body{font-size:1.4rem;}
}

/* ===== BUTTON ===== */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:4px; padding:10px 24px; background:#fff; border:1px solid #777; font-weight:600; color:#111; min-width:120px; height:var(--btnHM); font-size: 1.4rem; border-radius:24px 8px; transition:background .3s, border .3s, box-shadow .3s, color .3s; cursor:pointer;}
.btn:hover,.btn:focus{text-decoration:none; cursor:pointer;}
.btn:active{opacity:.6;}
.btn:disabled,.btn.disabled{cursor:no-drop;}
.btn.sm{padding:8px 16px; border-radius:16px 4px; height:auto; font-size:1.4rem; height:var(--btnHS);}
.btn.lg{padding:16px 32px; height:var(--btnHL); font-size: 1.6rem;}
.btn.block{display:flex; width:100%;}

.btn.text{background:none; border:0;}
.btn.text:hover{text-decoration:underline;}
.btn.cancel{background:#fff; border:1px solid #ccc; color:#777;}
.btn.cancel:hover,.btn.cancel:focus{background:#f5f5f5;}
.btn.del{background:#fff; border:1px solid #ccc; color:#777;}
.btn.del:hover,.btn.del:focus{background:#f5f5f5;}

.btn.line{background:#fff; border:1px solid var(--color-point); color:var(--color-point);}
.btn.line:hover,.btn.line:focus{background:#FFF6FA;}

.btn.point{background:var(--color-point); border:1px solid var(--color-point); color:#fff;}
.btn.point:disabled,.btn.point.disabled{background:#ccc; border:0;}
.btn.point:hover,.btn.point:focus{background:var(--color-t60); border:1px solid var(--color-t60);}
.btn.em{background:var(--color-point); border:1px solid var(--color-point); color:#fff;}
.btn.em:hover,.btn.em:focus{background:var(--color-t60); border:1px solid var(--color-t60);}
.btn.waiting{background:var(--color-t30); border:1px solid var(--color-t30); color:#fff;}
.btn.waiting:hover,.btn.waiting:focus{background:var(--color-t40); border:1px solid var(--color-t40);}

/* 버튼 묶음 */
.btn_w{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:40px;}

@media all and (max-width:768px){
    .btn{border-radius:16px 8px; min-width:100px;}
}
@media all and (max-width:425px){
    .btn{font-size:1.2rem; min-width:80px;}
    .btn.sm{font-size: 1.2rem;}
    .btn.lg{font-size: 1.4rem;}
    .btn_w{margin-top:24px; gap:4px;}
}

/* ===== FORM ===== */
*::placeholder{font-size:1.4rem; color:#999;}
input.form{position:relative; display:inline-flex; align-items:center; padding:4px 16px; height:var(--btnHM); min-width:200px; border:1px solid #ccc; border-radius:8px; background:#fff; font-size: 1.6rem; color:#111;}
input.form:focus{border:1px solid var(--color-t90); outline:1px solid var(--color-t90); box-shadow:0 0 4px var(--color-t90);}
input.form:disabled{border:1px solid #dbdbdb;background:#f5f5f5; color:#777; cursor:no-drop;}
input.form.invalid{padding-right:40px; border:1px solid var(--color-red); outline:1px solid var(--color-red); box-shadow:0 0 3px var(--color-red);}

select{padding:0px 8px !important; padding-right:32px !important; height:var(--btnHM); font-size: var(--fz-bodyM); color:#111; border-radius:8px; border:1px solid #ccc; background:#fff;}
select:disabled{background:#f5f5f5; cursor:no-drop;}

textarea{padding:16px; max-width:100%; width:100%; border:1px solid #dbdbdb; border-radius:8px; min-height:180px;}
textarea:focus{border:1px solid var(--color-t90); outline:1px solid var(--color-t90); box-shadow:0 0 4px var(--color-t90);}

.description{margin-top:4px; font-size: var(--fz-bodyM); color:#777;}
.description.red{color:var(--color-red);}
.ess{color:var(--color-point); font-size: 1.4rem;}

/* radio, checkbox */
[type="radio"]{position:relative; margin-right:8px; vertical-align:middle; appearance:none; border:2px solid #999; border-radius:50%; width:16px; height:16px;}
[type="radio"]::before{content:''; display:block; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:8px; height:8px; border-radius:100%; background:var(--color-main); opacity:0; transition:.3s;}
[type="radio"]:checked{border:2px solid var(--color-main);}
[type="radio"]:checked::before{opacity:1;}

[type="checkbox"]{position:relative; margin-right:8px; appearance:none; vertical-align:middle; border:2px solid #999; border-radius:2px; width:16px; height:16px;}
[type="checkbox"]::before{content:''; display:block; position:absolute; left:3px; top:0; transform:rotate(45deg); width:4px; height:7px; border-right:2px solid #fff; border-bottom:2px solid #fff; opacity:0; transition:.3s;}
[type="checkbox"]:checked{background:var(--color-main); border:2px solid var(--color-main);}
[type="checkbox"]:checked::before{opacity:1;}

/* ===== PAGING ===== */
.pageNav{display:flex; gap:1px; align-items:center; justify-content:center; margin-top:3rem;}
.pageNav a{display:flex; align-items:center; justify-content:center; min-width:30px; height:30px; border-radius:100%;}
.pageNav a.on{position:relative; color:var(--color-main); font-weight:600;}
.pageNav a.on::before{position:absolute; content:''; left:50%; bottom:0; transform:translateX(-50%); width:50%; height:2px; background:var(--color-main);}

/* ===== MODAL ===== */
.modal{position:relative; display:inline-block; padding:40px; background:#fff; border-radius:8px; box-shadow:7px 7px 15px rgba(0,0,0,0.2); max-width:450px;}
.modal .title{font-size: var(--fz-titleL); font-weight:500;}
.modal .txt{margin-top:40px; font-size: var(--fz-bodyM); color:#444; line-height:1.5em;}
.modal .btn_w{margin-top:40px; display:flex; gap:4px; justify-content:space-between; align-items:center;}
.modal .x{position:absolute; right:16px; top:16px; color:#777;}

/* ===== LOADER ===== */
#loader{position:fixed; display:none; top:0;left:0;width:100%;height:100%;z-index:9999;background:rgba(0,0,0,0.8);}
#loader .spinner-box{display:flex; justify-content:center; position:relative; margin:0 auto; margin-top:200px; padding-top:70px;}
#loader .configure-border-1{position:absolute; top:0; width:60px; height:60px; padding:3px; background:var(--color-main); border-radius:13px; animation:configure-clockwise 3s ease-in-out 0s infinite alternate;}
#loader .configure-border-2{position:absolute; top:0; width:60px; height:60px; padding:3px; background:var(--color-point); transform:rotate(45deg); border-radius:13px; animation:configure-xclockwise 3s ease-in-out 0s infinite alternate;}
#loader .configure-core{width:100%; height:100%; background-color:#1d2630; border-radius:10px;}
@keyframes configure-clockwise{0%{transform:rotate(0);}25%{transform:rotate(90deg);}50%{transform:rotate(180deg);}75%{transform:rotate(270deg);}100%{transform:rotate(360deg);}}
@keyframes configure-xclockwise{0%{transform:rotate(45deg);}25%{transform:rotate(-45deg);}50%{transform:rotate(-135deg);}75%{transform:rotate(-225deg);}100%{transform:rotate(-315deg);}}

/* ===== TO TOP ===== */
#totop{position:fixed; right:20px; bottom:20px; z-index:30;}
#totop .totop{position:relative; display:inline-block; opacity:0; width:40px; height:40px; background:#fff; border:2px solid #ccc; border-radius:100%; box-shadow:3px 3px 7px rgba(0,0,0,0.2); transition:.3s; text-indent:-9999px; font-size:0;}
#totop .totop::after{position:absolute; content:''; display:block; top:15px; left:50%; width:10px; height:10px; border-top:2px solid #ccc; border-right:2px solid #ccc; transform:translateX(-50%) rotate(-45deg); transition:.3s;}
#totop .totop.show{opacity:1; visibility:visible;}

/* ===== SKIP NAVIGATION ===== */
#skip_navigation{z-index:9999; position:absolute; left:0; top:0; width:100%;}
#skip_navigation a{display:block; width:0; height:0; color:#fff82e; white-space:nowrap; text-align:center; background:var(--color-main); border:0; border-radius:0 0 10px 10px; overflow:hidden;}
#skip_navigation a:focus,#skip_navigation a:active{display:block; margin:0 auto; padding:15px; text-align:center; text-decoration:underline; width:200px; height:auto; font-size:16px; box-shadow:7px 15px 15px -7px rgba(0,0,0,0.2);}

/* ===== 준비중 ===== */
.readyBox{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:56px 24px; background:#f9f9f9; border-radius:24px; text-align:center;}
.noBoard{display:flex; flex-direction:column; gap:16px; align-items:center; justify-content:center; padding:32px; border-radius:16px; background:#f9f9f9; color:#777;}