/* MSDS 자료실 - 관리자 화면 */

body.adm{ background:var(--bg); }

/* ---------- 헤더 ---------- */
.ahd{
  background:var(--hd); color:var(--hd-fg);
  padding-top:env(safe-area-inset-top);
  position:sticky; top:0; z-index:20;
  box-shadow:0 1px 4px rgba(0,0,0,.18);
}
.ahd-bar{
  display:flex; align-items:center; gap:12px;
  max-width:1080px; margin:0 auto; padding:12px 16px 10px;
}
.ahd-title{
  font-size:17px; font-weight:700; letter-spacing:-.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ahd-title span{
  margin-left:6px; padding:2px 7px; border-radius:5px;
  background:var(--accent); color:#fff; font-size:11px; font-weight:700; vertical-align:2px;
}
.ahd-me{margin-left:auto; display:flex; align-items:center; gap:12px; font-size:13px; white-space:nowrap}
.ahd-me .who{color:var(--hd-fg)}
.ahd-me .who em{margin-left:5px; color:var(--hd-fg2); font-style:normal; font-size:12px}
.ahd-me .lnk{color:var(--hd-fg2); text-decoration:underline; text-underline-offset:2px}
.ahd-me .lnk:active{color:var(--hd-fg)}

.anav{
  display:flex; gap:2px; max-width:1080px; margin:0 auto;
  padding:0 10px; overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.anav::-webkit-scrollbar{display:none}
.anav a{
  flex:0 0 auto; padding:9px 14px 11px; font-size:14px; font-weight:500;
  color:var(--hd-fg2); border-bottom:2.5px solid transparent; white-space:nowrap;
}
.anav a.on{color:var(--hd-fg); font-weight:700; border-bottom-color:var(--accent)}

/* ---------- 본문 ---------- */
.awrap{
  max-width:1080px; margin:0 auto;
  padding:18px 16px 60px;
  padding-left:calc(16px + env(safe-area-inset-left));
  padding-right:calc(16px + env(safe-area-inset-right));
}
.ahead{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.ah2{margin:0; font-size:19px; font-weight:700; letter-spacing:-.02em}
.ah3{margin:0 0 12px; font-size:15px; font-weight:700}
/* 제목 뒤의 버튼들은 오른쪽 끝으로 */
.ahead > .ah2{margin:0 auto 0 0}
.ahead > .ah3{margin:0 auto 0 0}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:16px; margin-bottom:16px;
}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:16px}
.cards .card{margin:0}

.stat{display:flex; flex-direction:column; gap:2px}
.stat-k{font-size:12px; color:var(--fg2)}
.stat-v{font-size:28px; font-weight:800; letter-spacing:-.03em; line-height:1.2}
.stat-v em{margin-left:3px; font-size:14px; font-weight:600; font-style:normal; color:var(--fg2)}
.stat-s{font-size:12px; color:var(--fg2)}

/* ---------- 표 ---------- */
.tbl-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -4px}
.tbl{width:100%; border-collapse:collapse; font-size:14px; min-width:520px}
.tbl th, .tbl td{padding:10px 8px; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle}
.tbl thead th{font-size:12px; font-weight:700; color:var(--fg2); border-bottom-width:2px; white-space:nowrap}
.tbl tfoot th{font-size:13px; font-weight:700; border-bottom:0}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl .none{padding:34px 8px; text-align:center; color:var(--fg2)}
.tbl .right{text-align:right}
.nowrap{white-space:nowrap}
.dim{color:var(--fg2)}
.xs{font-size:11px}

.tag{
  display:inline-block; padding:2px 8px; border-radius:999px;
  background:var(--line); color:var(--fg2);
  font-size:11px; font-weight:700; white-space:nowrap;
}
.tag.ok{background:#dcf3e4; color:#1d7a44}
.tag.ng{background:#fbdedd; color:#a8322c}
.tag.sup{background:#dde7ff; color:#2451b8}
.tag.me{background:var(--accent); color:#fff; margin-left:5px}
@media (prefers-color-scheme: dark){
  .tag.ok{background:#173a26; color:#69d391}
  .tag.ng{background:#3d1d1c; color:#f28d87}
  .tag.sup{background:#1c2b4d; color:#8fb2ff}
}

/* ---------- 알림 ---------- */
.msg{margin:0 0 14px; padding:11px 14px; border-radius:9px; font-size:14px; line-height:1.6}
.msg.ok  {background:#dcf3e4; color:#176035}
.msg.err {background:#fbdedd; color:#962b26}
.msg.warn{background:#fdf0d5; color:#8a5a12}
.msg.info{background:#e3ecfb; color:#28518f}
@media (prefers-color-scheme: dark){
  .msg.ok  {background:#173a26; color:#8fe0ae}
  .msg.err {background:#3d1d1c; color:#f7a49e}
  .msg.warn{background:#3a2f16; color:#e6c07b}
  .msg.info{background:#1b2a44; color:#a8c4f5}
}

/* ---------- 폼 ---------- */
.form{max-width:560px}
.fld{display:block; margin-bottom:16px}
.fld > span{display:block; margin-bottom:6px; font-size:13px; font-weight:600}
.fld input[type=text], .fld input[type=password], .fld input[type=search], .fld select{
  width:100%; height:44px; padding:0 12px;
  border:1px solid var(--line); border-radius:9px;
  background:var(--bg); color:var(--fg);
  font-size:16px; font-family:inherit;
  appearance:none; -webkit-appearance:none;
}
.fld select{
  background-image:linear-gradient(45deg,transparent 50%,var(--fg2) 50%),
                   linear-gradient(135deg,var(--fg2) 50%,transparent 50%);
  background-position:calc(100% - 18px) 19px, calc(100% - 13px) 19px;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.fld input:focus, .fld select:focus{outline:2px solid var(--accent); outline-offset:-1px; border-color:transparent}
.fld .hint{display:block; margin-top:5px; font-size:12px; color:var(--fg2); font-style:normal}
.hint-inline{font-size:12px; color:var(--fg2); font-weight:400; font-style:normal}
.fld .ro{margin:0; padding:10px 0; font-size:15px}
.chk{display:flex; gap:8px; align-items:flex-start; font-size:14px; line-height:1.5}
.chk input{width:18px; height:18px; margin-top:1px; flex:0 0 auto}

.form-btns{display:flex; gap:8px; align-items:center; padding-top:4px}

.search-bar{display:flex; gap:8px; margin-bottom:14px}
.search-bar input{
  flex:1 1 auto; min-width:0; height:40px; padding:0 12px;
  border:1px solid var(--line); border-radius:9px;
  background:var(--card); color:var(--fg); font-size:16px; font-family:inherit;
  appearance:none; -webkit-appearance:none;
}
.search-bar input:focus{outline:2px solid var(--accent); outline-offset:-1px}

/* ---------- 버튼 (app.css 의 .btn 확장) ---------- */
.btn{margin-top:0; cursor:pointer; border:0; font-family:inherit; white-space:nowrap}
.btn-sm{padding:8px 13px; font-size:13px}
.btn-full{width:100%; height:46px; font-size:15px}
.btn-ghost{background:transparent; color:var(--fg); border:1px solid var(--line)}
.btn:active{filter:brightness(.94)}

/* ---------- 로그인 ---------- */
.login{
  max-width:360px; margin:8vh auto 0;
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:26px 22px;
}
.login-h{margin:0 0 18px; font-size:18px; font-weight:700; text-align:center; letter-spacing:-.02em}
.login .fld{margin-bottom:14px}
.login-back{margin:18px 0 0; text-align:center; font-size:13px}
.login-back a{color:var(--fg2)}

/* ---------- 좁은 화면 ---------- */
@media (max-width:520px){
  .ahd-bar{padding:10px 12px 8px; gap:8px}
  .ahd-title{font-size:15px}
  .ahd-title span{margin-left:5px; padding:2px 6px; font-size:10px}
  .ahd-me{gap:10px; font-size:12px}
  .ahd-me .who{display:none}          /* 좁은 화면에서는 제목 자리를 양보한다 */
  .anav a{padding:9px 11px 11px; font-size:13px}
  .awrap{padding:14px 12px 50px}
  .ah2{font-size:17px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .stat-v{font-size:24px}
}

/* ============================================================
   통계관리
   ============================================================ */

/* ---------- 하위 탭 ---------- */
.subtab{display:flex; gap:6px; margin-bottom:14px}
.subtab a{
  padding:8px 18px; border-radius:9px;
  background:var(--card); border:1px solid var(--line);
  font-size:14px; font-weight:600; color:var(--fg2);
}
.subtab a.on{background:var(--accent); border-color:var(--accent); color:#fff}

/* ---------- 기간 검색 ---------- */
.period{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:16px}
.period-dates{display:flex; align-items:center; gap:6px}
.period input[type=date]{
  height:40px; padding:0 10px;
  border:1px solid var(--line); border-radius:9px;
  background:var(--card); color:var(--fg);
  font-size:14px; font-family:inherit;
}
.period-kw{
  flex:1 1 170px; min-width:0; height:40px; padding:0 12px;
  border:1px solid var(--line); border-radius:9px;
  background:var(--card); color:var(--fg);
  font-size:16px; font-family:inherit; appearance:none; -webkit-appearance:none;
}
.period input:focus{outline:2px solid var(--accent); outline-offset:-1px}
.tilde{color:var(--fg2)}
.quick{display:flex; gap:6px; margin-left:auto}
.quick a{
  padding:8px 11px; border-radius:8px; border:1px solid var(--line);
  background:var(--card); color:var(--fg2); font-size:12px; font-weight:600;
}

/* ---------- 세로 막대 그래프 (일별 접속자) ---------- */
.chart{position:relative; padding-left:34px}
.chart::after{                       /* 바닥 기준선 : 값 라벨 12px + 막대영역 150px */
  content:""; position:absolute; left:34px; right:0; top:162px;
  border-top:1px solid var(--line);
}
.chart-grid{position:absolute; left:0; top:12px; width:28px; height:150px; text-align:right}
.chart-grid span{position:absolute; right:0; font-size:10px; color:var(--fg2); line-height:1}
.chart-max{top:-4px}
.chart-mid{top:71px}
.chart-zero{bottom:-4px}

.chart-bars{
  display:flex; align-items:flex-end; gap:2px;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.cbar{
  /* 날짜 라벨(예: 8/13)이 겹치지 않을 만큼은 확보한다. 넘치면 가로 스크롤. */
  flex:1 1 0; min-width:23px;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
}
.cbar-v{height:12px; line-height:12px; font-size:9px; color:var(--fg2); font-variant-numeric:tabular-nums}
.cbar-fill{
  width:66%; max-width:24px; min-width:6px;
  background:var(--accent); border-radius:3px 3px 0 0;
}
.cbar-x{height:22px; line-height:22px; font-size:9px; color:var(--fg2); white-space:nowrap}
.cbar.we .cbar-fill{background:#94a3b8}        /* 주말 */
@media (prefers-color-scheme: dark){ .cbar.we .cbar-fill{background:#5b6678} }

/* ---------- 가로 막대 그래프 (자료별 열람) ---------- */
.hbars{display:flex; flex-direction:column; gap:9px}
.hbar{
  display:grid; grid-template-columns:minmax(130px,1.1fr) minmax(80px,2fr) 46px;
  gap:10px; align-items:center;
}
.hbar-label{font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hbar-label em{
  display:inline-block; min-width:17px; margin-right:4px;
  font-style:normal; font-size:11px; font-weight:700; color:var(--fg2);
}
.hbar-track{height:16px; background:var(--line); border-radius:4px; overflow:hidden}
.hbar-fill{display:block; height:100%; background:var(--accent); border-radius:4px}
.hbar-v{text-align:right; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums}

.flink{color:var(--accent); text-decoration:underline; text-underline-offset:2px}

@media (max-width:520px){
  .quick{margin-left:0}
  .period-dates{flex:1 1 100%}
  .period input[type=date]{flex:1 1 0; min-width:0}
  .hbar{grid-template-columns:1fr 46px; grid-template-areas:"label value" "track track"; gap:4px 10px}
  .hbar-label{grid-area:label}
  .hbar-v{grid-area:value}
  .hbar-track{grid-area:track; height:12px}
}

/* ============================================================
   자료관리
   ============================================================ */
.adm-crumb{margin:-4px 0 14px; font-size:13px; color:var(--fg2)}
.adm-crumb a{color:var(--fg2); text-decoration:underline; text-underline-offset:2px}
.adm-crumb .sep{margin:0 5px; opacity:.6}

.btn-danger{background:#d94a44; color:#fff}
.btn-danger-ghost{background:transparent; color:#c4403a; border:1px solid var(--line)}
@media (prefers-color-scheme: dark){ .btn-danger-ghost{color:#f28d87} }
.tbl td .btn-sm + .btn-sm{margin-left:4px}

.ico-dir-sm{
  display:inline-block; vertical-align:-3px; width:16px; height:13px;
  margin-right:7px; border-radius:3px; background:#f2b02e; position:relative;
}
.ico-dir-sm::before{
  content:""; position:absolute; top:-3px; left:0;
  width:7px; height:3px; border-radius:2px 2px 0 0; background:#f2b02e;
}
.ico-pdf-sm{
  display:inline-block; vertical-align:-3px; width:22px; height:16px;
  margin-right:7px; border-radius:3px; background:#d94a44; color:#fff;
  font-size:8px; font-weight:800; line-height:16px; text-align:center;
}

/* ---------- 올리기 ---------- */
.drop{
  border:2px dashed var(--line); border-radius:12px;
  padding:24px 16px; text-align:center; transition:border-color .12s, background .12s;
}
.drop.over{border-color:var(--accent); background:var(--tap)}
.drop-t{margin:0 0 12px; font-size:14px; color:var(--fg2)}
.drop-s{margin:14px 0 0; font-size:12px; color:var(--fg2); line-height:1.7}
.drop label.btn{display:inline-block}
.drop-ow{justify-content:center; margin-top:12px; font-size:13px; color:var(--fg2)}

.uplist{list-style:none; margin:14px 0 0; padding:0}
.uprow{
  display:grid; grid-template-columns:1fr 72px 120px 96px;
  gap:10px; align-items:center;
  padding:9px 2px; border-top:1px solid var(--line); font-size:13px;
}
.uprow-nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.uprow-sz{text-align:right; color:var(--fg2); font-size:12px}
.uprow-track{height:8px; background:var(--line); border-radius:4px; overflow:hidden}
.uprow-fill{display:block; height:100%; width:0; background:var(--accent); border-radius:4px; transition:width .15s}
.uprow-st{text-align:right; font-size:12px; color:var(--fg2)}
.uprow.ok  .uprow-st{color:#1d7a44; font-weight:700}
.uprow.ok  .uprow-fill{background:#2f9e5e}
.uprow.ng  .uprow-st{color:#c4403a; font-weight:700}
.uprow.ng  .uprow-track{background:#fbdedd}
@media (prefers-color-scheme: dark){
  .uprow.ok .uprow-st{color:#69d391}
  .uprow.ng .uprow-st{color:#f28d87}
  .uprow.ng .uprow-track{background:#3d1d1c}
}

@media (max-width:520px){
  .uprow{grid-template-columns:1fr 84px; grid-template-areas:"nm st" "track track"; gap:5px 10px}
  .uprow-nm{grid-area:nm}
  .uprow-st{grid-area:st}
  .uprow-track{grid-area:track}
  .uprow-sz{display:none}
}
.ahead-sub{margin-bottom:10px}