/* ==========================================================================
1. CSS変数定義（カラー・デザインシステム）
========================================================================== */
:root{
	/* ライトモード（手帳＆直角付箋風カラー） */
	--bg-main: #fbf7ee;        /* 手帳っぽい温かみのある生成り色 */
	--bg-card: #fffbeb;        /* 付箋っぽいクリームイエロー */
	--text-main: #292524;      /* くっきり読みやすい濃いブラウンブラック */
	--text-muted: #78716c;     /* 落ち着いたミディアムブラウン */
	--border-color: #fde68a;   /* 付箋になじむ柔らかなイエロー枠線 */
	
	/* 方眼（マス目）の線の色 */
	--note-line: rgba(217, 119, 6, 0.12);
	
	/* アクセントカラー（オレンジ系） */
	--accent-color: #ea580c;
	--accent-hover: #c2410c;
	--accent-light: #fef3c7;
	
	/* ステータスカラー */
	--danger-color: #ef4444;
	--success-color: #10b981;
	
	/* 角丸の設定（四角にするため0pxに指定） */
	--radius: 0px;
	--radius-sm: 0px;
}

/* ダークモード定義（黒板に貼り付けた付箋風） */
[data-theme="dark"]{
	--bg-main: #18181b;        /* 黒板のようなダークグレー */
	--bg-card: #27272a;        /* 少し明るいグレー付箋 */
	--text-main: #f5f5f4;      /* 白文字 */
	--text-muted: #a8a29e;     /* くっきりグレー */
	--border-color: #3f3f46;
	--note-line: rgba(255, 255, 255, 0.05);
	--accent-light: #292524;
}

/* ==========================================================================
2. リセット ＆ 基本スタイル
========================================================================== */
*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Meiryo UI', sans-serif;
}

/* 手帳（生成り＋方眼ノート）の背景 */
body{
	background-color: var(--bg-main);
	background-image: 
	linear-gradient(var(--note-line) 1px, transparent 1px),
	linear-gradient(90deg, var(--note-line) 1px, transparent 1px);
	background-size: 20px 20px;
	color: var(--text-main);
	line-height: 1.6;
	letter-spacing: 0.01em;
	transition: background-color 0.2s, color 0.2s;
	padding-bottom: 60px;
}

.container{
	max-width: 600px;
	margin: 0 auto;
	padding: 0 20px;
}

/* ==========================================================================
3. ヘッダー
========================================================================== */
header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24px 0 16px 0;
	margin-bottom: 24px;
}

header h1{
	font-size: 1.5rem;
	font-weight: 900;
	letter-spacing: -0.02em;
	color: var(--text-main);
}

.header-actions{
	display: flex;
	gap: 8px;
}

.icon-btn{
	background: var(--bg-card);
	border: 1.5px solid var(--border-color);
	box-shadow: 2px 2px 0 rgba(0,0,0,0.06);
	color: var(--text-main);
	padding: 8px 14px;
	border-radius: 12px;
	cursor: pointer;
	font-size: 0.85rem;
	font-weight: 700;
	transition: all 0.15s ease;
}

.icon-btn:hover{
	transform: translateY(-2px);
	box-shadow: 2px 4px 0 rgba(0,0,0,0.1);
}

/* ==========================================================================
4. カウントダウンエリア（付箋風カード）
========================================================================= */
.countdown-card{
	background: var(--bg-card);
	border-radius: var(--radius-sm);
	padding: 20px;
	border-left: 6px solid var(--accent-color); /* 付箋の見出しテープ風 */
	border-top: 1px solid var(--border-color);
	border-right: 1px solid var(--border-color);
	border-bottom: 1px solid var(--border-color);
	box-shadow: 3px 3px 8px rgba(0,0,0,0.07);
	text-align: center;
	margin-bottom: 20px;
	transform: none; /* 付箋っぽくほんのり傾ける */
	transition: none;
}

.countdown-card:hover{
	transform: none;
}

.countdown-title{
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 12px;
}

.countdown-timer{
	display: flex;
	justify-content: center;
	align-items: baseline;
	gap: 16px;
}

.time-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.time-value{
	font-size: 2.2rem;
	font-weight: 900;
	color: var(--accent-color);
	line-height: 1;
}

.time-label{
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--text-muted);
	margin-top: 4px;
}

/* ==========================================================================
5. 入力 ＆ AI生成カード（メイン付箋）
========================================================================== */
.card{
	background: var(--bg-card);
	border-radius: var(--radius-sm);
	padding: 24px;
	border: 1px solid var(--border-color);
	box-shadow: 4px 4px 10px rgba(0,0,0,0.08);
	margin-bottom: 24px;
	transform: none;
	transition: none;
}

.card:hover{
	transform: none;
}

.form-group{
	margin-bottom: 18px;
}

.form-group label{
	display: block;
	font-size: 0.85rem;
	font-weight: 500;
	margin-bottom: 8px;
	color: var(--text-main);
}

input[type="text"], input[type="date"], select {
	width: 100%;
	padding: 12px 16px;
	border: 2px solid var(--border-color);
	border-radius: var(--radius-sm);
	background: var(--bg-main);
	color: var(--text-main);
	font-size: 0.95rem;
	outline: none;
	transition: all 0.2s ease;
}

input[type="text"]:focus, input[type="date"]:focus, select:focus {
	border-color: var(--accent-color);
	background: var(--bg-card);
	box-shadow: 0 0 0 4px var(--accent-light);
}

.form-row{
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

/* ぷっくり押し込める丸ボタン */
.btn-primary{
	width: 100%;
	background: var(--accent-color);
	color: white;
	border: 2px solid #c2410c;
	padding: 14px;
	border-radius: 30px;
	font-size: 1rem;
	font-weight: 800;
	cursor: pointer;
	box-shadow: 0 4px 0 #9a3412;
	transition: all 0.15s ease;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
}

.btn-primary:hover{
	background: #f97316;
	transform: translateY(-2px);
	box-shadow: 0 6px 0 #9a3412;
}

.btn-primary:active{
	transform: translateY(3px);
	box-shadow: 0 1px 0 #9a3412;
}

/* ==========================================================================
6. TODOリストエリア（ミニ付箋たち）
========================================================================== */
.todo-list{
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* 各タスクも小さな付箋紙のデザイン */
.todo-item{
	background: var(--bg-card);
	border-left: 4px solid #f59e0b; /* 黄色いミニ付箋風見出し */
	border-top: 1px solid var(--border-color);
	border-right: 1px solid var(--border-color);
	border-bottom: 1px solid var(--border-color);
	border-radius: 0px;
	padding: 14px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	box-shadow: 2px 3px 6px rgba(0,0,0,0.05);
	transition: none;
}

/* タスク本文エリアを自動で広げてボタンを右端に押し出す */
.todo-text, .todo-content, .todo-item span, .todo-item label{
	flex: 1;
	min-width: 0; /* 文字長によるレイアウト崩れ防止 */
}

/* ボタン群のグループ */
.todo-actions, .todo-item > div:last-child{
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto; /* 右端に完全固定 */
	flex-shrink: 0;    /* ボタン群が縮むのを防止 */
}

/* 各操作ボタン（上下・編集・削除など）の余白とデザイン */
.todo-actions button,
.todo-btn,
.todo-item button{
	padding: 4px 10px; /* 上下4px, 左右10pxのパディングを入れる */
	font-size: 0.8rem;
	border-radius: 4px;
	cursor: pointer;
	white-space: nowrap; /* ボタン内テキストの改行を防止 */
}

.todo-item:nth-child(even),
.todo-item:nth-child(odd){
	transform: none;
}

.todo-item:hover{
	transform: rotate(0deg) translateY(-2px);
	box-shadow: 3px 5px 10px rgba(0,0,0,0.1);
}

.todo-item.completed{
	opacity: 0.5;
	background: var(--bg-main);
	border-left-color: var(--text-muted);
	transform: rotate(0deg);
	box-shadow: none;
}

.todo-header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
}

.todo-header h2{
	font-size: 1.0rem;
	font-weight: 500;
}

/* ==========================================================================
7. APIキー設定モーダル
========================================================================== */
.modal-overlay{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	border: none;
	background: transparent;
	padding: 20px;
	z-index: 1000;
}

.modal-overlay[open]{
	display: flex;
	justify-content: center;
	align-items: center;
}

.modal-overlay::backdrop{
	background: rgba(28, 25, 23, 0.5);
	backdrop-filter: blur(4px);
}

.modal-content{
	background: var(--bg-card);
	padding: 28px;
	border-radius: var(--radius);
	max-width: 480px;
	width: 100%;
	border: 1px solid var(--border-color);
	box-shadow: 0 8px 0 #fed7aa;
}

.modal-header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.modal-header h3{
	font-size: 1.15rem;
	font-weight: 800;
}

.modal-footer{
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 24px;
}

/* HTMLの style="width: auto;" をCSSへ移行 */
.modal-footer .btn-primary {
	width: auto;
}

.help-text{
	font-size: 0.8rem;
	color: var(--text-muted);
	margin-top: 8px;
	line-height: 1.5;
}
.help-text .external-link {
	color: var(--accent-color);
}

/* ==========================================================================
8. ビュー切り替え（画面遷移）制御
========================================================================== */
.view{
	display: none;
}

.view.active{
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.current-goal-bar{
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius);
	padding: 14px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	box-shadow: 3px 3px 6px rgba(0,0,0,0.05);
	transform: none;
}

.goal-display-text{
	font-weight: 500;
	font-size: 1.25rem;
	color: var(--text-main);
}

/* ==========================================================================
9. タスク追加フォームのレイアウト ＆ ボタン
========================================================================== */
form.add-manual-container{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	width: 100%;
}

form.add-manual-container #manual-input{
	flex: 1;
	height: 42px;
	padding: 0 14px;
	font-size: 0.9rem;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	background: var(--bg-main);
	color: var(--text-main);
}

form.add-manual-container #add-manual-btn.btn-secondary{
	height: 42px;
	padding: 0 20px;
	min-width: 64px;
	font-size: 0.85rem;
	font-weight: 700;
	background: var(--bg-card);
	color: var(--text-main); /* セミコロン抜けを修正 */
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.15s ease;
}

form.add-manual-container #add-manual-btn.btn-secondary:hover {
	background: var(--accent-light);
	border-color: var(--accent-color);
}

/* 小さなボタン（目標変更・モーダル内ボタンなど） */
.btn-small{
	padding: 6px 12px;
	font-size: 0.8rem;
	background: var(--bg-card);
	color: var(--text-main);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	cursor: pointer;
}

.btn-small.delete{
	color: var(--danger-color);
	border-color: var(--danger-color);
}
/* タスク未登録時のメッセージ用クラス */
.todo-item.empty-message{
	justify-content: center;
	color: var(--text-muted);
}