@charset "UTF-8";
/*******************************************************************************
* dev.css  -  개발자센터 공통 스타일
*   기획팀 목업(ALLTHA~1.HTM)의 <style> 을 그대로 추출하고,
*   구현에 필요한 것(준비중 메뉴 / 페이징 / 검색바 / 안내문)만 아래쪽에 추가했다.
*******************************************************************************/
:root{
  --blue:#0064FF; --blue-dark:#0050D6; --blue-light:#EFF5FF;
  --navy:#191F28; --g600:#4E5968; --g500:#6B7684; --g400:#8B95A1;
  --g200:#E5E8EB; --g100:#F2F4F6; --g50:#F9FAFB; --white:#FFFFFF;
  --green:#00C471; --green-light:#E6F9F1; --red:#F04452; --red-light:#FEEEEF;
  --yellow:#FF9F0A; --yellow-light:#FFF6E5;
  --radius-lg:20px; --radius-md:12px; --radius-sm:8px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  color:var(--navy); background:var(--g50); font-size:14px; line-height:1.6;
}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}

/* ---- Top bar ---- */
.topbar{
  position:fixed; top:0; left:0; right:0; height:64px; background:var(--white);
  border-bottom:1px solid var(--g200); display:flex; align-items:center;
  justify-content:space-between; padding:0 24px; z-index:100;
}
.topbar-left{display:flex; align-items:center; gap:28px;}
.logo{display:flex; align-items:center; gap:8px; font-weight:800; font-size:17px; color:var(--navy);}
.logo .dot{width:9px;height:9px;border-radius:50%;background:var(--blue);display:inline-block;}
.mode-switch{display:flex; background:var(--g100); border-radius:999px; padding:3px; gap:2px;}
.mode-switch button{
  border:none; background:transparent; padding:7px 16px; border-radius:999px; font-size:13px;
  font-weight:600; color:var(--g500);
}
.mode-switch button.active{background:var(--navy); color:var(--white);}
.topbar-right{display:flex; align-items:center; gap:14px; font-size:13px; color:var(--g600);}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--blue-light); color:var(--blue);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;}
.btn-ghost-sm{padding:6px 12px;border-radius:8px;border:1px solid var(--g200);background:var(--white);font-size:12px;color:var(--g600);font-weight:600;}

/* ---- Layout ---- */
.shell{display:flex; padding-top:64px; min-height:100vh;}
.sidebar{
  width:232px; background:var(--white); border-right:1px solid var(--g200);
  position:fixed; top:64px; bottom:0; left:0; padding:20px 12px; overflow-y:auto;
}
.nav-section-label{font-size:11px; font-weight:700; color:var(--g400); text-transform:uppercase; letter-spacing:.04em; padding:14px 12px 6px;}
.nav-item{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; margin-bottom:2px;
  font-size:14px; font-weight:600; color:var(--g600); cursor:pointer;
}
.nav-item .ic{width:18px; text-align:center; font-size:15px;}
.nav-item:hover{background:var(--g100);}
.nav-item.active{background:var(--blue-light); color:var(--blue);}
.main{margin-left:232px; flex:1; padding:36px 44px 80px; max-width:1180px;}

h1.page-title{font-size:24px; font-weight:800; margin:0 0 4px;}
.page-sub{color:var(--g500); font-size:13.5px; margin:0 0 26px;}
.badge{display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:700;}
.badge.blue{background:var(--blue-light); color:var(--blue);}
.badge.green{background:var(--green-light); color:var(--green);}
.badge.red{background:var(--red-light); color:var(--red);}
.badge.yellow{background:var(--yellow-light); color:#B8720A;}
.badge.gray{background:var(--g100); color:var(--g500);}

.card{background:var(--white); border:1px solid var(--g200); border-radius:var(--radius-lg); padding:24px;}
.card + .card{margin-top:16px;}
.grid{display:grid; gap:16px;}
.grid.cols-4{grid-template-columns:repeat(4,1fr);}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}

.stat-card{background:var(--white); border:1px solid var(--g200); border-radius:var(--radius-md); padding:18px 20px;}
.stat-card .label{font-size:12.5px; color:var(--g500); font-weight:600; margin-bottom:8px;}
.stat-card .value{font-size:22px; font-weight:800;}
.stat-card .value.blue{color:var(--blue);}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; border:none; border-radius:10px;
  padding:11px 20px; font-weight:700; font-size:14px;}
.btn-primary{background:var(--blue); color:var(--white);}
.btn-primary:hover{background:var(--blue-dark);}
.btn-outline{background:var(--white); border:1px solid var(--g200); color:var(--navy);}
.btn-outline:hover{background:var(--g100);}
.btn-sm{padding:7px 13px; font-size:12.5px; border-radius:8px;}
.btn-danger-outline{background:var(--white); border:1px solid var(--red); color:var(--red);}

table{width:100%; border-collapse:collapse; font-size:13.5px;}
th{text-align:left; padding:11px 14px; color:var(--g500); font-weight:700; font-size:12.5px; border-bottom:1px solid var(--g200); background:var(--g50);}
td{padding:13px 14px; border-bottom:1px solid var(--g100); color:var(--navy);}
tr:last-child td{border-bottom:none;}
.table-wrap{border:1px solid var(--g200); border-radius:var(--radius-md); overflow:hidden; background:var(--white);}

.form-row{margin-bottom:18px;}
.form-row label{display:block; font-size:13px; font-weight:700; margin-bottom:7px; color:var(--navy);}
.form-row .hint{font-size:12px; color:var(--g400); font-weight:400; margin-top:6px;}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password],input[type=date],select,textarea{
  width:100%; padding:11px 13px; border:1px solid var(--g200); border-radius:10px; font-size:14px;
  font-family:inherit; background:var(--white); color:var(--navy);
}
textarea{resize:vertical; min-height:90px;}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--blue);}
.check-row{display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--g200); border-radius:10px; margin-bottom:8px;}
.check-row input{width:auto;}

.tabs{display:flex; gap:4px; border-bottom:1px solid var(--g200); margin-bottom:20px;}
.tab{padding:10px 16px; font-size:13.5px; font-weight:700; color:var(--g500); border-bottom:2px solid transparent; cursor:pointer;}
.tab.active{color:var(--blue); border-bottom-color:var(--blue);}

.code-tabs{display:flex; gap:4px; background:var(--navy); border-radius:12px 12px 0 0; padding:8px 8px 0;}
.code-tab{padding:8px 14px; font-size:12.5px; font-weight:700; color:#8B95A1; border-radius:8px 8px 0 0; cursor:pointer;}
.code-tab.active{background:#252C38; color:var(--white);}
.code-box{background:#252C38; color:#D7DCE2; padding:18px 20px; border-radius:0 0 12px 12px; font-family:"SFMono-Regular",Consolas,Menlo,monospace; font-size:12.5px; overflow-x:auto; white-space:pre;}
.code-box .k{color:#7DD3FC;} .code-box .s{color:#A7F3D0;} .code-box .c{color:#8B95A1;}

.api-card{border:1px solid var(--g200); border-radius:var(--radius-md); padding:20px; background:var(--white); display:flex; flex-direction:column; gap:10px;}
.api-card h3{margin:0; font-size:15.5px;}
.api-card p{margin:0; color:var(--g500); font-size:13px; flex:1;}
.locked{opacity:.55;}

.callout{background:var(--blue-light); border:1px solid #C9DEFF; border-radius:12px; padding:14px 18px; font-size:13px; color:#0050D6; margin-bottom:20px;}
.callout.warn{background:var(--yellow-light); border-color:#FFE1A8; color:#8A5A00;}
.callout.danger{background:var(--red-light); border-color:#FBD0D4; color:#C0303B;}
.callout strong{display:block; margin-bottom:2px; font-size:13.5px;}

.empty-select{border:1.5px dashed var(--g200); border-radius:var(--radius-md); padding:60px 20px; text-align:center; color:var(--g500);}
.merchant-pill-list{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px;}
.merchant-pill{padding:9px 16px; border:1px solid var(--g200); border-radius:999px; font-size:13px; font-weight:600; color:var(--g600); cursor:pointer;}
.merchant-pill.selected{background:var(--navy); color:var(--white); border-color:var(--navy);}

.faq-item{border-bottom:1px solid var(--g200); padding:14px 4px;}
.faq-q{font-weight:700; cursor:pointer; display:flex; justify-content:space-between; align-items:center;}
.faq-a{color:var(--g600); font-size:13.5px; margin-top:8px; display:none;}
.faq-item.open .faq-a{display:block;}

.modal-bg{position:fixed; inset:0; background:rgba(25,31,40,.5); display:none; align-items:center; justify-content:center; z-index:200;}
.modal-bg.open{display:flex;}
.modal{background:var(--white); border-radius:20px; width:520px; max-width:92vw; max-height:85vh; overflow-y:auto; padding:28px;}
.modal-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px;}
.modal-head h3{margin:0; font-size:17px;}
.close-x{border:none; background:var(--g100); width:28px; height:28px; border-radius:50%; font-size:14px; color:var(--g600);}

.flex-between{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px;}
.section-title{font-size:16px; font-weight:800; margin:0 0 12px;}
.mono{font-family:"SFMono-Regular",Consolas,Menlo,monospace; font-size:12.5px; background:var(--g100); padding:2px 6px; border-radius:6px;}
.masked{letter-spacing:1px; color:var(--g500);}

/* ---- Standalone login page ---- */
.page-login{position:fixed; inset:0; background:var(--g50); z-index:300; overflow-y:auto; padding:40px 20px;}
.page-login .auth-wrap{width:100%; max-width:440px; margin:0 auto;}

/*==============================================================================
  구현 추가분 (목업에 없던 것)
==============================================================================*/

/* 준비중 메뉴 : 사이드바에 그리되 클릭 불가 */
.nav-item.disabled{opacity:.45; cursor:default;}
.nav-item.disabled:hover{background:transparent;}
.badge.sm{padding:1px 7px; font-size:10.5px; margin-left:auto;}

/* 검색/조회 바 */
.search-bar{background:var(--white); border:1px solid var(--g200); border-radius:var(--radius-md);
  padding:16px 18px; margin-bottom:18px; display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap;}
.search-bar .form-row{margin-bottom:0;}
.search-bar input,.search-bar select{width:auto; min-width:150px;}
.search-bar .grow{flex:1; min-width:200px;}
.search-bar .grow input{width:100%;}

/* 처리 결과 안내 */
.msg{padding:12px 16px; border-radius:10px; font-size:13px; font-weight:600; margin-bottom:18px;}
.msg.ok{background:var(--green-light); color:#00875A;}
.msg.err{background:var(--red-light); color:#C0303B;}

/* 페이징 */
.pager{display:flex; justify-content:center; align-items:center; gap:6px; margin-top:20px;}
.pager a,.pager span{min-width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px; font-size:13px; font-weight:600; color:var(--g600); border:1px solid var(--g200); background:var(--white);}
.pager .on{background:var(--navy); color:var(--white); border-color:var(--navy);}
.pager .off{color:var(--g400); border-color:var(--g100);}

/* 폼 2단 배치 */
.form-2col{display:grid; grid-template-columns:1fr 1fr; gap:0 14px;}

/* 테이블 부가 */
td.num,th.num{text-align:right;}
td.center,th.center{text-align:center;}
.tbl-empty{padding:50px 20px; text-align:center; color:var(--g500);}
.row-actions{display:flex; gap:6px;}

/* 정의형 표 (라벨 + 값) */
table.def th{width:150px; background:var(--g50); color:var(--g500); border-bottom:1px solid var(--g100);}

/* 개발자문의 목록 */
.list-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;}
.list-cnt{font-size:13.5px; color:var(--g500);}
.list-cnt b{color:var(--navy);}
.subject-link{font-weight:600; cursor:pointer;}
.subject-link:hover{color:var(--blue); text-decoration:underline;}
.reply-cnt{color:var(--blue); font-weight:800; margin-left:5px;}
.att-mark{font-size:11.5px; color:var(--g400); font-weight:700; margin-left:4px;}

/* 개발자문의 스레드 */
.thread .card{position:relative;}
.post-head{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.post-who{font-weight:800; font-size:14px;}
.post-time{font-size:12.5px; color:var(--g400);}
.post-head .row-actions{margin-left:auto;}
.post-title{font-size:18px; font-weight:800; margin:0 0 14px;}
.post-body{font-size:14px; color:var(--g600); line-height:1.75; white-space:pre-wrap; word-wrap:break-word;}
.card.admin{background:#F7FAFF; border-color:#D8E5FF;}
.reply-line{display:flex; align-items:center; gap:10px; margin:22px 2px 10px; color:var(--g400); font-size:12.5px; font-weight:700;}
.reply-line:before,.reply-line:after{content:""; flex:1; height:1px; background:var(--g200);}

/* 답변 입력 */
.write-box{background:var(--white); border:1px solid var(--g200); border-radius:var(--radius-lg); padding:20px; margin-top:16px;}
.write-box .btn-row{display:flex; justify-content:flex-end; gap:8px; margin-top:14px;}
.write-closed{background:var(--g100); border-radius:var(--radius-md); padding:26px; text-align:center; color:var(--g500); font-size:13.5px; margin-top:16px;}
.write-box .file-row{display:flex; align-items:center; gap:10px; margin-top:12px; font-size:12.5px; color:var(--g500);}
.write-box .file-row .file-set{gap:6px;}
/* 첨부 입력칸 - 장수만큼 세로로 둔다 */
.file-set{display:flex; flex-direction:column; gap:7px;}
.file-set input{width:auto;}

/* 개발자문의 첨부 */
.att-list{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px;}
.att-list:empty{display:none;}				/* 미리보기 자리가 비어 있을 때 여백만 남지 않게 */
.att-thumb{width:96px; text-align:center; font-size:11px; color:var(--g500); word-break:break-all;}
.att-thumb img{width:96px; height:96px; object-fit:cover; border:1px solid var(--g200); border-radius:10px;
  margin-bottom:5px; background:var(--g100); display:block;}