/* 종이접기 — 종이 느낌의 크림 바탕에 학의 산호빛을 강조색으로 */
:root{
  --paper:#fff8f4; --card:#ffffff; --ink:#2b1e1a; --muted:#8a7a74; --line:#f4ddd6;
  --brand:#e94f6b; --brand-dark:#b8324c; --brand-lt:#ff93a6; --gold:#f4a72c;
  --header-h:56px; --safe-bottom:env(safe-area-inset-bottom);
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; }
body{ background:var(--paper); color:var(--ink);
  font-family:'Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',system-ui,sans-serif;
  line-height:1.5; padding-bottom:calc(84px + var(--safe-bottom)); }
.hidden{ display:none !important; }

/* ── 머리 ── */
.app-header{ position:sticky; top:0; z-index:20; min-height:var(--header-h);
  display:flex; align-items:center; gap:8px; padding:10px 14px;
  padding-top:max(10px, env(safe-area-inset-top));
  background:linear-gradient(135deg,var(--brand-lt),var(--brand)); color:#fff; }
.app-logo{ width:28px; height:28px; border-radius:8px; flex:none; }
.app-header h1{ margin:0; font-size:1.1rem; font-weight:800; letter-spacing:-.02em; }
.app-ver{ font-size:.66rem; opacity:.75; }
.header-right{ margin-left:auto; display:flex; align-items:center; gap:6px; }
.sync-status{ font-size:.72rem; font-weight:700; opacity:.95; white-space:nowrap; }
.icon-btn{ border:none; background:rgba(255,255,255,.22); color:#fff; width:34px; height:34px;
  border-radius:10px; font-size:1rem; cursor:pointer; flex:none; }
.icon-btn:active{ background:rgba(255,255,255,.45); }
.icon-btn.on{ background:#fff; }

/* ── 분류 탭 ──
   일곱 살이 손가락으로 누른다. 글자를 키우고 단추를 두툼하게 했다.
   옆으로 밀어 찾게 두면 뒤쪽 분류는 있는 줄도 모르므로, 늘어나면 줄을 바꿔
   전부 한눈에 보이게 한다. 대신 화면에 붙박아 두지 않는다 — 여러 줄이 되면
   그만큼 영상 볼 자리를 늘 빼앗기 때문이다. */
.tabs{ display:flex; flex-wrap:wrap; gap:8px;
  padding:12px 12px 14px; background:var(--paper); border-bottom:1px solid var(--line); }
.tab{ flex:none; border:2px solid var(--line); background:#fff; color:var(--muted);
  border-radius:999px; padding:12px 20px; font-size:1.05rem; font-weight:800; cursor:pointer;
  display:flex; align-items:center; gap:7px; white-space:nowrap; min-height:48px; }
.tab i{ font-style:normal; font-size:.82rem; background:var(--line); color:var(--brand-dark);
  border-radius:999px; padding:2px 8px; }
.tab.active{ background:var(--brand); border-color:var(--brand); color:#fff; }
.tab.active i{ background:rgba(255,255,255,.3); color:#fff; }
.tab-cat{ color:var(--brand-dark); }

/* ── 카드 ── */
.app-main{ padding:12px; max-width:820px; margin:0 auto; }
/* 카드 — 폰에서는 한 줄에 하나씩 크게. 두 개씩 늘어놓으면 그림이 손톱만 해져
   무슨 영상인지 알아보기 어렵다. 화면이 넓어지면 저절로 두세 개씩 들어간다. */
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
.card{ position:relative; background:var(--card); border:1px solid var(--line); border-radius:14px;
  overflow:hidden; cursor:pointer; display:flex; flex-direction:column; }
.card:active{ transform:scale(.985); }
/* 16:9 를 꼭 지킨다. 그림을 그냥 넣어 두면 제 크기(유튜브 썸네일은 4:3)대로 상자를
   밀어 넓혀서, 위아래 검은 띠가 그대로 보인다. 띄워 놓고 잘라내야 화면이 깔끔하다. */
.thumb{ position:relative; aspect-ratio:16/9; overflow:hidden; background:#f1e4df;
  display:flex; align-items:center; justify-content:center; }
.thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.thumb .noimg{ font-size:1.8rem; opacity:.5; }
/* 메모 딱지 — 일곱 살이 멀리서도 읽게 글자를 두 배로(.78 → 1.56rem) */
.badge{ position:absolute; left:8px; top:8px; font-size:1.56rem; font-weight:800; color:#fff;
  border-radius:12px; padding:5px 14px; line-height:1.25; }
.badge.youtube{ background:#e23b3b; } .badge.file{ background:var(--brand-dark); }
.play{ position:absolute; right:10px; bottom:10px; width:46px; height:46px; border-radius:50%;
  background:rgba(0,0,0,.55); color:#fff; font-size:1.2rem; display:flex; align-items:center; justify-content:center; }
.meta{ padding:12px 14px 14px; }
.meta h3{ margin:0; font-size:1.12rem; font-weight:700; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.meta .note{ margin:6px 0 0; font-size:.92rem; color:var(--muted); }
.meta .sub{ margin:4px 0 0; font-size:.82rem; color:var(--muted); }
.card-del{ display:none; position:absolute; right:8px; top:8px; width:38px; height:38px; border-radius:50%;
  border:2px solid #fff; background:#e11d48; color:#fff; font-size:20px; font-weight:800; line-height:1;
  cursor:pointer; z-index:2; }
body.deleting .card-del{ display:block; }
.empty{ grid-column:1/-1; text-align:center; color:var(--muted); padding:44px 16px;
  border:1px dashed var(--line); border-radius:16px; background:#fff; }
.empty b{ color:var(--brand-dark); }
.empty .sub{ font-size:.85rem; margin-top:6px; }

/* ── ＋ 단추 ── */
.fab-add{ position:fixed; right:18px; bottom:calc(18px + var(--safe-bottom)); z-index:25;
  width:58px; height:58px; border-radius:50%; border:none; cursor:pointer;
  background:var(--brand); color:#fff; font-size:1.7rem; line-height:1;
  box-shadow:0 6px 18px rgba(233,79,107,.42); }
.fab-add:active{ transform:scale(.92); }
body.readonly .fab-add, body.readonly .card-del{ display:none; }
body.playing .fab-add{ display:none; }

/* ── 다이얼로그 ── */
.dialog{ border:none; border-radius:18px; padding:0; width:min(520px,92vw); background:var(--card);
  color:var(--ink); box-shadow:0 20px 50px rgba(43,30,26,.28); }
.dialog::backdrop{ background:rgba(43,30,26,.45); }
.dialog form, .dialog .sheet-body{ padding:18px; display:flex; flex-direction:column; gap:12px; }
.dialog h2{ margin:0; font-size:1.05rem; font-weight:800; }
.field{ display:flex; flex-direction:column; gap:5px; }
.field > span{ font-size:.78rem; font-weight:800; color:var(--muted); }
.field input, .field select, .field textarea{ width:100%; padding:11px 12px; font-size:.95rem;
  border:1px solid var(--line); border-radius:11px; background:#fff; color:var(--ink); outline:none; font-family:inherit; }
.field input:focus, .field select:focus{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(233,79,107,.15); }
.dialog-actions{ display:flex; gap:9px; justify-content:flex-end; margin-top:2px; }
.btn{ border:none; background:var(--brand); color:#fff; font-weight:800; border-radius:11px;
  padding:11px 17px; font-size:.92rem; cursor:pointer; }
.btn:active{ opacity:.85; }
.btn:disabled{ opacity:.5; cursor:default; }
.btn.ghost{ background:#fff; color:var(--muted); border:1px solid var(--line); }
.btn.small{ padding:8px 12px; font-size:.82rem; }
.add-status{ font-size:.8rem; color:var(--brand-dark); min-height:1.2em; }

/* 유튜브/파일 고르개 · 배속 고르개 공용 */
.seg{ display:flex; gap:5px; background:#f7ece8; border-radius:12px; padding:4px; }
.seg button{ flex:1 1 0; min-width:0; border:none; background:transparent; color:var(--muted);
  font-weight:800; font-size:.85rem; padding:9px 6px; border-radius:9px; cursor:pointer; white-space:nowrap; }
.seg button.on{ background:#fff; color:var(--brand-dark); box-shadow:0 1px 3px rgba(43,30,26,.15); }

.filepick{ border:2px dashed var(--brand-lt); background:#fff6f7; color:var(--brand-dark);
  border-radius:12px; padding:16px; font-size:.92rem; font-weight:800; cursor:pointer; width:100%; }
.filemeta{ display:flex; gap:10px; align-items:center; background:#faf3f0; border-radius:11px; padding:9px; }
.filemeta img{ width:92px; border-radius:8px; display:block; }
.filemeta b{ display:block; font-size:.85rem; word-break:break-all; }
.filemeta span{ font-size:.76rem; color:var(--muted); }

.newcat-row{ display:flex; gap:6px; }
.newcat-row input{ flex:1; min-width:0; }

.preview{ display:flex; gap:10px; align-items:center; background:#faf3f0; border-radius:11px; padding:9px; }
.preview img{ width:110px; border-radius:8px; display:block; }
.preview b{ display:block; font-size:.86rem; line-height:1.4; }
.preview span{ font-size:.74rem; color:var(--muted); }
.load{ font-size:.85rem; color:var(--muted); }

.uploadbar{ position:relative; height:26px; border-radius:999px; background:#f2e2dd; overflow:hidden; }
.uploadbar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--brand-lt),var(--brand)); transition:width .2s; }
.uploadbar span{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:.74rem; font-weight:800; color:var(--ink); }

.cat-add{ display:flex; gap:7px; }
.cat-add input{ flex:1; min-width:0; padding:11px 12px; border:1px solid var(--line); border-radius:11px; font-size:.95rem; }
.cat-list{ list-style:none; margin:0; padding:0; max-height:46vh; overflow:auto; }
.cat-list li{ display:flex; align-items:center; gap:9px; padding:10px 2px; border-bottom:1px solid var(--line); }
.cat-name{ font-weight:700; flex:1; }
.cat-n{ font-size:.76rem; color:var(--muted); }
.cat-del{ border:1px solid var(--line); background:#fff; color:#b91c1c; border-radius:9px;
  padding:6px 10px; font-size:.78rem; font-weight:700; cursor:pointer; }
.cat-del:disabled{ color:#cbbdb8; cursor:default; }
.cat-empty{ color:var(--muted); font-size:.85rem; padding:14px 2px; }
.cat-note{ margin:0; font-size:.76rem; color:var(--muted); }

/* ── 재생기 ──
   화면을 꽉 채우고 아래에 조작 막대를 고정한다. 폰을 눕히면 영상이 커지도록
   무대(stage)는 남는 자리를 전부 먹는다. */
.player{ position:fixed; inset:0; z-index:60; background:#14100f; color:#fff;
  display:flex; flex-direction:column; }
.player-bar{ display:flex; align-items:center; gap:10px; padding:10px 12px;
  padding-top:max(10px, env(safe-area-inset-top)); background:#1e1917; }
.player-close{ border:none; background:rgba(255,255,255,.14); color:#fff; border-radius:9px;
  padding:8px 12px; font-size:.85rem; font-weight:800; cursor:pointer; flex:none; }
.player-title{ flex:1; min-width:0; font-size:.86rem; font-weight:700;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.player-open{ color:var(--brand-lt); font-size:.78rem; font-weight:800; text-decoration:none; flex:none; }

.stage{ flex:1; min-height:0; background:#000; display:flex; align-items:center; justify-content:center; }
.stage > div, .stage iframe, .stage video{ width:100%; height:100%; border:0; display:block; }
.stage video{ object-fit:contain; background:#000; }

.ctrl{ background:#1e1917; padding:10px 12px calc(12px + var(--safe-bottom)); display:flex; flex-direction:column; gap:9px; }
.ctrl-row{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.ctrl-label{ font-size:.74rem; font-weight:800; color:#c9b6b0; flex:none; }
.ctrl .seg{ flex:1; background:rgba(255,255,255,.1); }
.ctrl .seg button{ color:#d8c8c3; }
.ctrl .seg button.on{ background:var(--brand); color:#fff; box-shadow:none; }
.pill{ border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); color:#fff;
  border-radius:999px; padding:9px 14px; font-size:.84rem; font-weight:800; cursor:pointer; flex:none; }
.pill:active{ background:rgba(255,255,255,.22); }
.pill.on{ background:var(--brand); border-color:var(--brand); }
.pill.ghost{ background:transparent; color:#c9b6b0; }
.ab-view{ font-size:.75rem; color:#c9b6b0; flex:1 1 100%; }

@media (min-width:700px){
  .ctrl{ padding-left:20px; padding-right:20px; }
  .cards{ grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
}

/* 재생기 안내 — 재생이 막혔을 때 까만 화면만 남지 않게 */
.stage{ position:relative; }
.stage-msg{ position:absolute; inset:auto 12px 12px; background:rgba(20,16,15,.92);
  border:1px solid rgba(255,255,255,.18); border-radius:12px; padding:12px 14px;
  font-size:.82rem; line-height:1.55; color:#ffe9e4; }
.ctrl .seg button:disabled{ opacity:.35; cursor:default; }

/* 카드에서 바로 고치기 — 삭제 모드일 때는 × 에 자리를 내준다 */
.card-edit{ display:none; position:absolute; right:8px; top:8px; width:38px; height:38px;
  border-radius:50%; border:2px solid #fff; background:rgba(43,30,26,.72); color:#fff;
  font-size:17px; line-height:1; cursor:pointer; z-index:2; padding:0; }
body:not(.readonly):not(.deleting) .card-edit{ display:block; }
.card-edit:active{ transform:scale(.88); }
/* 고치는 중에는 종류(유튜브/파일)를 바꿀 수 없다 */
.seg.locked{ opacity:.55; }
.seg.locked button{ cursor:default; }

/* 메모 딱지 — 썸네일 위에 얹으므로 그림과 섞이지 않게 그림자를 깐다.
   다섯 자까지라 줄바꿈은 없지만, 옛 자료에 긴 메모가 있으면 잘라 보여 준다. */
.badge{ max-width:70%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  box-shadow:0 2px 6px rgba(0,0,0,.35); }