/* =========================================================================
   Castanea Tools - 기본 스킨 · 화이트
   -------------------------------------------------------------------------
   방문자 화면(PC/모바일)과 관리 화면이 이 파일 하나를 함께 씁니다.

   ■ 디자인 언어 2종 (같은 토큰, 값만 분기)
     PC(≥720px)   : 조밀·정보밀도 우선. 표 레이아웃, hover 강조, 작은 여백
     모바일(<720px): 손가락 우선. 카드 레이아웃, 44px 터치타겟, 큰 여백/글씨

   ■ 새 스킨 만들기
     skins/ 아래 폴더를 만들고 이 파일을 복사 → :root 값만 고치면 됩니다.
     구조 규칙(반응형·터치타겟)은 그대로 상속되므로 색만 바꿔도 안전합니다.
   ========================================================================= */

:root {
  /* --- 색 (brand / semantic / neutral) --- */
  --bg: #f5f6f8;
  --card: #ffffff;
  --card-alt: #fafbfc;        /* 입력칸·표 헤더 같은 살짝 눌린 면 */
  --border: #e3e6ea;
  --border-hover: #c9ccd1;
  --text: #1f2328;
  --muted: #6b7280;
  --accent: #3b6fd4;
  --accent-hover: #2f5cb5;
  --accent-soft: #eef4ff;
  --accent-line: #c9dbff;
  --danger: #d64545;
  --danger-soft: #fdf0f0;
  --danger-line: #f0d0d0;
  --success: #16a34a;
  --success-text: #17794a;
  --success-soft: #eafaf0;
  --success-line: #b6e6c9;
  --on-accent: #ffffff;

  /* --- 로고 (스킨마다 밝은/어두운 버전) --- */
  --logo-src: url("/assets/logo-light.png");

  /* --- 모양 --- */
  --radius: 8px;
  --radius-lg: 12px;
  --color-scheme: light;
  --shadow-1: 0 2px 8px rgba(31, 35, 40, .08);
  --shadow-2: 0 4px 14px rgba(31, 35, 40, .10);

  /* --- 간격 (4px 스케일) --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;

  /* --- 아래 4개가 PC/모바일 디자인 언어를 가르는 축 --- */
  --font-base: 14px;     /* 본문 */
  --font-sm: 13px;       /* 보조 */
  --font-xs: 12px;       /* 캡션 */
  --tap: 34px;           /* 누를 수 있는 것의 최소 높이 */
  --pad-x: 16px;         /* 화면 좌우 여백 */
  --content-max: 900px;  /* 내용 최대 폭 — 넓을수록 좌우 끝이 멀어져 읽기 불편해짐 */
  --btn-pad: 8px 14px;
}

/* 모바일: 토큰만 갈아끼우면 전체 밀도가 손가락용으로 바뀝니다 */
@media (max-width: 719px) {
  :root {
    --font-base: 16px;   /* iOS 입력 시 자동확대 방지선 */
    --font-sm: 15px;
    --font-xs: 13px;
    --tap: 44px;         /* 애플/구글 권장 터치타겟 */
    --pad-x: 12px;
    --btn-pad: 12px 16px;
    --radius: 10px;
    --radius-lg: 14px;
  }
}

* { box-sizing: border-box; }

/* 브라우저 기본 UI(스크롤바·입력창·체크박스)도 스킨 밝기에 맞춥니다 */
html { color-scheme: var(--color-scheme, light); }

body {
  margin: 0;
  font-family: "Segoe UI", "Malgun Gothic", -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: var(--font-base);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }




/* ---------- 로고 ----------
   스킨마다 밝은/어두운 버전이 자동으로 바뀝니다 (--logo-src 토큰).
   background 방식이라 모든 브라우저에서 동일하게 동작합니다. */
.logo {
  display: block;
  height: 40px;
  width: 111px;             /* 원본 354x128 비율 유지 */
  background-image: var(--logo-src);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  text-indent: -9999px;     /* 대체 텍스트는 화면 밖으로 (스크린리더용으로 남김) */
  overflow: hidden;
}
@media (max-width: 719px) { .logo { height: 32px; width: 89px; } }

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--tap);
  padding: var(--btn-pad);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  font-size: var(--font-sm);
  font-family: inherit;
  transition: all .12s;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.btn:disabled { opacity: .35; cursor: default; }
.btn:disabled:hover { border-color: var(--border); color: var(--text); }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn.primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn.danger { color: var(--danger); border-color: var(--danger-line); }
.btn.danger:hover { background: var(--danger-soft); border-color: var(--danger); }
.btn .ico { font-size: 15px; }

/* ---------- 파일 선택 ----------
   <input type=file>의 안쪽 버튼은 브라우저가 그려서 CSS가 안 먹습니다.
   그래서 진짜 input은 숨기고 <label>을 버튼처럼 씁니다. */
.filepick { display: flex; align-items: center; gap: var(--sp-2); flex: 1; min-width: 0; }
.filepick input[type="file"] {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; overflow: hidden; clip: rect(0 0 0 0);
}
.filepick .pickname {
  color: var(--muted); font-size: var(--font-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
/* 키보드로 탭 이동했을 때도 눈에 보이게 */
.filepick input[type="file"]:focus-visible + .btn {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ---------- 툴바 ---------- */
.toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--pad-x);   /* 높이는 내용에 맞춰 자동 (로고 있으면 커짐) */
  background: var(--card);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.toolbar .spacer { flex: 1; }

/* ---------- 주소줄 ---------- */
.addr {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.addr label { color: var(--muted); font-size: 13px; white-space: nowrap; }
.addr input {
  flex: 1; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: 7px;
  font-size: 13px; background: var(--card-alt); color: var(--text);
  font-family: inherit;
}

/* ---------- 목록 ---------- */
.list { padding: var(--sp-3) var(--pad-x); }
.item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 8px;
  transition: all .12s;
}
.item.selected { border-color: var(--accent); background: var(--accent-soft); }
.item .rowpick { width: 17px; height: 17px; cursor: pointer; accent-color: var(--accent); flex-shrink: 0; }
.item .folder { font-size: 22px; }
.item .meta { flex: 1; min-width: 0; }
.item .name { font-weight: 600; }
.item .path, .item .sub { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 표 (방문자 파일목록) ---------- */
table.filelist {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
table.filelist th {
  background: var(--card-alt); text-align: left;
  padding: 10px 12px; font-size: 13px; font-weight: 600;
  border-bottom: 1px solid var(--border);
}
table.filelist td { padding: 9px 12px; border-top: 1px solid var(--border); font-size: 14px; }
.size, .date { color: var(--muted); font-size: var(--font-xs); }
/* PC: 크기·날짜를 고정폭으로 좁혀 이름 바로 옆에 붙입니다.
   (1100px를 꽉 채우면 체크박스와 날짜가 화면 양 끝에 떨어져 눈이 피곤해짐) */
@media (min-width: 720px) {
  table.filelist { table-layout: fixed; }
  table.filelist th.size, table.filelist td.size { width: 96px; text-align: right; }
  table.filelist th.date, table.filelist td.date { width: 150px; text-align: right; }
  table.filelist td:nth-child(2) {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}

/* ---------- 선택 묶음 다운로드 ---------- */
table.filelist th.pick, table.filelist td.pick { width: 38px; text-align: center; }
table.filelist input[type="checkbox"] { width: 17px; height: 17px; cursor: pointer; accent-color: var(--accent); }
/* 선택된 것이 있을 때만 나타나는 막대 */
.selbar {
  display: none;
  align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg);
  font-size: var(--font-sm);
}
.selbar.show { display: flex; }
.selbar b { color: var(--accent); }


/* ---------- 이미지 미리보기 (페이지를 떠나지 않고 보기) ---------- */
.viewer {
  position: fixed; inset: 0; z-index: 100;
  display: none;
  background: rgba(0, 0, 0, .82);
  flex-direction: column;
}
.viewer.show { display: flex; }
.viewer-bar {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  color: #fff; font-size: var(--font-sm);
  background: rgba(0, 0, 0, .35);
}
.viewer-bar .vname {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600;
}
.viewer-bar .vmeta { color: #c9ccd1; font-size: var(--font-xs); white-space: nowrap; }
.viewer-bar .vbtn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tap); min-height: var(--tap);
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.25); border-radius: var(--radius);
  background: rgba(255,255,255,.08); color: #fff;
  cursor: pointer; font-size: var(--font-sm); font-family: inherit;
  text-decoration: none;
}
.viewer-bar .vbtn:hover { background: rgba(255,255,255,.18); color: #fff; text-decoration: none; }
.viewer-stage {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-3);
  overflow: auto;
}
.viewer-stage video {
  max-width: 100%; max-height: 100%;
  background: #000;
  border-radius: var(--radius);
}
.viewer-stage audio { width: min(560px, 92%); }
.viewer-stage .audio-box {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
  color: #fff;
}
.viewer-stage .audio-box .disc { font-size: 64px; }
.viewer-stage img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  background: #fff;
  border-radius: var(--radius);
}
@media (max-width: 719px) {
  .viewer-bar { flex-wrap: wrap; gap: var(--sp-2); }
  .viewer-bar .vname { flex: 1 1 100%; }
}

/* ---------- 카드/폼 (환경설정) ---------- */
.container { max-width: 720px; margin: var(--sp-5) auto; padding: 0 var(--pad-x); }
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-bottom: 16px;
}
.card h2 { font-size: 15px; margin: 0 0 16px; color: var(--accent); }
label.field { display: block; font-size: 13px; color: var(--muted); margin: 12px 0 4px; }
input.field, select.field, textarea.field {
  width: 100%; min-height: var(--tap); padding: var(--sp-2) 10px;
  border: 1px solid var(--border); border-radius: 7px;
  font-size: var(--font-base); font-family: inherit; background: var(--card-alt); color: var(--text);
}
.row { display: flex; gap: 12px; }
.row > div { flex: 1; }
.toggle { display: flex; align-items: center; gap: 8px; margin-top: 16px; }

/* ---------- 웹 편집기 ---------- */
textarea.editor {
  width: 100%; height: 68vh;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card); color: var(--text);
  font-family: "Consolas", "D2Coding", monospace;
  font-size: 13px; line-height: 1.5;
  resize: vertical;
}
textarea.editor:focus { outline: none; border-color: var(--accent); }

/* ---------- 환경설정 (왼쪽 카테고리 메뉴 + 오른쪽 내용) ---------- */
.settings-layout {
  display: flex;
  gap: 0;
  min-height: calc(100vh - 90px);
}
.settings-nav {
  width: 168px;
  flex-shrink: 0;
  background: var(--card);
  border-right: 1px solid var(--border);
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.settings-nav .cat {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
}
.settings-nav .cat:hover { background: var(--accent-soft); color: var(--accent); text-decoration: none; }
.settings-nav .cat.active { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.settings-nav .cat.disabled { color: var(--muted); cursor: default; font-size: 12px; }
.settings-nav .cat.disabled:hover { background: none; color: var(--muted); }
.settings-body { flex: 1; padding: 16px 20px; min-width: 0; }
.settings-body .pane { display: none; }
.settings-body .card { max-width: 640px; }

/* ---------- 상태바 ---------- */
.statusbar {
  padding: var(--sp-2) var(--pad-x);
  background: var(--card);
  border-top: 1px solid var(--border);
  color: var(--muted); font-size: var(--font-xs);
  display: flex; justify-content: space-between; align-items: center;
}
/* 항목이 하나뿐이면(방문자 화면의 버전 표기) 가운데로 모읍니다.
   둘 이상이면(관리 화면: 제목 + 로그아웃) 기존처럼 양끝 정렬 */
.statusbar > :only-child { margin: 0 auto; }
.badge-on { color: var(--success); font-weight: 600; }
.badge-off { color: var(--muted); font-weight: 600; }

/* ---------- 알림 배너 ---------- */
.banner {
  margin: 12px 16px; padding: 12px 16px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg); color: var(--accent-hover); font-size: 13px;
}
.banner.success { background: var(--success-soft); border-color: var(--success-line); color: var(--success-text); }

/* =========================================================================
   모바일 디자인 언어 (<720px)
   PC는 "표 + 조밀", 모바일은 "카드 + 손가락" — 같은 HTML, 배치만 다름
   ========================================================================= */
@media (max-width: 719px) {

  /* 툴바: 버튼이 잘리지 않게 가로 스크롤 대신 줄바꿈 + 넓은 터치영역 */
  .toolbar { padding: var(--sp-2) var(--pad-x); gap: var(--sp-2); }
  .toolbar .btn { flex: 1 1 auto; }

  /* 주소줄: 세로로 쌓고 입력칸을 넓게 */
  .addr { flex-wrap: wrap; padding: var(--sp-2) var(--pad-x); }
  .addr input { flex: 1 1 100%; min-height: var(--tap); font-size: var(--font-base); }
  .addr .btn { flex: 1 1 0; }

  /* 공유 목록 카드: 터치 여백 확대 */
  .item { padding: var(--sp-4); gap: var(--sp-3); }
  .item .rowpick { width: 17px; height: 17px; cursor: pointer; accent-color: var(--accent); flex-shrink: 0; }
.item .folder { font-size: 26px; }

  /* ── 핵심: 파일목록 표 → 카드 ──
     PC의 3열 표는 좁은 화면에서 글자가 뭉개지므로,
     행 하나를 카드 한 장으로 바꾸고 크기/날짜는 라벨을 붙여 아래로 내립니다. */
  table.filelist, table.filelist tbody, table.filelist tr, table.filelist td {
    display: block;
    width: 100%;
  }
  table.filelist { border: none; background: none; }
  table.filelist thead { display: none; }        /* 헤더행은 카드에서 불필요 */
  table.filelist tr {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
  }
  table.filelist td { border: none; padding: 0; font-size: var(--font-base); }
  /* 카드 모드: 체크박스를 이름 줄 왼쪽에 겹쳐 배치 */
  table.filelist tr { position: relative; padding-left: 44px; }
  table.filelist td.pick {
    position: absolute; left: var(--sp-3); top: var(--sp-3);
    width: auto; padding: 0;
  }
  table.filelist td:nth-child(2) {
    font-weight: 600;
    min-height: var(--tap);
    display: flex; align-items: center; gap: 6px;
    word-break: break-all;
  }
  table.filelist td:nth-child(2) a { flex: 1; }
  /* 크기·날짜는 한 줄에 나란히, 라벨을 붙여 뜻이 통하게 */
  .size, .date {
    display: inline-block;
    text-align: left;
    color: var(--muted);
    font-size: var(--font-xs);
    margin-top: var(--sp-1);
  }
  .size::before { content: "크기 "; }
  .date::before { content: " · 수정 "; }

  /* 업로드 폼: 세로 배치 */
  form.upload, .card.upload { flex-direction: column; align-items: stretch !important; }
  form.upload .btn { width: 100%; }

  /* 카드/컨테이너 여백 축소 */
  .container { margin: var(--sp-3) auto; }
  .card { padding: var(--sp-4); }

  /* 편집기: 화면 높이 활용 */
  textarea.editor { height: 58vh; font-size: var(--font-sm); }

  /* 환경설정: 좌측 메뉴 → 상단 가로 탭 */
  .settings-layout { flex-direction: column; }
  .settings-nav {
    width: auto; flex-direction: row; flex-wrap: nowrap;
    overflow-x: auto; border-right: none;
    border-bottom: 1px solid var(--border);
    padding: var(--sp-2);
    -webkit-overflow-scrolling: touch;
  }
  .settings-nav .cat { white-space: nowrap; min-height: var(--tap); display: flex; align-items: center; }
  .settings-body { padding: var(--sp-3) var(--pad-x); }
  .row { flex-direction: column; gap: var(--sp-2); }

  /* 상태바: 두 줄이 되지 않게 */
  .statusbar { padding: var(--sp-2) var(--pad-x); font-size: var(--font-xs); }
}

/* PC 전용: hover는 마우스가 있을 때만 (모바일 '끈적임' 방지) */
@media (hover: hover) and (min-width: 720px) {
  .item:hover { border-color: var(--accent); box-shadow: var(--shadow-1); }
  table.filelist tr:hover td { background: var(--card-alt); }
}

/* =========================================================================
   내용 최대 폭 — 반드시 파일 마지막에 둘 것.
   .toolbar/.list/.statusbar 가 `padding` 단축 속성을 쓰기 때문에,
   이 규칙이 앞에 있으면 통째로 덮어써집니다. (0.13.4에서 실제로 겪음)
   ========================================================================= */
.toolbar, .addr, .list, .statusbar, .settings-body {
  padding-left: max(var(--pad-x), calc((100% - var(--content-max)) / 2));
  padding-right: max(var(--pad-x), calc((100% - var(--content-max)) / 2));
}
/* .container는 자체 max-width가 있으므로 그대로 둡니다 */

/* 변환 재생(mkv 등) 전용 - 탐색막대와 코덱 안내 */
.viewer-stage .needcodec {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
  max-width: 560px; padding: var(--sp-5); text-align: center;
  line-height: 1.7; border-radius: var(--radius);
  /* 뒤 목록이 비쳐서 글씨가 안 읽히지 않게 불투명 카드로 깔아둡니다 */
  background: #14161a; border: 1px solid rgba(255,255,255,.15);
}
.viewer-stage .needcodec p {
  margin: 0; color: #fff; white-space: pre-line;   /* 줄바꿈 그대로 보이게 */
  word-break: break-all;
}

/* =========================================================================
   블로그 모드
   -------------------------------------------------------------------------
   블로그 화면의 뼈대는 /assets/blog.css 가 먼저 깔고, 그 다음 이 파일을
   읽습니다. 위 :root 토큰만 바꿔도 블로그 색은 알아서 따라오지만,
   배치까지 자기 디자인으로 바꾸고 싶으면 여기에 아래 이름들을 다시 쓰면
   됩니다 (!important 필요 없음).

     .blog-shell  2단 틀        .blog-side  왼쪽 기둥     .blog-main  본문칸
     .blog-title  블로그 제목    .blog-intro 소개글        .blog-menu  게시판 메뉴
     .blog-tools  관리 단추들    .blog-item  목록 한 줄    .blog-meta  날짜/게시판
     .blog-body   글 본문        .blog-files 첨부 목록     .blog-act   고치기/지우기

   예) 메뉴를 오른쪽으로 옮기기
     .blog-shell { grid-template-columns: minmax(0,1fr) 232px; }
     .blog-side  { order: 2; }
   ========================================================================= */