/*! © 2026 해밀 (haemil.ai). All rights reserved. 무단 복제·배포 금지. */
:root {
  --bar: #e8edf5;
  --chrome: #f9f9f9;
  --pane: #ffffff;
  --line: #e5e5e5;
  --text: #1b1b1b;
  --dim: #5f5f5f;
  --hover: #eef1f5;
  --sel: #cce8ff;
  --sel-line: #99d1ff;
  --sel-dim: #e1e4e8; /* the path's folders in column view's other columns */
  --accent: #005fb8;
  --field: #ffffff;
  --field-line: #dcdcdc;
  --good: #0f7b0f;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bar: #1c1c1c;
    --chrome: #2a2a2a;
    --pane: #1f1f1f;
    --line: #353535;
    --text: #f2f2f2;
    --dim: #a8a8a8;
    --hover: #2f2f2f;
    --sel: #0e3d63;
    --sel-line: #2276b8;
    --sel-dim: #3a3a3a;
    --accent: #60cdff;
    --field: #2d2d2d;
    --field-line: #3d3d3d;
    --good: #6ccb5f;
  }
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--pane);
  color: var(--text);
  font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
  /* Korean wraps between words, never inside one; a name with no spaces still breaks rather than overflow. */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* minmax(0, 1fr): a long path in the address bar must not widen the window's content. */
body { display: grid; grid-template-rows: 40px 48px 44px 1fr 26px; grid-template-columns: minmax(0, 1fr); }
button { font: inherit; color: inherit; }
svg { flex: none; display: block; }
.grow { flex: 1; align-self: stretch; }

/* Tabs */
#tabbar { background: var(--bar); display: flex; align-items: flex-end; padding-left: 84px; }
#tabs { display: flex; align-items: flex-end; gap: 2px; min-width: 0; }
.tab {
  height: 32px; width: 220px; min-width: 110px; flex: 0 1 220px; box-sizing: border-box;
  display: flex; align-items: center; gap: 8px; padding: 0 6px 0 12px;
  border-radius: 8px 8px 0 0; color: var(--dim);
}
.tab.active { background: var(--chrome); color: var(--text); }
.tab:not(.active):hover { background: color-mix(in srgb, var(--chrome) 55%, transparent); }
.tab .tn { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tab .tx { width: 24px; height: 24px; border: 0; border-radius: 4px; background: transparent; color: var(--dim); font-size: 15px; }
.tab .tx:hover { background: var(--hover); color: var(--text); }
#newtab { align-self: center; margin: 4px 0 0 4px; width: 28px; height: 28px; }

/* Address row */
#addressrow { background: var(--chrome); display: flex; align-items: center; gap: 2px; padding: 0 8px; }
.icon-btn {
  width: 34px; height: 32px; border: 0; border-radius: 4px; background: transparent;
  display: grid; place-items: center; color: var(--text);
}
.icon-btn:hover:not(:disabled) { background: var(--hover); }
.icon-btn:disabled { opacity: .35; }
#address {
  flex: 1; min-width: 0; height: 32px; margin-left: 6px; position: relative; box-sizing: border-box;
  display: flex; align-items: center; padding: 0 4px 0 8px;
  background: var(--field); border: 1px solid var(--field-line); border-radius: 4px;
}
#crumbs { display: flex; align-items: center; flex: 1; height: 100%; overflow: hidden; white-space: nowrap; }
.crumb, .chev {
  border: 0; background: transparent; height: 24px; border-radius: 4px; flex: none;
  display: grid; place-items: center; padding: 0 6px; font-size: 14px;
}
.chev { width: 18px; padding: 0; color: var(--dim); }
.crumb:hover, .chev:hover, .chev.open { background: var(--hover); }
/* A page's first crumb (its icon and name); in a page the chevrons only part the crumbs. */
.crumb.named { display: flex; gap: 6px; }
span.chev:hover { background: transparent; }
#addrinput {
  position: absolute; inset: -1px; box-sizing: border-box; border: 1px solid var(--field-line);
  border-radius: 4px; outline: none; box-shadow: inset 0 -2px 0 var(--accent);
  padding: 0 10px; font: inherit; font-size: 14px; background: var(--field); color: var(--text);
  -webkit-user-select: text; user-select: text;
}
#addrinput.bad { box-shadow: inset 0 -2px 0 #c42b1c; }
#search {
  width: 260px; height: 32px; margin-left: 8px; box-sizing: border-box;
  border: 1px solid var(--field-line); border-radius: 4px; background: var(--field); color: var(--text);
  padding: 0 32px 0 10px; font: inherit; font-size: 13px; outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.5' fill='none' stroke='%23888' stroke-width='1.2'/%3E%3Cpath d='M10.3 10.3 14 14' stroke='%23888' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 16px; background-position: right 10px center;
  -webkit-user-select: text; user-select: text;
}
#search:focus { box-shadow: inset 0 -2px 0 var(--accent); }

/* Command bar */
#commandbar {
  background: var(--chrome); display: flex; align-items: center; gap: 2px; padding: 0 8px;
  border-bottom: 1px solid var(--line); overflow: hidden;
}
.cmd {
  height: 32px; min-width: 36px; padding: 0 8px; display: flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: 4px; background: transparent; flex: none; white-space: nowrap;
}
#commandbar.tight :is(#extractbtn, #editbtn, #diskbtn, #previewbtn) { font-size: 0; gap: 0; }
.cmd:hover:not(:disabled), .cmd.open { background: var(--hover); }
.cmd:disabled { opacity: .38; }
.vsep { width: 1px; height: 24px; background: var(--line); margin: 0 6px; }

/* Navigation pane */
main { display: flex; min-height: 0; }
#navpane {
  width: 232px; flex: none; overflow: auto; box-sizing: border-box; padding: 6px 6px 12px;
  border-right: 1px solid var(--line);
}
.nav {
  height: 30px; display: flex; align-items: center; gap: 6px; padding-right: 8px;
  border-radius: 4px; border: 1px solid transparent; white-space: nowrap;
}
.nav:hover { background: var(--hover); }
/* 지금 폴더 표시는 키보드가 탐색 창에 있을 때만 (파일 쪽에서 움직이는 동안 따라다니지 않게) */
#navpane:focus .nav.cur { background: var(--sel); border-color: var(--sel-line); }
#navpane:focus { outline: none; }
.nav .tw { width: 18px; height: 18px; display: grid; place-items: center; color: var(--dim); border-radius: 3px; flex: none; }
.nav .tw:hover { background: color-mix(in srgb, var(--text) 10%, transparent); }
.nav .label { overflow: hidden; text-overflow: ellipsis; }
.navsep { height: 1px; background: var(--line); margin: 8px 6px; }
.navhead { padding: 2px 8px 4px; font-size: 12px; color: var(--dim); }
.nav .pin { margin-left: auto; padding-left: 6px; color: var(--dim); }
.nav .pin svg { width: 12px; height: 12px; }

/* File list */
.pane { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.cols { display: grid; grid-template-columns: var(--cols); align-items: center; }
.colheader { height: 34px; padding: 0 12px 0 16px; flex: none; overflow: hidden; }
.colheader button {
  height: 100%; border: 0; background: transparent; text-align: left; color: var(--dim);
  padding: 0 8px; position: relative; border-right: 1px solid transparent;
}
.colheader button:hover { background: var(--hover); }
.colheader button.right { text-align: right; padding-right: 20px; }
.colheader button.sorted::before {
  content: ""; position: absolute; left: 50%; top: 3px; width: 7px; height: 4px; margin-left: -3.5px;
  background: var(--dim); clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.colheader button.sorted.desc::before { clip-path: polygon(0 0, 100% 0, 50% 100%); }
/* Sideways scrolling when the columns are wider than the window; the header follows it in app.js. */
.rows { flex: 1; overflow: auto; outline: none; position: relative; }
.spacer { position: relative; width: calc(var(--listw) + 30px); }
.row {
  position: absolute; left: 6px; width: calc(var(--listw) + 18px); height: 28px; box-sizing: border-box; padding: 0 6px 0 10px;
  border-radius: 4px; border: 1px solid transparent;
}
.row:hover { background: var(--hover); }
.row.sel { background: var(--sel); }
.rows:focus .row.focus { border-color: var(--sel-line); }
.row > span { padding: 0 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.row .c-name { display: flex; align-items: center; gap: 8px; padding-left: 0; }
.row .nm { overflow: hidden; text-overflow: ellipsis; }
.row .c-date, .row .c-type, .row .c-size { color: var(--dim); }
.row .c-size { text-align: right; padding-right: 14px; }
.row .c-cloud { display: flex; align-items: center; }
.row.dim .c-name { opacity: .55; }
.empty { position: absolute; top: 70px; left: 0; right: 0; text-align: center; color: var(--dim); }

/* The icon, list, tile and content views: app.js places each item (.cell) in its slot; --pic is the picture's size. */
.pane[data-view]:not([data-view="details"]) .colheader { display: none; }
.row.cell { display: flex; align-items: center; gap: 8px; padding: 0 8px; }
.row.cell > span { padding: 0; }
.cell .pic { flex: none; position: relative; width: var(--pic); height: var(--pic); display: grid; place-items: center; }
.cell .pic > svg { width: 100%; height: 100%; }
.cell .pic > img { max-width: 100%; max-height: 100%; object-fit: contain; -webkit-user-drag: none; }
.cell .badge { position: absolute; left: -2px; bottom: -2px; display: grid; padding: 1px; border-radius: 50%; background: var(--pane); }
.cell .badge svg { width: clamp(10px, calc(var(--pic) / 4), 16px); height: auto; }
.cell.dim > :is(.pic, .nm, .tx) { opacity: .55; }
/* Under the picture, a name of up to 2 lines; the selected item's whole name, over the items below it. */
.row.cell.stack { flex-direction: column; justify-content: flex-start; gap: 4px; padding: 8px 4px 6px; height: auto !important; min-height: calc(var(--pic) + 56px); }
.cell.stack .nm { width: 100%; text-align: center; line-height: 18px; white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.cell.stack.sel.focus { z-index: 1; }
.cell.stack.sel.focus .nm { display: block; }
.rows:has(textarea.rename) .cell.focus .nm { visibility: hidden; }
.cell.line .nm { flex: 1; min-width: 0; }
.cell .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cell .tx > span, .cell .meta > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cell .sub, .cell .meta { color: var(--dim); font-size: 12px; }
.cell.content .meta { flex: none; max-width: 40%; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding-left: 16px; }
.cell.content::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -3px; height: 1px; background: var(--line); }
textarea.rename { height: 40px; resize: none; text-align: center; line-height: 18px; padding: 1px 4px; overflow: hidden; }

/* Column view (.pane.columns): the list gives way to the columns, and the preview pane too while the active pane is in it (body.columns) */
.pane.columns :is(.colheader, .rows, .empty), .pane:not(.columns) .cview, body.columns #preview { display: none; }
.cview { flex: 1; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; outline: none; }
.col { flex: none; position: relative; display: flex; box-sizing: border-box; border-right: 1px solid var(--line); }
.cbody { flex: 1; min-width: 0; position: relative; overflow-x: hidden; overflow-y: auto; }
.cspacer { position: relative; }
.crow {
  position: absolute; left: 4px; right: 4px; height: 28px; box-sizing: border-box; padding: 0 6px 0 8px;
  display: flex; align-items: center; gap: 8px; white-space: nowrap; border-radius: 4px; border: 1px solid transparent;
}
.crow .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.crow .cchev { display: grid; color: var(--dim); }
.crow:hover { background: var(--hover); }
.crow.on { background: var(--sel-dim); }
.crow.sel { background: var(--sel); }
.cview:focus .crow.focus { border-color: var(--sel-line); }
.crow.dim > svg:first-child, .crow.dim .nm { opacity: .55; }
.crow.cut { opacity: .5; }
.cgrip { position: absolute; top: 0; bottom: 0; right: 0; width: 6px; cursor: col-resize; }
.cbody input.rename { left: 34px; width: calc(100% - 42px); }
/* A folder its column can't list (app.js readColumn): why, in its place. */
.cbody:not([data-error=""])::before { content: attr(data-error); position: absolute; top: 12px; left: 0; right: 0; text-align: center; font-size: 12px; color: var(--dim); }
/* 파인더처럼 남는 너비를 다 차지한다 (스크롤 막대가 창 오른쪽 끝에). 끌어서 정한 너비는 가장 좁을 때의 너비. */
.pcol { flex: 1 0 var(--preview-w, 320px); box-sizing: border-box; padding: 16px; overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.pcol[hidden] { display: none; }

/* Status bar */
#statusbar {
  display: flex; align-items: center; gap: 28px; padding: 0 16px; font-size: 12px; color: var(--dim);
  border-top: 1px solid var(--line); background: var(--pane);
}

/* Menus and toast */
#menu, #submenu {
  position: fixed; z-index: 10; min-width: 200px; max-width: 420px; max-height: 60vh; overflow: auto;
  padding: 4px; box-sizing: border-box; background: var(--field); border: 1px solid var(--field-line);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.mi { height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: 4px; white-space: nowrap; }
.mi:hover, .mi.hi { background: var(--hover); }
.mi .ck { width: 14px; text-align: center; }
.mi .lbl { overflow: hidden; text-overflow: ellipsis; }
.msep { height: 1px; background: var(--line); margin: 4px 6px; }
/* Toasts (app.js toast), the newest lowest: a note goes by itself, an error (red edge) stays until its ×. */
#toast {
  position: fixed; left: 50%; bottom: 44px; transform: translateX(-50%); z-index: 20; width: max-content; max-width: 70vw;
  display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none;
}
.toast {
  pointer-events: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; max-width: 100%; box-sizing: border-box;
  background: #323232; color: #fff; padding: 8px 14px; border-radius: 6px; font-size: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
}
.toast.error { padding-right: 6px; box-shadow: inset 3px 0 0 #f1707b, 0 4px 16px rgba(0, 0, 0, .2); }
.toast .tline { min-width: 0; overflow-wrap: anywhere; -webkit-user-select: text; user-select: text; }
.toast .tmore { padding: 0; border: 0; background: none; font: inherit; color: #99d1ff; cursor: pointer; }
.toast .tmore:hover { text-decoration: underline; }
.toast .tclose { width: 20px; height: 20px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 3px; background: transparent; color: #c8c8c8; }
.toast .tclose:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.toast .tclose svg { width: 12px; height: 12px; }
.toast .tdetail { flex-basis: 100%; max-height: 30vh; overflow: auto; white-space: pre-wrap; color: #d8d8d8; -webkit-user-select: text; user-select: text; }

/* File operations */
.row.cut { opacity: .5; }
.drop { background: var(--sel) !important; box-shadow: inset 0 0 0 1px var(--sel-line); }
.rename {
  position: absolute; left: 40px; height: 24px; width: min(360px, 45%); z-index: 2; box-sizing: border-box;
  padding: 0 4px; font: inherit; color: var(--text); background: var(--field);
  border: 1px solid var(--accent); border-radius: 3px; outline: none; -webkit-user-select: text; user-select: text;
}
#ghost {
  position: fixed; z-index: 30; pointer-events: none; padding: 4px 8px; font-size: 12px; border-radius: 4px;
  background: var(--field); border: 1px solid var(--field-line); box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}
.mi.off { opacity: .45; }
.mi .key { margin-left: auto; padding-left: 28px; color: var(--dim); font-size: 12px; }
.micons { display: flex; gap: 2px; padding: 2px 4px 6px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.micon { width: 36px; height: 32px; border: 0; border-radius: 4px; background: transparent; display: grid; place-items: center; }
.micon:hover:not(:disabled) { background: var(--hover); }
.micon:disabled { opacity: .35; }

/* A page's progress (status bar, left): a share done, or under way (.busy). */
#pagebar { flex: none; position: relative; width: 140px; height: 4px; margin-right: -16px; border-radius: 2px; overflow: hidden; background: var(--line); }
#pagebar[hidden] { display: none; }
#pagebar > span { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 2px; background: var(--accent); }
#pagebar.busy > span { width: 30%; animation: sweep 1.2s ease-in-out infinite; }
@keyframes sweep { from { left: -30%; } to { left: 100%; } }

/* Progress (status bar, right) */
#progress { margin-left: auto; display: flex; align-items: center; gap: 10px; }
#progress[hidden] { display: none; }
#ptrack { width: 120px; height: 4px; border-radius: 2px; overflow: hidden; background: var(--line); }
#pbar { display: block; width: 0; height: 100%; background: var(--accent); }
#pcancel { height: 20px; padding: 0 8px; border: 1px solid var(--field-line); border-radius: 3px; background: var(--chrome); font-size: 12px; }

/* Dialog */
dialog::backdrop { background: rgba(0, 0, 0, .25); }
.dialog {
  width: 420px; box-sizing: border-box; padding: 20px 24px 16px; border: 0; border-radius: 8px;
  background: var(--field); color: var(--text); box-shadow: 0 16px 48px rgba(0, 0, 0, .3);
}
.dialog h3 { margin: 0 0 8px; font-size: 15px; }
.dialog p { margin: 0 0 18px; color: var(--dim); line-height: 1.55; white-space: pre-line; -webkit-user-select: text; user-select: text; }
.btns { display: flex; justify-content: flex-end; gap: 8px; }
.btns button { height: 32px; padding: 0 14px; border-radius: 4px; border: 1px solid var(--field-line); background: var(--chrome); }
.btns .primary { background: var(--accent); border-color: var(--accent); color: var(--pane); }
.band { position: absolute; z-index: 3; pointer-events: none; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* Search */
#kindbar { flex: 0 1 auto; min-width: 0; overflow: hidden; display: flex; align-items: center; gap: 4px; }
#kindbar[hidden], #kindmenu[hidden] { display: none; }
#filterchips { flex: none; display: flex; gap: 4px; margin-left: 4px; }
:is(#extractbtn, #editbtn)[hidden] { display: none; }
body:not(.searching) #scopebtn, body:not(.searching) #groupbtn { display: none; }
/* A filter's chip with its value; × takes it off. */
.chip .x { display: inline-grid; vertical-align: -3px; margin: 0 -4px 0 4px; padding: 1px; border-radius: 50%; }
.chip .x svg { width: 12px; height: 12px; }
.chip .x:hover { background: color-mix(in srgb, var(--text) 12%, transparent); }
/* 직접 지정: from and to dates under 수정한 날짜. */
.datepop {
  inset: auto; position: fixed; margin: 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; color: var(--text);
  background: var(--field); border: 1px solid var(--field-line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.datepop label { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.datepop input, .dialog .namefield { font: inherit; color: var(--text); background: var(--pane); border: 1px solid var(--field-line); border-radius: 4px; padding: 3px 6px; }
.datepop .btns button { height: 28px; }
/* 검색 저장 at the end of the search box, in the magnifier's place while a search is open. */
#savesearch { width: 28px; height: 28px; margin-left: -31px; color: var(--dim); }
body:not(.searching) #savesearch { display: none; }
body.searching #search { background-image: none; }
.dialog .namefield { display: block; box-sizing: border-box; width: 100%; height: 30px; margin: 4px 0 18px; outline: none; -webkit-user-select: text; user-select: text; }
.dialog .namefield:focus { border-color: var(--accent); }
/* 그룹화 방법's headings: a click folds the group. */
.row.group .gtw { display: grid; place-items: center; width: 16px; padding: 0; margin-left: -4px; }
.row.group:not(.section):not(.cprompt):not(.more):hover { background: var(--hover); }
.chip { flex: none; height: 26px; padding: 0 9px; border: 1px solid var(--field-line); border-radius: 12px; background: transparent; font-size: 12px; }
.chip:hover { background: var(--hover); }
.chip.on { background: var(--sel); border-color: var(--sel-line); }
.colheader .where, .row .c-where { display: none; }
.pane.searching :is(.colheader .where, .row .c-where) { display: block; }
.row .c-where { color: var(--dim); }
.row.group { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--dim); border-radius: 0; border-bottom: 1px solid var(--line); }
.row.group:hover { background: transparent; }
.row.group .gcount { font-weight: 400; font-size: 12px; }

/* Content search */
.row.section { color: var(--text); }
.row.cprompt { gap: 12px; font-weight: 400; border-bottom: 0; }
.row.cprompt a { color: var(--accent); cursor: pointer; }
.row.cprompt a:hover { text-decoration: underline; }
#ixstatus { margin-left: auto; }
#ixstatus:hover { color: var(--text); }
#ixstatus:not([hidden]) + #progress { margin-left: 0; }
.dialog.content { width: 560px; max-height: 86vh; overflow: auto; }
.dialog.content p { margin-bottom: 10px; }
.dialog.content .btns { margin-top: 16px; }
.btns button:disabled { opacity: .5; }
.cnote { margin: 6px 0; font-size: 12px; line-height: 1.5; color: var(--dim); }
.dialog.content p.cnote { margin-bottom: 6px; }
.clabel { margin: 14px 0 4px; font-weight: 600; }
/* A section of 설정 (내용 검색 now; more later). */
.csect { margin: 2px 0 10px; font-size: 15px; font-weight: 600; }
.cfolder { height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 6px; border-radius: 4px; }
.cfolder:hover { background: var(--hover); }
/* A folder inside 홈 while 홈 is checked: unchecking it leaves it out of 홈. */
.cfolder.csub { padding-left: 30px; }
.cfolder .cpath { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; color: var(--dim); }
.cbadge { padding: 0 6px; border: 1px solid var(--line); border-radius: 8px; font-size: 11px; color: var(--dim); }
.cx { width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 4px; background: transparent; color: var(--dim); }
.cx:hover { background: var(--hover); color: var(--text); }
.cnone { padding: 4px 6px; font-size: 12px; color: var(--dim); }
.clink { padding: 4px 6px; border: 0; background: transparent; font: inherit; color: var(--accent); }
.clink:hover { text-decoration: underline; }
.cstate { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cstate button { height: 28px; padding: 0 12px; border: 1px solid var(--field-line); border-radius: 4px; background: var(--chrome); }
.ctrack { display: block; height: 4px; overflow: hidden; border-radius: 2px; background: var(--line); }
.cbar { display: block; width: 0; height: 100%; background: var(--accent); transition: width .2s; }
.cprog { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 4px 12px; margin: 14px 0; }
.cprog .ctext { grid-column: 2; font-size: 12px; color: var(--dim); }
.cfoot { align-self: center; font-size: 12px; color: var(--dim); }
.row.excerpt { display: flex; align-items: center; padding-left: 40px; color: var(--dim); font-size: 12px; border: 0; }
.row.excerpt:hover { background: transparent; }
.row .place { color: var(--dim); }
.row.excerpt.code span { font: 12px ui-monospace, Menlo, monospace; }
/* 내용 검색이 찾은 단어: 강조색을 옅게 깔아 어느 테마에서나 읽히게, 흐린 발췌 글 안에서도 본문 색으로. */
:is(.excerpt, .sub, .phit, .ptext) mark { background: color-mix(in srgb, var(--accent) 24%, transparent); color: var(--text); border-radius: 2px; }

/* Preview pane */
.cmd.on { background: var(--sel); }
#preview { width: var(--preview-w, 320px); flex: none; box-sizing: border-box; padding: 16px; overflow: auto; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
#preview[hidden] { display: none; }
/* The left edge of the preview pane and of column view's preview column: drag to resize (one width for both),
   double-click for the default. It lies over the edge, in front of the last column's own divider. */
.vgrip { flex: none; width: 6px; margin-right: -6px; position: relative; z-index: 3; cursor: col-resize; }
#pgrip:has(+ #preview[hidden]), body.columns #pgrip, .pcgrip:has(+ .pcol[hidden]) { display: none; }
.pcgrip { margin-left: -3px; margin-right: -3px; }
.pmsg { margin: auto 0; text-align: center; color: var(--dim); }
/* The preview fills the pane, as in Windows: a picture or video as big as the pane allows (scaled, never cropped,
   shrinking to leave room for the lines under it), and whatever is shorter than the pane sits in its middle. Auto
   margins rather than centring, so a tall preview still starts at the top instead of being cut off. */
#preview > :first-child, .pcol > :first-child { margin-top: auto; }
#preview > :last-child, .pcol > :last-child { margin-bottom: auto; }
.pmedia { max-width: 100%; min-height: 0; flex: 0 1 auto; object-fit: contain; border-radius: 4px; align-self: center; }
.pdoc { width: 100%; flex: 1; min-height: 360px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.phwp { flex: 1; width: 100%; min-height: 0; border: 0; }
.ptext { margin: 0; flex: 1; overflow: auto; font: 12px/1.5 ui-monospace, Menlo, monospace; white-space: pre-wrap; word-break: break-all; -webkit-user-select: text; user-select: text; }
.picon { display: grid; place-items: center; padding: 24px 0; }
.picon svg { width: 96px; height: 96px; }
.phit { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.phit span { color: var(--dim); }
.phit p { margin: 0; line-height: 1.5; word-break: break-word; -webkit-user-select: text; user-select: text; }
.pinfo { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; font-size: 12px; color: var(--dim); }
.pinfo b { color: var(--text); font-size: 13px; word-break: break-all; }
.pbtn { align-self: center; height: 30px; padding: 0 14px; border-radius: 4px; border: 1px solid var(--field-line); background: var(--chrome); }
.pmsg .pbtn { margin-top: 8px; }
.pnote { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: var(--dim); }
.pnote .pbtn { height: 24px; padding: 0 10px; font-size: 12px; }
.row.more { color: var(--accent); font-weight: 400; cursor: pointer; border-bottom: 0; }
.row.more:hover { text-decoration: underline; }

/* Column edges: drag to resize, double-click to fit */
.colheader button { overflow: visible; }
.grip { position: absolute; top: 6px; bottom: 6px; right: -5px; width: 10px; z-index: 1; cursor: col-resize; }
.grip::after { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 1px; background: transparent; }
.colheader:hover .grip::after { background: var(--field-line); }
/* 앱 찾기: an app's own icon, and why it's there. */
.row .c-name > img { flex: none; width: 16px; height: 16px; object-fit: contain; -webkit-user-drag: none; }
.row .why { flex-shrink: 8; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--dim); font-size: 12px; }
.row .tag { flex: none; margin-left: 6px; padding: 0 6px; border-radius: 8px; font-size: 11px; line-height: 16px; color: var(--dim); border: 1px solid var(--line); }
.chip.auto { border-style: dashed; border-color: var(--sel-line); background: color-mix(in srgb, var(--sel) 50%, transparent); }

/* 속성 window */
.dialog.props { width: 460px; }
.phead { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.phead svg { width: 32px; height: 32px; }
.pname { flex: 1; height: 28px; box-sizing: border-box; padding: 0 8px; font: inherit; color: var(--text); background: var(--field); border: 1px solid var(--field-line); border-radius: 4px; outline: none; -webkit-user-select: text; user-select: text; }
.pname:focus { box-shadow: inset 0 -2px 0 var(--accent); }
.ptable { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.ptable th { width: 110px; text-align: left; font-weight: 400; color: var(--dim); padding: 4px 0; vertical-align: top; }
.ptable td { padding: 4px 0; word-break: break-all; -webkit-user-select: text; user-select: text; }
.ptable tr.gap td { padding: 0; height: 9px; border-bottom: 1px solid var(--line); }
.ptable tr.gap + tr th, .ptable tr.gap + tr td { padding-top: 10px; }
.ptable label { margin-right: 16px; white-space: nowrap; }

/* Quick Look (Space) */
.qlook { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(0, 0, 0, .35); outline: none; }
.qpanel { width: min(900px, 86vw); height: min(680px, 84vh); display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; background: var(--field); box-shadow: 0 24px 64px rgba(0, 0, 0, .35); }
.qhead { height: 38px; flex: none; display: flex; align-items: center; padding: 0 8px 0 16px; border-bottom: 1px solid var(--line); background: var(--chrome); }
.qtitle { flex: 1; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.qclose { width: 28px; height: 28px; border: 0; border-radius: 4px; background: transparent; font-size: 18px; color: var(--dim); }
.qclose:hover { background: var(--hover); }
.qbody { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; overflow: auto; }
.qbody .pmedia { max-width: 100%; max-height: 100%; }
.qbody .pdoc { width: 100%; height: 100%; min-height: 0; flex: 1; }
.qbody .ptext { width: 100%; height: 100%; }
.qbody .picon svg { width: 128px; height: 128px; }
.qfacts { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 14px; }
.qinfo { flex: none; padding: 8px 16px; font-size: 12px; color: var(--dim); border-top: 1px solid var(--line); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* 모두 보기 in the status bar, after "처음 20,000개만 표시". */
.slink { margin-left: 6px; padding: 0; border: 0; background: none; font: inherit; color: var(--accent); cursor: pointer; }
.slink:hover { text-decoration: underline; }

/* 이중창 (body.dual): two panes split by #dgrip (--split, the first one's share); each has its path over its list. The
   active pane (.pane.active) has the accent along its path's top; the other one's selection is grey. */
body:not(.dual) :is(.pathbar, #dgrip, .pane ~ .pane) { display: none; }
body.dual .pane:first-of-type { flex-grow: var(--split, .5); }
body.dual .pane ~ .pane { flex-grow: calc(1 - var(--split, .5)); }
#dgrip { flex: none; width: 1px; position: relative; z-index: 3; background: var(--line); cursor: col-resize; }
#dgrip::before { content: ""; position: absolute; inset: 0 -3px; }
.pathbar {
  height: 28px; flex: none; display: flex; align-items: center; padding: 0 8px; overflow: hidden; white-space: nowrap;
  color: var(--dim); border-top: 2px solid transparent; border-bottom: 1px solid var(--line);
}
.pane.active .pathbar { color: var(--text); border-top-color: var(--accent); background: color-mix(in srgb, var(--sel) 45%, var(--pane)); }
.pathbar .crumb { height: 22px; padding: 0 5px; font-size: 12px; }
.pathbar > svg { width: 12px; height: 12px; color: var(--dim); }
.pclose { flex: none; width: 22px; height: 22px; margin-left: auto; display: grid; place-items: center; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--dim); }
.pclose:hover { background: var(--hover); color: var(--text); }
.pclose svg { width: 12px; height: 12px; }
body.dual .pane:not(.active) :is(.row, .crow).sel { background: var(--sel-dim); }

/* A pane showing a page (app.js PAGES): its box in the list's place; the command bar keeps only 보기 and ⋯. */
.pagebox { display: none; flex: 1; min-height: 0; outline: none; container-type: inline-size; }
.pane.paged > .pagebox { display: flex; }
.pane.paged > :not(.pathbar, .pagebox) { display: none; }
body.paged #commandbar > :not(#viewbtn, #morebtn) { display: none; }

/* 프로 기능 while locked (pro.js): PRO after a menu item's name, and on a button. */
.pro, [data-pro].locked::after {
  flex: none; padding: 0 3px; border: 1px solid var(--accent); border-radius: 3px; color: var(--accent);
  font-size: 9px; font-weight: 600; line-height: 12px; letter-spacing: .3px;
}
[data-pro].locked::after { content: 'PRO'; margin-left: 6px; }
#savesearch.locked { position: relative; }
#savesearch.locked::after { position: absolute; right: -6px; top: -4px; margin: 0; background: var(--field); }
/* The trial's last days, quietly (app.js applyLicense). */
#trialnote { padding: 0; border: 0; background: none; font: inherit; color: var(--dim); }
#trialnote:hover { color: var(--text); }
#updatenote { padding: 0; border: 0; background: none; font: inherit; color: var(--accent); }
#updatenote:disabled { color: var(--dim); }
.cerror { color: #c42b1c; }
@media (prefers-color-scheme: dark) { .cerror { color: #ff99a4; } }

/* The AI model's name and licence, a link to its terms. */
.cterms { padding: 0; font-size: 12px; }
#ixstatus .slink { margin-left: 4px; }

/* The first launch (app.js welcome) and 도움말 › 단축키. */
.dialog.welcome { width: 460px; }
.dialog.welcome .csect { margin: 18px 0 2px; font-size: 13px; }
.dialog.welcome .btns { margin-top: 20px; }
.dialog.keys { width: 660px; max-height: 86vh; overflow: auto; }
.klist { columns: 2; column-gap: 32px; margin: 12px 0 16px; }
.klist > div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--line); break-inside: avoid; }
.klist .kkeys { white-space: nowrap; color: var(--dim); -webkit-user-select: text; user-select: text; }

/* Keyboard focus (Tab, with macOS's keyboard navigation on) shows as a ring; the lists show theirs on the focused
   row, text fields theirs underneath. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
:is(.rows, .cview, .pagebox, .qlook, dialog, input:not([type]), input[type="text"], textarea):focus-visible { outline: none; }

/* Reduce motion (macOS 손쉬운 사용): nothing slides or sweeps. Quick Look's zoom checks it in app.js. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}