:root {
			--bg: #f6f8fb;
			--card: #ffffff;
			--text: #222;
			--muted: #666;
			--line: #666666;
			--accent: #2563eb;
			--accent-soft: #dbeafe;
			--success: #16a34a;
			--success-soft: #dcfce7;
			--shadow: 0 8px 24px rgba(0, 0, 0, .08);
			--radius: 16px;
		}

		* {
			box-sizing: border-box;
		}

		body {
			margin: 0;
			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans",
				"Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
			background: var(--bg);
			color: var(--text);
		}

		.wrap {
			max-width: 760px;
			margin:0 auto;
			padding:16px;
		}
        .wrap.cal {
            max-width: 90%;
            background-color: #fff;

        }

.wrap.areas{
    line-height: 2;
    gap:12px;
}

	/*-----------------------
 page-top
-------------------------*/
#page-top{
	width:40px;
	height:40px;
	display:block;
	position:fixed;
	right:5%;
	bottom:5%;
	cursor:pointer;
	  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all  0.3s ease;
  z-index:998;
}
#page-top img{
	width:40px;
	height:40px;
}
#page-top:hover{
	opacity:0.8;
}


		.card {
			background: var(--card);
			border-radius: var(--radius);
			box-shadow: var(--shadow);
			padding: 20px;
			margin-bottom: 16px;
		}

		h1 {
			margin: 0 0 8px;
			font-size: 28px;
		}

		.sub {
			color: var(--muted);
			font-size: 14px;
			margin-bottom: 16px;
		}

		.stats {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			padding: 10px 14px;
			background: var(--accent-soft);
			color: var(--accent);
			border-radius: 999px;
			font-weight: 700;
			margin-bottom: 16px;
		}
		.stats.nb{
			background: none;

		}

		form {
			display: flex;
			gap: 10px;
			flex-wrap: wrap;
		}
input[type="password"],
		input[type="text"] {
			flex: 1 1 200px;
			min-width: 200px;
			border: 1px solid var(--line);
			border-radius: 3px;
			padding: 3px 4px;
			font-size: 16px;
			outline: none;
		}

		input[type="text"]:focus {
			border-color: var(--accent);
			box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
		}

		#content{
			padding: 6px 8px;
			border-radius: 6px;
			margin: 0.5em 0;
		}

		.cat input[type="text"]{
			border-radius:3px;
			padding:3px;
		}
		.cat label{
			display: inline-block;
			min-width:4.5em;
			text-align: right;
			padding-right: 3px;
		}
		.cat .field-wrap{
				display:flex;
	justify-content:flex-start;
	align-items:center;
	  -ms-flex-wrap: wrap;
      flex-wrap: wrap;	
		}

		button {
			border: none;
			border-radius: 3px;
			padding:2px 4px;
			font-size: 14px;
			font-weight: 700;
			cursor: pointer;
			background: var(--accent);
			color: white;
		}

		.hint {
			margin-top: 10px;
			font-size: 13px;
			color: var(--muted);
		}

		.flash {
			position: relative;
			overflow: hidden;
			background: var(--success-soft);
			color: var(--success);
			border-radius: 14px;
			padding: 14px 16px;
			margin-bottom: 16px;
			font-weight: 700;
		}

		.flash small {
			display: block;
			margin-top: 6px;
			font-weight: 400;
			color: #166534;
		}

		.flash::after {
			content: "✨ ✨ ✨";
			position: absolute;
			right: 12px;
			top: 10px;
			opacity: .7;
			animation: pop 1.2s ease-out infinite alternate;
		}

		@keyframes pop {
			from {
				transform: translateY(0) scale(1);
				opacity: .4;
			}

			to {
				transform: translateY(-4px) scale(1.05);
				opacity: .9;
			}
		}
		.flex{
				display:flex;
	justify-content:flex-start;
	align-items: center;	
	  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
	  gap:12px;
	  width: 100%;
	  -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
		}

		.error {
			background: #fee2e2;
			color: #b91c1c;
			border-radius: 12px;
			padding: 12px 14px;
			margin-bottom: 12px;
		}

		.list {
			display: grid;
			gap: 10px;
		}



		.time {
			min-width: 120px;
			flex: 0;
			font-size: 13px;
			color: var(--muted);
			line-height: 1.6;
		}

		.content {
			flex: 1;
			font-size: 16px;
			word-break: break-word;
			min-width: 15em;
		}

		.empty {
			color: var(--muted);
			padding: 10px 0;
		}

		.footer-note {
			margin-top: 10px;
			font-size: 13px;
			color: var(--muted);
		}

		.delete {
			background: #ef4444;
			color: white;
			border: none;
			border-radius: 8px;
			width:20px;
			height: 20px;
			font-size: 16px;
			cursor: pointer;
			display: flex;
  justify-content: center;
  align-items: center;
		}

		.delete:hover {
			background: #dc2626;
		}


		.suggest-box {
    display: none;
    position: absolute;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
    margin-top: 4px;
    width: 100%;
    z-index: 1000;
    overflow: hidden;
	top:26px;
}

.suggest-item {
    padding: 10px 12px;
    cursor: pointer;
}

.suggest-item:hover {
    background: #f3f4f6;
}

.field-wrap {
    position: relative;
}

#selected_tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #dbeafe;
    color: #1d4ed8;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 14px;
}

.tag-chip button {
    border: none;
    background: transparent;
    cursor: pointer;
    color: #1d4ed8;
    font-size: 14px;
    padding: 0;
}


.card{
    background:#fff;
    border-radius:16px;
    padding:10px;
    box-shadow:0 6px 10px rgba(0,0,0,0.05);
}

.card h2{
    margin:0 0 15px 0;
    font-size:18px;
}

.task_list{
	margin: 2em 0 0 0;
}
.list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.item{
    display:flex;
    gap:3px;
    align-items:flex-start;
    padding:10px;
    border-radius:12px;
    border:1px solid #eee;
    background:#fafafa;
    transition:background .15s;
	position: relative;
	z-index: 0;
}



.time{
    width:140px;
    flex-shrink:0;
    font-size:12px;
    color:#888;
    line-height:1.5;
    padding-top:4px;
}

.item .drag-handle {
	position: absolute;
	right:0;
	top:0;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: none;
	font-size:32px;
	z-index: 100;
    width: 40px;
    height:auto;
    display: flex;
    align-items: center;
    justify-content: center;
	color: #ccc;
}

.dragging {
    opacity: 0.4;
	background:#c2d5fd;
}

.drag-handle {
    touch-action: none;
}

.main{
    flex:1;
    min-width:0;
}

.meta-row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    margin-bottom:8px;
}

.category-chip{
    display:inline-flex;
    align-items:center;
    padding:5px 10px;
    border-radius:999px;
    background:#dbeafe;
    color:#1d4ed8;
    font-size:12px;
    font-weight:700;
    white-space:nowrap;
}

.tags{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.tag-chip{
    display:inline-flex;
    align-items:center;
    padding:4px 9px;
    border-radius:999px;
    background:#fcffd7;
    color:#555;
    font-size:12px;
    white-space:nowrap;
}

.content{
    font-size:15px;
    line-height:1.7;
    word-break:break-word;
}

.delete-form{
    margin-left:auto;
    flex-shrink:0;
}

.delete{
    width:30px;
    height:30px;
    border:none;
    border-radius:8px;
    background:#ef4444;
    color:#fff;
    font-size:16px;
    font-weight:bold;
    cursor:pointer;
    transition:background .15s;
}

.delete:hover{
    background:#dc2626;
}

.empty{
    padding:10px;
    color:#999;
}


.todo-top-links {
	display:flex;
	justify-content:flex-start;
	align-items: center;	
}

        .todo-top-links a {
            margin-right:10px;
        }

        .filters {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap:12px;
				display:flex;
	justify-content:flex-start;
	align-items:stretch;	
	  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
	  width: 100%;
	  -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
        }

.full{
	width: 100%;
}		
.half{
	width: 48%;
}
.short{
	max-width: 30%;
}

.short input[type="text"]{
	max-width: 100%;
	-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
min-width:inherit;
} 


/* 長押しで出るふわふわメニュー */
.emoji-picker-pop {
    display: none;
    position: absolute;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 30px;
    padding: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 1000;
    flex-direction: row;
    gap: 8px;
    animation: pop-in 0.2s ease-out;
        	display:flex;
	justify-content:flex-start;
	align-items: center;	
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      max-width:280px;
}

.emoji-picker-css {
    display: none; /* 普段は隠す */
    position: absolute;
    top:0px;  /* 入力欄の上に表示 */
    left: 0;
    background: white;
    border: 1px solid #ccc;
    border-radius: 30px;
    padding: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 999;
    flex-wrap: nowrap;
    white-space: nowrap;
    max-width:320px;
    -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
	justify-content:flex-start;
	align-items: center;	
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

/* チェックボックスがONの時だけパレットを出す */
#emoji_state:checked + .emoji-picker-css {
    display: flex;
    gap: 12px;
}

.emo-item {
    font-size: 1.8rem;
    cursor: pointer;
    transition: transform 0.1s;
}
.emo-item:active { transform: scale(1.3); }

.log-journal{
    font-size:12px; color: #666; margin-top: 4px; border-left: 2px solid #ddd; padding-left: 8px;
}
@keyframes pop-in {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.emoji-picker-pop span {
    font-size: 1.8rem;
    cursor: pointer;
    transition: transform 0.1s;
}

.emoji-picker-pop span:active { transform: scale(1.3); }



.filters > div{
	padding: 3px 0;
}
textarea,
input[type="number"],
input[type="datetime-local"],
input[type="date"],
input[type="text"],
select {
            width: 100%;
			max-width: 100%;
            box-sizing: border-box;
			padding:0.5em 2px;
			-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
min-width: inherit;
border: 1px solid #666;
border-radius: 2px;
        }

.filters.gray{
	padding:6px;
	margin-top: 1em;
	background-color: #ddd;
	font-size:12px;
	gap:12px;
}
.task-late {
    color: #e76800;
}

.task-overdue {
    color: red;
    font-weight: bold;
}

        .task-row {
            display: grid;
            grid-template-columns: 52px 1fr auto;
            gap:3px;
            align-items: start;
			width: 100%;
			-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

	display:flex;
	justify-content:flex-start;
	align-items: center;
	  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
        }

        .task-check {
            display: flex;
            align-items: center;
            justify-content: center;
			width:5%;
        }

        .task-main {
            min-width: 0;
			width:93%;
        }

        .task-title {
            font-size: 18px;
            font-weight: bold;
            line-height: 1.5;
            word-break: break-word;
        }

        .task-title.done {
            text-decoration: line-through;
            opacity: .55;
        }

        .task-meta {
			width: 100%;
            display: flex;
			  -ms-flex-wrap: wrap;
		    flex-wrap: wrap;
            gap: 6px 10px;
            margin-top: 6px;
            font-size: 13px;
            opacity: .9;
			-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
        }

        .task-actions {
			width: 100%;
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            justify-content: flex-end;
	align-items: center;				
        }

        .mini-form {
            display: inline;
        }

        .score-chip,
        .status-chip,
        .date-chip {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 9999px;
            background: rgba(255, 255, 255, .08);
            border: 1px solid rgba(255, 255, 255, .12);
        }

        .status-open {
            background: rgba(255, 196, 0, .12);
        }

        .status-done {
            background: rgba(0, 200, 120, .12);
        }

        .inline-edit {
            margin-top: 12px;
            padding: 12px;
            border: 1px dashed rgba(255, 255, 255, .18);
            border-radius: 12px;
        }

        .inline-edit .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 8px;
        }

        .inline-edit input,
        .inline-edit select {
            width: 100%;
            box-sizing: border-box;
        }

        .small {
            font-size: 12px;
            opacity: .75;
        }

.todo-item.is-open {
    cursor: grab;
}

.todo-item.dragging {
    opacity: 0.5;
}		

label.search{
	display: flex;
  justify-content: center;
  align-items: center;
cursor: pointer;
}

label.search img{
	width: 30px;
	height: auto;
}
#chk,
.sc{
	display: none;
}
#chk:checked + .sc{
	display: block;
}

.report-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .report-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .report-link {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 14px;
            border: 1px solid #eee;
            border-radius: 10px;
            background: #fff;
            text-decoration: none;
            color: #333;
        }

        .report-link:hover {
            background: #f7fbff;
        }

        .report-count {
            color: #888;
            font-size: 14px;
        }

        .logs {
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .log-item {
            display: flex;
            gap: 14px;
            align-items: flex-start;
            padding: 14px;
            border: 1px solid #eee;
            border-radius: 12px;
            background: #fff;
        }

        .log-time {
            width: 140px;
            flex-shrink: 0;
            font-size: 12px;
            color: #888;
        }

        .log-main {
            flex: 1;
        }

        .chips {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 8px;
        }

        .category-chip {
            display: inline-flex;
            padding: 5px 10px;
            border-radius: 999px;
            background: #dbeafe;
            color: #1d4ed8;
            font-size: 12px;
            font-weight: 700;
        }

        .tag-chip {
            display: inline-flex;
            padding: 4px 9px;
            border-radius: 999px;
            background: #f3f4f6;
            color: #555;
            font-size: 12px;
        }

        .log-content {
            font-size: 15px;
            line-height: 1.7;
        }

        .back-link {
            display: inline-block;
            margin-top: 16px;
        }
        footer{
            width: 100%;
            padding: 20px 0;
            -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
        }

        @media (max-width: 768px) {
            .report-grid {
                grid-template-columns: 1fr;
            }

            .log-item {
                flex-direction: column;
            }

            .log-time {
                width: auto;
            }
        }
		

@media (max-width: 640px){

    .emoji-picker-css {
max-width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
    }
		.cat label{
		
			text-align:left;
			padding-right:0;
		}

    .item{
        flex-direction:column;
    display:block;
    padding:0 10px 10px 10px;
 }

	.task-row{
			display:flex;
	justify-content:flex-start;
	align-items: center;	
	  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
    }

    .time{
        width:auto;
        padding-top:0;
    }

    .delete-form{
        margin-left:0;
		float: right;
		display: inline-block;
    }
.task-main {
    min-width: 0;
    width:100%;
	-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

}