:root{
  --bg:#f6f7fb; --card:#fff; --text:#1f2430; --muted:#8a90a2;
  --line:#eceef3; --hover:#f1f5ff; --link:#2b6cee;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#14161c; --card:#1c1f27; --text:#e6e8ee; --muted:#8b91a3;
         --line:#2a2e38; --hover:#232836; --link:#7aa5ff; }
}
*{box-sizing:border-box}
body{
  margin:0; padding:32px 16px; background:var(--bg); color:var(--text);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
h1{
  max-width:960px; margin:0 auto 16px; font-size:20px; font-weight:600;
  word-break:break-all;
}
table#indexlist{
  width:100%; max-width:960px; margin:0 auto; border-collapse:collapse;
  background:var(--card); border-radius:12px; overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.04);
}
tr.indexhead th{
  padding:12px 14px; text-align:left; font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em; color:var(--muted);
  border-bottom:1px solid var(--line);
}
tr.indexhead th a{color:var(--muted)}
tr.indexbreakrow{display:none}
td{padding:10px 14px; border-bottom:1px solid var(--line)}
tr.even:hover, tr.odd:hover{background:var(--hover)}
tr:last-child td{border-bottom:0}

/* 아이콘: 링크 주소로 구분 */
td.indexcolicon{width:1px; padding-right:0}
td.indexcolicon img{display:none}
td.indexcolicon::before{content:"📄"}

/* 폴더 (링크가 / 로 끝남) */
tr:has(td.indexcolname a[href$="/"]) td.indexcolicon::before{content:"📁"}
tr:has(td.indexcolname a[href$="/"]) td.indexcolname a{font-weight:600}

/* 상위 폴더 (링크가 / 로 시작하는 절대경로) */
tr:has(td.indexcolname a[href^="/"]) td.indexcolicon::before{content:"⬆️"}

/* 확장자별 아이콘 */
tr:has(a[href$=".zip" i], a[href$=".rar" i], a[href$=".7z" i]) td.indexcolicon::before{content:"🗜️"}
tr:has(a[href$=".pdf" i]) td.indexcolicon::before{content:"📕"}
tr:has(a[href$=".exe" i], a[href$=".msi" i]) td.indexcolicon::before{content:"💿"}
tr:has(a[href$=".jpg" i], a[href$=".jpeg" i], a[href$=".png" i], a[href$=".gif" i]) td.indexcolicon::before{content:"🖼️"}
tr:has(a[href$=".mp4" i], a[href$=".avi" i], a[href$=".mkv" i]) td.indexcolicon::before{content:"🎬"}

td.indexcolname a{color:var(--link); text-decoration:none; font-weight:500; word-break:break-all}
td.indexcolname a:hover{text-decoration:underline}

@media (max-width:600px){
  th.indexcollastmod, td.indexcollastmod{display:none}  /* 모바일에서는 날짜 숨김 */
}