* { box-sizing: border-box; }
body {
  font-family: "Malgun Gothic", "맑은 고딕", sans-serif;
  margin: 0;
  background: #f3f4f6;
  color: #1f2937;
  font-size: 13px;
}
.center {
  max-width: 560px;
  margin: 80px auto;
  text-align: center;
  background: #fff;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.center h1 { font-size: 20px; margin-bottom: 12px; }
.center p { color: #4b5563; line-height: 1.6; }
button {
  cursor: pointer;
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 13px;
}
button.primary { background: #2563eb; color: #fff; border-color: #2563eb; }
button.primary:hover { background: #1d4ed8; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.file-list { list-style: none; padding: 0; text-align: left; }
.file-list li { margin: 6px 0; }
.file-btn { width: 100%; text-align: left; padding: 10px 14px; }
.dropzone {
  margin-top: 20px; padding: 30px; border: 2px dashed #cbd5e1; border-radius: 8px; color: #6b7280;
}
.dropzone.over { border-color: #2563eb; color: #2563eb; background: #eff6ff; }
.hint { color: #9ca3af; font-size: 12px; }

.workspace { display: flex; flex-direction: column; height: 100vh; }
.topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 16px; background: #111827; color: #fff;
}
.topbar-brand { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.topbar-brand b { white-space: nowrap; font-size: 14px; }
.topbar-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.topbar-actions button, .topbar-actions .live-ad-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 32px; margin: 0; padding: 0 12px; border: 1px solid;
  border-radius: 999px; background: transparent; font-size: 12px;
  font-weight: 700; line-height: 1; white-space: nowrap;
}
.topbar-actions #live-ad-count { color: #d1fae5; border-color: #34d399; }
.topbar-actions #published-ad-count { color: #bae6fd; border-color: #38bdf8; }
.live-ad-count.pending { color: #fde68a; border-color: #fbbf24; }
.pending-ad-control { position: relative; }
.topbar-actions #pending-ad-count { color: #fde68a; border-color: #fbbf24; }
.pending-ad-popover {
  position: absolute; z-index: 20; top: calc(100% + 8px); right: 0;
  width: min(340px, calc(100vw - 24px)); max-height: min(420px, 70vh);
  overflow: auto; padding: 10px; color: #1f2937; background: #fff;
  border: 1px solid #cbd5e1; border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.pending-ad-popover[hidden] { display: none; }
.pending-ad-heading { display: flex; justify-content: space-between; align-items: center; padding: 0 2px 8px; font-weight: 700; }
.topbar-actions #pending-ad-close { min-height: 24px; padding: 2px 6px; border: 0; color: #475569; }
.topbar-actions .pending-ad-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  width: 100%; min-height: 0; margin: 0; padding: 8px;
  color: #1f2937; text-align: left; white-space: normal;
  border: 0; border-top: 1px solid #e5e7eb; border-radius: 0;
}
.topbar-actions .pending-ad-item:hover { background: #fef9c3; }
.pending-ad-item small { color: #64748b; font-weight: 400; }
.pending-ad-empty { margin: 6px; color: #64748b; }
.xgrid tr.pending-ad-target td { outline: 2px solid #f59e0b; outline-offset: -2px; }
.topbar-actions #save-btn, .topbar-actions #readonly-export-btn { color: #e2e8f0; border-color: #94a3b8; }
.topbar-actions #save-btn.needs-save { color: #fecaca; border-color: #f87171; }
.topbar-actions #commit-btn { color: #fff; background: #2563eb; border-color: #2563eb; }
.topbar-actions #commit-btn:hover { background: #1d4ed8; }
.topbar-actions #reset-btn { color: #cbd5e1; border-color: #64748b; }
.topbar-actions #switch-login-btn { color: #fff; border-color: #94a3b8; background: #26364f; }
.topbar-actions button:not(:disabled):hover { filter: brightness(1.18); }
.save-status { font-size: 12px; white-space: nowrap; }
.save-status.ok { color: #86efac; }
.save-status.saving { color: #fbbf24; }
.save-status.dirty { color: #fca5a5; font-weight: bold; }
.banner-warn { background: #fef3c7; color: #92400e; padding: 8px 16px; font-size: 12px; }
.body { flex: 1; display: flex; overflow: hidden; }
.main-col { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.side-col { width: 320px; flex-shrink: 0; overflow-y: auto; background: #fff; border-left: 1px solid #e5e7eb; padding: 12px; }

.tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; background: #e5e7eb; padding: 4px 4px 0; }
.show-hidden-toggle { margin-left: auto; font-size: 12px; color: #4b5563; display: flex; align-items: center; gap: 4px; padding: 4px 8px; }
.tab { border-radius: 4px 4px 0 0; border-bottom: none; background: #f3f4f6; }
.tab.active { background: #fff; font-weight: bold; border-color: #9ca3af; }
.region-annual-totals { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin: 0 8px 4px 12px; padding: 6px 12px; background: #fff; border: 1px solid #cbd5e1; border-radius: 6px; color: #172033; font-size: 13px; }
.region-annual-totals strong { color: #183a69; }
.region-annual-totals b { font-size: 15px; }

.grid-holder { flex: 1; overflow: auto; background: #fff; }
.rules-layout { display: flex; align-items: flex-start; gap: 24px; width: max-content; min-width: 100%; }
.rules-table { flex: none; }
.rules-memo { box-sizing: border-box; flex: none; width: 400px; margin: 18px 24px 24px 0; padding: 20px 22px; background: #fffdf7; border: 1px solid #e7d6a4; border-left: 5px solid #d9a226; border-radius: 10px; box-shadow: 0 4px 16px #10213e12; color: #172033; }
.rules-memo h2 { margin: 0 0 5px; font-size: 19px; color: #10213e; }
.rules-memo > p { margin: 0 0 16px; font-size: 12px; color: #64748b; }
.rules-memo ol { margin: 0; padding-left: 22px; }
.rules-memo li { padding: 0 0 14px 4px; line-height: 1.5; font-size: 13px; white-space: normal; overflow-wrap: anywhere; }
.rules-memo li:last-child { padding-bottom: 0; }
.rules-memo li strong { display: block; margin-bottom: 3px; color: #183a69; }
.rules-memo li span { display: block; }
.rules-memo-note { display: block; margin-top: 6px; color: #805710; font-size: 12px; font-weight: 600; }
.month-copy-toolbar {
  display: flex; flex: 0 0 auto; align-items: center; gap: 8px;
  padding: 8px 12px; background: #f8fafc; border-bottom: 1px solid #e5e7eb;
  color: #334155; font-size: 12px;
}
.month-copy-toolbar select { padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 5px; background: #fff; font-size: 12px; }
.month-copy-toolbar button { padding: 6px 12px; font-weight: 600; }
.month-copy-toolbar #copy-month-status { color: #64748b; }
.month-copy-toolbar #copy-month-status.copy-success { color: #15803d; }
@media (max-width: 1250px) {
  .topbar { flex-wrap: wrap; }
}
@media (max-width: 700px) {
  .workspace { height: auto; min-height: 100vh; }
  .topbar { flex-wrap: wrap; gap: 8px; }
  .topbar-actions { display: flex; flex-wrap: wrap; gap: 6px; }
  .body { display: block; overflow: visible; }
  .main-col { width: 100%; overflow: visible; }
  .tabs { max-height: 132px; overflow: auto; }
  .grid-holder { height: 50vh; min-height: 280px; flex: none; }
  .side-col { width: 100%; overflow: visible; border-left: 0; border-top: 1px solid #e5e7eb; }
  .month-copy-toolbar { flex-wrap: wrap; }
}
table.xgrid { border-collapse: collapse; font-size: 12px; }
table.xgrid td {
  border: 1px solid #e5e7eb; padding: 2px 6px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 260px;
}
table.xgrid td.xsummary-title { position: relative; z-index: 1; max-width: none; overflow: visible; text-overflow: clip; white-space: nowrap; background: #fff; }
.summary-region-content { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 190px; }
.summary-region-content small { color: #475569; font-size: 11px; font-weight: 600; white-space: nowrap; }
table.xgrid tr.excel-hidden-row { background: #fafafa; color: #9ca3af; }
table.xgrid tr.excel-hidden-row td { font-style: italic; }
table.xgrid td.xcell-editable { cursor: text; }
table.xgrid td.xcell-editable:hover { outline: 1px solid #93c5fd; outline-offset: -1px; }
table.xgrid td.xcell-editing { padding: 0; }
table.xgrid td.xcell-editing input {
  width: 100%; box-sizing: border-box; border: 2px solid #2563eb; padding: 1px 5px;
  font-size: 12px; font-family: inherit;
}
table.xgrid td.xrow-delete-cell { padding: 0; text-align: center; background: #fff; border-color: #f3f4f6; }
table.xgrid .xrow-delete-btn {
  width: 20px; height: 20px; border: none; background: transparent; color: #d1d5db;
  cursor: pointer; font-size: 12px; line-height: 1; padding: 0;
}
table.xgrid .xrow-delete-btn:hover { color: #dc2626; background: #fee2e2; border-radius: 3px; }
table.xgrid td.xrow-move-cell { width: 78px; min-width: 78px; max-width: 78px; padding: 1px 2px; text-align: center; background: #fff; border-color: #f3f4f6; overflow: visible; }
table.xgrid .xrow-move-select { width: 74px; min-width: 74px; font-size: 11px; padding: 2px 0; border: 1px solid #d1d5db; border-radius: 3px; color: #334155; }
table.xgrid .xrow-move-select:hover { border-color: #93c5fd; color: #1f2937; }
table.xgrid td.xunclassified-move-cell { width: 78px; min-width: 78px; max-width: 78px; padding: 1px 2px; overflow: visible; }
table.xgrid .unclassified-inline-move { width: 74px; padding: 3px 0; border: 1px solid #94a3b8; border-radius: 4px; background: #fff; color: #172033; font-size: 11px; }

.panel-box { border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; margin-bottom: 14px; }
.side-section { border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 8px; background: #fff; }
.side-section > summary { cursor: pointer; padding: 11px 12px; font-size: 14px; font-weight: 700; }
.side-section > summary:hover { background: #f8fafc; }
.side-section > .panel-box { border: 0; border-top: 1px solid #e5e7eb; border-radius: 0; padding: 10px 12px 12px; margin: 0; }
.panel-box h3 { margin: 0 0 8px; font-size: 14px; }
.panel-box label { display: block; margin: 8px 0 2px; font-size: 12px; color: #4b5563; }
.panel-box input, .panel-box select { width: 100%; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 13px; }
.panel-box button { margin-top: 10px; width: 100%; }
.success { color: #15803d; }
.error { color: #b91c1c; }
.change-list { max-height: 160px; overflow-y: auto; font-size: 11px; color: #6b7280; padding-left: 16px; }
.bulk-dropzone {
  border: 2px dashed #d1d5db; border-radius: 8px; padding: 20px; text-align: center;
  color: #6b7280; font-size: 13px; cursor: pointer; margin-top: 8px;
}
.bulk-dropzone.drag-over { border-color: #2563eb; background: #eff6ff; color: #2563eb; }
.bulk-summary { font-size: 13px; padding-left: 18px; }
.panel-box details { font-size: 12px; margin: 6px 0; }
.panel-box details ul { max-height: 200px; overflow-y: auto; padding-left: 18px; }
#bulk-cancel-btn { background: #f3f4f6; }
.unclassified-row { display: flex; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid #f3f4f6; }
.unclassified-row-label { flex: 1; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unclassified-row .move-target { width: auto; flex: 0 0 110px; padding: 4px; font-size: 12px; }
.unclassified-row .move-btn { width: auto; margin-top: 0; padding: 4px 10px; font-size: 12px; }
#unclassified-rows { max-height: 320px; overflow-y: auto; }
.log-list { list-style: none; padding: 0; font-size: 12px; }
.log-list li { padding: 6px 0; border-bottom: 1px solid #f3f4f6; }
.verification-list { max-height: 340px; overflow-y: auto; margin-top: 8px; }
.verification-row { display: flex; flex-direction: column; gap: 3px; padding: 8px 0; border-top: 1px solid #e5e7eb; font-size: 12px; }
.verification-row > span { color: #4b5563; }

.month-group{margin:10px 0;border:1px solid #cbd5e1;border-radius:5px;overflow:hidden}.month-group summary{cursor:pointer;background:#eef2f7;padding:12px 14px;font-weight:bold}.month-group[open] summary{background:#dbeafe}.month-group-table{overflow:auto;padding:6px}.month-group .hint{padding:10px}

.month-tabs{display:flex;gap:5px;align-items:center;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid #cbd5e1;margin-bottom:10px}.month-tabs strong{margin-right:8px;color:#334155}.month-tabs .month-tab{min-width:48px;padding:7px 10px;border:1px solid #cbd5e1;border-radius:5px;background:#fff;color:#475569}.month-tabs .month-tab[aria-pressed="true"]{background:#12366a;border-color:#12366a;color:#fff;font-weight:700}.month-panel[hidden]{display:none!important}.month-panel-heading{font-size:15px;font-weight:700;color:#12366a;padding:8px 0}.month-group-table{padding:0;overflow:auto}.month-groups .xgrid{width:max-content;min-width:100%}

.invoice-month{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:4px 0 12px}.invoice-month-button{padding:9px 12px}.invoice-month-status{color:#64748b;font-size:13px}.invoice-month-status.is-confirmed,.invoice-confirmed{color:#dc2626!important}.invoice-month-message{flex-basis:100%;padding:10px;background:#eff6ff;margin:0}.invoice-status-list p{margin:8px 0;font-size:13px}
.pending-jump-notice { padding:8px 12px; background:#eff6ff; color:#12366a; display:flex; gap:12px; align-items:center; }

#readonly-export-btn { min-width: 34px; font-size: 21px; line-height: 1; padding: 6px 9px; }
#readonly-export-result { color: #cbd5e1; font-size: 12px; white-space: nowrap; }

#readonly-export-btn, #readonly-export-result { animation: none !important; transition: none !important; }

#invoice-mail-draft { width: min(1100px, 92vw); max-height: 85vh; border: 1px solid #cbd5e1; border-radius: 10px; padding: 24px; color: #172033; }
#invoice-mail-draft::backdrop { background: #0007; }
#invoice-mail-draft label { display: flex; gap: 12px; align-items: center; margin: 12px 0; }
#invoice-mail-draft input { flex: 1; padding: 8px; min-width: 0; }
#invoice-mail-draft .draft-body { overflow: auto; padding: 12px; border: 1px solid #e2e8f0; background: white; }
#invoice-mail-draft .draft-actions { display: flex; gap: 8px; justify-content: flex-end; }

.viewer { padding:24px 28px; max-width:1920px; margin:0 auto; }
.viewer header { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:20px; }
.viewer header h1 { font-size:25px; line-height:1.3; margin:0; letter-spacing:-.5px; }
.viewer header span { color:#64748b; font-size:12px; }
.viewer header #logout { margin-left:auto; }
.viewer .totals { display:flex; align-items:center; gap:24px; flex-wrap:wrap; padding:16px 18px; margin:0 0 20px; background:#fff; border:1px solid #dce3ed; border-radius:8px; }
.viewer .cumulative-title { color:#12366a; font-size:14px; }
.viewer .grid-holder { max-height:none; overflow:visible; }
.viewer .month-groups { background:#fff; border:1px solid #dce3ed; border-radius:8px; overflow:hidden; }
.viewer .month-tabs { padding:14px 18px; margin:0; gap:8px; background:#f8fafc; }
.viewer .month-tab { min-width:54px; padding:9px 14px; }
.viewer .month-panel { padding:18px; }
.viewer .month-panel-heading { padding:0; margin:0 0 12px; font-size:16px; }
.viewer .invoice-month { margin:0 0 18px; gap:12px; }
.viewer .invoice-month-button { padding:10px 14px; }
.viewer .invoice-month-message { border-radius:6px; line-height:1.7; }
.viewer .month-group-table { overflow:auto; max-height:65vh; border:1px solid #dce3ed; }
.viewer .xgrid tr { height:30px !important; }
.viewer .xgrid td { height:30px; padding:6px 8px; line-height:1.4; vertical-align:middle; }
.viewer .xgrid tr:has(td[style*="font-weight:bold"]) { height:34px !important; }
.viewer > p { margin:14px 0 0; color:#64748b; font-size:12px; line-height:1.6; }
.viewer .sheet-selector { display:flex; align-items:center; gap:12px; margin:0 0 20px; }
.viewer #sheet-select { min-width:220px; padding:10px 12px; border:1px solid #cbd5e1; border-radius:6px; background:white; font:inherit; }
.viewer #sheet-content > .viewer { padding:0; }
.viewer #sheet-content > .viewer header { margin-bottom:14px; }
.viewer #sheet-content > .viewer header h1 { font-size:19px; }
.viewer #sheet-content > .grid-holder { overflow:auto; max-height:75vh; background:#fff; border:1px solid #dce3ed; }
.center label { display:block; text-align:left; }
.center input,.center button,.center select { padding:10px; margin:8px 0; width:100%; }
@media(max-width:700px) {
 .viewer { padding:16px 12px; }
 .viewer header { gap:10px; margin-bottom:16px; }
 .viewer header h1 { font-size:21px; }
 .viewer header span { order:3; width:100%; }
 .viewer .totals { gap:10px 18px; padding:14px; margin-bottom:16px; }
 .viewer .cumulative-title { width:100%; }
 .viewer .month-tabs { padding:12px; gap:6px; }
 .viewer .month-panel { padding:14px 12px; }
}
.month-review-row{display:flex;align-items:flex-start;gap:24px;flex-wrap:wrap;margin-bottom:18px}.month-review-row .invoice-month{margin:0;flex-shrink:0}.missing-advertisers{flex:1;min-width:260px;padding:10px 14px;background:#fff7f7;border:1px solid #fecaca;border-radius:6px;color:#9f1239;line-height:1.7}.missing-advertisers small{display:block;color:#64748b;font-size:11px;margin-top:4px}