.ann-canvas-a4{ width:190mm; min-width:190mm; height:297mm; position:relative; margin:0 auto; background:#fff;
    box-shadow:0 1px 3px rgba(15,23,42,.15); -webkit-user-select:none;user-select:none; }
  .ann-canvas-block{ border:1px dashed #cbd5e1; border-radius:4px; padding:2px 4px; cursor:move; box-sizing:border-box; }
  .ann-canvas-block:hover{ border-color:#94a3b8; background:rgba(241,245,249,.5); }
  .ann-canvas-block.selected{ border:1.5px solid var(--c-primary); background:rgba(37,99,235,.05); }
  .ann-canvas-block-label{ position:absolute; top:-18px; left:0; font-size:10px; font-weight:700; color:#64748b;
    background:#f1f5f9; border-radius:4px; padding:1px 5px; pointer-events:none; }
  .ann-canvas-block.selected .ann-canvas-block-label{ color:#fff; background:var(--c-primary); }
  .ann-canvas-handle-size{ position:absolute; right:-5px; bottom:-5px; width:11px; height:11px; border-radius:50%;
    background:var(--c-primary); border:2px solid #fff; cursor:nwse-resize; }
   




  .ann-canvas-handle-axis{ position:absolute; background:var(--c-primary); border:1.5px solid #fff; border-radius:3px;
    opacity:.85; }
  .ann-canvas-handle-axis:hover{ opacity:1; }
  .ann-canvas-handle-axis-h{ left:50%; bottom:-4px; width:22px; height:7px; margin-left:-11px; cursor:ns-resize; }
  .ann-canvas-handle-axis-w{ top:50%; right:-4px; width:7px; height:22px; margin-top:-11px; cursor:ew-resize; }
  .ann-canvas-fontctl{ position:absolute; top:-28px; right:0; display:flex; gap:3px; align-items:center;
    background:#fff; border:1px solid #cbd5e1; border-radius:8px; padding:3px 4px; box-shadow:0 2px 6px rgba(15,23,42,.08); z-index:5; }
  .ann-canvas-fontctl button{ font-size:11px; font-weight:700; line-height:1; border:1px solid var(--c-border);
    background:#f8fafc; border-radius:6px; padding:4px 7px; cursor:pointer; color:#334155; }
  .ann-canvas-fontctl button:hover{ background:#eff6ff; border-color:#93c5fd; color:#1d4ed8; }
   
   
   
  .ann-wb{ margin-bottom:7px; }
  .ann-wb-head{ align-items:center; gap:8px; margin-bottom:6px; padding:6px 9px; min-height:28px; border-radius:8px;
    background:linear-gradient(135deg,#0f172a 0%,#1e3a8a 70%,#2563eb 100%); color:#fff; }
  .ann-wb-brand{ font-size:11.5px; line-height:1.25; font-weight:800; letter-spacing:-.01em; }
  .ann-wb-sub{ font-size:10px; line-height:1.25; opacity:.78; font-weight:500; }
  .ann-wb-sticky-brand{
    display:inline-flex; align-items:center; min-height:24px; font-size:11px; line-height:1.2; font-weight:800; letter-spacing:-.01em;
    color:#fff; background:linear-gradient(135deg,#0f172a 0%,#1e3a8a 70%,#2563eb 100%);
    padding:4px 8px; border-radius:7px; white-space:nowrap;
  }
  .ann-wb-tools, .ann-wb-format{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 12px;
    background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; margin-bottom:8px; }
   
  .ann-wb-rt{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; padding:8px 10px; margin-bottom:0;
    background:#fff; border:1px solid #e2e8f0; border-radius:10px 10px 0 0; box-shadow:0 1px 2px rgba(15,23,42,.04); }
  .ann-wb-rt-off{ opacity:.72; }
  .ann-wb-rt-sep{ width:1px; height:22px; background:#e2e8f0; margin:0 4px; }
  .ann-wb-face{ min-width:128px; max-width:160px; }
  .ann-wb-ico{ width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:700; border:1px solid transparent; background:transparent; color:#334155;
    border-radius:8px; cursor:pointer; padding:0; }
  .ann-wb-ico:hover:not(:disabled){ background:#f1f5f9; border-color:#e2e8f0; }
  .ann-wb-ico.on{ background:#dbeafe; border-color:#93c5fd; color:#1d4ed8; }
  .ann-wb-ico:disabled{ opacity:.45; cursor:not-allowed; }
  .ann-wb-ico-pri{ background:#2563eb; border-color:#2563eb; color:#fff; width:auto; padding:0 10px; font-size:12px; }
  .ann-wb-ico-pri:hover:not(:disabled){ background:#1d4ed8; color:#fff; }
  .ann-wb-colorwrap{ position:relative; display:inline-flex; }
  .ann-wb-colorwrap:hover .ann-wb-colorpop{ display:flex; }
  .ann-wb-colorpop{ display:none; position:absolute; top:100%; left:0; z-index:8; gap:4px; padding:6px;
    background:#fff; border:1px solid #e2e8f0; border-radius:8px; box-shadow:0 4px 12px rgba(15,23,42,.12); }
  .ann-wb-swatch{ width:18px; height:18px; border-radius:4px; border:1px solid #cbd5e1; cursor:pointer; padding:0; }
  .ann-wb-ruler{ position:relative; height:22px; margin-bottom:8px; background:#f8fafc; border:1px solid #e2e8f0;
    border-top:0; border-radius:0 0 10px 10px; overflow:hidden; }
  .ann-wb-ruler-tick{ position:absolute; top:0; width:1px; height:8px; background:#cbd5e1; }
  .ann-wb-ruler-tick i{ position:absolute; top:9px; left:2px; font-size:9px; font-style:normal; color:#94a3b8; white-space:nowrap; }
  .ann-wb-sel{ font-size:12.5px; color:#0f172a; }
  .ann-wb-sel b{ color:#1d4ed8; }
  .ann-wb-lbl{ font-size:11px; font-weight:700; color:#64748b; }
  .ann-wb-font{ min-width:36px; text-align:center; font-size:13px; font-weight:800; color:#0f172a; }
  .ann-wb-btn{ font-size:12px; font-weight:700; border:1px solid #cbd5e1; background:#fff; color:#334155;
    border-radius:8px; padding:6px 10px; cursor:pointer; }
  .ann-wb-btn:hover{ background:#eff6ff; border-color:#93c5fd; color:#1d4ed8; }
  .ann-wb-btn-on{ background:#dbeafe; border-color:#60a5fa; color:#1d4ed8; }
  .ann-wb-btn-primary{ background:#2563eb; border-color:#2563eb; color:#fff; }
  .ann-wb-btn-primary:hover{ background:#1d4ed8; border-color:#1d4ed8; color:#fff; }
  .ann-wb-select{ font-size:12px; font-weight:600; border:1px solid #cbd5e1; background:#fff; color:#0f172a;
    border-radius:8px; padding:5px 8px; max-width:140px; }
  .ann-wb-select-sm{ max-width:72px; }
  .ann-wb-sep{ width:1px; height:18px; background:#e2e8f0; }
  .ann-wb-hint{ font-size:12px; color:#64748b; }
  .ann-wb-place{ margin-bottom:10px; border:1px solid #e2e8f0; border-radius:12px; overflow:hidden; background:#fff; }
  .ann-wb-place-head{ font-size:12px; font-weight:800; color:#0f172a; padding:8px 12px; background:#f1f5f9; border-bottom:1px solid #e2e8f0; }
  .ann-wb-place-table{ width:100%; border-collapse:collapse; font-size:12px; }
  .ann-wb-place-table th{ text-align:left; font-size:11px; color:#64748b; font-weight:700; padding:6px 10px; border-bottom:1px solid #e2e8f0; background:#f8fafc; }
  .ann-wb-place-table td{ padding:7px 10px; border-bottom:1px solid #f1f5f9; color:#334155; cursor:pointer; }
  .ann-wb-place-table tr:hover td{ background:#eff6ff; }
  .ann-wb-place-table tr.ann-wb-place-on td{ background:#dbeafe; color:#1e3a8a; font-weight:600; }
  body.theme-dark .ann-wb-tools, body.theme-dark .ann-wb-format, body.theme-dark .ann-wb-rt{ background:#1a2436; border-color:#3d4d68; }
  body.theme-dark .ann-wb-btn, body.theme-dark .ann-wb-ico{ background:#0f172a; border-color:#3d4d68; color:#e2e8f0; }
  body.theme-dark .ann-wb-select{ background:#0f172a; border-color:#3d4d68; color:#e2e8f0; }
  body.theme-dark .ann-wb-font, body.theme-dark .ann-wb-sel{ color:#e2e8f0; }
  body.theme-dark .ann-wb-hint{ color:#94a3b8; }
  body.theme-dark .ann-wb-place{ background:#1a2436; border-color:#3d4d68; }
  body.theme-dark .ann-wb-place-head, body.theme-dark .ann-wb-place-table th{ background:#0f172a; color:#94a3b8; border-color:#3d4d68; }
  body.theme-dark .ann-wb-place-table td{ color:#e2e8f0; border-color:#3d4d68; }
  body.theme-dark .ann-wb-ruler{ background:#0f172a; border-color:#3d4d68; }
  .ann-canvas-table{ width:100%; border-collapse:collapse; }
   



  .ann-canvas-table th, .ann-canvas-table td{ border:1px solid #cbd5e1; padding:6px 8px;
    text-align:center; position:relative; box-sizing:border-box; }
  .ann-canvas-table th{ font-weight:700; background:#f1f5f9; }
  .ann-canvas-colhandle{ position:absolute; top:0; right:-4px; width:8px; height:100%; cursor:col-resize; z-index:2; }
  .ann-canvas-colhandle:hover{ background:rgba(37,99,235,.25); }
   





  .ann-canvas-table td .ann-merge-btn, .ann-canvas-table td .ann-merge-split-btn,
  .ann-basic-table td .ann-merge-btn, .ann-basic-table td .ann-merge-split-btn{
    display:none; position:absolute; align-items:center; justify-content:center;
    width:15px; height:15px; font-size:9px; line-height:1; border-radius:3px; color:#fff;
    cursor:pointer; z-index:3; -webkit-user-select:none;user-select:none;
  }
   




  .ann-canvas-table td:hover .ann-merge-btn, .ann-canvas-table td:hover .ann-merge-split-btn,
  .ann-canvas-table td:focus-within .ann-merge-btn, .ann-canvas-table td:focus-within .ann-merge-split-btn,
  .ann-basic-table td:hover .ann-merge-btn, .ann-basic-table td:hover .ann-merge-split-btn,
  .ann-basic-table td:focus-within .ann-merge-btn, .ann-basic-table td:focus-within .ann-merge-split-btn{ display:flex; }
  .ann-basic-table td{ position:relative; }
  .ann-merge-btn{ background:var(--c-primary); }
  .ann-merge-btn-right{ right:-7px; top:50%; margin-top:-7px; }
  .ann-merge-btn-down{ bottom:-7px; left:50%; margin-left:-7px; }
  .ann-merge-split-btn{ top:2px; right:2px; background:#dc2626; }
  body.theme-dark .ann-canvas-a4{ background:#0b1220; }
  body.theme-dark .ann-canvas-block{ border-color:#3d4d68; }
  body.theme-dark .ann-canvas-block:hover{ background:rgba(51,65,85,.4); }
   




  .ann-canvas-img-block{ background:#fff; border-radius:4px; }
  body.theme-dark #app .ann-canvas-img-block{ background:#fff !important; }
  body.theme-dark .ann-canvas-fontctl button{ background:#1a2436; border-color:#3d4d68; color:#e2e8f0; }
  body.theme-dark .ann-canvas-table th{ background:#1a2436; }

   








  .ann-pc-layout { display:block; }
  @media(min-width:1024px){
     






    .ann-pc-layout { display:grid; grid-template-columns:1fr 460px; gap:16px; align-items:start; }
    .ann-main { grid-column: 1; min-width: 0; }
    .ann-tray-panel { grid-column: 2; }
     






    .ann-pc-layout.ann-pc-layout-focus { grid-template-columns:1fr; }
  }
   




  @media(min-width:1024px){
    .ann-style-card-pc { border-radius:var(--r-md) !important; padding:var(--sp-3) !important; }
  }
   








   



  @media(min-width:1024px){
    .ann-canvas-order-swap .ann-compose-form { order:2; }
    .ann-canvas-order-swap .ann-compose-preview { order:1; }
  }
   


  .ann-tray-panel { flex-direction:column; background:#fff; border:1px solid #e2e8f0; border-radius:16px; padding:14px; position:sticky; top:12px; max-height:calc(100vh - 24px); overflow-y:auto; }
  .ann-tray-drop { min-height:90px; border:2px dashed #cbd5e1; border-radius:12px; padding:8px; display:flex; flex-direction:column; gap:6px; transition:border-color 120ms ease, background 120ms ease; }
  .ann-tray-drop-active { border-color:#2563eb; background:#eff6ff; }
  .ann-tray-item { display:flex; align-items:center; gap:8px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:7px 9px; font-size:12px; color:#334155; }
  .ann-tray-item-x { flex-shrink:0; border:none; background:none; color:#94a3b8; font-size:13px; cursor:pointer; padding:2px 4px; border-radius:6px; }
  .ann-tray-item-x:hover { color:#dc2626; background:#fef2f2; }
  .ann-tray-complex-list { display:flex; flex-direction:column; gap:4px; max-height:220px; overflow-y:auto; }
  .ann-tray-complex-item { display:flex; align-items:center; gap:8px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:7px 9px; font-size:12.5px; color:#334155; cursor:pointer; text-align:left; transition:background 100ms ease; }
  .ann-tray-complex-item:hover { background:#eff6ff; border-color:#bfdbfe; }
  .ann-tray-complex-item:disabled { opacity:0.55; cursor:not-allowed; }

   

  @media(min-width:1024px){
    .ann-screen [data-kk-ann-back]{ font-size:11.5px !important; line-height:1.2 !important; padding:5px 10px !important; border-width:1px !important; }
    .ann-screen .ann-category-title{ font-size:14px !important; line-height:1.3 !important; }
    .ann-screen .ann-category-desc{ font-size:10.5px !important; line-height:1.35 !important; }
    .ann-screen .ann-style-card-pc{ gap:8px !important; padding:9px 10px !important; }
    .ann-screen .ann-style-card-pc .text-sm{ font-size:11.5px !important; line-height:1.35 !important; }
    .ann-screen .ann-style-card-pc .text-xs{ font-size:10px !important; line-height:1.35 !important; }
    .ann-screen .ann-style-card-pc .text-\[10\.5px\]{ font-size:9.5px !important; line-height:1.3 !important; }
    .ann-screen .ann-compact-toolbar,
    .ann-screen .ann-compact-toolbar button,
    .ann-screen .ann-compact-toolbar label,
    .ann-screen .ann-compact-toolbar select,
    .ann-screen .ann-compact-toolbar .ann-wb-hint,
    .ann-screen .ann-compact-toolbar .ann-wb-font{ font-size:11px !important; line-height:1.25 !important; }

    .ann-hub-screen .kk-hero{ padding:20px 24px 62px; }
    .ann-hub-screen .kk-hero h1{ font-size:18px; line-height:1.3; gap:8px; }
    .ann-hub-screen .kk-hero p{ font-size:11px; line-height:1.4; margin-top:5px; }
    .ann-hub-screen .kk-hero-search{ margin-top:12px; padding:10px 14px; font-size:11.5px; border-radius:9px; }
    .ann-hub-screen .kk-counter{ padding:16px; }
    .ann-hub-screen .kk-counter h2{ font-size:12.5px; line-height:1.35; gap:7px; }
    .ann-hub-screen .kk-counter h2 i{ width:30px; height:30px; border-radius:8px; font-size:14px; }
    .ann-hub-screen .kk-counter .desc{ font-size:10.5px; line-height:1.4; margin:5px 0 10px; }
    .ann-hub-screen .kk-counter-item{ font-size:11.5px; line-height:1.3; padding:7px 9px; margin-bottom:5px; border-radius:8px; }
    .ann-hub-screen .kk-counter-badge{ font-size:9.5px; padding:2px 7px; }
    .ann-hub-screen table{ font-size:11.5px !important; }
    .ann-hub-screen table td{ padding-top:8px !important; padding-bottom:8px !important; }
  }

   

  @media(min-width:1024px){
    .ann-screen .ann-doc-switcher,
    .ann-screen .ann-exception-bar{ display:inline-flex !important; vertical-align:middle; margin:0 7px 7px 0 !important; }
    .ann-screen .ann-doc-switcher{ gap:4px !important; }
    .ann-screen .ann-exception-bar{ gap:5px !important; padding:4px 7px !important; border-radius:8px !important; }
    .ann-screen .ann-exception-bar > span{ font-size:10.5px !important; }
    .ann-screen .ann-exception-bar .input{ width:150px; height:28px; min-height:28px; padding:3px 8px; font-size:11px; }
    .ann-screen .ann-exception-bar button{ min-height:26px; padding:4px 8px !important; font-size:10.5px !important; }

    .ann-screen .ann-compact-toolbar{ min-height:36px; padding:4px 7px !important; gap:4px !important; border-color:#dbe4f0 !important; background:#fff !important; border-radius:8px !important; }
    .ann-screen .ann-compact-toolbar .kk-pill,
    .ann-screen .ann-compact-toolbar .kk-btn-pc{ min-height:27px; padding:4px 8px !important; font-size:10.5px !important; }
    .ann-screen .ann-compact-toolbar .ann-wb-sticky-brand{ min-height:25px; padding:4px 8px; font-size:10.5px; }
    .ann-screen .ann-sign-bottom-control{ display:inline-flex; align-items:center; gap:4px; min-height:27px; padding:3px 7px;
      border:1px solid #cbd5e1; border-radius:8px; background:#fff; color:#334155; font-size:10.5px; font-weight:700; white-space:nowrap; }
    .ann-screen .ann-sign-bottom-control select{ height:22px; padding:1px 4px; border:1px solid #cbd5e1; border-radius:6px;
      background:#fff; color:#334155; font-size:10.5px; }

    .ann-wb{ margin-bottom:7px; }
    .ann-wb-context{ display:flex; align-items:center; gap:6px; min-height:34px; padding:4px 7px; margin:0;
      background:#f8fafc; border:1px solid #dbe4f0; border-radius:8px 8px 0 0; }
    .ann-wb-context .field-label{ font-size:10.5px !important; }
    .ann-wb-context .ann-wb-sel,
    .ann-wb-context .ann-wb-hint{ margin-left:3px !important; font-size:10.5px; }
    .ann-wb-context label{ font-size:10.5px !important; }
    .ann-wb-context .kk-btn-pc{ min-height:26px; padding:3px 7px; font-size:10.5px; }
    .ann-wb-rt{ min-height:34px; padding:4px 7px; gap:3px; border-top:0; border-radius:0; }
    .ann-wb-rt-sep{ height:18px; margin:0 2px; }
    .ann-wb-ico{ width:27px; height:27px; font-size:11px; border-radius:6px; }
    .ann-wb-ico-pri{ width:auto; padding:0 8px; font-size:10.5px; }
    .ann-wb-select{ height:27px; padding:3px 6px; font-size:10.5px; border-radius:6px; }
    .ann-wb-face{ min-width:108px; max-width:132px; }
    .ann-wb-font{ min-width:31px; font-size:10.5px; }
    .ann-wb-ruler{ height:16px; margin-bottom:0; border-radius:0 0 8px 8px; }
    .ann-wb-ruler-tick i{ top:7px; font-size:8px; }

    .ann-command-more > summary{ min-height:27px; padding:4px 8px !important; font-size:10.5px !important; }
    .ann-command-more-menu,
    .ann-template-compact-menu{ position:absolute; right:0; top:calc(100% + 6px); z-index:120; min-width:190px; padding:7px;
      background:#fff; border:1px solid #cbd5e1; border-radius:9px; box-shadow:0 12px 28px rgba(15,23,42,.18); }
    .ann-command-more-menu{ display:flex; flex-direction:column; gap:4px; }
    .ann-command-more-menu label{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:5px 7px; font-size:10.5px; color:#334155; }
    .ann-command-more-menu select{ max-width:104px; padding:3px 5px; border:1px solid #cbd5e1; border-radius:6px; font-size:10.5px; background:#fff; }
    .ann-command-more-menu button,
    .ann-template-compact-menu button{ width:100%; border:0; border-radius:7px; padding:7px 8px; background:transparent;
      color:#334155; text-align:left; font-size:10.5px; font-weight:700; cursor:pointer; }
    .ann-command-more-menu button:hover,
    .ann-template-compact-menu button:hover{ background:#eff6ff; color:#1d4ed8; }
    .ann-template-compact{ position:relative; }
  }

  body.theme-dark .ann-screen .ann-sign-bottom-control,
  body.theme-dark .ann-screen .ann-sign-bottom-control select{ background:#0f172a; border-color:#3d4d68; color:#e2e8f0; }



   

  @media(min-width:1024px){
    .ann-screen .ann-document-heading{ display:flex; align-items:center; gap:8px; min-height:31px; margin:0 0 7px !important; }
    .ann-screen .ann-document-heading-copy{ display:flex; align-items:baseline; gap:7px; min-width:0; overflow:hidden; }
    .ann-screen .ann-category-title{ flex:0 0 auto; margin:0 !important; font-size:13px !important; line-height:1.2 !important; white-space:nowrap; }
    .ann-screen .ann-category-desc{ min-width:0; margin:0 !important; padding-left:7px; border-left:1px solid #dbe4f0;
      font-size:10.5px !important; line-height:1.2 !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .ann-screen .ann-compact-toolbar{ z-index:260 !important; overflow:visible !important; isolation:isolate; }
    .ann-screen .ann-command-more{ z-index:320; }
    .ann-screen .ann-command-more[open] > summary{ background:#dbeafe !important; border-color:#93c5fd !important; color:#1d4ed8; }
    .ann-screen .ann-command-more-menu{ z-index:9999 !important; }
  }
 
.ann-routine-tray-head {
  font-size: 11.5px;
  font-weight: 700;
  color: #92400e;
  background: #fef6e9;
  border: 1px solid #fbdcae;
  border-radius: 7px;
  padding: 3px 8px;
  margin: 8px 0 6px;
  display: inline-block;
}
.ann-routine-screen .kk-ui-chip.is-locked { opacity: .45; }

 

.ann-routine-generic-when {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 8px;
  padding: 9px 10px;
  border: 1px dashed #fbdcae;
  border-radius: 10px;
  background: #fffdf7;
}
 
.ann-routine-preset-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin-top: 10px;
}
.ann-routine-preset {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  padding: 9px 11px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fbfbfe;
}
.ann-routine-preset b { font-size: 12.5px; color: #1f2937; font-weight: 700; }
.ann-routine-preset small { font-size: 11.5px; color: #64748b; line-height: 1.45; }
@media (min-width: 720px) { .ann-routine-preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ann-routine-preset-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ann-routine-lastrun {
  line-height: 1.45;
  word-break: keep-all;
}

 

.ann-routine-screen .ann-routine-when-chip { flex-direction: column; justify-content: center; gap: 2px; white-space: normal; height: auto; }
.ann-routine-screen .ann-routine-chip-name { white-space: nowrap; }
.ann-routine-screen .ann-routine-when-guide { margin: 0 0 8px; font-size: 12px; color: #475569; }
.ann-routine-screen .ann-routine-when-guide.is-required { color: #b45309; font-weight: 700; }
.ann-routine-screen .ann-routine-quick-when { width: 100%; min-height: 44px; margin-bottom: 10px; }
.ann-routine-screen .ann-routine-chip-easy { display: block; font-size: 11px; font-weight: 500; line-height: 1.3; color: #64748b; white-space: normal; word-break: keep-all; text-align: center; }

@media (min-width: 1024px) {
  .ann-routine-screen .ann-routine-type-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
  }
  .ann-routine-screen .ann-routine-type-grid > button {
    min-height: 32px;
    border-radius: 8px !important;
    padding: 5px 8px !important;
    line-height: 1.2;
  }
  .ann-routine-notification-form {
    display: grid;
    grid-template-columns: minmax(210px, .8fr) minmax(180px, .7fr) minmax(280px, 1.4fr) auto;
    gap: 7px;
    align-items: start;
    margin-top: 8px;
  }
  .ann-routine-notification-form .ann-routine-employee-grid {
    grid-column: 1 / -1;
  }
  .ann-routine-employee-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
    max-height: 150px;
    overflow: auto;
    padding: 7px;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background: #f8fafc;
  }
  .ann-routine-employee-option {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 5px 7px;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    background: #fff;
    color: #334155;
    font-size: 12px;
  }
  .ann-routine-employee-option span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ann-routine-employee-option small { display: block; color: #94a3b8; font-size: 10px; overflow: hidden; text-overflow: ellipsis; }
}

 












 
.ann-routine-preset-toggle { display: inline-flex; align-items: center; gap: 8px; text-align: left; min-height: 36px; padding: 0 12px; border: 1px solid #d8d4fb; border-radius: 10px; background: #eef2ff; }
.ann-routine-preset-title { font-size: 12.5px; font-weight: 800; color: #4338ca; white-space: nowrap; }
.ann-routine-preset-more  { font-size: 12px; font-weight: 700; color: #4f46e5; white-space: nowrap; }

 
.ann-routine-card {
  --kk-routine-color: #4f46e5;
  border: 1px solid #e2e8f0; border-left: 5px solid var(--kk-routine-color);
  border-radius: 14px; padding: 14px 14px 12px; background: #fff;
  display: flex; flex-direction: column; gap: 4px;
}
.ann-routine-editing {
  font-size: 12px; font-weight: 700; color: #4338ca; background: #eef2ff;
  border: 1px solid #d8d4fb; border-radius: 8px; padding: 6px 10px; margin-bottom: 6px; width: fit-content;
}

 
.ann-routine-line { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-top: 1px dashed #e2e8f0; }
.ann-routine-line:first-of-type, .ann-routine-editing + .ann-routine-line { border-top: 0; }
.ann-routine-line--sub { padding-top: 0; border-top: 0; margin-top: -4px; }
.ann-routine-line-key { flex: none; width: 96px; font-size: 13px; font-weight: 800; color: #334155; padding-top: 7px; }
.ann-routine-line-key b { color: var(--kk-routine-color); margin-right: 2px; }
.ann-routine-line--sub .ann-routine-line-key { font-weight: 700; color: #64748b; font-size: 12px; padding-left: 14px; }
.ann-routine-line-val { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ann-routine-line-sub { font-size: 11.5px; color: #64748b; flex-basis: 100%; }
.ann-routine-line-sub.is-missing { color: #b45309; font-weight: 700; }

 
.ann-routine-blank {
  min-height: 36px; padding: 0 12px; border-radius: 10px; font-size: 13px; font-weight: 800;
  border: 1.5px dashed #94a3b8; background: #f8fafc; color: #334155;
  display: inline-flex; align-items: center; gap: 6px;
}
.ann-routine-blank.is-filled { border-style: solid; border-color: var(--kk-routine-color); background: #fff; color: #0f172a; }
.ann-routine-blank--add { color: #4338ca; border-color: #a5b4fc; background: #eef2ff; font-weight: 700; }
.ann-routine-blank.is-next { border-color: #b45309; background: #fff7ed; color: #9a3412; animation: kk-routine-pulse 1.6s ease-in-out infinite; }
@keyframes kk-routine-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(180, 83, 9, .35); } 50% { box-shadow: 0 0 0 6px rgba(180, 83, 9, 0); } }
.ann-routine-caret { color: #64748b; font-weight: 400; }

 
.ann-routine-chip {
  display: inline-flex; align-items: center; gap: 5px; min-height: 34px;
  font-size: 12.5px; border-radius: 999px; padding: 4px 6px 4px 11px; border: 1px solid;
  word-break: keep-all;    
}
.ann-routine-chip b { font-weight: 800; }
.ann-routine-chip--target { background: #eeecfd; color: #4338ca; border-color: #d8d4fb; }
.ann-routine-chip--when   { background: #fef3e2; color: #92400e; border-color: #fbdcae; }
.ann-routine-chip--action { background: #e4f8f0; color: #065f46; border-color: #bfeeda; }
.ann-routine-chip-detail { color: inherit; opacity: .85; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ann-routine-chip-x { width: 24px; height: 24px; border-radius: 999px; font-weight: 900; font-size: 15px; line-height: 1; color: inherit; opacity: .7; }
.ann-routine-chip-x:hover { opacity: 1; background: rgba(15, 23, 42, .08); }
.ann-routine-join { font-size: 11px; font-weight: 800; color: #94a3b8; }

 
.ann-routine-read { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: #f8fafc; border: 1px solid #e2e8f0; }
.ann-routine-read-head { font-size: 11px; font-weight: 800; color: #64748b; margin-bottom: 3px; }
.ann-routine-read-text { font-size: 13.5px; line-height: 1.6; color: #0f172a; font-weight: 600; word-break: keep-all; }

.ann-routine-note { font-size: 12px; border-radius: 8px; padding: 7px 10px; margin-top: 6px; border: 1px solid; }
.ann-routine-note.is-warn { color: #92400e; background: #fff7ed; border-color: #fed7aa; }
.ann-routine-note.is-info { color: #075985; background: #f0f9ff; border-color: #bae6fd; }
.ann-routine-note.is-ok   { color: #065f46; background: #ecfdf5; border-color: #a7f3d0; font-weight: 700; }
.ann-routine-note.is-err  { color: #b91c1c; background: #fef2f2; border-color: #fecaca; font-weight: 700; }

 
.ann-routine-namerow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.ann-routine-name { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 200px; font-size: 12px; font-weight: 700; color: #475569; }
.ann-routine-colors { display: flex; gap: 6px; }
.ann-routine-color { width: 24px; height: 24px; border-radius: 999px; border: 2px solid #fff; box-shadow: 0 0 0 1px #cbd5e1; }
.ann-routine-color.is-on { box-shadow: 0 0 0 2px #0f172a; transform: scale(1.12); }

 
.ann-routine-savebar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid #e2e8f0; padding-top: 10px; margin-top: 10px; }
.ann-routine-savebar .ann-routine-savebar-state { font-size: 12px; font-weight: 700; color: #475569; margin-right: auto; }
.ann-routine-savebar .ann-routine-savebar-state.is-blocked { color: #b45309; }

 
.ann-routine-picker { position: relative; margin-top: 10px; border: 1px solid #c7d2fe; border-radius: 12px; background: #f8fafc; padding: 10px; }
.ann-routine-picker-head { font-size: 12px; font-weight: 800; color: #334155; margin-bottom: 8px; }
.ann-routine-add { min-height: 38px; border-radius: 10px; padding: 0 14px; font-size: 12.5px; font-weight: 800; color: #fff; background: #4f46e5; flex: none; }
.ann-routine-add:disabled { background: #e2e8f0; color: #64748b; font-weight: 700; }

 
.ann-routine-sheet-backdrop { position: fixed; inset: 0; z-index: 1200; background: rgba(15, 23, 42, .5); display: flex; align-items: flex-end; justify-content: center; }
.ann-routine-sheet {
   
  width: 100%; max-height: 88vh; max-height: 88dvh; display: flex; flex-direction: column;
  background: #fff; border-radius: 18px 18px 0 0; box-shadow: 0 -12px 40px rgba(15, 23, 42, .25);
}
.ann-routine-sheet-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 6px; }
.ann-routine-sheet-title { flex: 1; text-align: center; font-size: 15px; font-weight: 800; color: #0f172a; }
.ann-routine-sheet-title b { color: #4f46e5; margin-right: 4px; }
.ann-routine-sheet-nav { flex: none; min-height: 34px; padding: 0 10px; border-radius: 8px; font-size: 12.5px; font-weight: 700; color: #4338ca; background: #eef2ff; }
.ann-routine-sheet-nav:disabled { opacity: .35; }
.ann-routine-sheet-sub { font-size: 12px; color: #64748b; padding: 0 16px 8px; text-align: center; }
.ann-routine-sheet-body { flex: 1; overflow: auto; padding: 4px 14px 12px; }
.ann-routine-sheet-foot { border-top: 1px solid #e2e8f0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; background: #fff; }
.ann-routine-sheet-read { font-size: 12px; color: #475569; line-height: 1.5; word-break: keep-all; }
.ann-routine-sheet-next { min-height: 44px; border-radius: 12px; font-size: 14px; font-weight: 800; color: #fff; background: #4f46e5; }
@media (min-width: 720px) {
  .ann-routine-sheet-backdrop { align-items: center; padding: 24px; }
  .ann-routine-sheet { width: min(720px, 100%); max-height: 84vh; max-height: 84dvh; border-radius: 18px; box-shadow: 0 24px 64px rgba(15, 23, 42, .28); }
}

 
.ann-routine-optlist { display: flex; flex-direction: column; gap: 6px; }
.ann-routine-opt { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px 12px; border: 1.5px solid #e2e8f0; border-radius: 12px; background: #fff; min-height: 44px; }
.ann-routine-opt b { font-size: 13.5px; color: #0f172a; }
.ann-routine-opt small { font-size: 11.5px; color: #64748b; line-height: 1.4; }
.ann-routine-opt.is-selected { border-color: #4f46e5; background: #eef2ff; }
.ann-routine-opt.is-selected b { color: #4338ca; }
.ann-routine-opt.is-selected b::before { content: "✓ "; }
.ann-routine-screen .kk-ui-chip.is-locked { opacity: .45; }

 

#app .ann-routine-screen .ann-routine-sheet .ann-routine-type-grid :is(.kk-ui-chip.is-selected, .kk-ui-chip[aria-pressed="true"]):not(#swipe-live-schedule-month *):not(#swipe-live-schedule-week *) {
  background: #4f46e5 !important; border-color: #4f46e5 !important; color: #fff !important;
  font-weight: 800 !important; box-shadow: 0 2px 8px rgba(79, 70, 229, .28) !important;
}
#app .ann-routine-screen .ann-routine-sheet .ann-routine-type-grid :is(.kk-ui-chip.is-selected, .kk-ui-chip[aria-pressed="true"]):not(#swipe-live-schedule-month *):not(#swipe-live-schedule-week *)::before {
  content: "✓ "; font-weight: 900;
}
.ann-routine-screen .ann-routine-type-grid { margin-top: 6px; }

 
.ann-routine-group { border-radius: 14px; background: #fff; border: 1px solid #e2e8f0; padding: 10px 12px; margin-bottom: 10px; }
.ann-routine-group-head { font-size: 11px; font-weight: 700; color: #64748b; margin-bottom: 6px; }
.ann-routine-row { --kk-routine-color: #4f46e5; display: flex; gap: 10px; align-items: flex-start; border: 1px solid #e2e8f0; border-left: 4px solid var(--kk-routine-color); border-radius: 12px; padding: 10px 12px; margin-bottom: 6px; }
.ann-routine-row.is-off { opacity: .55; }
.ann-routine-row-order { display: flex; flex-direction: column; gap: 2px; flex: none; font-size: 11px; color: #94a3b8; text-align: center; }
.ann-routine-row-body { flex: 1; min-width: 0; }
.ann-routine-row-name { font-size: 13.5px; font-weight: 800; color: #0f172a; display: flex; align-items: center; gap: 6px; }
.ann-routine-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--kk-routine-color); flex: none; }
.ann-routine-row-state { font-size: 11px; font-weight: 700; color: #64748b; background: #f1f5f9; border-radius: 999px; padding: 2px 7px; }
.ann-routine-row-sentence { font-size: 12.5px; color: #334155; line-height: 1.5; margin-top: 2px; word-break: keep-all; }
.ann-routine-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: flex-start; gap: 6px; flex: none; max-width: 220px; }

 
@media (max-width: 719px) {
  .ann-routine-line { flex-direction: column; gap: 4px; }
  .ann-routine-line-key { width: auto; padding-top: 0; }
  .ann-routine-line--sub .ann-routine-line-key { padding-left: 0; }
  .ann-routine-savebar { position: sticky; bottom: 0; z-index: 20; margin: 10px -14px -12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); box-shadow: 0 -6px 18px rgba(15, 23, 42, .10); }
  .ann-routine-savebar .ann-routine-savebar-state { width: 100%; margin-right: 0; }
  .ann-routine-screen .kk-ui-chip { min-height: 44px; }
  .ann-routine-add { min-height: 44px; width: 100%; }
  .ann-routine-blank { min-height: 42px; }
   

  #app .ann-routine-screen .ann-routine-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; }
  #app .ann-routine-screen .ann-routine-type-grid > .kk-ui-chip { padding: 0 7px !important; }
   
  #app .ann-routine-screen .ann-routine-type-grid > .ann-routine-when-chip { padding: 6px 7px !important; }
   
  .ann-routine-chip--action { flex-wrap: wrap; width: 100%; border-radius: 12px; row-gap: 2px; }
  .ann-routine-chip--action .ann-routine-chip-x { margin-left: auto; }
  .ann-routine-chip--action .ann-routine-chip-detail { flex-basis: 100%; order: 9; max-width: none; white-space: normal; line-height: 1.4; font-size: 12px; }
  .ann-routine-row { flex-wrap: wrap; }
  .ann-routine-row-actions { justify-content: flex-start; gap: 6px; width: 100%; max-width: none; padding-left: 34px; }
}