html { color-scheme:light dark; background:light-dark(#f6f7f3,#191e1b); }
body { margin:0; padding:24px; font-family:Arial,"Noto Sans KR",sans-serif; }
button { cursor:pointer; touch-action:manipulation; }
button:focus-visible, a:focus-visible { outline:2px solid light-dark(#365b42,#c4dbb9); outline-offset:3px; }
button:disabled { cursor:default; opacity:.45; }
main { max-width:1280px; margin:auto; }

    #haru-dose-calendar { --paper:light-dark(#f6f7f3,#191e1b); --panel:light-dark(#ffffff,#232a25); --ink:light-dark(#243e31,#e6ece8); --sub:light-dark(#66766c,#a4b5a9); --line:light-dark(#dfe5dc,#3b493f); --sage:light-dark(#e3ecdf,#344d39); --deep:light-dark(#365b42,#c4dbb9); --btntext:light-dark(#ffffff,#213325); color:var(--ink); background:var(--paper); padding:28px; border-radius:20px; font-family:Arial,'Noto Sans KR',sans-serif; font-size:14px; line-height:1.5; color-scheme:light dark; }
    #haru-dose-calendar { position:relative; }
    #haru-dose-calendar * { box-sizing:border-box; }
    #haru-dose-calendar button { font:inherit; color:inherit; }
    #haru-dose-calendar .hc-title { margin:0 0 18px; padding-right:0; font-size:16pt; font-weight:500; letter-spacing:-.5px; }
    #haru-dose-calendar .hc-today { border:0; background:var(--deep); color:var(--btntext); border-radius:10px; padding:11px 16px; font-weight:500; }
    #haru-dose-calendar .hc-bar { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 18px; padding-right:0; }
    #haru-dose-calendar .hc-year { font-size:14.5pt; font-weight:500; }
    #haru-dose-calendar .hc-legend { display:flex; align-items:center; flex-wrap:wrap; gap:14px; font-size:12px; color:var(--sub); }
    #haru-dose-calendar .hc-legend span { display:inline-flex; align-items:center; gap:5px; }
    #haru-dose-calendar .hc-dot { width:10px; height:10px; border-radius:3px; background:var(--sage); display:inline-block; }
    #haru-dose-calendar .hc-ring { width:10px; height:10px; border:1px solid var(--deep); border-radius:3px; display:inline-block; }
    #haru-dose-calendar .hc-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
    #haru-dose-calendar .hc-month { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 9px 9px; min-width:0; }
    #haru-dose-calendar .hc-month.current { border-color:var(--deep); }
    #haru-dose-calendar .hc-month-head { display:flex; align-items:center; justify-content:space-between; padding:0 3px; margin-bottom:10px; }
    #haru-dose-calendar h3 { margin:0; font-size:16px; font-weight:500; }
    #haru-dose-calendar .hc-month-note { font-size:11px; color:var(--sub); }
    #haru-dose-calendar .hc-week { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); text-align:center; color:var(--sub); font-size:11px; margin-bottom:5px; }
    #haru-dose-calendar .hc-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; }
    #haru-dose-calendar .hc-day,#haru-dose-calendar .hc-empty { min-width:0; height:37px; }
    #haru-dose-calendar .hc-day { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; border:1px solid var(--line); background:var(--panel); border-radius:4px; padding:1px 0; font-size:12px; font-variant-numeric:tabular-nums; }
    #haru-dose-calendar .hc-day:hover { background:var(--sage); }
    #haru-dose-calendar .hc-day.today { border-color:var(--deep); }
    #haru-dose-calendar .hc-day.done { background:var(--sage); border-color:transparent; }
    #haru-dose-calendar .hc-day.selected { outline:2px solid var(--deep); outline-offset:1px; }
    #haru-dose-calendar .hc-time { font-size:11px; letter-spacing:-.7px; line-height:1.15; color:var(--ink); }
    #haru-dose-calendar .hc-popover { position:absolute; z-index:10; width:136px; padding:10px; background:var(--panel); border:1px solid var(--line); border-radius:10px; box-shadow:0 5px 20px light-dark(#243e3120,#00000050); }
    #haru-dose-calendar .hc-popover[hidden] { display:none; }
    #haru-dose-calendar .hc-popover-label { font-size:12px; color:var(--sub); margin-bottom:7px; }
    #haru-dose-calendar .hc-undo { width:100%; border:1px solid var(--line); background:var(--sage); border-radius:7px; min-height:36px; padding:7px 10px; font-size:13px; }
    #haru-dose-calendar .hc-status { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
    #haru-dose-calendar .hc-foot { margin-top:17px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px; color:var(--sub); font-size:12px; }
    @media(max-width:919px) { #haru-dose-calendar .hc-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
    @media(max-width:680px) { #haru-dose-calendar { padding:19px; } #haru-dose-calendar .hc-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } #haru-dose-calendar .hc-bar { padding-right:0; } }
    @media(max-width:470px) { #haru-dose-calendar .hc-grid { grid-template-columns:1fr; } #haru-dose-calendar .hc-day,#haru-dose-calendar .hc-empty { height:44px; } }
    @media(pointer:coarse) { #haru-dose-calendar .hc-day,#haru-dose-calendar .hc-empty { min-height:44px; } }
  
#haru-dose-calendar .hc-year-control { display:flex; align-items:center; gap:10px; }
#haru-dose-calendar .hc-prev,#haru-dose-calendar .hc-next { background:var(--panel); border:1px solid var(--line); width:36px; height:36px; border-radius:7px; font-size:22px; line-height:1; }
#haru-dose-calendar .hc-backup,#haru-dose-calendar .hc-restore { padding:7px 11px; min-height:36px; border:1px solid var(--line); background:var(--panel); border-radius:7px; font-size:12px; }
#haru-dose-calendar .hc-foot-actions { display:flex; gap:7px; }
#haru-dose-calendar .hc-foot { align-items:center; }
#haru-dose-calendar .hc-feedback { margin-top:12px; color:var(--sub); font-size:13px; min-height:20px; }
#haru-dose-calendar .hc-feedback[data-error="true"] { color:light-dark(#a43431,#ffb6ac); }
#haru-dose-calendar .hc-feedback:empty { display:none; }
#haru-dose-calendar .hc-undo { min-height:44px; }
@media(max-width:680px) { body { padding:0; } #haru-dose-calendar { border-radius:0; } }
@media(pointer:coarse) { #haru-dose-calendar .hc-prev,#haru-dose-calendar .hc-next,#haru-dose-calendar .hc-backup,#haru-dose-calendar .hc-restore { min-width:44px; min-height:44px; } }

#haru-dose-calendar .hc-sync-panel { margin-bottom:20px; padding:15px; border:1px solid var(--line); border-radius:10px; background:var(--panel); }
#haru-dose-calendar .hc-sync-panel[hidden],#haru-dose-calendar .hc-sync-panel [hidden] { display:none; }
#haru-dose-calendar .hc-login { display:flex; align-items:end; gap:8px; flex-wrap:wrap; }
#haru-dose-calendar .hc-login label { display:flex; flex-direction:column; gap:7px; font-size:13px; }
#haru-dose-calendar .hc-password { font:inherit; width:220px; max-width:100%; padding:10px; border:1px solid var(--line); border-radius:7px; background:var(--paper); color:var(--ink); }
#haru-dose-calendar .hc-sync-panel button,#haru-dose-calendar .hc-refresh { min-height:40px; padding:8px 11px; border:1px solid var(--line); background:var(--sage); border-radius:7px; font:inherit; }
#haru-dose-calendar .hc-refresh { font-size:12px; background:var(--panel); }
#haru-dose-calendar .hc-seed-note { margin:0 0 10px; color:var(--sub); font-size:13px; }

#haru-dose-calendar .hc-today-bottom { min-height:40px; padding:8px 11px; border-radius:7px; font-size:12px; }
#haru-dose-calendar .hc-foot-actions { flex-wrap:wrap; }
@media(pointer:coarse) { #haru-dose-calendar .hc-today-bottom { min-height:44px; } }
#haru-dose-calendar .hc-day:disabled { opacity:1; }
#haru-dose-calendar .hc-day:disabled:hover { background:var(--panel); }
#haru-dose-calendar .hc-day.done:disabled:hover { background:var(--sage); }

#haru-dose-calendar .hc-edit { padding:7px 11px; min-height:40px; border:1px solid var(--line); background:var(--panel); border-radius:7px; font-size:12px; }
#haru-dose-calendar .hc-restore[hidden] { display:none; }

#haru-dose-calendar .hc-day { position:relative; }
#haru-dose-calendar .hc-note-dot { position:absolute; top:4px; right:4px; width:5px; height:5px; border-radius:50%; background:var(--deep); }
#haru-dose-calendar .hc-note-dialog { width:min(460px,calc(100% - 24px)); max-height:calc(100dvh - 36px); overflow:auto; padding:20px; border:1px solid var(--line); border-radius:14px; background:var(--panel); color:var(--ink); box-shadow:0 12px 50px #0003; }
#haru-dose-calendar .hc-note-dialog::backdrop { background:#14251b66; }
#haru-dose-calendar .hc-note-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
#haru-dose-calendar .hc-note-head h2 { margin:0; font-size:18px; font-weight:500; }
#haru-dose-calendar .hc-note-dialog button { padding:8px 11px; min-height:42px; background:var(--paper); border:1px solid var(--line); border-radius:7px; }
#haru-dose-calendar .hc-note-x { font-size:22px; line-height:1; min-width:42px; }
#haru-dose-calendar .hc-note-day-state { margin:7px 0 12px; min-height:18px; font-size:13px; color:var(--sub); }
#haru-dose-calendar .hc-note-field { display:block; font-size:13px; }
#haru-dose-calendar .hc-note-text { display:block; margin-top:8px; width:100%; min-height:150px; max-height:330px; padding:11px; border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink); font:16px/1.6 Arial,'Noto Sans KR',sans-serif; resize:vertical; }
#haru-dose-calendar .hc-note-message { min-height:20px; margin-top:9px; font-size:12px; color:var(--sub); }
#haru-dose-calendar .hc-note-actions { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:14px; }
#haru-dose-calendar .hc-note-spacer { flex:1; }
#haru-dose-calendar .hc-note-dialog .hc-note-save { background:var(--deep); color:var(--btntext); border-color:var(--deep); }
#haru-dose-calendar .hc-note-conflict { padding:10px; margin-top:9px; border:1px solid var(--line); border-radius:8px; }
#haru-dose-calendar .hc-note-conflict p { margin:0 0 7px; font-size:12px; color:var(--sub); }
#haru-dose-calendar .hc-note-latest { font:13px/1.5 Arial,'Noto Sans KR',sans-serif; white-space:pre-wrap; overflow-wrap:anywhere; max-height:120px; overflow:auto; }
#haru-dose-calendar .hc-note-conflict-actions { display:flex; flex-wrap:wrap; gap:7px; font-size:12px; }
#haru-dose-calendar .hc-holiday-toggle[hidden],#haru-dose-calendar .hc-note-conflict[hidden] { display:none; }

#haru-dose-calendar .hc-history { margin-top:16px; border-top:1px solid var(--line); font-size:13px; }
#haru-dose-calendar .hc-history summary { padding:14px 0; cursor:pointer; color:var(--sub); width:fit-content; min-height:44px; }
#haru-dose-calendar .hc-history summary:focus-visible { outline:2px solid var(--deep); outline-offset:3px; border-radius:3px; }
#haru-dose-calendar .hc-history-hint,#haru-dose-calendar .hc-history-status { color:var(--sub); font-size:12px; margin:0 0 12px; }
#haru-dose-calendar .hc-history-status:empty { display:none; }
#haru-dose-calendar .hc-history-list { list-style:none; padding:0; margin:0; max-height:440px; overflow-y:auto; overscroll-behavior:contain; }
#haru-dose-calendar .hc-history-list li { border-top:1px solid var(--line); padding:12px 2px; overflow-wrap:anywhere; }
#haru-dose-calendar .hc-history-heading { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:5px 16px; line-height:1.6; }
#haru-dose-calendar .hc-history-heading time { color:var(--sub); font-size:11px; }
#haru-dose-calendar .hc-history-list p { display:flex; gap:10px; font-size:12px; line-height:1.7; margin:6px 0 0; white-space:pre-wrap; }
#haru-dose-calendar .hc-history-label { color:var(--sub); flex:0 0 25px; }