:root { --green:#2F4F46; --green-hover:#3B6258; --gold:#C7A76C; --gold-light:#D8C197; --background:#F8F7F4; --card:#fff; --text:#2A2A2A; --muted:#666; --line:#DED7CB; --success:#4F8A5B; --error:#C96A6A; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html.auth-locked,html.auth-locked body { height:100%; overflow:hidden; }
html.auth-locked #appView,html.auth-session #loginView { display:none !important; }
body { margin:0; min-width:320px; background:var(--background); color:var(--text); font-family:"Noto Sans KR","Malgun Gothic",system-ui,sans-serif; line-height:1.5; }
button,input { font:inherit; }
button { cursor:pointer; }
button:focus-visible,input:focus-visible,.drop-zone:focus-visible { outline:3px solid rgba(199,167,108,.65); outline-offset:3px; }
.shell { width:min(100% - 32px,920px); margin:0 auto; padding:16px 0 24px; }
.app { display:grid; gap:12px; }
.app-header { padding:0 8px; }
h1,h2,p { margin:0; }
h1 { font-family:Georgia,"Times New Roman",serif; font-size:clamp(1.85rem,5vw,2.3rem); font-weight:600; line-height:1.06; letter-spacing:-.035em; color:var(--green); }
h2 { font-family:Georgia,"Times New Roman",serif; font-size:1.2rem; line-height:1.2; color:var(--green); }
.eyebrow { color:var(--gold); font-size:.75rem; font-weight:600; letter-spacing:.14em; margin-bottom:4px; }
.subtitle { margin-top:2px; color:var(--muted); font-size:.95rem; }
.subtitle.gold{
    color: var(--gold);
    font-weight:700;
}
.card,.login-card { background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:0 7px 22px rgba(47,79,70,.055); }
.card { padding:18px; }
.section-heading { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:10px; }
.section-heading p,.hint { color:var(--muted); font-size:.86rem; }
.actions { display:flex; flex-wrap:wrap; gap:8px; }
.button { min-height:40px; padding:7px 16px; border:1px solid transparent; border-radius:9px; font-weight:700; transition:background .16s ease,transform .16s ease; }
.button:hover:not(:disabled) { transform:translateY(-1px); }
.button:disabled,.text-button:disabled { cursor:not-allowed; opacity:.48; }
.primary { background:var(--green); color:#fff; }
.primary:hover:not(:disabled) { background:var(--green-hover); }
.secondary { color:var(--green); background:#fff; border-color:var(--green); }
.secondary:hover:not(:disabled) { background:#f1f6f3; }
.clear-button {
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--gold);
  border-radius: 8px;
  background: #fff;
  color: var(--green);
  font-size: .82rem;
  font-weight: 700;
}

.clear-button:hover:not(:disabled) {
  background: #fbf7ee;
  border-color: var(--gold-light);
}

.clear-button:disabled {
  cursor: not-allowed;
  opacity: .48;
}
.full { width:100%; }
.drop-zone { margin-top:7px; min-height:80px; display:grid; place-content:center; text-align:center; border:1.5px dashed var(--gold-light); border-radius:10px; color:var(--green); background:#fdfcf9; transition:background .16s ease,border-color .16s ease; }
.drop-zone.is-active { background:#f2f6f3; border-color:var(--green); }
.drop-zone p { font-weight:700; }
.drop-zone small { color:var(--muted); margin-top:2px; }
.drop-mark { display:block; font-size:1.2rem; line-height:1; color:var(--gold); margin-bottom:3px; }
.message { min-height:1.15rem; margin-top:4px; color:var(--muted); font-size:.86rem; }
.message.error { color:var(--error); }
.list-heading { align-items:center; }
.text-button { color:var(--green); border:0; background:transparent; padding:6px 0; font-weight:700; }
.text-button:hover:not(:disabled) { color:var(--green-hover); text-decoration:underline; }
.file-list { max-height:236px; overflow-y:auto; border-top:1px solid var(--line); }
.file-row { display:grid; grid-template-columns:36px minmax(0,1fr) 120px 66px auto; gap:10px; align-items:center; padding:9px 4px; border-bottom:1px solid #eee9e1; font-size:.91rem; }
.page-number { color:var(--gold); font-weight:800; text-align:center; }
.file-name { min-width:0; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-path { display:block; color:var(--muted); font-size:.76rem; font-weight:400; overflow:hidden; text-overflow:ellipsis; }
.metadata { color:var(--muted); font-size:.82rem; white-space:nowrap; }
.remove-button { min-height:40px; padding:6px 10px; border:1px solid #e7cbcb; border-radius:7px; background:#fff; color:var(--error); font-size:.8rem; }
.remove-button:hover { background:#fff6f6; }
.empty-state { padding:10px 4px; color:var(--muted); text-align:center; }
.filename-field { display:flex; align-items:center; width:min(100%,560px); border:1px solid var(--line); border-radius:9px; overflow:hidden; background:#fff; }
.filename-field:focus-within { border-color:var(--green); box-shadow:0 0 0 3px rgba(47,79,70,.12); }
.filename-field input { width:100%; min-height:42px; border:0; outline:0; padding:9px 14px; min-width:0; }
.filename-field span { padding:0 14px; color:var(--muted); border-left:1px solid var(--line); }
.hint { margin:4px 0 7px; }
.hint strong { color:var(--green); font-weight:700; word-break:break-all; }
.progress-panel { margin-top:10px; max-width:560px; }
.progress-panel p { color:var(--green); font-weight:700; font-size:.9rem; margin-bottom:5px; }
.progress-track { height:8px; overflow:hidden; border-radius:99px; background:#ebe7df; }
.progress-track span { display:block; height:100%; width:0; background:var(--gold); transition:width .16s ease; }
.result-card { padding:14px 18px; border-top:3px solid var(--gold); }
.result-summary { font-weight:700; color:var(--green); }
.failure-list { margin:8px 0 0; padding:0; list-style:none; }
.failure-list li { padding:8px 0; border-top:1px solid #f0ddd8; color:var(--error); font-size:.9rem; }
.failure-list strong { display:block; }
.login-view { min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:24px; }
.login-card { width:min(100%,440px); margin:0; padding:35px; }
.login-card form { display:grid; gap:10px; margin-top:28px; }
.login-card label { font-weight:700; }
.password-row { display:flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.password-row:focus-within { border-color:var(--green); box-shadow:0 0 0 3px rgba(47,79,70,.12); }
.password-row input { width:100%; min-width:0; border:0; outline:0; padding:12px; }
.icon-button { border:0; border-left:1px solid var(--line); background:#fff; padding:0 12px; color:var(--green); font-size:.82rem; font-weight:700; }
.login-card .message { margin:0; }
@media (max-width:620px) {
  .shell { width:min(100% - 24px,920px); padding:24px 0 42px; }
  .app { gap:16px; }
  .app-header { padding:0 4px 2px; }
  h1 { line-height:1.15; }
  .eyebrow { margin-bottom:6px; }
  .subtitle { margin-top:4px; }
  .card { padding:20px 16px; }
  .section-heading { display:block; margin-bottom:14px; }
  .section-heading p { margin-top:4px; }
  .list-heading { display:flex; }
  .button { min-height:43px; padding:10px 18px; }
  .file-list { max-height:264px; }
  .file-row { grid-template-columns:28px minmax(0,1fr) auto; gap:7px; padding:12px 4px; }
  .metadata { display:none; }
  .file-row .metadata:nth-of-type(2) { display:block; grid-column:2; grid-row:2; }
  .remove-button { grid-column:3; grid-row:1 / span 2; }
  .empty-state { padding:22px 4px; }
  .hint { margin:8px 0 16px; }
  .progress-panel { margin-top:16px; }
  .result-card { padding:20px 16px; }
  .folder-control,.drop-zone { display:none; }
  .login-card { padding:27px 22px; }
}