#schedule { position:relative; height:100%; display:flex; flex-direction:column; }
#schedule-container { position:relative; flex:1; background:#fff; display:flex; gap:10px; }
#schedule > p { position:absolute; left:10px; bottom:5px; font-size:11px; }


.calendar { position:relative; flex:1; height:100%; display:flex; flex-direction:column; }
.calendar > .calendar-header { display:flex; gap:10px; }
.calendar > .calendar-header > .calendar-center { flex:1; font-size:20px; display:flex; justify-content:center; align-items:center; gap:10px; }
.calendar > .calendar-header > .calendar-center > .month { margin-right:20px; }
.calendar > .calendar-header .schedule-btn-A { position:relative; padding:0 15px; height:35px; border-radius:5px; border: 1px solid #ccc; font-size:12px; }
.calendar > .calendar-header .schedule-btn-A > span { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); }
#sub02 { padding-bottom:20px; }
#sub02 .material-symbols-outlined { color:#000; }

.calendar > .calendar-header .schedule_canvas_group { display:flex; flex-direction:column; gap:10px; }
.calendar > .calendar-header .schedule_canvas { font-size:12px; }
.calendar > .calendar-header .schedule-btn-B { position:relative; padding:0 10px; height:30px; border-radius:5px; border: 1px solid #ccc; font-size:10px; }
.schedule-font-color { position:relative; --font-color:#fff; --font-background:#000; background:var(--font-background); color:var(--font-color); padding:0 10px; height:30px; border-radius:5px; border: 1px solid #ccc; font-size:10px; }

.calendar .btn { font-size:12px; height:30px; }

.calendar .calendar-days { height:30px; margin-top:20px; display:flex; justify-content:center; align-items:center; border: 1px solid #ccc; }
.calendar .calendar-days > div { flex:1; display:flex; justify-content:center; align-items:center; }

.calendar .calendar-content-wrap { position:relative; flex:1; display:flex; flex-direction:column; }
.calendar .calendar-content { display:flex; flex-direction:column; }
.calendar .calendar-content > div { height:150px; display:flex; justify-content:center; align-items:center; border-bottom: 1px solid #ccc; }
.calendar .calendar-content > div > .list { flex:1; position:relative; height:100%; user-select: none; }
.calendar .calendar-content > div > .list:not(:last-child) { border-right: 1px dashed #ccc; }
.calendar .calendar-content > div > .list:first-child { color:#ff5757; }
.calendar .calendar-content > div > .list:last-child { color:#6464ff; }
.calendar .calendar-content > div > .list.next_day { color:#ccc; background:#f6f6f6; }
.calendar .calendar-content > div > .list.prev_day { color:#ccc; background:#f6f6f6; }
.calendar .calendar-content > div > .list > span { position:absolute; right:5px; top:5px; width:25px; height:25px; z-index:2; display:flex; justify-content:center; align-items:center; pointer-events: none; } 

.calendar .calendar-content > div > .list.today { color:#fff; }
.calendar .calendar-content > div > .list.today:after { content:""; position:absolute; width:25px; height:25px; border-radius:50%; background:#7d7dff; right:5px; top:5px; pointer-events: none; }

.calendar .calendar-content > div > .list:has(.holiday-name) { color:#ff5757; }
.calendar .calendar-content-wrap > #canvas { position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden; pointer-events:none; }
.calendar .calendar-content-wrap > #canvas canvas { position:absolute; left:0; top:0; display:block; width:100%; height:100%; }
.calendar .calendar-content-wrap > #canvas.on { pointer-events:auto; }
.calendar .cursor { position:fixed; display:none; }
.calendar .cursor.on { --cursor:#000; display:flex; width:5px; aspect-ratio:1; left:0; top:0; transform:translate(-50%, -50%); border-radius:50%; border: 1px solid var(--cursor); pointer-events:none; }

.tempImage { z-index:3; }
.resize-status { position:absolute; border:2px dashed #000; z-index:2; }
	
.holiday-name { padding:10px; font-size:12px; color:#ff5757; }


.newItem { position:absolute; left:0; width:calc(100% + 1px); height:20px; background:rgba(0, 0, 0, 0.2); pointer-events: none; padding-left:10px; font-size:11px; }
.newItem.start { border-radius:10px 0 0 10px; }
.newItem.end { border-radius:0 10px 10px 0; }
.newItem.start.end { border-radius:10px; }


.item { position:absolute; left:0; width:calc(100% + 1px); height:20px; font-size:11px; background:var(--itembg); color:var(--itemcolor); }
.item > div { position:relative; width:100%; height:100%; }
.item:hover { z-index:10; }

.item span { padding-left:10px; overflow:hidden; }

.item .item-status { font-size:11px; }
.item.start { border-radius:10px 0 0 10px; }
.item.end { border-radius:0 10px 10px 0; }
.item.start.end { border-radius:10px; }

.item.shape2 { background:transparent; color:var(--itemcolor); }
.item.shape2.start.end { border-radius:0; }
.item.shape2 > div { border-bottom:2px solid var(--itembg); }

.item.shape3 { width:20px; color:#000; white-space: nowrap; padding-left:10px; }
.item.shape3 > div > span { display:none; }
.item.shape3.on span { overflow: visible; display:inline-block; }

.newItem.shape3 { width:20px; }
.newItem.shape3 > div > span { display:none; }

.item.inactive { pointer-events: none; }

.schedule_update { width:400px; max-width:100%; height:100%; min-height:0; display:flex; box-sizing:border-box; flex-direction:column; padding:20px; }
.schedule_update > .content { min-height:0; flex:1; overflow:auto; }
.schedule_update #schedule-update-form { width:100%; display:flex; flex-wrap:wrap; gap:12px 10px; }
.schedule_update .form-group { width:100%; margin-top:0; display:flex; gap:10px; }
.schedule_update .form-group.date-group { width:calc(50% - 5px); }
.schedule_update .jw-input { width:100%; height:36px; padding:0; }
.schedule_update .jw-input input { width:100%; height:100%; box-sizing:border-box; padding:0 10px; border:0; outline:0; background:transparent; }
.schedule_update .form-group .inputM { height:40px; border: 1px solid #ccc; border-radius:5px; }
.schedule_update .form-group .inputM > .box > input:focus ~ .text { color:#999; }
.schedule_update .form-group .inputM > .box > input.on ~ .text { color:#999; }
.schedule_update .form-group .inputM > .box > textarea.on ~ .text { color:#999; }
.schedule_update .textarea { width:100%; min-height:100px; box-sizing:border-box; resize:vertical; }
.schedule_update .form-group .jw-select { position:relative; width:100%; min-width:0; height:36px; }
.schedule_update .jw-select > select { display:none; }
.schedule_update .jw-selected { display:flex; width:100%; height:100%; box-sizing:border-box; align-items:center; justify-content:space-between; padding:0; border:0; border-radius:5px; background:#fff; cursor:pointer; }
.schedule_update .jw-selected::after { width:6px; height:6px; margin-left:10px; border-right:1px solid #777; border-bottom:1px solid #777; transform:rotate(45deg) translateY(-2px); content:""; }
.schedule_update .jw-select-list { position:absolute; right:0; bottom:calc(100% + 5px); left:0; z-index:5; display:none; margin:0; padding:4px 0; border:1px solid #ddd; border-radius:5px; background:#fff; box-shadow:0 8px 20px rgba(0,0,0,.12); list-style:none; }
.schedule_update .jw-select-item { padding:8px 10px; cursor:pointer; }
.schedule_update .jw-select-item:hover { background:#f5f5f5; }
.schedule_update .form-group > div { min-width:0; }
.schedule_update .buttonwrap { flex:none; margin-top:16px; }
.schedule_update .buttonwrap > button { width:100px; }

.schedule_update .shape { display:flex; width:80px; height:20px; }
.schedule_update .shape1 { border-radius:10px; background:var(--bg); }
.schedule_update .shape2 { height:2px; background:var(--bg); }
.schedule_update .shape3 { width:20px; height:20px; border-radius:50%; background:var(--bg); }

.schedule_update .jw-select > .jw-select-list > .jw-select-item { gap:10px; }

.jw_modal section .buttonwrap > button.submit { background:#7D7DFF; }

.jw_modal .selectbox > .select_options { top:auto; bottom:0; }

dialog { overflow: visible; }
dialog:has(.s-modal-color) { overflow: hidden; }

.schedule_update .jw-color { width:80px; height:35px; border-radius:5px; overflow:hidden; }

.schedule_update .hidden { display:none; }
.schedule_update .textarea { border: 1px solid #ccc; border-radius:5px; padding:10px; }

#schedule .tooltip { position:absolute; width:100%; min-height:50px; background:#333; border-radius:5px; padding:5px; display:flex; flex-direction:column; gap:10px; z-index:1000; color:#fff; }
#schedule .tooltip 
#schedule .tooltip > div { position:relative; }
#schedule .tooltip > .tooltip-date { font-size:10px; color:#fff000; display:flex; gap:10px; }
#schedule .tooltip > .tooltip-button { display:flex; justify-content:flex-end; }
#schedule .tooltip > .tooltip-button > button { width:50px; height:20px; padding:0; }

#schedule .tooltip > .tooltip-content::after { content: ''; position: absolute; top:calc(100%); left:20px; background: #333; width:20px; height:10px; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); transform: translateX(-50%) rotate(180deg); }
#schedule .tooltip.up > .tooltip-content::after { top:-10px; transform: translateX(-50%); }

main { display:flex; justify-content:center; padding:100px 0; }
main > .container { width:100%; max-width:1280px; }
main .container > h1 { display:flex; align-items:center; margin-top:60px; }
main .container > h1 span { position:relative; font-size:40px; font-weight:500; }
main .container > h1 span::after { position:absolute; top:0; right:10px; z-index:-1; width:25px; height:25px; border:2px solid #fe8130; border-radius:5px; content:""; transform:translateX(100%) rotate(20deg); }

.jw-app-nav { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.jw-app-nav a { display:flex; height:25px; align-items:center; justify-content:center; padding:0 10px; border:1px solid #ccc; border-radius:5px; background:#fff; font-size:12px; }
.jw-app-nav a.on { border-color:#fe8130; background:#fe8130; color:#fff; }

#schedule { margin-top:30px; margin-bottom:100px; }

@media (max-width:768px) {
	#sub02 { padding:0 10px; }
	main > .container { padding-right:10px; padding-left:10px; }
	.webediter { width:100%; }
}

#schedule .done .tooltip { background:#eee; color:#444; }
#schedule .done .tooltip > .tooltip-content::after { background:#eee; }
#schedule .done .tooltip > .tooltip-date { color:#444; }

#schedule .pause .tooltip { background:#eee; color:#000; }
#schedule .pause .tooltip > .tooltip-content::after { background:#eee; }
#schedule .pause .tooltip > .tooltip-date { color:#000; }

#schedule .s-range-type-A { position:relative; width:120px; height:24px; display:flex; align-items:center; }
#schedule .s-range-type-A input { position:absolute; inset:0; z-index:4; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
#schedule .s-range-type-A progress { width:100%; height:4px; border:0; border-radius:4px; background:#eee; appearance:none; }
#schedule .s-range-type-A progress::-webkit-progress-bar { border-radius:4px; background:#eee; }
#schedule .s-range-type-A progress::-webkit-progress-value { border-radius:4px; background:#fe8130; }
#schedule .s-range-type-A progress::-moz-progress-bar { border-radius:4px; background:#fe8130; }
#schedule .s-range-type-A .thumb { position:absolute; top:50%; left:0; z-index:3; width:10px; height:10px; transform:translate(-50%, -50%); border:2px solid #fe8130; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, .18); pointer-events:none; }

#schedule .color-label { position:relative; width:35px; height:35px; display:flex; justify-content:center; align-items:center; }
#schedule .color-label > span { font-size:16px; }
#schedule .color-label > input[type="color"] { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; height:100%; opacity:0; cursor:pointer; }
#schedule .brushswitch { fill:#000; }
#schedule .brushswitch.on { fill:#ff6600; }

#memo { position:absolute; opacity:0; right:calc(-1 * min(100%, 350px)); top:20px; width:100%; max-width:350px; height:min(600px, calc(100vh - 140px)); box-sizing:border-box; background:#FCFCFC; padding:14px; z-index:2; box-shadow:0 0 10px rgba(0,0,0,.1); transition:all .2s ease-in; }
#memo { display:flex; flex-direction:column; gap:10px; }
#memo.on { right:0; opacity:1; }
#memo > .controls { display:flex; justify-content:space-between; gap:10px; }
#memo > .controls > button { font-size:12px; height:24px; padding:0 10px; border-radius:5px; }
#memo .memo-content { position:relative; flex:1; overflow:auto; }
#memo .memo-content > .card { margin-top:20px; margin-bottom:20px; }
#memo .memo-content > .card > .controls { margin-top:10px; display:flex; justify-content:flex-end; gap:10px; }
#memo .memo-content > .card > .controls button { font-size:12px; height:24px; padding:0 10px; border-radius:5px; font-weight:normal; }
#memo .memo-content > .card > .time { font-size:11px; }
#memo .memo-content > .card > .content { position:relative; margin-top:5px; color:#000; }
#memo .memo-content > .card > .content svg { position:absolute; left:0; top:0; width:100%; height:100%; z-index:-1; }

#memo .memo-content::-webkit-scrollbar { display:initial; width:10px; }
#memo .memo-content::-webkit-scrollbar-track { border-radius:4px; background:#fff; }
#memo .memo-content::-webkit-scrollbar-thumb { background:#78A8FF; border-radius:5px; border:3px solid white; }


.memo-editor-container { position:relative; width:100%; height:100%; overflow:auto; }
.memo-editor-container svg { position:absolute; left:0; top:0; width:100%; height:100%; z-index:-1; }
.memo-editor-container svg.on { z-index:10; }
.memo-editor-container::-webkit-scrollbar { display:initial; }
.memo-editor-container::-webkit-scrollbar-thumb { background:#78A8FF; }
.memo-editor { position:relative; width:100%; height:100%; }

#schedule-memo-update-form .controller { margin-top:10px; display:flex; gap:20px; }
#schedule-memo-update-form .controller button { font-size:12px; padding:3px 10px; border-radius:5px; }
#schedule-memo-update-form .controller button.on { background:#4876EE; color:#fff; }