/* =============================== IMPORTS =============================== */ @import url(../../../css/reset.css); @import url(../css/common.css); @import url(../css/button.css); @import url(../css/style.css); body{font-family:'Pretendard','Noto Sans KR',sans-serif;background:#f5f6fa;color:#333;} /* =============================== GUIDE WRAP & SECTIONS =============================== */ .guide_wrap{max-width:1200px;margin:60px auto;background:#fff;border-radius:16px;box-shadow:0 4px 10px rgba(0,0,0,0.08);padding:40px 50px;} .guide_wrap h1{font-size:26px;margin-bottom:25px;font-weight:700;color:#222;} .guide_section{margin:60px 0;} .guide_section h2{font-size:22px;font-weight:600;} .guide_section h3{font-size:20px;font-weight:500;color:#0072ff;margin:40px 0 12px 0;} /* =============================== GUIDE INFO =============================== */ .guide_info{background:#fafafa;border:1px solid #eee;padding:15px 20px;border-radius:10px;margin-bottom:25px;} .guide_info ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:15px 30px;} /* =============================== FILTER BUTTONS =============================== */ .filter_wrap{margin-bottom:15px;display:flex;gap:8px;} .filter_btn{padding:8px 16px;border:1px solid #ccc;background:#fff;border-radius:6px;font-size:14px;cursor:pointer;transition:.2s;} .filter_btn:hover{background:#f0f0f0;} .filter_btn.active{background:#0072ff;border-color:#0072ff;color:#fff;} /* =============================== TABLE GUIDE =============================== */ .tb_guide{width:100%;border-collapse:collapse;font-size:14px;} .tb_guide th,.tb_guide td{border:1px solid #ddd;padding:10px 12px;text-align:center;} .tb_guide th{background:#f9f9f9;font-weight:600;} .tb_guide a{color:#0072ff;text-decoration:none;} .tb_guide a:hover{text-decoration:underline;} /* STATUS COLORS */ .done{color:#198754;font-weight:600;} .ing{color:#e67e22;font-weight:600;} .wait{color:#aaa;font-weight:600;} /* =============================== BUTTON GUIDE =============================== */ .btn_wrap{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:25px;justify-content:flex-start;} .btn{border-radius:6px;font-size:14px;cursor:pointer;font-weight:500;border:none;transition:.2s;} .btn_default{background:#fff;border:1px solid #ccc;color:#333;}.btn_default:hover{background:#f8f8f8;} .btn_primary{background:#0072ff;color:#fff;}.btn_primary:hover{background:#005edc;} .btn_danger{background:#e74c3c;color:#fff;}.btn_danger:hover{background:#c0392b;} .btn_warning{background:#f39c12;color:#fff;}.btn_warning:hover{background:#e67e22;} .btn_sub{background:#6c757d;color:#fff;}.btn_sub:hover{background:#5a6268;} .btn_sm{padding:5px 10px;font-size:13px;}.btn_md{padding:8px 16px;font-size:14px;}.btn_lg{padding:12px 24px;font-size:16px;} /* =============================== FORM ELEMENTS =============================== */ .form_wrap{display:flex;flex-direction:column;gap:10px;margin-bottom:25px;} input[type="text"],input[type="email"],input[type="password"],textarea,select{border:1px solid #ccc;border-radius:6px;padding:8px 12px;font-size:14px;width:100%;transition:.2s;} input:focus,textarea:focus,select:focus{border-color:#0072ff;box-shadow:0 0 0 2px rgba(0,114,255,0.1);outline:none;} textarea{min-height:100px;resize:vertical;} .form_wrap.email_wrap{gap:8px;justify-content:flex-start;flex-direction:row;} .form_wrap.radio_wrap, .form_wrap.checkbox_wrap{flex-direction:row;} .form_wrap .input_post{width:calc(48% - 105px);} /* =============================== COLOR GUIDE =============================== */ .color_guide{display:flex;flex-wrap:wrap;gap:12px;} .color_box{width:120px;border-radius:6px;overflow:hidden;text-align:center;font-size:12px;border:1px solid #ddd;} .color_box .sample{height:50px;}.color_box .code{padding:6px;background:#fafafa;} .status_wrap{margin:60px 0 0 0;} .status_wrap span{margin:0 16px 0 0;} /* =============================== RESPONSIVE =============================== */ @media (max-width:768px){.guide_wrap{padding:20px;}.guide_info ul{flex-direction:column;}.tb_guide th,.tb_guide td{font-size:12px;padding:8px;}}