/* MSDS 자료실 - 공통 스타일 (모바일 우선) */
:root{
  --bg:#f4f5f7; --card:#ffffff; --line:#e3e5e9;
  --fg:#16181d; --fg2:#6b7280; --accent:#2563eb;
  --hd:#1f2937; --hd-fg:#ffffff; --hd-fg2:#a9b1bd;
  --tap:rgba(37,99,235,.08);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#111318; --card:#1b1e25; --line:#2a2e37;
    --fg:#e8eaee; --fg2:#9aa1ad; --accent:#6ea0ff;
    --hd:#0d0f13; --hd-fg:#f2f4f7; --hd-fg2:#8b93a0;
    --tap:rgba(110,160,255,.12);
  }
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Malgun Gothic",
              "Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  font-size:16px; line-height:1.45;
  -webkit-tap-highlight-color:transparent;
}
a{color:inherit; text-decoration:none}

/* ---------- 헤더 ---------- */
.hd{
  background:var(--hd); color:var(--hd-fg);
  padding:16px 16px 12px;
  padding-left:calc(16px + env(safe-area-inset-left));
  padding-right:calc(16px + env(safe-area-inset-right));
  padding-top:calc(16px + env(safe-area-inset-top));
}
.hd-sticky{position:sticky; top:0; z-index:20; padding-bottom:10px}
.hd-bar{display:flex; align-items:center; gap:6px; min-height:32px}
.hd-title{margin:0; font-size:22px; font-weight:700; letter-spacing:-.02em}
.hd-title.sm{
  font-size:18px; font-weight:600; flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hd-sub{margin:4px 0 0; font-size:13px; color:var(--hd-fg2)}

.back{
  flex:0 0 auto; width:34px; height:34px; margin-left:-8px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
}
.back::before{
  content:""; width:11px; height:11px;
  border-left:2.2px solid currentColor; border-bottom:2.2px solid currentColor;
  transform:rotate(45deg); margin-left:3px;
}
.back:active{background:rgba(255,255,255,.12)}

.crumb{margin-top:8px; font-size:12px; color:var(--hd-fg2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.crumb a{color:var(--hd-fg2)}
.crumb .sep{margin:0 4px; opacity:.6}

/* ---------- 검색 ---------- */
.search{position:relative; margin-top:10px}
.search input{
  width:100%; height:40px; padding:0 36px 0 12px;
  border:0; border-radius:10px; background:rgba(255,255,255,.12);
  color:var(--hd-fg); font-size:16px; font-family:inherit;
  appearance:none; -webkit-appearance:none;
}
.search input::placeholder{color:var(--hd-fg2)}
.search input:focus{outline:2px solid var(--accent); outline-offset:0; background:rgba(255,255,255,.18)}
.qclear{
  position:absolute; right:4px; top:4px; width:32px; height:32px;
  border:0; background:transparent; color:var(--hd-fg2);
  font-size:22px; line-height:1; cursor:pointer; border-radius:50%;
}

/* ---------- 목록 ---------- */
.wrap{
  padding:12px 12px 40px;
  padding-left:calc(12px + env(safe-area-inset-left));
  padding-right:calc(12px + env(safe-area-inset-right));
  max-width:760px; margin:0 auto;
}
.list{list-style:none; margin:0; padding:0; background:var(--card); border-radius:12px; overflow:hidden;
      border:1px solid var(--line)}
.list li + li{border-top:1px solid var(--line)}

.row{display:flex; align-items:center; gap:12px; padding:12px 12px; min-height:62px}
.row:active{background:var(--tap)}
.row-body{flex:1 1 auto; min-width:0}
.row-name{
  display:block; font-size:15px; font-weight:500; letter-spacing:-.01em;
  overflow-wrap:anywhere; word-break:break-word;
}
.row-meta{display:block; margin-top:2px; font-size:12px; color:var(--fg2)}

.ico{flex:0 0 auto}
.ico-dir{
  position:relative; width:32px; height:26px; border-radius:5px;
  background:#f2b02e; margin-top:5px;
}
.ico-dir::before{
  content:""; position:absolute; top:-5px; left:0;
  width:14px; height:6px; border-radius:3px 3px 0 0; background:#f2b02e;
}
.ico-pdf{
  width:32px; height:32px; border-radius:6px; background:#d94a44; color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:800; letter-spacing:.3px;
}
.chev{flex:0 0 auto; width:8px; height:8px; margin-right:2px;
      border-top:2px solid var(--fg2); border-right:2px solid var(--fg2);
      transform:rotate(45deg); opacity:.7}

.tally{margin:12px 2px 0; font-size:12px; color:var(--fg2); text-align:right}
.empty{margin:48px 0; text-align:center; color:var(--fg2); font-size:14px; line-height:1.9}

.btn{
  display:inline-block; margin-top:12px; padding:10px 18px;
  background:var(--accent); color:#fff; border-radius:9px;
  font-size:14px; font-weight:600;
}

.path{
  display:inline-block; margin:4px 0; padding:3px 7px;
  background:var(--card); border:1px solid var(--line); border-radius:6px;
  font-family:Consolas,"Courier New",monospace; font-size:12px; color:var(--fg);
  overflow-wrap:anywhere;
}

/* ---------- 홈 상단 관리자 버튼 ---------- */
.hd-top{display:flex; align-items:flex-start; gap:12px}
.hd-txt{flex:1 1 auto; min-width:0}
.admin-btn{
  flex:0 0 auto; margin-top:2px;
  padding:7px 13px; border-radius:8px;
  border:1px solid rgba(255,255,255,.28);
  color:var(--hd-fg); font-size:13px; font-weight:600; white-space:nowrap;
}
.admin-btn:active{background:rgba(255,255,255,.14)}