/* =================================================================
   초코 PDF 툴 — 벤처랩 색(#F6F7FB 배경·흰 카드·파스텔 칩·분홍 단추)
   글씨 기준: Pretendard · 본문 17 · 버튼/입력 16 · 칸 이름 15 · 작은 글씨 13
   ================================================================= */
:root {
  --bg: #F6F7FB; --paper: #FFFFFF; --line: #E3E0EC;
  --ink: #2B2730; --ink-2: #4F4A5A; --ink-3: #7A7588;
  --pink: #FFD9E6; --pink-ink: #B33C68;
  --mint: #D6F3E8; --mint-ink: #1F7A5F;
  --lav: #E7E1FF; --lav-ink: #5B47B8;
  --sky: #DDEBFF; --sky-ink: #2F61B5;
  --yellow: #FFF1C7; --yellow-ink: #8A6400;
  --btn: #FFBDD3; --btn-ink: #4A1830; --btn-hover: #FFA9C6;
  --stage: #E9EAF1;
  --radius: 20px;
  --shadow: 0 1px 2px rgba(43,39,48,.05), 0 8px 24px -14px rgba(43,39,48,.18);
  --f-body: 'Pretendard Variable', Pretendard, 'Noto Sans KR', system-ui, sans-serif;
  --gut: 16px;
}
:root[data-theme="dark"] {
  --bg: #1B1A21; --paper: #26252E; --line: #3A3846;
  --ink: #ECEAF2; --ink-2: #C9C5D6; --ink-3: #9893A8;
  --pink: #5A2B40; --pink-ink: #FFB3CF;
  --mint: #1F4A3E; --mint-ink: #9FE3C8;
  --lav: #3A3366; --lav-ink: #CFC4FF;
  --sky: #213B63; --sky-ink: #A9CBFF;
  --yellow: #5A4A12; --yellow-ink: #FFE08A;
  --btn: #C8587F; --btn-ink: #fff; --btn-hover: #D96C92;
  --stage: #121117;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -14px rgba(0,0,0,.6);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; font-family: var(--f-body); font-size: 17px; line-height: 1.6; color: var(--ink); background: var(--bg);
  display: flex; flex-direction: column; overflow: hidden; word-break: keep-all; overflow-wrap: anywhere; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--f-body); letter-spacing: -.025em; margin: 0; }
code { background: var(--lav); color: var(--lav-ink); padding: 1px 6px; border-radius: 6px; font-size: 14px; }
.muted { color: var(--ink-3); } .sm { font-size: 13px; }
.spacer { flex: 1; }
.hint { font-size: 15px; color: var(--ink-3); line-height: 1.6; margin: 6px 0 12px; }

/* ---------- 머리·탭·막대 ---------- */
.top { display: flex; align-items: center; gap: 10px; padding: 10px var(--gut); background: var(--paper); border-bottom: 1px solid var(--line); flex: none; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.brand b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.fname { font-size: 15px; color: var(--ink-3); max-width: 28vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: 8px; }

.btn { font-size: 16px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 14px; padding: 8px 14px; cursor: pointer; white-space: nowrap; line-height: 1.3; }
.btn:hover:not(:disabled) { background: var(--lav); border-color: transparent; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.pink { background: var(--btn); border-color: transparent; color: var(--btn-ink); font-weight: 700; }
.btn.pink:hover:not(:disabled) { background: var(--btn-hover); }
.btn.icon { padding: 8px 11px; min-width: 40px; }
.btn.on, .btn.tool.on { background: var(--lav); color: var(--lav-ink); border-color: var(--lav-ink); font-weight: 700; }
.btn.big-btn { font-size: 18px; padding: 14px 30px; }

.tabs { display: flex; gap: 6px; padding: 8px var(--gut); overflow-x: auto; background: var(--bg); flex: none; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { font-size: 16px; border: 0; background: var(--paper); color: var(--ink-2); padding: 9px 16px; border-radius: 999px; cursor: pointer; white-space: nowrap; border: 1px solid var(--line); }
.tabs button.on { background: var(--lav); color: var(--lav-ink); font-weight: 800; border-color: var(--lav-ink); }

.bar { display: flex; gap: 8px 14px; align-items: center; flex-wrap: wrap; padding: 6px var(--gut) 10px; flex: none; }
.bar .grp { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bar select, .num, .fgrid input, .fgrid select, .srch input { font-size: 16px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); }
.num { width: 76px; text-align: center; }
.annbar .tools { gap: 4px; }
.btn.tool { display: inline-flex; flex-direction: column; align-items: center; gap: 0; padding: 5px 9px; min-width: 56px; font-size: 18px; line-height: 1.25; }
.btn.tool span { font-size: 12.5px; }
.swatches { display: flex; gap: 5px; }
.sw { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; }
.sw.on { box-shadow: 0 0 0 2.5px var(--lav-ink); }
#annW { width: 90px; accent-color: #5B47B8; }

/* ---------- 본 화면 ---------- */
.work { flex: 1; min-height: 0; display: flex; gap: 0; padding: 0 var(--gut) var(--gut); }
.side { width: 270px; flex: none; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; margin-right: 12px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.side-tabs { display: flex; gap: 4px; padding: 8px; border-bottom: 1px solid var(--line); }
.side-tabs button { flex: 1; border: 0; padding: 7px 0; border-radius: 10px; background: transparent; font-size: 15px; color: var(--ink-2); cursor: pointer; }
.side-tabs button.on { background: var(--lav); color: var(--lav-ink); font-weight: 700; }
.side-body { flex: 1; min-height: 0; overflow: auto; padding: 10px; }
.side.closed { display: none; }

.th { display: block; width: 100%; border: 2px solid transparent; border-radius: 10px; background: transparent; padding: 6px; cursor: pointer; text-align: center; margin-bottom: 4px; }
.th:hover { background: var(--bg); }
.th.on { border-color: var(--lav-ink); background: var(--lav); }
.th .tc { display: flex; justify-content: center; min-height: 40px; }
.th canvas { max-width: 100%; box-shadow: 0 1px 4px rgba(0,0,0,.25); background: #fff; }
.th small { display: block; font-size: 13px; color: var(--ink-3); margin-top: 3px; }

.ol { list-style: none; padding-left: 14px; margin: 0; }
.side-body > .ol { padding-left: 0; }
.ol a { display: block; padding: 5px 8px; border-radius: 8px; text-decoration: none; color: var(--ink); font-size: 15px; line-height: 1.45; cursor: pointer; }
.ol a:hover { background: var(--lav); }

.srch { display: flex; gap: 6px; margin-bottom: 8px; }
.srch input { flex: 1; min-width: 0; }
.srch .btn { padding: 8px 12px; }
.sr { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.sr:hover, .sr.on { background: var(--lav); }
.sr b { color: var(--lav-ink); margin-right: 6px; }
.sr mark { background: #FFE066; color: #000; border-radius: 3px; padding: 0 1px; }

.stage { flex: 1; min-width: 0; position: relative; background: var(--stage); border-radius: 18px; border: 1px solid var(--line); overflow: hidden; }
.viewer { position: absolute; inset: 0; overflow: auto; padding: 14px; outline: none; -webkit-overflow-scrolling: touch; }
.viewer.single { display: flex; align-items: flex-start; }
.vrow { display: flex; justify-content: center; align-items: flex-start; gap: 12px; margin: 0 auto 12px; width: max-content; min-width: 100%; }
.viewer.single .vrow { margin: 0 auto; }
.page { position: relative; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.28); flex: none; overflow: hidden; }
.page canvas.pc { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.dark-pages .page canvas.pc { filter: invert(1) hue-rotate(180deg); }
.dark-pages .page { background: #111; }
.page .textLayer { position: absolute; inset: 0; z-index: 2; }
.page .textLayer mark.hit { background: rgba(255, 224, 0, .55); color: transparent; border-radius: 2px; }
.page .textLayer mark.hit.cur { background: rgba(255, 140, 0, .6); }
.page .pnum { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: #bbb; font-size: 20px; }
.page .ann { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.page .ann svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.page .ann svg * { pointer-events: none; }
body.tool-active .page .ann { pointer-events: auto; touch-action: none; }
body.tool-active.tool-hl .page .ann, body.tool-active.tool-ul .page .ann { pointer-events: none; }
body.tool-hl .page .textLayer, body.tool-ul .page .textLayer { cursor: text; }
body.tool-active .page .textLayer { pointer-events: none; }
body.tool-hl .page .textLayer, body.tool-ul .page .textLayer { pointer-events: auto; }
body.tool-select .page .ann svg [data-id], body.tool-erase .page .ann svg [data-id] { pointer-events: auto; cursor: pointer; }
body.tool-select .page .ann svg [data-id] * { pointer-events: auto; }
body.tool-erase .page .ann svg [data-id] * { pointer-events: auto; }
body.tool-erase .page .ann { cursor: cell; }
body.tool-ink .page .ann, body.tool-rect .page .ann, body.tool-ell .page .ann, body.tool-arrow .page .ann, body.tool-hlbox .page .ann { cursor: crosshair; }
body.tool-text .page .ann { cursor: text; }
body.tool-img .page .ann { cursor: copy; }
.ann .ed { position: absolute; z-index: 9; min-width: 80px; min-height: 1.6em; padding: 0 2px; border: 1.5px dashed var(--lav-ink); background: rgba(255,255,255,.92); color: #111; outline: none; resize: both; line-height: 1.3; font-family: var(--f-body); white-space: pre; overflow: hidden; border-radius: 3px; }
.ann .selbox { fill: none; stroke: #5B47B8; stroke-width: 1.2; stroke-dasharray: 5 3; vector-effect: non-scaling-stroke; }
.ann .handle { fill: #fff; stroke: #5B47B8; stroke-width: 1.5; cursor: nwse-resize; vector-effect: non-scaling-stroke; }
.page .formlayer { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.page .formlayer > * { pointer-events: auto; position: absolute; }
.formlayer input[type=text], .formlayer textarea, .formlayer select { border: 1.5px solid #6a8cff; background: rgba(214, 228, 255, .6); padding: 0 3px; margin: 0; color: #000; font-family: var(--f-body); border-radius: 2px; }
.formlayer input[type=checkbox], .formlayer input[type=radio] { accent-color: #5B47B8; margin: 0; }
body.mode-forms .page .ann { pointer-events: none !important; }
.page.hidden { display: none; }

.empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; }
.empty-card { background: var(--paper); border: 2px dashed var(--line); border-radius: 28px; padding: 36px 30px; text-align: center; max-width: 520px; box-shadow: var(--shadow); }
.empty-card .big { font-size: 56px; line-height: 1; margin-bottom: 8px; }
.empty-card h1 { font-size: 26px; font-weight: 800; margin-bottom: 8px; }
.empty-card p { margin: 8px 0 18px; color: var(--ink-2); }
body[data-has-doc="1"] .empty { display: none; }
body[data-has-doc="0"] .viewer { display: none; }
.dropveil { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(231,225,255,.88); color: var(--lav-ink); font-size: 24px; font-weight: 800; z-index: 20; border: 3px dashed var(--lav-ink); border-radius: 18px; }
body.dragging .dropveil { display: flex; }

/* ---------- 탭별 보임 ---------- */
.rpanel { display: none; width: 330px; flex: none; margin-left: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 16px; overflow: auto; }
.rpanel h3 { font-size: 18px; font-weight: 800; margin: 14px 0 6px; }
.rpanel h3:first-child { margin-top: 0; }
.panelwide { display: none; flex: 1; min-height: 0; overflow: auto; padding: 4px var(--gut) var(--gut); }
.panelwide .cardx { max-width: 1000px; margin: 0 auto 16px; }
body[data-tab="decor"] #rpDecor, body[data-tab="forms"] #rpForms { display: block; }
body[data-tab="pages"] .work, body[data-tab="conv"] .work, body[data-tab="print"] .work { display: none; }
body[data-tab="pages"] #pnPages, body[data-tab="conv"] #pnConv, body[data-tab="print"] #pnPrint { display: block; }
body[data-tab="pages"] .viewbar, body[data-tab="conv"] .viewbar, body[data-tab="print"] .viewbar { display: none; }
body:not([data-tab="annot"]) .annbar { display: none; }
body[data-has-doc="0"] .viewbar { opacity: .5; pointer-events: none; }

.cardx { background: var(--paper); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); padding: 22px 24px; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.card-head h2 { font-size: 22px; font-weight: 800; }
.acts { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.acts.wrap { flex-wrap: wrap; }
.acts .sep { width: 1px; height: 26px; background: var(--line); margin: 0 4px; }
.status { font-size: 15px; color: var(--ink-2); }
.status.err { color: var(--pink-ink); font-weight: 700; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-top: 10px; }
.fgrid.one { grid-template-columns: 1fr; }
.fgrid label { display: flex; flex-direction: column; gap: 5px; font-size: 15px; font-weight: 700; color: var(--ink-2); }
.fgrid label small { font-weight: 400; color: var(--ink-3); }
.fgrid input[type=color] { padding: 2px; height: 40px; width: 70px; }
.chk { display: flex; align-items: center; gap: 8px; font-size: 16px; cursor: pointer; flex-direction: row !important; }
.chk input { width: 19px; height: 19px; accent-color: #5B47B8; }

/* 쪽 관리 격자 */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin: 16px 0; min-height: 120px; }
.pcard { position: relative; border: 2px solid var(--line); border-radius: 14px; padding: 8px 6px 6px; background: var(--bg); cursor: grab; text-align: center; user-select: none; }
.pcard.sel { border-color: var(--lav-ink); background: var(--lav); }
.pcard.dragging { opacity: .4; }
.pcard.over { box-shadow: -5px 0 0 0 var(--btn-hover); }
.pcard .pt { height: 150px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pcard canvas, .pcard .blank { box-shadow: 0 1px 4px rgba(0,0,0,.3); background: #fff; max-width: 100%; max-height: 150px; }
.pcard .blank { display: inline-block; }
.pcard .cap { font-size: 13px; color: var(--ink-3); margin-top: 4px; line-height: 1.3; }
.pcard .cap b { color: var(--ink); font-size: 14px; }
.pcard .tag { position: absolute; top: 6px; left: 6px; background: var(--yellow); color: var(--yellow-ink); font-size: 12px; padding: 1px 7px; border-radius: 999px; }

.drop { padding: 24px 20px; border: 2px dashed #CFC9DD; border-radius: 18px; background: var(--bg); cursor: pointer; color: var(--ink-2); }
.drop:hover, .drop.over { border-color: var(--lav-ink); background: var(--lav); }
.drop small { color: var(--ink-3); }
.imglist { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin: 14px 0; }
.imgit { border: 1px solid var(--line); border-radius: 12px; padding: 6px; text-align: center; font-size: 13px; background: var(--bg); }
.imgit img { width: 100%; height: 90px; object-fit: contain; background: #fff; border-radius: 6px; }
.imgit .row { display: flex; justify-content: center; gap: 4px; margin-top: 4px; }
.imgit .row button { border: 0; background: var(--paper); border-radius: 8px; padding: 2px 8px; cursor: pointer; }

/* 서명 */
.siglist { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 12px; }
.sig { position: relative; border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 6px; cursor: pointer; }
.sig:hover { border-color: var(--lav-ink); }
.sig img { width: 100%; height: 64px; object-fit: contain; }
.sig .x { position: absolute; right: 2px; top: 2px; border: 0; background: rgba(0,0,0,.55); color: #fff; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; font-size: 12px; line-height: 1; }
.flist .fi { font-size: 14px; padding: 6px 8px; border-radius: 8px; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; }
.flist .fi:hover { background: var(--lav); }
.flist .fi i { color: var(--ink-3); font-style: normal; }

/* 창 */
.modal { position: fixed; inset: 0; z-index: 60; background: rgba(30,28,40,.5); display: flex; align-items: center; justify-content: center; padding: 16px; }
.mbox { background: var(--paper); border-radius: 22px; padding: 22px; width: min(700px, 100%); max-height: 92vh; overflow: auto; box-shadow: var(--shadow); }
.mbox.small { width: min(420px, 100%); }
.mbox.wide { width: min(900px, 100%); }
.mbox h3 { font-size: 20px; margin-bottom: 10px; }
#sgCanvas { width: 100%; height: auto; border: 2px dashed var(--line); border-radius: 14px; background: #fff; touch-action: none; display: block; }
.stprev { display: flex; justify-content: center; padding: 10px; background: #fff; border-radius: 14px; margin-top: 10px; }
#stCanvas { width: 160px; height: 160px; }
.prevbox { overflow: auto; max-height: 70vh; background: var(--stage); border-radius: 14px; padding: 12px; display: flex; justify-content: center; align-items: flex-start; }
#prevCanvas { max-width: 100%; height: auto; flex: none; box-shadow: 0 2px 10px rgba(0,0,0,.3); background: #fff; }

.busy { position: fixed; inset: 0; z-index: 80; background: rgba(30,28,40,.45); display: flex; align-items: center; justify-content: center; }
.busybox { background: var(--paper); border-radius: 20px; padding: 24px 30px; min-width: 260px; text-align: center; box-shadow: var(--shadow); }
.spin { width: 30px; height: 30px; margin: 0 auto 10px; border: 4px solid var(--lav); border-top-color: var(--lav-ink); border-radius: 50%; animation: sp .8s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }
.bar-wrap { height: 8px; background: var(--lav); border-radius: 99px; margin-top: 12px; overflow: hidden; }
.bar-in { height: 100%; width: 0; background: var(--lav-ink); transition: width .15s; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 30px); background: #2B2730; color: #fff; padding: 11px 20px; border-radius: 14px; font-size: 16px; opacity: 0; pointer-events: none; transition: .25s; z-index: 90; max-width: 90vw; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.err { background: #B33C68; }

/* ---------- 휴대폰 ---------- */
@media (max-width: 860px) {
  :root { --gut: 16px; }
  .brand b { font-size: 19px; }
  .fname { display: none; }
  .top { flex-wrap: wrap; }
  .top .btn { padding: 7px 10px; font-size: 15px; }
  .work { flex-direction: column; overflow: auto; }
  .side { position: fixed; z-index: 40; left: var(--gut); right: var(--gut); top: 120px; bottom: var(--gut); width: auto; margin: 0; box-shadow: var(--shadow); }
  .stage { flex: none; height: 72vh; min-height: 360px; }
  .rpanel { width: auto; margin: 12px 0 0; }
  body[data-tab="decor"] .work, body[data-tab="forms"] .work { overflow: auto; }
  .cardx { padding: 18px 16px; border-radius: 20px; }
  .vrow { gap: 8px; }
  .viewer { padding: 8px; }
  .bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 8px; }
  .bar::-webkit-scrollbar { display: none; }
  .bar .grp { flex-wrap: nowrap; flex: none; }
  .stage { height: calc(100vh - 230px); min-height: 380px; }
}
@media print { body { display: none; } }

/* =================================================================
   쉬운 화면(2026-11-14 원장님 원칙): 첫 화면 큰 카드 → 한 화면에 한 가지 일, 고급 설정은 '더 보기'
   ================================================================= */
.tabs { display: none; }
#home { display: none; flex: 1; min-height: 0; overflow: auto; padding: 10px var(--gut) 30px; }
body[data-tab="home"] #home { display: block; }
body[data-tab="home"] .work, body[data-tab="home"] .viewbar, body[data-tab="home"] .annbar,
body[data-tab="home"] .panelwide, body[data-tab="home"] #btnSave, body[data-tab="home"] #btnPrev, body[data-tab="home"] .fname { display: none !important; }
.home-in { max-width: 980px; margin: 0 auto; }
.home-in h1 { font-size: clamp(26px, 3.2vw, 34px); font-weight: 800; margin: 14px 0 4px; }
.home-sub { color: var(--ink-3); font-size: 15px; margin: 0 0 22px; }
.hcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px; }
.hcard { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; border: 0; border-radius: 24px; padding: 22px 20px; cursor: pointer; min-height: 168px;
  background: var(--c, var(--lav)); color: var(--ink); box-shadow: var(--shadow); transition: transform .12s; }
.hcard:hover { transform: translateY(-3px); }
.hcard .hi { font-size: 40px; line-height: 1; margin-bottom: 4px; }
.hcard b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.hcard small { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.hcard.soon { background: var(--paper); border: 2px dashed var(--line); box-shadow: none; opacity: .75; cursor: default; }
.hcard.soon:hover { transform: none; }
.c-sky { --c: var(--sky); } .c-mint { --c: var(--mint); } .c-lav { --c: var(--lav); } .c-yellow { --c: var(--yellow); } .c-pink { --c: var(--pink); }

details.more { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 10px; }
details.cardx.more { border: 1px solid var(--line); padding: 14px 24px; }
details.more > summary { cursor: pointer; font-size: 16px; font-weight: 700; color: var(--lav-ink); padding: 4px 0; list-style: none; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: '▸ '; }
details.more[open] > summary::before { content: '▾ '; }
.rpanel details.more > summary { font-size: 15.5px; }

body[data-flow="organize"] .f-merge, body[data-flow="merge"] .f-organize { display: none !important; }
body[data-tab="home"] #btnHome { display: none !important; }
@media (max-width: 560px) {
  .hcards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .hcard { min-height: 150px; padding: 16px 14px; }
  .hcard b { font-size: 19px; } .hcard small { font-size: 14px; } .hcard .hi { font-size: 34px; }
}

/* =================================================================
   직관 다듬기(2026-11-15): 보이는 것을 바로 만진다 · 모드 없음 · 결과가 먼저 보임
   ================================================================= */
.signbar, .decbar { display: none; }
body[data-tab="annot"][data-flow="sign"] .signbar { display: flex; }
body[data-tab="annot"][data-flow="sign"] .annbar { display: none; }
body[data-tab="decor"] .decbar { display: flex; }
body[data-tab="home"] .signbar, body[data-tab="home"] .decbar { display: none !important; }
.signbar .siglist { display: flex; gap: 8px; margin: 0; overflow-x: auto; flex: 1; min-width: 0; padding: 2px; }
.signbar .sig { flex: none; width: 96px; padding: 3px; }
.signbar .sig img { height: 38px; }

/* 필기: 보통 상태에서 쪽의 만든 것은 바로 눌러 고른다 */
body[data-tab="annot"] .page .ann svg [data-id], body[data-tab="annot"] .page .ann svg [data-id] *, body[data-tab="annot"] .page .ann svg [data-handle] { pointer-events: auto; cursor: move; }
body[data-tab="annot"] .page .ann svg [data-handle] { cursor: nwse-resize; }
body.tool-active .page .textLayer { pointer-events: none; }
.viewer.inking, .viewer.inking * { user-select: none !important; cursor: crosshair !important; }
.page .textLayer { -webkit-touch-callout: default; }
.page .ann .selbar { position: absolute; z-index: 8; display: flex; gap: 3px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 3px 5px; box-shadow: var(--shadow); pointer-events: auto; font-size: 14px; }
.page .ann .selbar button { border: 0; background: transparent; padding: 3px 6px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--ink); }
.page .ann .selbar button:hover { background: var(--lav); }
.page .ann .selbar .dot { width: 18px; height: 18px; border-radius: 50%; padding: 0; border: 1.5px solid var(--paper); box-shadow: 0 0 0 1px var(--line); }
.page .ann .selbar .dot:hover { background-clip: padding-box; transform: scale(1.15); }
.signpad { position: absolute; z-index: 9; pointer-events: auto; background: rgba(255,255,255,.96); border: 2px dashed var(--lav-ink); border-radius: 12px; }
.signpad canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
.signpad::before { content: '여기에 서명하세요'; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: #cfc9dd; font-size: 15px; pointer-events: none; z-index: -0; }
.signbtns { width: max-content; position: absolute; left: 0; bottom: calc(100% + 6px); display: flex; gap: 6px; }
.signbtns button { white-space: nowrap; border: 0; background: var(--paper); color: var(--ink); padding: 7px 12px; border-radius: 10px; cursor: pointer; font-size: 14px; box-shadow: var(--shadow); }
.signbtns .ok { background: var(--btn); color: var(--btn-ink); font-weight: 700; }

.ctx { position: fixed; z-index: 75; min-width: 190px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 6px; }
.ctx button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 9px 12px; border-radius: 9px; font-size: 15.5px; cursor: pointer; color: var(--ink); }
.ctx button:hover { background: var(--lav); }
.bubble { position: fixed; z-index: 72; display: flex; gap: 2px; background: #2B2730; border-radius: 12px; padding: 4px; box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.bubble button { border: 0; background: transparent; color: #fff; padding: 8px 12px; font-size: 15px; border-radius: 9px; cursor: pointer; white-space: nowrap; }
.bubble button:hover { background: rgba(255,255,255,.18); }

/* 꾸미기: 쪽 위에 바로 올라온 글자·그림 */
.page .dlayer { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.ditem { position: absolute; transform-origin: center; white-space: nowrap; line-height: 1.25; font-family: var(--f-body); pointer-events: none; }
body[data-tab="decor"] .ditem { pointer-events: auto; cursor: move; touch-action: none; }
body[data-tab="decor"] .ditem:hover { outline: 1.5px dashed var(--lav-ink); outline-offset: 3px; }
.ditem .dt { display: block; outline: none; }
.ditem .dt[contenteditable="true"] { cursor: text; background: rgba(255,255,255,.9); color: #111; padding: 0 4px; border-radius: 4px; }
.ditem img { display: block; pointer-events: none; }
.ditem.sel { outline: 1.5px solid var(--lav-ink); outline-offset: 3px; }
.ditem i { display: none; position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #5B47B8; }
.ditem.sel i { display: block; }
.ditem i.siz { right: -10px; bottom: -10px; cursor: nwse-resize; }
.ditem i.rot { left: 50%; top: -26px; margin-left: -7px; cursor: grab; }
.ditem.sel::after { content: ''; position: absolute; left: 50%; top: -14px; width: 0; height: 12px; border-left: 1.5px solid #5B47B8; }
.dbar { position: absolute; z-index: 8; transform: translateX(-50%); display: flex; gap: 4px; align-items: center; pointer-events: auto; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 4px 6px; box-shadow: var(--shadow); white-space: nowrap; }
.dbar select { font-size: 13.5px; padding: 3px 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); }
.dbar button { border: 0; background: transparent; padding: 3px 7px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--ink); }
.dbar button:hover { background: var(--lav); }
.dbar input[type=color] { width: 26px; height: 24px; padding: 0; border: 0; background: none; }
.dbar input[type=range] { width: 70px; accent-color: #5B47B8; }

/* 쪽 정리: 쪽 그림을 바로 만진다 */
.selbar:not(.ann .selbar) { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--lav); border-radius: 14px; padding: 8px 12px; margin: 10px 0; }
.selbar b { color: var(--lav-ink); margin-right: 4px; }
.pgrid { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; margin: 16px 0; }
.pgrid.filedrop { outline: 3px dashed var(--lav-ink); outline-offset: 6px; border-radius: 14px; background: var(--lav); }
.pcard { width: 142px; position: relative; }
.pcard .hov { position: absolute; top: 4px; right: 4px; display: none; gap: 2px; background: rgba(255,255,255,.96); border-radius: 10px; padding: 2px; box-shadow: var(--shadow); z-index: 3; }
.pcard:hover .hov, .pcard.sel .hov { display: flex; }
.pcard .hov button { border: 0; background: transparent; padding: 3px 6px; font-size: 15px; border-radius: 8px; cursor: pointer; }
.pcard .hov button:hover { background: var(--lav); }
.gapx { width: 24px; flex: none; border: 0; background: transparent; cursor: pointer; color: transparent; font-size: 16px; border-radius: 8px; align-self: stretch; position: relative; }
.gapx:hover { color: var(--lav-ink); background: var(--lav); }
.gapx.cut { color: var(--pink-ink); background: transparent; }
.gapx.cut::before { content: ''; position: absolute; left: 11px; top: 4px; bottom: 4px; border-left: 2px dashed var(--pink-ink); }
.gapx.cut { z-index: 1; }
.addcard { width: 142px; min-height: 190px; margin-left: 10px; border: 2px dashed #CFC9DD; border-radius: 14px; background: var(--bg); color: var(--ink-3); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 15px; padding: 10px; }
.addcard:hover { border-color: var(--lav-ink); background: var(--lav); color: var(--lav-ink); }
.addcard .plus { font-size: 38px; line-height: 1; }
.pgrid > .addcard:only-child { width: 100%; min-height: 220px; margin: 0; font-size: 18px; }

/* 여백 자르기 */
.cropstage { display: flex; justify-content: center; background: var(--stage); border-radius: 14px; padding: 14px; overflow: auto; max-height: 68vh; }
.cropbox { position: relative; flex: none; user-select: none; touch-action: none; }
.cropbox canvas { display: block; background: #fff; }
#cropRect { position: absolute; border: 2px solid #5B47B8; box-shadow: 0 0 0 9999px rgba(30,28,40,.5); cursor: move; }
#cropRect i { position: absolute; width: 14px; height: 14px; background: #fff; border: 2px solid #5B47B8; border-radius: 50%; margin: -7px 0 0 -7px; }
#cropRect i[data-h="nw"] { left: 0; top: 0; cursor: nwse-resize; } #cropRect i[data-h="n"] { left: 50%; top: 0; cursor: ns-resize; } #cropRect i[data-h="ne"] { left: 100%; top: 0; cursor: nesw-resize; }
#cropRect i[data-h="e"] { left: 100%; top: 50%; cursor: ew-resize; } #cropRect i[data-h="se"] { left: 100%; top: 100%; cursor: nwse-resize; } #cropRect i[data-h="s"] { left: 50%; top: 100%; cursor: ns-resize; }
#cropRect i[data-h="sw"] { left: 0; top: 100%; cursor: nesw-resize; } #cropRect i[data-h="w"] { left: 0; top: 50%; cursor: ew-resize; }

/* 인쇄: 모양을 그림으로 고르고 결과를 바로 본다 */
.prwrap { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.prleft { flex: 1 1 360px; min-width: 0; }
.prright { flex: 1 1 300px; display: flex; justify-content: center; background: var(--stage); border-radius: 16px; padding: 14px; min-height: 260px; }
#prPrevCanvas { max-width: 100%; height: auto; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.25); align-self: flex-start; }
.layouts { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.lay { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 10px; border: 2px solid var(--line); border-radius: 14px; background: var(--paper); cursor: pointer; font-size: 14px; color: var(--ink); min-width: 74px; }
.lay:hover { border-color: var(--lav-ink); }
.lay.on { border-color: var(--lav-ink); background: var(--lav); font-weight: 700; }
@media (max-width: 860px) { .pcard { width: 46%; } .gapx { width: 14px; } .addcard { width: 46%; margin-left: 0; } }

/* 링크 · 최근 파일 · 발표 */
.page .linklayer { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.page .lk { position: absolute; pointer-events: auto; cursor: pointer; border-radius: 3px; }
.page .lk:hover { background: rgba(91, 71, 184, .12); outline: 1.5px solid rgba(91, 71, 184, .5); }
.att { display: block; padding: 5px 8px; border-radius: 8px; color: var(--lav-ink); font-size: 15px; cursor: pointer; text-decoration: none; }
.att:hover { background: var(--lav); }
.recent { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 18px; align-items: center; }
.recent b { font-size: 15px; color: var(--ink-3); font-weight: 600; margin-right: 4px; }
.recent button { border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 7px 14px; font-size: 15px; cursor: pointer; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.recent button:hover { background: var(--lav); border-color: var(--lav-ink); }
.stage:fullscreen { border-radius: 0; border: 0; }
.stage:fullscreen .viewer { padding: 0; background: #000; }

/* ---------- 2026-11-15 앱·드라이브 ---------- */
.homeopen { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 18px; align-items: center; }
.homeopen .btn { white-space: nowrap; }
#iosTip { margin: -8px 0 14px; }
.top .btn .lb { white-space: nowrap; }
.btn:not(.pink):not(.big-btn) .lb { }
.askp { font-size: 16px; line-height: 1.55; color: var(--ink-2); margin: 4px 0 8px; }
.askacts { justify-content: flex-end; }
.dlist { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 12px; max-height: 50vh; overflow: auto; }
.dpick { justify-content: flex-start; text-align: left; }
.dpick small { color: var(--ink-3); margin-left: 8px; }
/* 쪽 정리: 놓을 자리 분홍 선 */
.pgrid { position: relative; }
.pins { position: absolute; width: 5px; border-radius: 3px; background: var(--pink-ink); box-shadow: 0 0 0 2px rgba(255,255,255,.9); pointer-events: none; z-index: 5; }
.pins[hidden] { display: none; }
.rowbreak, .top .lbs { display: none; }
@media (max-width: 560px) {
  /* 휴대폰 머리줄: 윗줄 = 로고·처음으로·어두운 화면 / 아랫줄 = 열기·드라이브·이전 판·저장·받기 (두 줄로 딱 맞게) */
  .top { gap: 8px; }
  .top .lb { display: none; }
  .top .lbs { display: inline; }
  .top .brand { order: 1; } .top #btnHome { order: 2; } .top #btnHome .lb { display: inline; } .top .spacer { order: 3; flex: 1; }
  .top #btnTheme { order: 4; }
  .top .rowbreak { display: block; order: 5; flex-basis: 100%; height: 0; }
  .top #btnOpen { order: 6; } .top #btnDriveOpen { order: 7; } .top #btnPrev { order: 8; } .top #btnDriveSave { order: 9; } .top #btnSave { order: 10; }
  .top .btn.pink { order: initial; }
  .top #btnSave.pink { order: 10; } .top #btnDriveSave.pink { order: 9; }
  .top #btnDriveSave { padding: 7px 12px; } .top #btnSave { padding: 7px 12px; }
}
.pcard .hov { right: 3px; gap: 0; }
.pcard .hov button { padding: 3px 3px; font-size: 14px; }