/*! © 2026 해밀 (haemil.ai). All rights reserved. 무단 복제·배포 금지. */
/* 폴더 비교 (compare.js): a page in a pane, on style.css's colours, fonts and menus. */
:root {
  /* The statuses: 같음 dim, 다름 orange, 왼쪽에만 blue, 오른쪽에만 green, 비교 못 함 grey; the file view's lines are
     tinted with the same hues, its changed words more. */
  --cm-diff: #b85400;
  --cm-left: #0062b8;
  --cm-right: #0f7b0f;
  --cm-err: #8a8a8a;
  --cm-diff-bg: rgba(255, 140, 0, .12);
  --cm-diff-hi: rgba(255, 140, 0, .38);
  --cm-left-bg: rgba(0, 98, 184, .10);
  --cm-right-bg: rgba(15, 123, 15, .10);
  --cm-pad: color-mix(in srgb, var(--dim) 13%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root {
    --cm-diff: #ffa14a;
    --cm-left: #60cdff;
    --cm-right: #6ccb5f;
    --cm-err: #9a9a9a;
    --cm-diff-bg: rgba(255, 150, 40, .14);
    --cm-diff-hi: rgba(255, 150, 40, .42);
    --cm-left-bg: rgba(96, 205, 255, .12);
    --cm-right-bg: rgba(108, 203, 95, .12);
  }
}

/* Its parts lay themselves out with display: the hidden attribute must still hide them. */
.cmpage [hidden] { display: none !important; }
.cmpage { flex: 1; min-width: 0; display: flex; flex-direction: column; --cm-cols: minmax(150px, 1fr) 76px 156px minmax(90px, 150px) 76px 156px; }
/* The header: the two folders, then how to compare and the copy buttons, which wrap in a narrow pane. */
.cmhead { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 8px 14px; }
.cmsides { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cmside { flex: 1 1 0; min-width: 0; height: 28px; box-sizing: border-box; display: flex; align-items: center; gap: 6px; padding: 0 2px 0 8px; border: 1px solid var(--field-line); border-radius: 4px; background: var(--field); }
.cmlab { flex: none; font-size: 11px; font-weight: 600; }
.cmside.left .cmlab { color: var(--cm-left); }
.cmside.right .cmlab { color: var(--cm-right); }
.cmpath { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.cmpick, .cmswap { flex: none; width: 26px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--text); }
.cmpick:hover, .cmswap:hover { background: var(--hover); }
.cmopts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12px; }
.cmopts select, .cmexcl, .cmopts button, .cmfhead button { height: 26px; box-sizing: border-box; border-radius: 4px; font: inherit; font-size: 12px; color: var(--text); background: var(--field); border: 1px solid var(--field-line); }
.cmopts select { padding: 0 6px; }
.cmopts button, .cmfhead button { padding: 0 10px; }
.cmopts button:hover:not(:disabled), .cmfhead button:hover:not(:disabled) { background: var(--hover); }
.cmopts button:disabled, .cmfhead button:disabled { opacity: .45; }
.cmcheck, .cmex { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.cmcheck input { margin: 0; }
.cmexcl { width: 230px; min-width: 80px; padding: 0 6px; flex: 0 1 auto; }
.cmex { flex: 0 1 auto; min-width: 0; }
.cmopts .cmrun { min-width: 56px; border-color: var(--accent); background: var(--accent); color: var(--pane); }
.cmopts .cmrun:hover:not(:disabled) { background: var(--accent); filter: brightness(1.08); }
.cmopts .cmrun.stop { background: var(--field); color: var(--text); border-color: var(--field-line); }

/* The tree: 이름 | 왼쪽 크기·날짜 | 상태 | 오른쪽 크기·날짜; the dates go first when the pane narrows, then the sizes. */
.cmtree { flex: 1; min-height: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.cmcols, .cmrow { display: grid; grid-template-columns: var(--cm-cols); align-items: center; }
.cmcols { flex: none; height: 30px; padding: 0 13px 0 17px; color: var(--dim); font-size: 12px; border-bottom: 1px solid var(--line); }
.cmcols > span, .cmrow > span { padding: 0 8px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cmcols .r, .cmrow .r { text-align: right; }
.cmrows { flex: 1; min-height: 0; overflow: auto; position: relative; }
.cmspacer { position: relative; }
.cmrow { position: absolute; left: 6px; right: 6px; height: 28px; box-sizing: border-box; padding: 0 6px 0 10px; border: 1px solid transparent; border-radius: 4px; }
.cmrow:hover { background: var(--hover); }
.cmrow.sel { background: var(--sel); }
.pagebox:focus .cmrow.focus { border-color: var(--sel-line); }
.cmrow .cmname { display: flex; align-items: center; gap: 6px; }
.cmtw { flex: none; width: 16px; height: 16px; display: grid; place-items: center; color: var(--dim); }
.cmtw svg { width: 12px; height: 12px; }
.cmname .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cmrow .r, .cmrow .d { color: var(--dim); }
.cmrow .d.newer { color: var(--cm-diff); font-weight: 600; }
.cmrow .st { display: flex; align-items: center; gap: 4px; font-size: 12px; }
.cmrow .st > span { overflow: hidden; text-overflow: ellipsis; }
.cmrow .st svg { width: 14px; height: 14px; }
.cmrow.same :is(.nm, .st) { color: var(--dim); }
.cmrow.same .nm { opacity: .8; }
.cmrow.diff :is(.nm, .st) { color: var(--cm-diff); }
.cmrow.diff .st { font-weight: 600; }
.cmrow.left :is(.nm, .st) { color: var(--cm-left); }
.cmrow.right :is(.nm, .st) { color: var(--cm-right); }
.cmrow.error :is(.nm, .st) { color: var(--cm-err); }
.cmrow.error .st > span { text-decoration: underline dotted; }
.cmnote { position: absolute; top: 60px; left: 16px; right: 16px; text-align: center; color: var(--dim); }
@container (max-width: 820px) {
  .cmpage { --cm-cols: minmax(130px, 1fr) 70px minmax(84px, 130px) 70px; }
  :is(.cmcols, .cmrow) .d { display: none; }
}
@container (max-width: 520px) {
  .cmpage { --cm-cols: minmax(110px, 1fr) minmax(76px, 120px); }
  :is(.cmcols, .cmrow) .r { display: none; }
  .cmexcl { width: 120px; }
}

/* The status bar's counts, in the statuses' colours. */
#count .cmc.same { color: var(--dim); }
#count .cmc.diff { color: var(--cm-diff); }
#count .cmc.left { color: var(--cm-left); }
#count .cmc.right { color: var(--cm-right); }
#count .cmc.error { color: var(--cm-err); }

/* A file's two versions: each side scrolls (the two together), its line numbers staying in view. */
.cmfile { flex: 1; min-height: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.cmfhead { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 10px 6px 14px; font-size: 12px; }
.cmfname { font-weight: 600; font-size: 13px; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmfcount { color: var(--dim); white-space: nowrap; }
.cmfhead .cmstep { display: flex; align-items: center; gap: 4px; padding: 0 8px 0 4px; }
.cmfcaps { flex: none; display: flex; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 12px; color: var(--dim); }
.cmfcap { flex: 1 1 0; min-width: 0; padding: 4px 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cmfcap + .cmfcap { border-left: 1px solid var(--line); }
.cmfcap.left b { color: var(--cm-left); }
.cmfcap.right b { color: var(--cm-right); }
.cmfcap .newer { color: var(--cm-diff); font-weight: 600; }
.cmfbody { flex: 1; min-height: 0; display: flex; }
.cmfside { flex: 1 1 0; min-width: 0; overflow: auto; position: relative; font: 12px/20px ui-monospace, SFMono-Regular, Menlo, monospace; }
.cmfside + .cmfside { border-left: 1px solid var(--line); }
.cmfspacer { position: relative; min-width: 100%; }
.cmln { --tint: transparent; position: absolute; left: 0; width: 100%; height: 20px; display: flex; white-space: pre; background: var(--tint); }
.cmln .no { position: sticky; left: 0; flex: none; width: 52px; box-sizing: border-box; padding-right: 10px; text-align: right; color: var(--dim); background: linear-gradient(var(--tint), var(--tint)), var(--pane); }
.cmln .tx { padding-left: 8px; tab-size: 4; -webkit-user-select: text; user-select: text; cursor: text; }
.cmln.mod { --tint: var(--cm-diff-bg); }
.cmln.del { --tint: var(--cm-left-bg); }
.cmln.ins { --tint: var(--cm-right-bg); }
.cmln.pad { background: repeating-linear-gradient(135deg, transparent 0 5px, var(--cm-pad) 5px 6px); }
.cmln.at .no { box-shadow: inset 3px 0 var(--accent); }
.cmln mark { background: var(--cm-diff-hi); color: inherit; border-radius: 2px; }
.cmln .eol { color: var(--dim); }
.cmln .eol.hi { background: var(--cm-diff-hi); color: var(--text); border-radius: 2px; }
/* A binary, very large or iCloud-only file: its sizes and whether it is the same. */
.cmfsum { padding: 24px 28px; }
.cmfsum p { margin: 0 0 14px; color: var(--dim); }
.cmfsum table { border-collapse: collapse; font-size: 12px; margin-bottom: 14px; }
.cmfsum th, .cmfsum td { padding: 5px 16px 5px 0; text-align: left; white-space: nowrap; }
.cmfsum th { color: var(--dim); font-weight: 400; }
.cmfsum .cmverdict { font-weight: 600; font-size: 13px; }
.cmverdict.same { color: var(--text); }
.cmverdict.diff { color: var(--cm-diff); }

/* 동기화 (compare.js, the plan from sync.js): a panel in the tree's place. Its groups take the statuses' colours: what
   goes right is the left's blue, what goes left the right's green, 덮어쓰기 the differences' orange. */
.cmopts .cmsyncbtn.on { border-color: var(--accent); color: var(--accent); }
.cmsync { --cm-trash: #c42b1c; flex: 1; min-height: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); font-size: 12px; }
@media (prefers-color-scheme: dark) { .cmsync { --cm-trash: #ff99a4; } }
.cmsyhead { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 8px 10px 6px 14px; }
.cmsymodes { display: inline-flex; border: 1px solid var(--field-line); border-radius: 4px; overflow: hidden; }
.cmsymodes button { height: 26px; padding: 0 12px; border: 0; background: var(--field); color: var(--text); font: inherit; }
.cmsymodes button + button { border-left: 1px solid var(--field-line); }
.cmsymodes button:hover:not(:disabled, [aria-checked="true"]) { background: var(--hover); }
.cmsymodes button[aria-checked="true"] { background: var(--accent); color: var(--pane); font-weight: 600; }
.cmsyhead > button, .cmsyfoot button { height: 26px; padding: 0 12px; border: 1px solid var(--field-line); border-radius: 4px; background: var(--field); color: var(--text); font: inherit; }
.cmsyhead > button:hover:not(:disabled), .cmsyfoot button:hover:not(:disabled) { background: var(--hover); }
:is(.cmsyhead, .cmsyfoot) button:disabled { opacity: .45; }
.cmsymsg, .cmsyrefuse { margin: 0; padding: 0 14px 8px; color: var(--dim); line-height: 1.6; }
.cmsync:not(.refused) .cmsyrefuse, .cmsync.refused :is(.cmsymodes, .cmcheck, .cmsymsg, .cmsywarn, .cmsyresult, .cmsylist, .cmsyfoot) { display: none; }
.cmsync.refused .cmsyrefuse { padding-top: 16px; color: var(--cm-trash); font-weight: 600; font-size: 13px; }
.cmsywarn { margin: 0 14px 8px; padding: 7px 10px; border-radius: 4px; background: color-mix(in srgb, var(--cm-trash) 12%, transparent); color: var(--cm-trash); font-weight: 600; }
.cmsyresult { margin: 0 14px 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--field); }
.cmsyresult ul { margin: 6px 0 0; padding-left: 18px; color: var(--cm-trash); max-height: 120px; overflow: auto; }
.cmsylist { flex: 1; min-height: 0; overflow: auto; border-top: 1px solid var(--line); padding: 0 6px 10px; }
.cmsynone { color: var(--dim); text-align: center; margin-top: 48px; }
.cmsyghead { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; background: var(--pane); border-bottom: 1px solid var(--line); }
.cmsyghead b { font-weight: 600; }
.cmsyghead > span:last-child { color: var(--dim); }
.cmsygroup + .cmsygroup { margin-top: 6px; }
.cmsygroup.copy-right .cmsyghead b { color: var(--cm-left); }
.cmsygroup.copy-left .cmsyghead b { color: var(--cm-right); }
.cmsygroup.over .cmsyghead b { color: var(--cm-diff); }
.cmsygroup.trash .cmsyghead b { color: var(--cm-trash); }
.cmsygroup:is(.conflict, .skip) .cmsyghead b { color: var(--cm-err); }
.cmsyrow { display: grid; grid-template-columns: 16px 16px minmax(120px, 1fr) minmax(0, max-content) 64px; align-items: center; gap: 8px; height: 26px; padding: 0 8px 0 24px; border-radius: 4px; }
.cmsyrow:hover { background: var(--hover); }
.cmsyrow input, .cmsyghead input { margin: 0; }
.cmsyrow svg { width: 16px; height: 16px; }
.cmsyrow > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cmsyrow .dt, .cmsyrow .sz { color: var(--dim); }
.cmsyrow .sz { text-align: right; }
.cmsyrow .newer { color: var(--cm-diff); font-weight: 600; }
.cmsyrow:has(input:not(:checked)) :is(.nm, .dt, .sz) { text-decoration: line-through; opacity: .55; }
.cmsyrow:is(.conflict, .skip) .nm { color: var(--dim); }
.cmsymore { padding: 4px 24px; color: var(--dim); }
.cmsyfoot { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--line); }
.cmsysum { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--dim); }
.cmsyfoot .cmsygo { border-color: var(--accent); background: var(--accent); color: var(--pane); font-weight: 600; }
.cmsyfoot .cmsygo:hover:not(:disabled) { background: var(--accent); filter: brightness(1.08); }
@container (max-width: 620px) {
  .cmsyrow { grid-template-columns: 16px 16px minmax(100px, 1fr) 56px; }
  .cmsyrow .dt { display: none; }
}