/* Hangeon Web product refinement: responsive toolbar, CreateCase editor, calendar redesign */

/* ----- Responsive toolbar: an icon always survives when labels collapse. ----- */
.toolbar-action{flex:0 0 auto}
.toolbar-glyph{display:inline-grid;place-items:center;min-width:18px;font-size:18px;line-height:1;font-weight:900}
.account-sync-badge{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.account-sync-badge .toolbar-glyph{font-size:16px}
.account-sync-badge[data-status="syncing"] .toolbar-glyph{animation:hangeonSyncSpin 1s linear infinite}
@keyframes hangeonSyncSpin{to{transform:rotate(360deg)}}
@media(max-width:1120px){
  .top-actions{gap:6px}
  .top-actions .toolbar-action:not(.account-sync-badge){
    width:42px;min-width:42px;padding:0;font-size:0
  }
  .top-actions .toolbar-action:not(.account-sync-badge) .toolbar-label,
  .top-actions .toolbar-action:not(.account-sync-badge) kbd{display:none}
  .top-actions .toolbar-action:not(.account-sync-badge) .toolbar-glyph{font-size:19px}
  .account-sync-badge{width:42px;min-width:42px;padding:0;font-size:0}
  .account-sync-badge .sync-badge-label{display:none}
  .account-sync-badge .toolbar-glyph{display:grid;font-size:18px}
}
@media(max-width:760px){
  .top-actions .icon-btn[data-open-document]{display:inline-flex!important}
  .top-actions .primary-btn.new-case-top-btn{display:inline-flex!important}
  .topbar{gap:8px}
  .page-title{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media(max-width:480px){
  .topbar{padding:0 8px}
  .page-title{font-size:15px}
  .top-actions{gap:4px}
  .top-actions .toolbar-action:not(.account-sync-badge),.account-sync-badge{width:36px;min-width:36px;height:36px;min-height:36px;border-radius:11px}
}

/* ----- CreateCase-like editor ----- */
.event-editor-modal{width:min(980px,calc(100vw - 36px));max-width:980px}
.case-create-hero{
  margin:0 0 18px;padding:20px;border:1px solid var(--line);border-radius:22px;
  background:linear-gradient(135deg,var(--blue-soft),var(--card) 48%,var(--mint-soft));
}
.case-create-title{display:grid;gap:4px;margin-bottom:15px}
.case-create-kicker{font-size:9px;letter-spacing:.13em;font-weight:950;color:var(--blue)}
.case-create-title>b{font-size:20px;color:var(--navy);letter-spacing:-.04em}
.case-create-title>small{font-size:11px;color:var(--muted);line-height:1.55}
.case-kind-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.case-kind-tabs button{
  min-width:0;padding:12px;border:1px solid var(--line);border-radius:15px;background:var(--card);
  display:grid;grid-template-columns:34px minmax(0,1fr);gap:9px;align-items:center;text-align:left;cursor:pointer;color:var(--ink)
}
.case-kind-tabs button>i{
  width:34px;height:34px;border-radius:11px;background:var(--page);display:grid;place-items:center;
  color:var(--blue);font-style:normal;font-weight:950
}
.case-kind-tabs button span{display:grid;gap:2px;min-width:0}
.case-kind-tabs button b{font-size:12px;color:var(--navy)}
.case-kind-tabs button small{font-size:9px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.case-kind-tabs button.active{border-color:rgba(8,104,247,.42);box-shadow:0 8px 22px rgba(8,104,247,.10);background:color-mix(in srgb,var(--blue-soft) 66%,var(--card))}
.case-kind-tabs button.active>i{background:var(--blue);color:#fff}
.case-input-methods{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.case-input-methods button{
  min-height:36px;padding:0 11px;border:1px solid var(--line);border-radius:11px;background:var(--card);
  color:var(--muted);display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:850;cursor:pointer
}
.case-input-methods button i{font-style:normal;font-size:14px}
.case-input-methods button.active{color:var(--blue);border-color:rgba(8,104,247,.35);background:var(--blue-soft)}
.case-source-status{margin-top:10px;font-size:10px;color:var(--muted)}
.case-kind-select-fallback{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important}
.case-quick-date-field{margin-bottom:-2px}
.case-quick-dates{display:flex;gap:6px;flex-wrap:wrap}
.case-quick-dates button{
  min-height:34px;padding:0 11px;border:1px solid var(--line);border-radius:999px;background:var(--card);
  color:var(--muted);font-size:10px;font-weight:850;cursor:pointer
}
.case-quick-dates button:hover,.case-quick-dates button.active{border-color:rgba(8,104,247,.35);color:var(--blue);background:var(--blue-soft)}
.event-editor-modal .editor-section{border:1px solid var(--line);border-radius:18px;padding:17px;margin-bottom:12px;background:var(--card)}
.event-editor-modal .editor-section-title{margin-bottom:13px}
.event-editor-modal .editor-section-title small{margin-left:auto;font-size:9px;color:var(--muted)}
@media(min-width:880px){
  .event-editor-modal .modal-body{padding:22px 24px}
  .event-editor-modal .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
}
@media(max-width:620px){
  .event-editor-modal{width:100%}
  .case-create-hero{padding:14px;border-radius:18px}
  .case-kind-tabs{grid-template-columns:1fr}
  .case-kind-tabs button{grid-template-columns:32px 1fr;padding:9px 10px}
  .case-input-methods{display:grid;grid-template-columns:repeat(2,1fr)}
  .case-input-methods button{justify-content:center}
}

/* ----- Calendar redesign ----- */
#view-calendar .page-head{margin-bottom:16px}
.calendar-shell{padding:18px!important;border-radius:24px;overflow:hidden}
.calendar-toolbar{
  min-height:50px;margin:0 0 10px!important;padding:0 2px;display:grid!important;
  grid-template-columns:1fr auto 1fr;align-items:center
}
.calendar-toolbar h2{font-size:22px!important;letter-spacing:-.04em;text-align:center}
.calendar-toolbar .cal-controls:last-child{justify-content:flex-end}
.calendar-mode-switch{background:var(--page);padding:3px;border-radius:12px;border:1px solid var(--line)}
.calendar-mode-switch button{border-radius:9px}
.calendar-legend{
  display:flex;justify-content:flex-end;gap:13px;flex-wrap:wrap;padding:0 2px 10px;
  font-size:9px;color:var(--muted)
}
.calendar-legend span{display:inline-flex;align-items:center;gap:5px}
.legend-dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--blue)}
.legend-dot.task{background:var(--mint)}.legend-dot.dday{background:var(--purple)}.legend-dot.done{background:#9eabba}
.weekdays{
  border:1px solid var(--line);border-bottom:0;border-radius:16px 16px 0 0;overflow:hidden;background:var(--page)
}
.weekdays div{padding:10px 6px!important;font-size:10px!important}
.weekdays div:first-child{color:#e15b69}.weekdays div:last-child{color:#4c7fe7}
.calendar-grid{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:0 0 18px 18px;overflow:hidden
}
.calendar-day{
  position:relative;min-width:0;min-height:132px;padding:8px;background:var(--card);
  color:var(--ink);border:0;display:flex;flex-direction:column;gap:5px;cursor:pointer;text-align:left
}
.calendar-day:hover{background:color-mix(in srgb,var(--blue-soft) 30%,var(--card))}
.calendar-day.muted{background:color-mix(in srgb,var(--page) 82%,var(--card));opacity:.6}
.calendar-day.today{box-shadow:inset 0 0 0 2px rgba(8,104,247,.58)}
.calendar-day.selected{background:color-mix(in srgb,var(--blue-soft) 58%,var(--card))}
.calendar-day.weekend-sun .day-number{color:#d84e5d}.calendar-day.weekend-sat .day-number{color:#4778db}
.calendar-day-head{display:flex;align-items:center;justify-content:space-between;gap:5px;min-height:27px}
.day-number{width:27px;height:27px;border-radius:9px;display:grid;place-items:center;font-size:11px;font-weight:900}
.calendar-day.today .day-number{background:var(--blue);color:#fff}
.day-count{font-size:8px;color:var(--muted);font-weight:850}
.calendar-add{
  position:absolute;right:6px;top:34px;width:23px;height:23px;border:0;border-radius:8px;
  background:transparent;color:transparent;cursor:pointer;transition:.15s ease
}
.calendar-day:hover .calendar-add,.calendar-day.selected .calendar-add{background:var(--blue-soft);color:var(--blue)}
.calendar-entries{display:grid;gap:4px;min-width:0}
.calendar-entry{
  width:100%;min-width:0;height:22px;padding:0 6px;border:0;border-radius:7px;
  display:flex;align-items:center;gap:5px;text-align:left;cursor:pointer;
  font-size:8.5px;font-weight:850;color:#315c9a;background:#edf4ff
}
.calendar-entry:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--blue);flex:0 0 auto}
.calendar-entry span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calendar-entry small{margin-left:auto;font-size:7px;opacity:.7;flex:0 0 auto}
.calendar-entry.task{color:#087b65;background:#e6fbf5}.calendar-entry.task:before{background:var(--mint)}
.calendar-entry.dday{color:#6554d8;background:#f0edff}.calendar-entry.dday:before{background:var(--purple)}
.calendar-entry.done{opacity:.48;text-decoration:line-through}
.calendar-more{font-size:8px;color:var(--muted);padding-left:6px}
.calendar-selected-agenda{
  margin-top:14px;padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--page)
}
.calendar-agenda-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.calendar-agenda-head div{display:grid;gap:2px}.calendar-agenda-head b{font-size:14px;color:var(--navy)}.calendar-agenda-head span{font-size:9px;color:var(--muted)}
.calendar-agenda-head button{min-height:34px}
.calendar-agenda-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.calendar-agenda-item{
  min-width:0;padding:10px;border:1px solid var(--line);border-radius:13px;background:var(--card);
  display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:9px;align-items:center
}
.calendar-agenda-item>i{width:8px;height:32px;border-radius:99px;background:var(--blue)}
.calendar-agenda-item.task>i{background:var(--mint)}.calendar-agenda-item.dday>i{background:var(--purple)}
.calendar-agenda-copy{min-width:0;display:grid;gap:3px}.calendar-agenda-copy b{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.calendar-agenda-copy small{font-size:8px;color:var(--muted)}
.calendar-agenda-item.done{opacity:.55}
.week-calendar{gap:8px!important}.week-day{border-radius:16px!important;min-height:320px;padding:12px!important}
.calendar-alt-view{padding-top:2px}
@media(max-width:980px){
  .calendar-day{min-height:112px;padding:6px}
  .calendar-entry{height:20px;font-size:7.5px}
  .calendar-agenda-list{grid-template-columns:1fr}
}
@media(max-width:760px){
  .calendar-shell{padding:8px!important;border-radius:18px}
  .calendar-toolbar{grid-template-columns:auto 1fr auto}
  .calendar-toolbar h2{font-size:17px!important}
  .calendar-toolbar .secondary-btn{padding:0 9px;min-height:36px}
  .calendar-legend{justify-content:flex-start;padding:2px 3px 8px}
  .weekdays{border-radius:12px 12px 0 0}
  .calendar-day{min-height:78px;padding:4px}
  .day-number{width:23px;height:23px;font-size:9px}
  .day-count{display:none}
  .calendar-entry{height:8px;padding:0;border-radius:99px}
  .calendar-entry:before,.calendar-entry span,.calendar-entry small{display:none}
  .calendar-more{font-size:7px;padding-left:2px}
  .calendar-add{display:none}
  .calendar-selected-agenda{padding:12px;border-radius:14px}
}


/* Google connection runtime feedback */
.google-connect-runtime{
  margin-top:9px;padding:9px 11px;border:1px solid var(--line);border-radius:11px;
  background:var(--page);display:flex;align-items:center;gap:8px;color:var(--muted);
  font-size:10px;line-height:1.45
}
.google-connect-runtime i{
  width:8px;height:8px;border-radius:50%;background:#9aabc1;flex:0 0 auto
}
.google-connect-runtime[data-state="ready"] i{background:var(--blue)}
.google-connect-runtime[data-state="connecting"] i,
.google-connect-runtime[data-state="loading"] i,
.google-connect-runtime[data-state="syncing"] i{
  background:var(--blue);box-shadow:0 0 0 4px rgba(8,104,247,.11);
  animation:googleRuntimePulse 1s ease-in-out infinite
}
.google-connect-runtime[data-state="connected"]{color:#087b65;background:var(--mint-soft)}
.google-connect-runtime[data-state="connected"] i{background:var(--mint)}
.google-connect-runtime[data-state="error"]{color:#b33b4b;background:#fff4f5;border-color:#efc5cb}
.google-connect-runtime[data-state="error"] i{background:#df5f6c}
@keyframes googleRuntimePulse{50%{transform:scale(.75);opacity:.55}}
:root[data-theme="dark"] .google-connect-runtime[data-state="error"]{
  color:#ff9ca5;background:#3c1d29;border-color:#6b3443
}
@media (prefers-color-scheme:dark){
  :root[data-theme="system"] .google-connect-runtime[data-state="error"]{
    color:#ff9ca5;background:#3c1d29;border-color:#6b3443
  }
}


/* v17 mobile width + calendar visibility + 오늘의 한건 brand refinements */
#view-home,
#view-home .welcome,
#view-home .grid-2,
#view-home .grid-2 > *,
#view-home .grid-2 > aside,
#view-home .project-highlight,
#view-home .quick-grid,
#view-home .card,
#view-home .stat-grid,
#view-home .schedule-list,
#view-home .todo-list,
#view-home .execution-card,
#view-home .activity-mini-card{
  min-width:0;
  max-width:100%;
}
#view-home .grid-2{width:100%}
#view-home .grid-2 > div,
#view-home .grid-2 > aside{width:100%}
#view-home .project-highlight{overflow:hidden}
#view-home .project-highlight h2,
#view-home .project-highlight p{overflow-wrap:anywhere;word-break:keep-all}
.home-product-kicker{
  display:block;margin-bottom:4px;color:var(--blue);font-size:10px;
  font-weight:950;letter-spacing:.1em
}
.brand{min-width:0}
.brand span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Keep event titles visible on tablet / large-phone widths. */
@media(max-width:760px){
  .calendar-entry{
    height:18px;padding:0 4px;border-radius:6px;font-size:7.5px
  }
  .calendar-entry:before{display:block;width:4px;height:4px}
  .calendar-entry span{
    display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
  }
  .calendar-entry small{display:none}
}
/* Only very narrow phone cells collapse to color bars. */
@media(max-width:430px){
  .calendar-entry{height:7px;padding:0;border-radius:999px}
  .calendar-entry:before,.calendar-entry span,.calendar-entry small{display:none}
  .calendar-day{min-height:76px}
}

@media(max-width:760px){
  html,body,.app-shell,.main,.content{max-width:100vw}
  .main{width:100%;min-width:0;overflow-x:clip}
  .content{
    width:auto!important;max-width:none!important;
    margin:0 10px!important;padding-left:0!important;padding-right:0!important
  }
  #view-home{width:100%;overflow-x:hidden}
  #view-home .welcome{width:100%;padding-right:0}
  #view-home .date-pill{max-width:100%;white-space:normal}
  #view-home .grid-2{display:block!important}
  #view-home .grid-2 > aside{margin-top:14px}
  #view-home .stat-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    width:100%;gap:6px
  }
  #view-home .stat{min-width:0;padding:12px 7px;text-align:center}
  #view-home .stat b{font-size:18px}
  #view-home .stat span{font-size:9px;white-space:nowrap}
  #view-home .quick-grid{
    width:100%;max-width:100%;overflow-x:auto!important;overflow-y:hidden;
    overscroll-behavior-inline:contain;scroll-snap-type:x proximity;
    padding:0 0 5px;margin-right:0
  }
  #view-home .quick-btn{
    flex:0 0 104px;min-width:104px!important;max-width:104px;
    scroll-snap-align:start
  }
  #view-home .schedule-item,#view-home .todo,
  #view-home .insight-row,#view-home .activity-mini-row{
    min-width:0;max-width:100%
  }
  #view-home .item-copy,#view-home .todo span,#view-home .todo small,
  #view-home .insight-row span,#view-home .activity-mini-row span{
    min-width:0;overflow-wrap:anywhere
  }
}
@media(max-width:360px){
  .topbar{max-width:100vw;overflow:hidden}
  .top-actions{min-width:0;flex-shrink:1;gap:3px}
  .page-title{max-width:52px}
  .content{margin-left:7px!important;margin-right:7px!important}
  #view-home .quick-btn{flex-basis:96px;min-width:96px!important;max-width:96px}
  #view-home .stat-grid{gap:4px}
  #view-home .stat{padding:10px 4px}
}
@media(min-width:761px){.brand span{font-size:18px}}