/* HanFlow PDF — 웹앱(PWA). 태블릿·모바일·데스크톱 반응형, 터치 최적화. */
:root{
  --brand:#1b45c4; --brand-2:#3a63e0; --brand-soft:#e9eefc;
  --bg:#f4f6fb; --surface:#ffffff; --ink:#1a2233; --ink-soft:#5b6b86;
  --line:#e3e8f2; --shadow:0 2px 14px rgba(20,40,90,.10);
  --page-bg:#ffffff; --stage-bg:#eef1f7; --canvas-shadow:0 2px 16px rgba(20,40,90,.16);
  --appbar-h:56px; --botbar-h:54px; --radius:13px;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  font-family:"Pretendard","Pretendard Variable",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
}
/* 배경 테마 (뷰어 무대 + 페이지) */
body[data-bg="sepia"]{ --stage-bg:#ece2cf; --page-bg:#f7efdd; }
body[data-bg="sepia"] .pagewrap canvas{ filter:sepia(.42) saturate(.9) brightness(.99); }
body[data-bg="dark"]{ --stage-bg:#15181d; --page-bg:#1f242c; --canvas-shadow:0 2px 18px rgba(0,0,0,.5); }
/* 다크 = 야간 읽기 모드: 페이지 색 반전(흰배경→어둡게, 검은글자→밝게) + 색상 보정 */
body[data-bg="dark"] .pagewrap canvas{ filter:invert(.9) hue-rotate(180deg) brightness(1.03) contrast(.95); }

/* hidden 속성은 항상 우선(명시적 display:flex 가 [hidden] 을 덮어쓰는 문제 차단) */
[hidden]{ display:none !important; }
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; height:100%; overflow:hidden; background:var(--bg); color:var(--ink); overscroll-behavior:none; }
body{ display:flex; flex-direction:column; -webkit-font-smoothing:antialiased; }
svg{ display:block; }
button{ font-family:inherit; cursor:pointer; }

/* ===== 앱바 ===== */
.appbar{
  height:calc(var(--appbar-h) + var(--safe-t)); padding-top:var(--safe-t);
  flex:0 0 auto; display:flex; align-items:center; gap:6px; padding-left:10px; padding-right:10px;
  background:var(--surface); border-bottom:1px solid var(--line); box-shadow:0 1px 0 rgba(20,40,90,.03); z-index:40;
  transition:margin-top .2s ease;
}
/* 몰입 모드: 화면 터치로 상·하단 메뉴 숨김/복귀 (body overflow:hidden 이 밀려난 바를 가림) */
body.immersive .appbar{ margin-top:calc(-1px - var(--appbar-h) - var(--safe-t)); }
body.immersive .botbar{ margin-bottom:calc(-1px - var(--botbar-h) - var(--safe-b)); }
.brand{ display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--ink); font-weight:800; letter-spacing:-.01em; }
.brand .logo{ width:26px; height:26px; flex:0 0 auto; }
.brand-txt{ font-size:16px; }
.brand-txt b{ color:var(--brand); font-weight:800; }
.doc-name{ margin-left:8px; font-size:13.5px; color:var(--ink-soft); font-weight:600; max-width:30vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.spacer{ flex:1 1 auto; }

.iconbtn{
  width:40px; height:40px; flex:0 0 auto; border:0; background:transparent; color:#3a4660;
  border-radius:10px; display:inline-flex; align-items:center; justify-content:center; transition:background .12s;
}
.iconbtn svg{ width:22px; height:22px; }
.iconbtn.sm{ width:34px; height:34px; }
.iconbtn.sm svg{ width:18px; height:18px; }
.iconbtn:hover{ background:var(--brand-soft); color:var(--brand); }
.iconbtn:active{ background:#dde6fb; }

.btn-open{
  display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 14px; margin-left:4px;
  border:0; border-radius:11px; background:var(--brand); color:#fff; font-weight:700; font-size:14px;
}
.btn-open svg{ width:19px; height:19px; }
.btn-open:hover{ background:var(--brand-2); }
.btn-open:active{ transform:translateY(1px); }

/* 검색 */
.search-wrap{ position:relative; }
.search-box{
  position:absolute; right:0; top:48px; display:flex; align-items:center; gap:2px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow);
  padding:5px 6px; z-index:50;
}
.search-box input{ border:0; outline:0; font-size:14px; width:190px; padding:6px 8px; background:transparent; color:var(--ink); }
.search-count{ font-size:12px; color:var(--ink-soft); min-width:42px; text-align:center; }

/* 드롭다운 */
.dd{ position:relative; }
.menu{
  position:absolute; right:0; top:48px; min-width:172px; background:var(--surface); border:1px solid var(--line);
  border-radius:13px; box-shadow:var(--shadow); padding:6px; z-index:50;
}
.menu .mi{
  display:flex; align-items:center; gap:10px; width:100%; border:0; background:transparent; color:var(--ink);
  padding:11px 12px; border-radius:9px; font-size:14.5px; text-align:left; font-weight:600;
}
.menu .mi:hover{ background:var(--brand-soft); color:var(--brand); }
.menu .mi.active{ color:var(--brand); background:var(--brand-soft); }
.mi-ic{ width:20px; text-align:center; opacity:.8; }
.mi-sep{ height:1px; background:var(--line); margin:5px 4px; }
.menu .mi.disabled{ opacity:.4; pointer-events:none; }
/* 메뉴 내 가로 배치(배경 3종) */
.mi-row{ display:flex; gap:5px; padding:2px 4px; }
.mib{ flex:1 1 0; border:1px solid var(--line); background:transparent; color:var(--ink); font-size:12px; font-weight:600; padding:9px 2px; border-radius:9px; white-space:nowrap; }
.mib:hover{ background:var(--brand-soft); color:var(--brand); }

/* ===== 무대 ===== */
.stage{ position:relative; flex:1 1 auto; min-height:0; display:flex; background:var(--stage-bg); }

/* 뷰어 */
.viewer{ flex:1 1 auto; min-width:0; overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; scroll-behavior:auto; }
.pages{ min-height:100%; padding:18px 0 28px; display:flex; flex-direction:column; align-items:center; gap:16px; transform-origin:top center; }
.pagewrap{ position:relative; background:var(--page-bg); box-shadow:var(--canvas-shadow); border-radius:3px; overflow:hidden; }
.pagewrap canvas{ display:block; }
.pagewrap .ph{ display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-size:13px; }
/* 텍스트 레이어 (검색·선택) */
.textLayer{ position:absolute; inset:0; overflow:hidden; opacity:1; line-height:1; }
.textLayer span{ color:transparent; position:absolute; white-space:pre; cursor:text; transform-origin:0 0; }
.textLayer .hl{ background:rgba(255,201,0,.45); border-radius:2px; }
.textLayer .hl.cur{ background:rgba(255,140,0,.6); }
body[data-bg="dark"] .pagewrap{ outline:1px solid rgba(255,255,255,.06); }

/* 페이지 모드(한 페이지씩) */
.viewer.mode-page .pages{ justify-content:flex-start; }
.viewer.mode-page .pagewrap{ display:none; }
.viewer.mode-page .pagewrap.shown{ display:block; }
/* 꽉채움(모바일·태블릿 한 페이지씩): 페이지가 화면 전체를 채움 — transform 으로 남는 축 늘림 */
.viewer.mode-page.fill{ overflow:hidden; }
.viewer.mode-page.fill .pages{ padding:0; gap:0; align-items:flex-start; }
.viewer.mode-page.fill .pagewrap{ transform-origin:0 0; box-shadow:none; border-radius:0; }

/* ===== 페이지 목록 패널 ===== */
.panel{
  flex:0 0 auto; width:0; overflow:hidden; background:var(--surface); border-right:1px solid var(--line);
  transition:width .2s ease; z-index:30;
}
.panel.open{ width:188px; }
.panel-tabs{ display:flex; gap:4px; padding:8px 10px 6px; }
.ptab{
  flex:1 1 0; border:0; background:transparent; color:var(--ink-soft); font-weight:700; font-size:12.5px;
  padding:8px 4px; border-radius:9px; white-space:nowrap;
}
.ptab.active{ background:var(--brand-soft); color:var(--brand); }
.thumbs{ overflow:auto; height:calc(100% - 44px); padding:0 12px 16px; display:flex; flex-direction:column; gap:10px; -webkit-overflow-scrolling:touch; }
/* ★flex:0 0 auto 필수 — 없으면 세로 flex 가 52장 전체를 화면 높이에 맞춰 납작하게 압축(260702 갤럭시 실기기 버그) */
.thumb{ position:relative; flex:0 0 auto; border:2px solid transparent; border-radius:7px; overflow:hidden; background:#fff; box-shadow:0 1px 6px rgba(20,40,90,.12); cursor:pointer; }
.thumb canvas,.thumb .tph{ display:block; width:100%; }
.thumb .tph{ min-height:60px; background:#f0f3fa; }
.thumb.active{ border-color:var(--brand); }
.thumb .tn{ position:absolute; bottom:4px; right:5px; background:rgba(20,30,55,.72); color:#fff; font-size:11px; padding:1px 6px; border-radius:6px; }
/* 북마크된 페이지: 썸네일 우상단 리본 */
.thumb.bm::after{ content:"🔖"; position:absolute; top:2px; right:4px; font-size:14px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.panel-scrim{ position:absolute; inset:0; background:rgba(15,25,50,.35); opacity:0; pointer-events:none; transition:opacity .2s; z-index:25; }
/* 북마크 목록 탭 */
.bmlist{ overflow:auto; height:calc(100% - 44px); padding:0 10px 16px; display:flex; flex-direction:column; gap:6px; -webkit-overflow-scrolling:touch; }
.bm-item{
  display:flex; align-items:center; gap:8px; padding:11px 10px; border-radius:10px; cursor:pointer;
  background:var(--bg); border:1px solid var(--line); font-size:13.5px; font-weight:600; color:var(--ink);
}
.bm-item.active{ border-color:var(--brand); background:var(--brand-soft); }
.bm-item .bm-pg{ flex:1 1 auto; }
.bm-item .bm-del{ border:0; background:transparent; color:var(--ink-soft); font-size:13px; padding:4px 6px; border-radius:7px; }
.bm-item .bm-del:hover{ background:#fde8e7; color:#c0392b; }
.bm-empty{ padding:18px 8px; font-size:12.5px; color:var(--ink-soft); line-height:1.7; text-align:center; }

/* ===== 환영 화면 ===== */
.welcome{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:var(--stage-bg); z-index:20; padding:24px; }
.welcome.hide{ display:none; }
.welcome-inner{ text-align:center; max-width:440px; width:100%; }
.welcome-logo{ width:62px; height:62px; margin:0 auto 18px; filter:drop-shadow(0 6px 16px rgba(27,69,196,.28)); }
.welcome h1{ font-size:24px; font-weight:800; letter-spacing:-.02em; margin:0 0 10px; color:var(--ink); }
.welcome h1 b{ color:var(--brand); }
.welcome p{ font-size:14.5px; color:var(--ink-soft); line-height:1.6; margin:0 0 22px; }
.cta{
  display:inline-flex; align-items:center; gap:9px; height:52px; padding:0 26px; border:0; border-radius:14px;
  background:var(--brand); color:#fff; font-size:16px; font-weight:700; box-shadow:0 6px 18px rgba(27,69,196,.30);
}
.cta svg{ width:21px; height:21px; }
.cta:hover{ background:var(--brand-2); }
.cta:active{ transform:translateY(1px); }
.welcome-drop{ margin-top:16px; font-size:13px; color:var(--ink-soft); }
.welcome-recv{
  margin-top:14px; padding:11px 18px; border:1.5px solid var(--line); border-radius:12px;
  background:var(--surface); color:var(--ink); font-size:13.5px; font-weight:700; box-shadow:var(--shadow);
}
.welcome-recv span{ color:var(--ink-soft); font-weight:500; }
.welcome-recv:active{ background:var(--brand-soft); }

/* 기기 간 보내기/받기 */
.ho-card{ width:min(430px,100%); }
.ho-input{
  width:100%; padding:11px 12px; border:1.5px solid var(--line); border-radius:11px;
  font-size:14.5px; background:var(--bg); color:var(--ink); outline:none;
}
.ho-input:focus{ border-color:var(--brand); background:var(--surface); }
.ho-code-input{ text-align:center; font-size:26px; font-weight:800; letter-spacing:.35em; }
.ho-code{
  text-align:center; font-size:44px; font-weight:900; letter-spacing:.22em; color:var(--brand);
  padding:18px 6px 12px; user-select:all;
}
.stage.drag .welcome-drop{ color:var(--brand); font-weight:700; }
.stage.drag::after{ content:""; position:absolute; inset:12px; border:2.5px dashed var(--brand); border-radius:18px; pointer-events:none; z-index:60; }

.recents{ margin-top:26px; text-align:left; }
.recents-h{ font-size:12.5px; font-weight:700; color:var(--ink-soft); margin-bottom:8px; }
.recents-list{ display:flex; flex-direction:column; gap:7px; }
.recent-item{ display:flex; align-items:center; gap:10px; padding:11px 13px; background:var(--surface); border:1px solid var(--line); border-radius:11px; font-size:14px; color:var(--ink); font-weight:600; }
.recent-item:hover{ border-color:var(--brand); }
.recent-item .ri-ic{ width:18px; height:18px; color:#c0392b; flex:0 0 auto; }
.recent-item .ri-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 1 auto; }
.recent-item .ri-meta{ font-size:11.5px; color:var(--ink-soft); font-weight:500; }
.recent-item .ri-fav{ flex:0 0 auto; border:0; background:transparent; font-size:18px; line-height:1; color:#c6cede; padding:4px 6px; border-radius:8px; }
.recent-item .ri-fav.on{ color:#f5b942; }
.recent-item .ri-fav:hover{ background:var(--brand-soft); }
.install-tip{ margin-top:22px; }
.install-btn{ border:1px dashed var(--brand); background:var(--brand-soft); color:var(--brand); font-weight:700; font-size:13.5px; padding:11px 16px; border-radius:11px; }

/* ===== 하단 바 ===== */
.botbar{
  height:calc(var(--botbar-h) + var(--safe-b)); padding-bottom:var(--safe-b);
  flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:4px;
  background:var(--surface); border-top:1px solid var(--line); z-index:40;
  transition:margin-bottom .2s ease;
}
#btnBm.on{ color:#e8a13c; }
#btnBm.on .bm-shape{ fill:#f5b942; stroke:#e8a13c; }
.botbar .bot-sep{ width:1px; height:24px; background:var(--line); margin:0 8px; }
.pagejump{ border:0; background:transparent; color:var(--ink); font-weight:700; font-size:14px; padding:8px 12px; border-radius:9px; min-width:74px; }
.pagejump:hover{ background:var(--brand-soft); }
.zoomlbl{ border:0; background:transparent; color:var(--ink); font-weight:700; font-size:13.5px; padding:8px 8px; border-radius:9px; min-width:52px; }
.zoomlbl:hover{ background:var(--brand-soft); }

/* 페이지 이동 모달 */
.jump-modal{ position:fixed; inset:0; background:rgba(15,25,50,.4); display:flex; align-items:center; justify-content:center; z-index:90; }
.jump-card{ background:var(--surface); border-radius:16px; padding:22px; width:260px; box-shadow:0 18px 50px rgba(15,25,50,.35); }
.jump-title{ font-weight:700; font-size:15px; margin-bottom:14px; }
.jump-card input{ width:100%; font-size:18px; text-align:center; padding:12px; border:1.5px solid var(--line); border-radius:11px; outline:0; }
.jump-card input:focus{ border-color:var(--brand); }
.jump-actions{ display:flex; gap:8px; margin-top:16px; }
.jb{ flex:1; height:46px; border:0; border-radius:11px; font-weight:700; font-size:15px; }
.jb.ghost{ background:#eef1f7; color:var(--ink); }
.jb.primary{ background:var(--brand); color:#fff; }

/* 로딩 */
.loading{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:rgba(244,246,251,.7); backdrop-filter:blur(2px); z-index:70; }
body[data-bg="dark"] .loading{ background:rgba(31,36,44,.7); }
.spin{ width:38px; height:38px; border:3.5px solid var(--brand-soft); border-top-color:var(--brand); border-radius:50%; animation:spin .8s linear infinite; }
.loading-txt{ font-size:13.5px; color:var(--ink-soft); font-weight:600; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* 토스트 */
.toast{ position:fixed; left:50%; bottom:calc(var(--botbar-h) + var(--safe-b) + 18px); transform:translateX(-50%); background:rgba(26,34,51,.94); color:#fff; font-size:13.5px; font-weight:600; padding:11px 18px; border-radius:11px; z-index:95; box-shadow:0 8px 24px rgba(0,0,0,.25); max-width:84vw; text-align:center; }

/* ===== 반응형 ===== */
/* 페이지 목록 버튼은 모든 화면에서 노출(데스크톱도 미리보기 사용 가능) */
@media (max-width:1024px){ .panel{ position:absolute; left:0; top:0; bottom:0; height:100%; box-shadow:var(--shadow); } .panel.open{ width:216px; } .panel.open ~ .panel-scrim, .panel-scrim.show{ opacity:1; pointer-events:auto; } }
@media (min-width:1025px){ .botbar{ display:flex !important; } }

/* 태블릿·모바일: 하단바 노출, 상단 일부 축약 */
@media (max-width:760px){
  .brand-txt{ display:none; }
  .doc-name{ max-width:38vw; }
  .btn-open span{ display:none; }
  .btn-open{ padding:0 11px; }
  .search-box input{ width:150px; }
  .welcome h1{ font-size:21px; }
}
@media (max-width:420px){
  .doc-name{ display:none; }
  /* absolute 는 좁은 .search-wrap 기준이라 화면폭 확장이 안 됨 → fixed 로 전체폭 */
  .search-box{ position:fixed; left:8px; right:8px; top:calc(var(--appbar-h) + var(--safe-t) + 6px); }
  .search-box input{ width:100%; flex:1; }
  /* 하단바 7개 컨트롤이 좁은 화면에 모두 들어가게 축약 */
  .botbar{ gap:0; }
  .botbar .iconbtn{ width:36px; }
  .botbar .bot-sep{ margin:0 3px; }
  .pagejump{ min-width:60px; padding:8px 6px; font-size:13px; }
  .zoomlbl{ min-width:44px; padding:8px 4px; font-size:12.5px; }
}
/* 모바일·태블릿: 페이지가 화면에 딱 맞게(좌우 여백 0), 페이지 사이만 얇은 간격 */
@media (max-width:1024px){
  .pages{ padding:6px 0 12px; gap:8px; }
  .pagewrap{ border-radius:0; }
}

/* 데스크톱: 하단바 대신 상단에 배율 표시 가능하나 일단 하단 유지(터치 일관성) */
@media (hover:hover) and (pointer:fine){
  .viewer{ scrollbar-width:thin; }
}

/* ===== 주석 편집(annot.js) ===== */
.editbar{
  position:sticky; top:0; display:flex; align-items:center; gap:6px;
  padding:7px 12px; background:var(--surface); border-bottom:1px solid var(--line);
  z-index:39;
}
/* 데스크톱: 2단 마크업을 한 줄로 펼침(display:contents) + order 로 자연스러운 순서 재배열 */
.ebrow{ display:contents; }
.editbar [data-tool="hl"]{ order:1; } .editbar [data-tool="pen"]{ order:2; }
.editbar [data-tool="text"]{ order:3; } .editbar [data-tool="erase"]{ order:4; }
#annotColors{ order:5; } .eb-r2 .eb-sep{ order:6; } .editbar [data-w]{ order:7; }
#annotUndo{ order:8; } #annotClear{ order:9; } .eb-flex{ order:10; } #annotDone{ order:11; }
.eb{
  display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
  height:38px; padding:0 12px; border-radius:10px; border:1px solid transparent;
  background:transparent; color:var(--ink); font-size:13.5px; font-weight:600; cursor:pointer;
}
.eb svg{ width:19px; height:19px; }
.eb:active{ transform:scale(.96); }
.eb.active{ background:#eaf2fc; border-color:#c3dcf6; color:#1b45c4; }
.eb.sm{ padding:0 10px; }
.eb.done{ background:#1b45c4; color:#fff; font-weight:700; padding:0 16px; }
.eb-sep{ flex:0 0 1px; height:22px; background:var(--line); margin:0 3px; }
.eb-flex{ flex:1 1 auto; }
.cwrow{ display:inline-flex; gap:7px; flex:0 0 auto; align-items:center; }
.cw{ width:26px; height:26px; border-radius:50%; border:2px solid rgba(0,0,0,.12); cursor:pointer; flex:0 0 auto; }
.cw.active{ border-color:#1b45c4; box-shadow:0 0 0 2px rgba(27,69,196,.25); transform:scale(1.12); }
.wd{ display:block; background:currentColor; border-radius:99px; }
.wd-s{ width:16px; height:2px; } .wd-m{ width:16px; height:4px; } .wd-l{ width:16px; height:7px; }
.iconbtn .badge{
  position:absolute; top:2px; right:2px; min-width:15px; height:15px; padding:0 4px;
  border-radius:99px; background:#e8413c; color:#fff; font-size:10px; font-weight:800;
  display:flex; align-items:center; justify-content:center; line-height:1;
}
#btnAnnot{ position:relative; }
#btnSave.has{ color:#1b45c4; }
.pagewrap canvas.annotLayer{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:5;
}
.pagewrap canvas.annotLayer.on{ pointer-events:auto; touch-action:none; cursor:crosshair; }
body[data-bg] .pagewrap canvas.annotLayer{ filter:none; } /* 배경 필터에서 주석 제외 */
.annotText{
  position:absolute; z-index:6; min-width:180px; min-height:1.6em; max-width:70%;
  background:rgba(255,255,255,.92); border:1.5px dashed #1b45c4; border-radius:6px;
  padding:4px 8px; font-family:inherit; line-height:1.28; resize:both; outline:none;
}

/* ===== 문서 도구 모달(합치기 · 페이지 편집) ===== */
.tool-modal{ position:fixed; inset:0; background:rgba(15,25,50,.45); display:flex; align-items:center; justify-content:center; z-index:90; padding:14px; }
.tool-card{
  background:var(--surface); border-radius:18px; padding:16px; width:min(560px,100%);
  max-height:min(86vh, 100% - 20px); display:flex; flex-direction:column; gap:10px;
  box-shadow:0 18px 50px rgba(15,25,50,.35);
}
.tool-head{ display:flex; align-items:center; justify-content:space-between; }
.tool-title{ font-weight:800; font-size:16px; }
.tool-hint{ font-size:12.5px; color:var(--ink-soft); line-height:1.55; }
.tool-actions{ display:flex; gap:8px; }
.tool-add{
  border:1.5px dashed var(--brand); background:var(--brand-soft); color:var(--brand);
  font-weight:700; font-size:14px; padding:12px; border-radius:11px;
}
/* 합치기 목록 */
.merge-list{ overflow:auto; min-height:64px; max-height:44vh; display:flex; flex-direction:column; gap:6px; }
.merge-row{
  display:flex; align-items:center; gap:7px; padding:10px 10px; border:1px solid var(--line);
  border-radius:11px; background:var(--bg); font-size:13.5px; font-weight:600;
}
.mg-no{ flex:0 0 20px; text-align:center; color:var(--brand); font-weight:800; }
.mg-name{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mg-meta{ flex:0 0 auto; font-size:11.5px; color:var(--ink-soft); }
.mg-b{ flex:0 0 auto; width:34px; height:34px; border:1px solid var(--line); background:var(--surface); border-radius:8px; font-size:13px; color:var(--ink); }
.mg-b:active{ background:var(--brand-soft); }
.mg-x{ color:#c0392b; }
/* 페이지 편집 그리드 */
.pe-card{ width:min(760px,100%); height:min(86vh, 100% - 20px); }
.pe-grid{
  flex:1 1 auto; overflow:auto; -webkit-overflow-scrolling:touch;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:10px; padding:2px;
  align-items:start; align-content:start; /* 행/트랙 stretch 로 타일·행간이 늘어나는 것 방지 */
}
.pe-tile{ position:relative; border:2px solid var(--line); border-radius:11px; background:var(--bg); overflow:hidden; cursor:pointer; }
.pe-tile.sel{ border-color:var(--brand); box-shadow:0 0 0 2px rgba(27,69,196,.2); }
.pe-tile.del .pe-th{ opacity:.25; }
.pe-tile.del{ border-style:dashed; }
.pe-th{ display:flex; align-items:center; justify-content:center; background:#fff; min-height:70px; overflow:hidden; }
.pe-th canvas{ display:block; width:100%; }
.pe-num{ position:absolute; top:4px; left:6px; background:rgba(20,30,55,.72); color:#fff; font-size:10.5px; padding:1px 6px; border-radius:6px; }
.pe-btns{ display:flex; }
.pe-b{ flex:1 1 0; height:34px; border:0; border-top:1px solid var(--line); background:var(--surface); font-size:14px; color:var(--ink); }
.pe-b:active{ background:var(--brand-soft); }
.pe-x{ color:#c0392b; }
.pe-actions .jb{ font-size:13.5px; }

/* ===== 안드로이드 앱 전용 UI(기본앱 안내 · 강제 업데이트) ===== */
.deftip{
  position:fixed; left:10px; right:10px; bottom:calc(var(--botbar-h) + var(--safe-b) + 12px);
  display:flex; align-items:center; gap:10px; z-index:80;
  background:#1a2233; color:#fff; border-radius:13px; padding:12px 14px;
  font-size:13px; line-height:1.5; box-shadow:0 10px 28px rgba(0,0,0,.3);
}
.deftip b{ color:#9db9ff; }
.deftip button{
  flex:0 0 auto; border:0; border-radius:9px; background:var(--brand); color:#fff;
  font-weight:700; font-size:13px; padding:9px 14px;
}
.gate{ position:fixed; inset:0; z-index:200; background:rgba(15,25,50,.55); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:28px; }
.gate-card{ background:#fff; border-radius:18px; padding:28px 24px; max-width:340px; width:100%; text-align:center; box-shadow:0 22px 60px rgba(15,25,50,.4); }
.gate-ic{ font-size:38px; margin-bottom:10px; }
.gate-card h2{ margin:0 0 8px; font-size:19px; color:var(--ink); }
.gate-card p{ margin:0 0 18px; font-size:14px; color:var(--ink-soft); line-height:1.6; }
.gate-card button{ width:100%; height:48px; border:0; border-radius:12px; background:var(--brand); color:#fff; font-size:15.5px; font-weight:700; }

/* 모바일·태블릿: 편집바 2단 전면 노출(가로 스크롤 없이 모든 기능 한 화면) + 큰 터치 타깃 */
@media (max-width:760px){
  .editbar{ flex-direction:column; align-items:stretch; gap:7px; padding:8px 8px 10px; }
  .ebrow{ display:flex; align-items:center; gap:4px; min-width:0; }
  .eb-r1 .eb{
    flex:1 1 0; min-width:0; height:56px; padding:0 2px;
    flex-direction:column; justify-content:center; gap:3px;
    font-size:10px; font-weight:600; letter-spacing:-.02em; border-radius:11px;
  }
  .eb-r1 .eb svg{ width:22px; height:22px; }
  .eb-r1 .eb span{ white-space:nowrap; }
  .eb-r1 .eb.done{ font-size:13px; font-weight:700; }
  .eb-flex{ display:none; }
  .eb-r2{ gap:8px; }
  .cwrow{ gap:8px; }
  .cw{ width:36px; height:36px; }
  .eb-r2 .eb-sep{ height:26px; margin:0 2px; }
  .editbar .eb.sm{ flex:1 1 0; height:42px; justify-content:center; padding:0; border:1px solid var(--line); }
  .wd-s{ width:22px; } .wd-m{ width:22px; } .wd-l{ width:22px; }
}