File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
/* ===============================
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;}}