/* 모던 테마 — 화면 구성·키 순서는 클래식과 같고 모양만 요즘 웹 화면처럼.
   <html data-theme="modern"> 일 때만 적용된다 (클래식은 app.css 그대로). */

[data-theme="modern"] {
  --m-bg: #f2f4f7;
  --m-surface: #ffffff;
  --m-subtle: #f8f9fb;
  --m-hover: #f1f4f8;
  --m-border: #e4e7ec;
  --m-border-2: #d0d5dd;
  --m-text: #1d2433;
  --m-muted: #667085;
  --m-accent: #2563eb;
  --m-accent-2: #1d4ed8;
  --m-accent-soft: #eaf1ff;
  --m-accent-ring: rgba(37, 99, 235, 0.2);
  --m-radius: 10px;
  --m-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --m-shadow: 0 10px 28px rgba(16, 24, 40, 0.12), 0 2px 6px rgba(16, 24, 40, 0.06);
  --m-shadow-lg: 0 24px 56px rgba(16, 24, 40, 0.22);

  /* 클래식 변수 덮어쓰기 → 3D 테두리가 평평한 1px 선이 된다 */
  --face: var(--m-surface);
  --face-2: var(--m-subtle);
  --face-hi: var(--m-border);
  --face-lo: var(--m-border);
  --face-dk: var(--m-border-2);
  --ink: var(--m-text);
  --ink-soft: var(--m-muted);
  --panel: var(--m-subtle);
  --panel-2: var(--m-subtle);
  --ledger-1: #fff;
  --ledger-2: #fbfcfd;
  --ledger-line: #eef0f3;
  --grid-head: #f6f7f9;
  --sel: var(--m-accent);
  --focus-bg: #fff;
  --ro-bg: #f6f7f9;
  --name-bg: #f9fafb;
  --good: #067647;
  --bad: #d92d20;
  --font: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Noto Sans KR", system-ui, sans-serif;
}

[data-theme="modern"] body { background: var(--m-bg); letter-spacing: -0.005em; }

/* ───────── 메뉴줄 ───────── */
[data-theme="modern"] #menubar {
  gap: 2px; padding: 6px 12px; background: var(--m-surface); border-bottom: 1px solid var(--m-border);
}
[data-theme="modern"] #menubar .mtop > button {
  border: 0; padding: 6px 12px; border-radius: 8px; color: #344054; font-weight: 500;
}
[data-theme="modern"] #menubar .mtop > button:hover { background: var(--m-hover); }
[data-theme="modern"] #menubar .mtop.open > button { background: var(--m-accent-soft); color: var(--m-accent-2); border: 0; }
[data-theme="modern"] #toolbar .tright { color: var(--m-muted); gap: 12px; }
[data-theme="modern"] #toolbar .tright .out {
  border: 1px solid var(--m-border-2); background: #fff; padding: 5px 12px; border-radius: 8px; color: #344054; font-weight: 600;
  box-shadow: var(--m-shadow-sm);
}
[data-theme="modern"] #toolbar .tright .out:hover { background: var(--m-hover); }

.theme-sw { display: inline-flex; border: 1px solid var(--face-lo); background: var(--face-2); padding: 1px; gap: 1px; }
.theme-sw button { border: 0 !important; background: transparent !important; padding: 1px 9px !important; cursor: pointer; }
.theme-sw button.on { background: var(--face) !important; font-weight: 700; }
[data-theme="modern"] .theme-sw { border-radius: 9px; border-color: var(--m-border); background: #f2f4f7; padding: 2px; }
[data-theme="modern"] .theme-sw button { border-radius: 7px; padding: 3px 11px !important; color: var(--m-muted); }
[data-theme="modern"] .theme-sw button.on { background: #fff !important; color: var(--m-text); box-shadow: var(--m-shadow-sm); font-weight: 600; }

[data-theme="modern"] .dropmenu {
  padding: 6px; border: 1px solid var(--m-border); border-radius: 12px; background: #fff; box-shadow: var(--m-shadow);
  min-width: 16em; margin-top: 4px;
}
[data-theme="modern"] .dropmenu .mi { padding: 7px 30px 7px 12px; border-radius: 7px; color: var(--m-text); }
[data-theme="modern"] .dropmenu .mi:hover,
[data-theme="modern"] .dropmenu .mi.hot,
[data-theme="modern"] .dropmenu .mi:focus { background: var(--m-accent-soft); color: var(--m-accent-2); outline: none; }
[data-theme="modern"] .dropmenu .mi .key { color: var(--m-muted); opacity: 1; }
[data-theme="modern"] .dropmenu hr { border: 0; border-top: 1px solid var(--m-border); margin: 5px 6px; }
[data-theme="modern"] .dropmenu .sub > .dropmenu { top: -7px; left: calc(100% + 4px); margin-top: 0; }
[data-theme="modern"] .dropmenu .sub > .mi::after { content: "›"; font-size: 1.1em; right: 12px; color: var(--m-muted); }

/* ───────── 도구모음 ───────── */
[data-theme="modern"] #toolbar {
  gap: 4px; padding: 8px 12px; background: var(--m-surface); border-bottom: 1px solid var(--m-border);
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.02);
}
[data-theme="modern"] #toolbar .tb {
  flex-direction: row; gap: 7px; min-width: 0; height: 36px; padding: 0 13px; border: 1px solid transparent;
  border-radius: 9px; color: #344054; font-weight: 600; background: transparent;
}
[data-theme="modern"] #toolbar .tb:hover { background: var(--m-hover); border-color: transparent; }
[data-theme="modern"] #toolbar .tb:active { background: #e8ecf2; }
[data-theme="modern"] #toolbar .tb svg { width: 19px; height: 19px; }
[data-theme="modern"] #toolbar .tb.accent { background: var(--m-accent); color: #fff; }
[data-theme="modern"] #toolbar .tb.accent:hover { background: var(--m-accent-2); }
[data-theme="modern"] #toolbar .sep { height: 22px; background: var(--m-border); margin: 0 6px; }
[data-theme="modern"] #toolbar .logo { color: var(--m-text); font-weight: 700; gap: 10px; padding-left: 12px; border-left: 1px solid var(--m-border); }
[data-theme="modern"] #toolbar .logo::before {
  content: ""; width: 26px; height: 26px; border-radius: 8px; flex: none;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8) ; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}
[data-theme="modern"] #toolbar .logo small { color: var(--m-muted); font-weight: 500; }
.tb .ic-modern { display: none; }
[data-theme="modern"] .tb .ic-modern { display: inline-flex; }
[data-theme="modern"] .tb .ic-classic { display: none; }
.tb .ic-classic, .tb .ic-modern { line-height: 0; }

/* ───────── 바탕 / 상태줄 ───────── */
[data-theme="modern"] #mdi {
  background-color: var(--m-bg);
  background-image: radial-gradient(#dfe3ea 1px, transparent 1.2px);
  background-size: 22px 22px;
}
[data-theme="modern"] #mdi .wallpaper { color: rgba(29, 36, 51, 0.16); right: 28px; bottom: 22px; }
[data-theme="modern"] #statusbar {
  gap: 0; padding: 0 8px; background: var(--m-surface); border-top: 1px solid var(--m-border); color: var(--m-muted); font-size: 0.86em;
}
[data-theme="modern"] #statusbar > span { border: 0; padding: 6px 12px; }
[data-theme="modern"] #statusbar > span + span { border-left: 1px solid var(--m-border); }

/* ───────── 창 ───────── */
[data-theme="modern"] .win {
  background: var(--m-surface); border: 1px solid var(--m-border); border-radius: 12px; box-shadow: var(--m-shadow);
  overflow: hidden;
}
[data-theme="modern"] .win.focus { border-color: #c9d6f0; box-shadow: var(--m-shadow-lg); }
[data-theme="modern"] .win.maxed { border-radius: 0; border: 0; box-shadow: none; }
[data-theme="modern"] .win .wtitle,
[data-theme="modern"] .win.focus .wtitle {
  background: #fff; color: var(--m-muted); padding: 7px 8px 7px 16px; border-bottom: 1px solid var(--m-border);
  font-weight: 600; border-radius: 0; gap: 4px;
}
[data-theme="modern"] .win.focus .wtitle { color: var(--m-text); }
[data-theme="modern"] .win.focus .wtitle .t::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--m-accent);
  margin-right: 9px; vertical-align: middle; position: relative; top: -1px;
}
[data-theme="modern"] .win .wtitle button,
[data-theme="modern"] .dialog .wtitle button {
  width: 28px; height: 26px; border: 0; border-radius: 7px; background: transparent; color: var(--m-muted);
  font-size: 15px; font-weight: 400;
}
[data-theme="modern"] .win .wtitle button:hover,
[data-theme="modern"] .dialog .wtitle button:hover { background: var(--m-hover); color: var(--m-text); }
[data-theme="modern"] .win .wtitle button:last-child:hover,
[data-theme="modern"] .dialog .wtitle button:last-child:hover { background: #fee4e2; color: #b42318; }
[data-theme="modern"] .win .grip { opacity: 0.55; }

[data-theme="modern"] .speed {
  gap: 4px; padding: 7px 10px; background: var(--m-subtle); border-bottom: 1px solid var(--m-border);
}
[data-theme="modern"] .paramsbar { padding: 9px 12px; gap: 8px 14px; border-bottom: 1px solid var(--m-border); background: #fff; }
[data-theme="modern"] .pad { padding: 9px 12px; }
[data-theme="modern"] .split-v > .b { border-top: 1px solid var(--m-border); }
[data-theme="modern"] .split-h { gap: 0; }
[data-theme="modern"] .split-h > * + * { border-left: 1px solid var(--m-border); }
[data-theme="modern"] fieldset { border: 1px solid var(--m-border); border-radius: 10px; padding: 8px 12px 12px; }
[data-theme="modern"] legend { color: var(--m-muted); font-weight: 600; font-size: 0.92em; padding: 0 6px; }
[data-theme="modern"] .lbl { color: #344054; }
[data-theme="modern"] .hint { color: var(--m-muted); }

/* ───────── 입력 ───────── */
[data-theme="modern"] input,
[data-theme="modern"] select,
[data-theme="modern"] textarea {
  height: 2.1em; padding: 1px 8px; border: 1px solid var(--m-border-2); border-radius: 7px; background: #fff;
  box-shadow: var(--m-shadow-sm); color: var(--m-text);
}
[data-theme="modern"] textarea { height: auto; padding: 6px 8px; }
[data-theme="modern"] select { padding-right: 4px; }
[data-theme="modern"] input:focus,
[data-theme="modern"] select:focus,
[data-theme="modern"] textarea:focus {
  outline: none; border-color: var(--m-accent); box-shadow: 0 0 0 3px var(--m-accent-ring); background: #fff;
}
[data-theme="modern"] input[readonly],
[data-theme="modern"] input:disabled,
[data-theme="modern"] select:disabled { background: var(--ro-bg); color: #344054; box-shadow: none; }
[data-theme="modern"] input.name { background: var(--name-bg); }
[data-theme="modern"] input[type="checkbox"],
[data-theme="modern"] input[type="radio"] { box-shadow: none; border-radius: 4px; accent-color: var(--m-accent); }
[data-theme="modern"] input[type="color"] { padding: 2px; }

/* ───────── 단추 ───────── */
[data-theme="modern"] .btn {
  height: 2.15em; padding: 0 13px; gap: 6px; border: 1px solid var(--m-border-2); border-radius: 8px;
  background: #fff; color: #344054; font-weight: 600; box-shadow: var(--m-shadow-sm);
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
[data-theme="modern"] .btn:hover:not(:disabled) { background: var(--m-subtle); border-color: #b9c0cb; }
[data-theme="modern"] .btn:active:not(:disabled) { background: #eef1f5; border-color: var(--m-border-2); }
[data-theme="modern"] .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--m-accent-ring); }
[data-theme="modern"] .btn:disabled { color: #98a2b3; background: #f9fafb; box-shadow: none; }
[data-theme="modern"] .btn.flat { border-color: transparent; background: transparent; box-shadow: none; }
[data-theme="modern"] .btn.flat:hover:not(:disabled) { background: #eceff4; border-color: transparent; }
[data-theme="modern"] .btn.gold,
[data-theme="modern"] .btn.primary {
  background: var(--m-accent); border-color: var(--m-accent); color: #fff;
}
[data-theme="modern"] .btn.gold:hover:not(:disabled),
[data-theme="modern"] .btn.primary:hover:not(:disabled) { background: var(--m-accent-2); border-color: var(--m-accent-2); }
[data-theme="modern"] .btn.run { background: var(--m-accent-soft); border-color: #c7d7fe; color: var(--m-accent-2); }
[data-theme="modern"] .btn.run:hover:not(:disabled) { background: #dce8ff; border-color: #aac4fd; }
[data-theme="modern"] .btn.big { height: 2.6em; border-radius: 10px; }

/* ───────── 코드 검색 ───────── */
[data-theme="modern"] .code-pick { gap: 4px; }
[data-theme="modern"] .code-pick .find { width: 2.1em; height: 2.1em; }
[data-theme="modern"] .popup {
  border: 1px solid var(--m-border); border-radius: 12px; box-shadow: var(--m-shadow); overflow: hidden;
}
[data-theme="modern"] .popup .phead { padding: 7px 10px; background: var(--m-subtle); border-bottom: 1px solid var(--m-border); color: var(--m-muted); }
[data-theme="modern"] .popup td { padding: 5px 10px; border-bottom: 1px solid #f2f4f7; }
[data-theme="modern"] .popup tr:hover td { background: var(--m-subtle); }
[data-theme="modern"] .popup tr.sel td,
[data-theme="modern"] .popup tr.sel:hover td { background: var(--m-accent-soft); color: var(--m-text); }
[data-theme="modern"] .popup tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--m-accent); }
[data-theme="modern"] mark { background: #fdeaa0; border-radius: 2px; }

/* ───────── 격자 ───────── */
[data-theme="modern"] .grid { border: 1px solid var(--m-border); border-radius: 8px; background: #fff; }
[data-theme="modern"] .fill > .grid, [data-theme="modern"] .a > .grid, [data-theme="modern"] .b > .grid { margin: 8px 10px; }
[data-theme="modern"] .grid th {
  background: #f6f7f9; color: #475467; font-weight: 600; font-size: 0.94em; padding: 6px 8px;
  border-right: 1px solid #eceef2; border-bottom: 1px solid var(--m-border);
}
[data-theme="modern"] .grid td { padding: 3px 8px; height: 2em; border-right: 1px solid #f2f4f7; border-bottom: 1px solid #eef0f3; }
[data-theme="modern"] .grid tbody tr:nth-child(even) td { background: #fbfcfd; }
[data-theme="modern"] .grid tbody tr:hover:not(.sel) td { background: #f5f8ff; }
[data-theme="modern"] .grid tbody tr.sel td { background: var(--m-accent-soft); color: #0f1d3d; }
[data-theme="modern"] .grid tbody tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--m-accent); }
[data-theme="modern"] .grid tbody tr.sel td.neg { color: var(--bad); }
[data-theme="modern"] .grid tbody tr.k-carry td { background: #f5f7fa; }
[data-theme="modern"] .grid tbody tr.k-month td,
[data-theme="modern"] .grid tbody tr.k-day td,
[data-theme="modern"] .grid tbody tr.k-sub td { background: #f8f9fb; color: #344054; }
[data-theme="modern"] .grid tbody tr.k-cum td,
[data-theme="modern"] .grid tbody tr.k-sum td { background: #eef2f7; }
[data-theme="modern"] .grid tbody tr.k-section td { background: #eef4ff; color: #1e3a8a; }
[data-theme="modern"] .grid tfoot td { background: #f8fafc; border-top: 1px solid var(--m-border-2); color: var(--m-text); }
[data-theme="modern"] .grid .empty-msg { color: var(--m-muted); padding: 28px; }

[data-theme="modern"] .egrid td input { height: 2em; box-shadow: none; border-radius: 0; }
[data-theme="modern"] .egrid td input:focus { background: #f5f9ff; outline: 2px solid var(--m-accent); outline-offset: -2px; box-shadow: none; }
[data-theme="modern"] .egrid tbody tr.cur td { background: #f7faff !important; }
[data-theme="modern"] .egrid tbody tr.newrow td { background: #fcfcfd; }

/* 합계칸 · 정보칸 */
[data-theme="modern"] .sumpanel { padding: 10px 12px; gap: 6px 8px; border-top: 1px solid var(--m-border); background: var(--m-subtle); }
[data-theme="modern"] .sumpanel input.total { color: var(--m-accent-2); }
[data-theme="modern"] .infobox { gap: 4px 6px; }

/* 탭 */
[data-theme="modern"] .tabs { gap: 4px; padding: 6px 12px 0; border-bottom: 1px solid var(--m-border); }
[data-theme="modern"] .tabs button {
  border: 0; border-bottom: 2px solid transparent; background: transparent; border-radius: 0; padding: 8px 12px;
  color: var(--m-muted); font-weight: 600; top: 1px;
}
[data-theme="modern"] .tabs button:hover { color: var(--m-text); }
[data-theme="modern"] .tabs button.on { color: var(--m-accent-2); border-bottom-color: var(--m-accent); background: transparent; }
[data-theme="modern"] .tabpage { padding: 14px; }

/* ───────── 대화상자 ───────── */
[data-theme="modern"] .modal-back { background: rgba(15, 23, 42, 0.32); backdrop-filter: blur(2px); }
[data-theme="modern"] .dialog { border: 0; border-radius: 14px; box-shadow: var(--m-shadow-lg); background: #fff; overflow: hidden; }
[data-theme="modern"] .dialog .wtitle {
  background: #fff; color: var(--m-text); padding: 12px 10px 4px 18px; font-size: 1.04em; font-weight: 700;
}
[data-theme="modern"] .dialog .dbody { padding: 12px 18px 14px; }
[data-theme="modern"] .dialog .dfoot { padding: 10px 18px 16px; gap: 8px; background: #fff; }
[data-theme="modern"] .dialog .dmsg .icon { font-size: 1.6em; }

[data-theme="modern"] #toast {
  background: #1d2433; color: #fff; border: 0; border-radius: 999px; padding: 10px 20px; font-weight: 600;
  box-shadow: var(--m-shadow);
}
[data-theme="modern"] #toast.err { background: #b42318; color: #fff; }
[data-theme="modern"] #flash { background: #fff; border: 0; border-radius: 14px; box-shadow: var(--m-shadow), 0 0 0 1px rgba(16,24,40,.06); padding: 18px 32px; }
[data-theme="modern"] #flash .fmsg { color: #067647; }
[data-theme="modern"] #flash .fsub { color: #475467; }
[data-theme="modern"] #busy { background: linear-gradient(90deg, transparent, var(--m-accent), transparent); background-size: 200% 100%; }

/* 달력 · 차트 · 계산기 */
[data-theme="modern"] .cal { gap: 6px; padding: 10px; }
[data-theme="modern"] .cal .dow { background: transparent; color: var(--m-muted); font-weight: 600; }
[data-theme="modern"] .cal .day { border: 1px solid var(--m-border); border-radius: 8px; padding: 5px 7px; }
[data-theme="modern"] .cal .day.today { outline: 2px solid var(--m-accent); }
[data-theme="modern"] .chart { border: 1px solid var(--m-border); border-radius: 10px; margin: 8px 10px; }
[data-theme="modern"] .calc .disp { border-radius: 8px; }

/* ───────── 로그인 ───────── */
[data-theme="modern"] body.login {
  background: radial-gradient(1200px 600px at 15% 10%, #e0eaff 0, transparent 60%),
    radial-gradient(900px 500px at 90% 90%, #e6f4ef 0, transparent 55%), #f4f6f9;
}
[data-theme="modern"] body.login .dialog { width: min(400px, 92vw); border-radius: 18px; box-shadow: 0 30px 70px rgba(16, 24, 40, 0.18); }
[data-theme="modern"] body.login .dialog .wtitle { display: none; }
[data-theme="modern"] body.login .dbody { padding: 34px 32px 8px; }
[data-theme="modern"] body.login .brand { margin: 0 0 26px; color: var(--m-text); }
[data-theme="modern"] body.login .brand::before {
  content: ""; display: block; width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 12px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8); box-shadow: 0 8px 18px rgba(37, 99, 235, 0.3);
}
[data-theme="modern"] body.login .brand b { font-size: 1.7em; letter-spacing: -0.01em; }
[data-theme="modern"] body.login .brand span { letter-spacing: 0.2em; color: var(--m-muted); font-weight: 600; }
[data-theme="modern"] body.login .formgrid { grid-template-columns: 1fr; gap: 6px; }
[data-theme="modern"] body.login .formgrid .lbl { text-align: left; font-weight: 600; font-size: 0.92em; margin-top: 6px; }
[data-theme="modern"] body.login input:not([type="checkbox"]) { height: 2.7em; border-radius: 10px; }
[data-theme="modern"] body.login .dfoot { padding: 6px 32px 30px; }
[data-theme="modern"] body.login .dfoot .btn { height: 2.9em; border-radius: 10px; font-size: 1.02em; }