/* demo.smartertools.co.kr과 동일한 디자인 시스템(오피스 라이트 테마) */
:root{
  --bg:        #f3f2f1;
  --bg2:       #ffffff;
  --bg3:       #faf9f8;
  --bg-hover:  #f3f2f1;

  --blue:      #0078d4;
  --blue-dark: #106ebe;
  --blue-dim:  rgba(0,120,212,.1);

  --orange:     #ca5010;
  --orange-dim: rgba(202,80,16,.08);

  --green-ms:  #107c10;
  --red:       #a4262c;
  --red-dim:   rgba(164,38,44,.08);

  --text:      #323130;
  --text-m:    #605e5c;
  --text-dim:  #a19f9d;

  --border:    #edebe9;
  --border-hi: #d2d0ce;

  --shadow-sm: 0 1.6px 3.6px rgba(0,0,0,.11),0 0.3px 0.9px rgba(0,0,0,.08);
  --shadow-md: 0 6.4px 14.4px rgba(0,0,0,.11),0 1.2px 3.6px rgba(0,0,0,.08);

  --hh: 52px;
  --r:  2px;
  --font:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font); font-size:13px; background:var(--bg); color:var(--text);
}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}
*{scrollbar-width:thin; scrollbar-color:var(--border-hi) transparent}

/* ══ HEADER ══ */
header{
  height:var(--hh); background:var(--bg2); border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-sm); display:flex; align-items:center; padding:0 20px;
  gap:0; flex-shrink:0; position:sticky; top:0; z-index:50;
}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:28px}
.logo-icon{
  width:30px; height:30px; background:var(--blue); border-radius:3px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.logo-text{font-size:15px; font-weight:600; color:var(--text); letter-spacing:-.2px}
.logo-text span{color:var(--blue)}
.site-nav{display:flex; gap:0; flex:1}
.nav-a{
  padding:0 14px; height:var(--hh); font-size:13px; font-weight:400; color:var(--text-m);
  display:flex; align-items:center; cursor:pointer; border-bottom:2px solid transparent;
  transition:color .15s,border-color .15s; text-decoration:none;
}
.nav-a:hover{color:var(--text); background:var(--bg-hover); text-decoration:none}
.nav-a.on{color:var(--blue); border-bottom-color:var(--blue); font-weight:600}

/* ══ 언어 선택 ══ */
.lang-switch{display:flex; gap:2px; background:var(--bg3); border:1px solid var(--border-hi); border-radius:var(--r); padding:2px; flex-shrink:0}
.lang-btn{background:none; border:none; padding:5px 11px; font-size:11px; font-weight:700; color:var(--text-m); border-radius:var(--r); cursor:pointer; font-family:var(--font)}
.lang-btn:hover{color:var(--text)}
.lang-btn.on{background:var(--blue); color:#fff}
.lang-btn.on:hover{background:var(--blue)}

main{/* margin:0 auto; */ padding:36px 24px 80px}
h1{font-size:22px; font-weight:600; margin-bottom:8px}
h2{font-size:16px; font-weight:600; margin:32px 0 12px}
h3{font-size:11px; font-weight:700; color:var(--text-m); text-transform:uppercase; letter-spacing:.8px; margin:20px 0 10px}
p{color:var(--text-m); margin-bottom:8px; line-height:1.7}
.lead{font-size:13.5px; color:var(--text-m); margin-bottom:26px; line-height:1.8}

.card{background:var(--bg2); border:1px solid var(--border); border-radius:4px; box-shadow:var(--shadow-sm); padding:20px; margin-bottom:16px}

/* ══ 코드 / 표 (API 문서용) ══ */
code, pre{font-family:'Consolas','Courier New',monospace; font-size:12px}
code{background:var(--bg3); border:1px solid var(--border); padding:2px 6px; border-radius:var(--r); color:var(--orange)}
pre{background:var(--bg3); border:1px solid var(--border); border-radius:4px; padding:14px 16px; overflow-x:auto; margin:10px 0; color:var(--text)}
pre code{background:none; border:none; padding:0; color:inherit}

table{width:100%; border-collapse:collapse; margin:12px 0; font-size:12.5px}
th,td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--border)}
th{color:var(--text-m); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.4px}

.badge{font-size:10px; font-weight:700; padding:2px 8px; border-radius:var(--r); text-transform:uppercase; letter-spacing:.4px; white-space:nowrap; background:var(--bg3); color:var(--text-m); border:1px solid var(--border-hi); display:inline-block}
.badge.post{background:rgba(16,124,16,.08); color:var(--green-ms); border-color:rgba(16,124,16,.3)}
.badge.hwp{background:var(--orange-dim); color:var(--orange); border-color:rgba(202,80,16,.3)}

/* ══ 폼 ══ */
label{display:block; font-size:11px; font-weight:700; color:var(--text-m); text-transform:uppercase; letter-spacing:.5px; margin:14px 0 6px}
label:first-child{margin-top:0}
input[type=text],input[type=url],input[type=password],input[type=number],textarea{
  width:100%; background:var(--bg3); border:1px solid var(--border-hi); border-radius:var(--r);
  color:var(--text); padding:8px 10px; font-size:13px; font-family:var(--font);
}
input:focus,textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 1px var(--blue)}
textarea{min-height:64px; resize:vertical; font-family:'Consolas','Courier New',monospace; font-size:12px}
.hint{font-size:11px; color:var(--text-dim); margin-top:4px; line-height:1.6}

button{
  cursor:pointer; border-radius:var(--r); padding:7px 16px; font-size:12px; font-weight:600;
  font-family:var(--font); border:1px solid var(--blue); transition:background .15s,border-color .15s,color .15s;
  background:var(--blue); color:#fff;
}
button:hover{background:var(--blue-dark)}
button:disabled{opacity:.5; cursor:default}
button.ghost{background:transparent; border-color:var(--border-hi); color:var(--text-m)}
button.ghost:hover{background:var(--bg-hover); color:var(--text)}
button.danger{background:transparent; border-color:var(--red); color:var(--red)}
button.danger:hover{background:var(--red-dim)}
.row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}

.progress-wrap{display:none; align-items:center; gap:8px; margin:10px 0}
.progress-wrap.show{display:flex}
.progress-track{flex:1; height:6px; background:var(--bg3); border:1px solid var(--border-hi); border-radius:4px; overflow:hidden}
.progress-fill{height:100%; width:0%; background:var(--blue); transition:width .2s ease-out}
.progress-fill.indeterminate{background:repeating-linear-gradient(45deg,var(--blue) 0 8px,var(--blue-dark) 8px 16px); background-size:200% 100%; animation:prog-stripes 1s linear infinite}
@keyframes prog-stripes{to{background-position:32px 0}}
.progress-pct{font-size:11px; color:var(--text-m); min-width:32px; text-align:right; font-variant-numeric:tabular-nums}

.msg{padding:9px 12px; border-radius:var(--r); font-size:12px; margin:10px 0; display:none; border:1px solid transparent}
.msg.show{display:block}
.msg.ok{background:rgba(16,124,16,.08); color:var(--green-ms); border-color:rgba(16,124,16,.3)}
.msg.err{background:var(--red-dim); color:var(--red); border-color:rgba(164,38,44,.25)}

/* ══ 드롭존 (원본 사이드바 업로드 UI) ══ */
.drop{
  border:1px dashed var(--border-hi); border-radius:var(--r); padding:20px 16px; text-align:center;
  cursor:pointer; background:var(--bg3); transition:border-color .15s,background .15s;
}
.drop:hover,.drop.over{border-color:var(--blue); background:var(--blue-dim)}
.drop-ico{
  width:36px; height:36px; background:var(--bg2); border:1px solid var(--border-hi); border-radius:3px;
  display:flex; align-items:center; justify-content:center; margin:0 auto 10px; color:var(--text-dim);
  transition:border-color .15s,color .15s;
}
.drop:hover .drop-ico,.drop.over .drop-ico{border-color:var(--blue); color:var(--blue)}
.drop-lbl{font-size:12px; color:var(--text-m); line-height:1.6}
.drop-lbl strong{color:var(--text)}
.drop input[type=file]{display:none}

/* ══ 미리보기 패널 (원본 pv 패턴) ══ */
.pv{background:var(--bg2); border:1px solid var(--border); border-radius:4px; overflow:hidden; display:flex; flex-direction:column; height:100%}
.pv-bar{height:40px; background:var(--bg3); border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 14px; gap:8px; flex-shrink:0}
.pv-title{font-size:12.5px; color:var(--text-m); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pv-title.on{color:var(--text); font-weight:600}
.pv-main{flex:1; position:relative; background:var(--bg)}
.pv-main iframe{width:100%; height:100%; border:none; display:block; min-height:420px}
.ph{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px}
.ph-ico{width:64px; height:64px; background:var(--bg2); border:1px solid var(--border-hi); border-radius:4px; display:flex; align-items:center; justify-content:center; color:var(--text-dim); box-shadow:var(--shadow-sm)}
.ph p{font-size:13px; color:var(--text-m)}
.spin{width:26px; height:26px; border:2px solid var(--border-hi); border-radius:50%; border-top-color:var(--blue); animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

.key-row{display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border); gap:12px}
.key-row:last-child{border-bottom:none}
.key-meta{font-size:11px; color:var(--text-dim)}

.grid2{display:grid; grid-template-columns:280px 1fr; gap:20px; height:calc(100vh - var(--hh))}
@media (max-width:720px){ .grid2{grid-template-columns:1fr; height:auto} }

/* ══ 모달(로그인 등) ══ */
.modal-overlay{
  position:fixed; inset:0; background:rgba(32,31,30,.5); z-index:100;
  display:none; align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.show{display:flex}
.modal-box{
  background:var(--bg2); border-radius:6px; box-shadow:var(--shadow-md);
  padding:28px; width:100%; max-width:360px;
}

.site-footer{
  flex-shrink:0; text-align:center; padding:10px 24px;
  font-size:11px; color:var(--text-dim); border-top:1px solid var(--border);
}