:root {
  --creative-222b2b: #222b2b;
  --creative-f5f7f6: #f5f7f6;
  --creative-white: #ffffff;
  --creative-cbd5d2: #cbd5d2;
  --creative-eef4f1: #eef4f1;
  --creative-667e76: #667e76;
  --creative-18786d: #18786d;
  --creative-106156: #106156;
  --creative-ac2947: #ac2947;
  --creative-4265ba: #4265ba;
  --creative-d6ddda: #d6ddda;
  --creative-fff: #fff;
  --creative-165e55: #165e55;
  --creative-52635f: #52635f;
  --creative-cc4865: #cc4865;
  --creative-f4f6f5: #f4f6f5;
  --creative-e2ede9: #e2ede9;
  --creative-145b51: #145b51;
  --creative-eaf0fb: #eaf0fb;
  --creative-35599f: #35599f;
  --creative-e4f2eb: #e4f2eb;
  --creative-17654f: #17654f;
  --creative-f9edf0: #f9edf0;
  --creative-a73553: #a73553;
  --creative-566661: #566661;
  --creative-315e54: #315e54;
  --creative-576960: #576960;
  --creative-dce3df: #dce3df;
  --creative-52615b: #52615b;
  --creative-c7d2cb: #c7d2cb;
  --creative-263b33: #263b33;
  --creative-52665d: #52665d;
  --creative-d6dfda: #d6dfda;
  --creative-e4eae7: #e4eae7;
  --creative-5c6b64: #5c6b64;
  --creative-7b978d: #7b978d;
  --creative-242e28: #242e28;
  --creative-d0dad4: #d0dad4;
  --creative-587261: #587261;
  --creative-dde5e0: #dde5e0;
  --creative-e6eeea: #e6eeea;
  --creative-607366: #607366;
  --creative-65776a: #65776a;
  --creative-d6dfd9: #d6dfd9;
  --creative-24352c: #24352c;
  --creative-5c7062: #5c7062;
  --creative-607067: #607067;
  --creative-6d6252: #6d6252;
  --creative-edf1ee: #edf1ee;
  --creative-c5d1c9: #c5d1c9;
  --creative-1e2927a6: #1e2927a6;
  --creative-surface: #ffffff;
  --creative-page: #f5f7f6;
  --creative-ink: #202d26;
  --creative-muted: #46584d;
  --creative-border: #c5d2ca;
  --creative-focus: #0f62fe;
  --creative-paper: #ffffff;
  --creative-paper-ink: #202825;
  --creative-preview-label: #ffffffd9;
  color-scheme:light;
}
@media(prefers-color-scheme:dark){
:root:not([data-theme="light"]){
  --creative-222b2b: #edf4ef;
  --creative-f5f7f6: #17221d;
  --creative-white: #17221d;
  --creative-cbd5d2: #43584b;
  --creative-eef4f1: #17221d;
  --creative-667e76: #bacbc0;
  --creative-18786d: hsl(173 48% 72%);
  --creative-106156: hsl(172 48% 72%);
  --creative-ac2947: hsl(346 48% 72%);
  --creative-4265ba: hsl(223 48% 72%);
  --creative-d6ddda: #202c25;
  --creative-fff: #17221d;
  --creative-165e55: hsl(173 48% 72%);
  --creative-52635f: #edf4ef;
  --creative-cc4865: hsl(347 48% 72%);
  --creative-f4f6f5: #17221d;
  --creative-e2ede9: #202c25;
  --creative-145b51: hsl(172 48% 72%);
  --creative-eaf0fb: #17221d;
  --creative-35599f: hsl(220 48% 72%);
  --creative-e4f2eb: #202c25;
  --creative-17654f: hsl(163 48% 72%);
  --creative-f9edf0: #17221d;
  --creative-a73553: hsl(344 48% 72%);
  --creative-566661: #edf4ef;
  --creative-315e54: #edf4ef;
  --creative-576960: #edf4ef;
  --creative-dce3df: #202c25;
  --creative-52615b: #edf4ef;
  --creative-c7d2cb: #43584b;
  --creative-263b33: #edf4ef;
  --creative-52665d: #edf4ef;
  --creative-d6dfda: #202c25;
  --creative-e4eae7: #202c25;
  --creative-5c6b64: #edf4ef;
  --creative-7b978d: #bacbc0;
  --creative-242e28: #edf4ef;
  --creative-d0dad4: #202c25;
  --creative-587261: #edf4ef;
  --creative-dde5e0: #202c25;
  --creative-e6eeea: #202c25;
  --creative-607366: #edf4ef;
  --creative-65776a: #bacbc0;
  --creative-d6dfd9: #202c25;
  --creative-24352c: #edf4ef;
  --creative-5c7062: #edf4ef;
  --creative-607067: #edf4ef;
  --creative-6d6252: #edf4ef;
  --creative-edf1ee: #202c25;
  --creative-c5d1c9: #43584b;
  --creative-1e2927a6: #edf4efa6;
  --creative-surface: #17221d;
  --creative-page: #101a15;
  --creative-ink: #edf4ef;
  --creative-muted: #bacbc0;
  --creative-border: #43584b;
  --creative-focus: #8fbaff;
  --creative-paper: #ffffff;
  --creative-paper-ink: #202825;
  --creative-preview-label: #ffffffd9;
  color-scheme:dark;
}
}
:root[data-theme="dark"]{
  --creative-222b2b: #edf4ef;
  --creative-f5f7f6: #17221d;
  --creative-white: #17221d;
  --creative-cbd5d2: #43584b;
  --creative-eef4f1: #17221d;
  --creative-667e76: #bacbc0;
  --creative-18786d: hsl(173 48% 72%);
  --creative-106156: hsl(172 48% 72%);
  --creative-ac2947: hsl(346 48% 72%);
  --creative-4265ba: hsl(223 48% 72%);
  --creative-d6ddda: #202c25;
  --creative-fff: #17221d;
  --creative-165e55: hsl(173 48% 72%);
  --creative-52635f: #edf4ef;
  --creative-cc4865: hsl(347 48% 72%);
  --creative-f4f6f5: #17221d;
  --creative-e2ede9: #202c25;
  --creative-145b51: hsl(172 48% 72%);
  --creative-eaf0fb: #17221d;
  --creative-35599f: hsl(220 48% 72%);
  --creative-e4f2eb: #202c25;
  --creative-17654f: hsl(163 48% 72%);
  --creative-f9edf0: #17221d;
  --creative-a73553: hsl(344 48% 72%);
  --creative-566661: #edf4ef;
  --creative-315e54: #edf4ef;
  --creative-576960: #edf4ef;
  --creative-dce3df: #202c25;
  --creative-52615b: #edf4ef;
  --creative-c7d2cb: #43584b;
  --creative-263b33: #edf4ef;
  --creative-52665d: #edf4ef;
  --creative-d6dfda: #202c25;
  --creative-e4eae7: #202c25;
  --creative-5c6b64: #edf4ef;
  --creative-7b978d: #bacbc0;
  --creative-242e28: #edf4ef;
  --creative-d0dad4: #202c25;
  --creative-587261: #edf4ef;
  --creative-dde5e0: #202c25;
  --creative-e6eeea: #202c25;
  --creative-607366: #edf4ef;
  --creative-65776a: #bacbc0;
  --creative-d6dfd9: #202c25;
  --creative-24352c: #edf4ef;
  --creative-5c7062: #edf4ef;
  --creative-607067: #edf4ef;
  --creative-6d6252: #edf4ef;
  --creative-edf1ee: #202c25;
  --creative-c5d1c9: #43584b;
  --creative-1e2927a6: #edf4efa6;
  --creative-surface: #17221d;
  --creative-page: #101a15;
  --creative-ink: #edf4ef;
  --creative-muted: #bacbc0;
  --creative-border: #43584b;
  --creative-focus: #8fbaff;
  --creative-paper: #ffffff;
  --creative-paper-ink: #202825;
  --creative-preview-label: #ffffffd9;
  color-scheme:dark;
}
:root { color-scheme: light; font-family: system-ui,-apple-system,"Segoe UI","Noto Sans KR",sans-serif; color: var(--creative-222b2b); background: var(--creative-f5f7f6); font-size: 14px; letter-spacing: 0; }
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select, textarea { font: inherit; letter-spacing: 0; }
button, select { cursor: pointer; }
button { min-height: 38px; padding: 8px 12px; background: var(--creative-white); border: 1px solid var(--creative-cbd5d2); border-radius: 5px; color: inherit; overflow-wrap: anywhere; }
button:hover:not(:disabled) { background: var(--creative-eef4f1); border-color: var(--creative-667e76); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary { background: var(--creative-18786d); color: var(--creative-white); border-color: var(--creative-18786d); }
button.primary:hover:not(:disabled) { background: var(--creative-106156); }
button.danger { color: var(--creative-ac2947); }
button.icon { font-size: 20px; width: 38px; height: 38px; padding: 4px; flex: 0 0 38px; }
:focus-visible { outline: 3px solid var(--creative-4265ba); outline-offset: 3px; }
[hidden] { display: none !important; }
.app-header { padding: 16px 28px; display: flex; align-items: center; flex-wrap: wrap; gap: 20px; border-bottom: 1px solid var(--creative-d6ddda); background: var(--creative-fff); }
.brand { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-right: auto; }
h1 { margin: 0; font-size: 32px; font-weight: 750; color: var(--creative-165e55); }
.brand span { color: var(--creative-52635f); font-size: 14px; }
.brand small { border-bottom: 2px solid var(--creative-cc4865); font-size: 12px; }
.segments { display: flex; padding: 4px; border: 1px solid var(--creative-cbd5d2); border-radius: 6px; background: var(--creative-f4f6f5); }
.segments button { border: 0; background: transparent; white-space: nowrap; }
.segments button[aria-pressed="true"] { background: var(--creative-e2ede9); color: var(--creative-145b51); font-weight: 700; }
.tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
main { max-width: 1350px; margin: 0 auto; padding: 24px 28px 40px; }
.status-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 28px; }
.state { font-size: 12px; font-weight: 700; padding: 4px 8px; border-left: 3px solid; background: var(--creative-eaf0fb); color: var(--creative-35599f); }
.state.private { background: var(--creative-e4f2eb); color: var(--creative-17654f); }
.state.locked { background: var(--creative-f9edf0); color: var(--creative-a73553); }
#save-state { font-size: 12px; color: var(--creative-566661); }
#message { min-height: 22px; color: var(--creative-315e54); margin: 8px 0 12px; overflow-wrap: anywhere; }
#message.error { color: var(--creative-ac2947); }
.workspace-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
h2 { font-size: 24px; margin: 8px 0; overflow-wrap: anywhere; }
h3 { font-size: 16px; margin: 0; }
#timeline-caption { color: var(--creative-576960); margin: 0 0 16px; font-size: 14px; }
.filters { display: grid; grid-template-columns: minmax(170px, 2fr) repeat(2, minmax(140px, 1fr)) minmax(100px, 1fr) 38px; align-items: end; gap: 12px; margin: 12px 0 16px; padding: 16px 0; border-top: 1px solid var(--creative-dce3df); border-bottom: 1px solid var(--creative-dce3df); }
label { display: grid; gap: 8px; min-width: 0; color: var(--creative-52615b); font-size: 12px; }
input:not([type="range"]):not([type="checkbox"]), select, textarea { width: 100%; min-width: 0; min-height: 38px; padding: 8px 12px; border: 1px solid var(--creative-c7d2cb); border-radius: 4px; background: var(--creative-fff); color: var(--creative-263b33); }
textarea { resize: vertical; line-height: 1.6; }
input[type="range"] { width: 100%; accent-color: var(--creative-18786d); cursor: pointer; }
.graph-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 12px; color: var(--creative-52665d); font-size: 12px; }
.graph-download { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
#graph-format { width: 74px; height: 38px; }
.zoom { display: flex; align-items: center; gap: 8px; }
.zoom input { width: 100px; }
.zoom output { width: 32px; text-align: right; }
#graph-scroll { overflow-x: auto; overflow-y: hidden; width: 100%; background: var(--creative-fff); border-top: 1px solid var(--creative-d6dfda); border-bottom: 1px solid var(--creative-d6dfda); }
#graph { display: block; height: 340px; min-width: 200px; }
#graph .grid { stroke: var(--creative-e4eae7); stroke-width: 1; }
#graph .axis { fill: var(--creative-5c6b64); font-size: 12px; }
#graph .line { fill: none; stroke: var(--creative-7b978d); stroke-width: 2.5; }
#graph .chronology { stroke-dasharray: 5 5; }
#graph circle { cursor: pointer; stroke: var(--creative-fff); stroke-width: 2.5; }
#graph circle.selected { stroke: var(--creative-242e28); stroke-width: 3; }
#graph circle:focus { stroke: var(--creative-242e28); stroke-width: 4; outline: none; }
.split { display: grid; grid-template-columns: minmax(270px, 1fr) minmax(300px, 1fr); margin-top: 24px; gap: 32px; }
.events { min-width: 0; }
.list-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--creative-d0dad4); }
.list-heading select { width: auto; max-width: 180px; }
#count { color: var(--creative-587261); font-weight: 400; margin-left: 8px; }
#event-list { margin: 0; padding: 0; list-style: none; max-height: 440px; overflow-y: auto; }
#event-list li { border-bottom: 1px solid var(--creative-dde5e0); }
.event-row { width: 100%; border: 0; border-radius: 0; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; text-align: left; padding: 16px 12px; align-items: center; gap: 12px; background: transparent; }
.event-row[aria-pressed="true"] { background: var(--creative-e6eeea); }
.event-row .dot { width: 8px; height: 24px; border-radius: 2px; }
.event-row strong { display: block; overflow-wrap: anywhere; font-size: 14px; font-weight: 600; }
.event-row small { display: block; color: var(--creative-607366); margin-top: 4px; }
.event-row .mood { font-variant-numeric: tabular-nums; min-width: 24px; text-align: right; }
.empty-list { padding: 28px 0; color: var(--creative-65776a); }
#order-tools { padding: 16px 0; }
.editor { min-width: 0; border-left: 1px solid var(--creative-d6dfd9); padding-left: 28px; }
.editor h3 { margin-bottom: 16px; }
#event-form { display: grid; gap: 16px; }
.mood-label { grid-template-columns: 1fr auto; }
.mood-label input { grid-column: 1 / -1; }
.mood-label output { color: var(--creative-18786d); font-size: 16px; font-weight: 650; min-width: 30px; text-align: right; }
.colors { margin: 0; border: 0; padding: 0; }
.colors legend { font-size: 12px; color: var(--creative-52615b); padding: 0; margin-bottom: 8px; }
#swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.swatch { width: 30px; height: 30px; min-height: 30px; border: 3px solid transparent; border-radius: 50%; padding: 0; }
.swatch[aria-pressed="true"] { outline: 2px solid var(--creative-24352c); outline-offset: 2px; }
.editor-actions { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding-bottom: 8px; }
.editor-actions .icon { display: inline-flex; align-items: center; justify-content: center; }
.editor-actions .icon svg { width: 20px; height: 20px; flex: none; }
.detail-date { color: var(--creative-5c7062); font-variant-numeric: tabular-nums; }
#detail-title { font-size: 20px; line-height: 1.5; margin: 12px 0; overflow-wrap: anywhere; }
#detail-mood { color: var(--creative-607067); }
#source-link { display: block; font-size: 12px; color: var(--creative-4265ba); overflow-wrap: anywhere; line-height: 1.7; }
.vault-tools { margin-top: 32px; border-top: 1px solid var(--creative-d6dfd9); padding-top: 20px; }
#vault-gate { max-width: 420px; padding: 24px 0 44px; }
#vault-form { display: grid; gap: 16px; margin: 24px 0; }
#gate-note { font-size: 14px; color: var(--creative-6d6252); line-height: 1.7; }
footer { padding: 16px 28px; background: var(--creative-edf1ee); color: var(--creative-607366); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 12px; }
dialog { width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 48px); padding: 28px; border: 1px solid var(--creative-c5d1c9); border-radius: 8px; color: var(--creative-24352c); background: var(--creative-fff); }
dialog::backdrop { background: var(--creative-1e2927a6); }
dialog h2 { font-size: 20px; margin-top: 0; }
dialog p { line-height: 1.7; overflow-wrap: anywhere; }
#example-name { margin-top: 20px; }
#example-events { list-style: none; margin: 0; padding: 0; }
#example-events li { display: grid; gap: 8px; padding: 16px 0; border-top: 1px solid var(--creative-d6dfd9); overflow-wrap: anywhere; }
#example-events time { color: var(--creative-52615b); font-variant-numeric: tabular-nums; }
#example-events a { color: var(--creative-4265ba); font-size: 12px; }
.dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.check-label { display: flex; flex-direction: row; align-items: start; gap: 8px; color: var(--creative-ac2947); line-height: 1.6; }
.check-label input { margin-top: 4px; }
#import-error, #rename-error, #change-password-error { color: var(--creative-ac2947); }
#change-password-form { display: grid; gap: 16px; }
#restore-samples { padding-left: 24px; line-height: 1.8; overflow-wrap: anywhere; }
.graph-bar > label:not(.zoom) { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
#line-mode { width: 100px; }
@media (max-width: 850px) {
  .app-header { padding: 16px 20px; gap: 12px; }
  main { padding: 20px; }
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters .search { grid-column: 1 / -1; }
  .filters #reset-filters { justify-self: end; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .editor { padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--creative-d6dfd9); }
  #event-list { max-height: 300px; }
}
@media (max-width: 430px) {
  .brand { flex-basis: 100%; }
  .app-header { gap: 12px; }
  .app-header .tools { margin-left: auto; gap: 4px; }
  .segments button { padding: 8px; font-size: 14px; }
  .workspace-heading .tools { width: 100%; }
  .workspace-heading select { flex: 1; width: 130px; }
  main { padding: 16px; }
  .graph-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  #graph-label { grid-column: 1 / -1; overflow-wrap: anywhere; }
  .graph-bar .zoom { grid-column: 1 / -1; }
  .graph-download { grid-column: 2; grid-row: 2; }
  #privacy { width: 32px; flex-basis: 32px; }
  #lock { padding: 8px; }
  footer { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }

body{background:var(--creative-page);color:var(--creative-ink);line-height:24px;letter-spacing:0}button,input,select,textarea,summary{letter-spacing:0}button,select,input:not([type=checkbox]):not([type=radio]),summary{min-height:44px}button{min-width:44px;border-radius:4px}button svg,svg.lucide{width:20px;height:20px}:focus-visible{outline:3px solid var(--creative-focus);outline-offset:4px}h1{font-size:32px;line-height:40px}h2{font-size:24px;line-height:32px}h3{font-size:16px;line-height:24px}small,label,legend{line-height:20px}main,.workspace,.workbench,header,footer{min-width:0}main{max-width:1280px}p,output,code,strong{overflow-wrap:anywhere}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:0s!important;transition-duration:0s!important}}
.app-header{padding:16px 24px;gap:16px}.brand{gap:8px}main{padding:24px}.filters{grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr)) minmax(0,1fr) 44px;gap:16px}.tools,.segments{gap:8px}button.icon,#privacy{width:44px;height:44px;flex-basis:44px}.swatch{min-width:44px;width:44px;height:44px;min-height:44px}.split{gap:32px}.editor{padding-left:24px}dialog{padding:24px;overflow:auto}dialog h2{font-size:24px}#graph-scroll{background:var(--creative-surface)}#graph .grid{stroke:var(--creative-border)}#graph .axis{fill:var(--creative-muted)}#graph circle.selected,#graph circle:focus{stroke:var(--creative-ink)}#save-state,#timeline-caption,label,.brand span{color:var(--creative-muted)}#graph-format{height:44px}#event-form,.dialog-actions{gap:16px}.check-label{min-height:44px;align-items:center}.check-label input{margin-top:0}@media(max-width:850px){.filters{grid-template-columns:repeat(2,minmax(0,1fr))}.split{grid-template-columns:minmax(0,1fr)}.editor{padding:24px 0 0}}@media(max-width:480px){main,.app-header,dialog{padding:16px}.segments{max-width:100%}.segments button{font-size:14px}.workspace-heading .tools{gap:8px}}
.editor-actions .icon{min-width:44px;min-height:44px}dialog input[type=checkbox]{width:20px;height:20px}
#graph{max-width:none}
.event-row small,footer,#footer-state{color:var(--creative-muted)}#graph circle:focus-visible{outline:3px solid var(--creative-focus);outline-offset:4px}