/* =============================================================================
   09-draft.css
   デザイン入稿ページ群（紙袋サイト）固有のスタイル。
     .draft-page          /draft, /draft/fullorder-guide, /draft/onepoint-guide,
                          /draft/naire-guide 共通フック
     .draft-guide-page    入稿ガイド（3ページ）

   対応 partial:
     contents/draft.php             デザイン入稿（ハブ）
     contents/fullorder-guide.php   「フルオーダー」「規格サイズ」入稿ガイド
     contents/onepoint-guide.php    「ワンポイント箔押し紙袋」入稿ガイド
     contents/naire-guide.php       「ワンポイント名入れ紙袋」入稿ガイド

   タブUI（onepoint-guide のみ）は親テーマ js/main.js が制御
   （.tab-section > .tab-btn[data-tab] / .tab-panel）。タブの素のスタイルは
   04-frontpage.css にあるが、それはフロントページ専用 enqueue のため、入稿
   ページでも使えるよう本ファイルで独立に定義する。

   ※ 当テーマは raw CSS（native nesting）で配信される。Sass風の「&--modifier」は
      無効になるため、修飾子クラスはすべて独立セレクタとして記述すること
      （子孫・&:hover・&.active のネストは native でも有効なので使用可）。
      親テーマ 05-components.css の .c-btn--* は &-- ネストで書かれており raw 配信では
      効かないため、本ページで使う変種は下部で独立定義する。
   ============================================================================= */

@layer pages {

	/* ==========================================================================
	   ページ共通
	   ========================================================================== */
	.draft-page {
		.entry-content { color: var(--color-text); }
	}

	.draft-section {
		margin: 2.5rem 0;

		&:first-child { margin-top: 1.5rem; }
	}

	.draft-em {
		color: #c0392b;
		font-weight: 700;
	}

	/* 強調コールアウト（完全データの注意） */
	.draft-callout {
		display: flex;
		gap: 0.75rem;
		align-items: flex-start;
		background: var(--color-accent-soft);
		border: 1px solid var(--color-accent-border);
		border-left: 4px solid var(--color-accent);
		margin: 1.25rem 0;

		.c-info-box-icon { color: var(--color-accent); }
		p { margin: 0; line-height: 1.8; font-size: 0.95rem; }
		strong { color: var(--color-accent-dark); font-weight: 700; }
	}

	/* 注意リスト（赤い三角アイコン） */
	.draft-notes {
		list-style: none;
		margin: 0 0 1.25rem;
		padding: 0;

		li {
			position: relative;
			padding-left: 1.5em;
			margin-bottom: 0.4rem;
			font-size: 0.95rem;
			color: #b3261e;
		}
		li::before {
			content: "\f071"; /* triangle-exclamation */
			font-family: "Font Awesome 6 Free";
			font-weight: 900;
			position: absolute;
			left: 0;
			top: 0.05em;
			font-size: 0.85em;
		}
	}

	/* ==========================================================================
	   ハブ：入稿ガイドへの導線リンク（draft.php）
	   ========================================================================== */
	.draft-guide-links {
		list-style: none;
		margin: 1.25rem 0 0;
		padding: 0;
		display: grid;
		gap: 1rem;
	}
	.draft-guide-link {
		display: flex;
		align-items: center;
		gap: 1rem;
		padding: 1.25rem 1.5rem;
		background: #fff;
		border: 1px solid var(--color-border);
		border-radius: 12px;
		text-decoration: none;
		color: var(--color-text);
		transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;

		&:hover {
			border-color: var(--color-accent);
			box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
			transform: translateY(-2px);
		}

		.draft-guide-link-icon {
			flex: 0 0 auto;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 52px;
			height: 52px;
			border-radius: 50%;
			background: var(--color-accent-soft);
			color: var(--color-accent);
			font-size: 1.3rem;
		}
		.draft-guide-link-body { flex: 1 1 auto; min-width: 0; }
		.draft-guide-link-title {
			display: block;
			font-weight: 700;
			font-size: 1.05rem;
			color: var(--color-primary);
			margin-bottom: 0.2rem;
		}
		.draft-guide-link-desc {
			display: block;
			font-size: 0.875rem;
			color: var(--color-muted);
			line-height: 1.6;
		}
		.draft-guide-link-arrow {
			flex: 0 0 auto;
			color: var(--color-accent);
			font-weight: 700;
			font-size: 1.2rem;
		}

		@media (max-width: 600px) {
			padding: 1rem;
			gap: 0.75rem;

			.draft-guide-link-icon { width: 42px; height: 42px; font-size: 1.1rem; }
			.draft-guide-link-arrow { display: none; }
		}
	}

	/* ハブ：データ入稿ボックス（.c-info-box--accent の独立実装） */
	.draft-send-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 1rem;
		flex-wrap: wrap;
		border-left: 4px solid var(--color-accent);
		margin-top: 1rem;

		@media (max-width: 768px) {
			flex-direction: column;
			align-items: flex-start;
		}
	}

	/* ==========================================================================
	   ガイド：補足ノート（.c-info-box--note の独立実装）
	   ========================================================================== */
	.draft-template-note {
		display: flex;
		gap: 0.75rem;
		align-items: center;
		background: #f7f9fc;
		border-color: #d8e2ee;
		margin: 1.25rem 0;

		.c-info-box-icon { color: #5a7fb0; }
		p { margin: 0; font-size: 0.9rem; color: #4a6080; line-height: 1.7; }
	}

	/* ==========================================================================
	   ガイド：テンプレートダウンロード表（ai / psd の2ボタン）
	   ========================================================================== */
	.draft-template-table {
		width: 100%;
		border-collapse: collapse;
		margin: 1.25rem 0;
		font-size: 0.95rem;

		caption {
			caption-side: top;
			text-align: left;
			font-weight: 700;
			color: var(--color-accent-dark);
			padding: 0.5rem 0;
		}
		th, td {
			border: 1px solid var(--color-border);
			padding: 0.85rem 1rem;
			text-align: left;
			vertical-align: middle;
		}
		thead th {
			background: var(--color-primary);
			color: #fff;
			font-weight: 700;
			text-align: center;
		}
		tbody th {
			background: #fafafa;
			font-weight: 700;
			width: 42%;
		}

		.draft-template-size {
			display: inline-block;
			font-weight: 400;
			font-size: 0.82em;
			color: var(--color-muted);
		}

		@media (max-width: 600px) {
			th, td { display: block; width: 100%; box-sizing: border-box; }
			thead { display: none; }
		}
	}
	.draft-dl-group {
		display: flex;
		gap: 0.5rem;
		flex-wrap: wrap;
		justify-content: center;
	}
	.draft-dl-btn {
		flex: 1 1 auto;
		min-width: 150px;
		padding: 0.6rem 1rem;
		font-size: 0.9rem;
		white-space: nowrap;
	}
	/* psd ボタンを ai と視覚的に区別（淡い塗り）。
	   .draft-page .c-btn--secondary（0,2,0）に勝つため要素付き（0,2,1）で記述。 */
	.draft-page a.draft-dl-btn-psd {
		background: var(--color-accent-soft);
		color: var(--color-accent-dark);
		border-color: var(--color-accent-border);
	}
	.draft-page a.draft-dl-btn-psd:hover {
		background: var(--color-accent-border);
		color: var(--color-accent-dark);
	}

	/* ==========================================================================
	   ガイド：タブUI（onepoint-guide。main.js 制御。in-content 版）
	   ========================================================================== */
	.draft-tabs {
		margin-top: 1.5rem;
	}
	.draft-tabs .tab-menu {
		display: flex;
		gap: 4px;
		border-bottom: 2px solid var(--color-border);
		margin-bottom: 1.5rem;
	}
	.draft-tabs .tab-btn {
		flex: 1 1 0;
		min-width: 0;
		padding: 0.85rem 1rem;
		border: 1px solid transparent;
		border-bottom: none;
		background: #f3f4f6;
		color: var(--color-muted);
		font-weight: 700;
		font-size: 0.95rem;
		font-family: inherit;
		cursor: pointer;
		border-radius: 8px 8px 0 0;
		transition: background-color 0.25s ease, color 0.25s ease;

		i { margin-right: 0.3em; }

		&:hover { background: #eef0f3; color: var(--color-primary); }

		&.active {
			background: #fff;
			color: var(--color-primary);
			border-color: var(--color-border);
			border-top: 3px solid var(--color-primary);
			margin-bottom: -2px;
		}
	}
	.draft-tabs .tab-panel {
		display: none;

		&.active {
			display: block;
			animation: draftTabFadeIn 0.4s ease;
		}
		&.active.is-leaving { animation: draftTabFadeOut 0.18s ease forwards; }
	}

	@keyframes draftTabFadeIn {
		from { opacity: 0; transform: translateY(6px); }
		to   { opacity: 1; transform: translateY(0); }
	}
	@keyframes draftTabFadeOut {
		from { opacity: 1; transform: translateY(0); }
		to   { opacity: 0; transform: translateY(-4px); }
	}

	/* ガイド内見出し */
	.draft-subhead {
		font-size: 1.2rem;
		font-weight: 700;
		color: var(--color-primary);
		margin: 1.5rem 0 0.75rem;
		padding-bottom: 0.4rem;
		border-bottom: 2px solid var(--color-accent-soft);
	}
	.draft-subhead--guide {
		margin-top: 2.5rem;
	}
	.draft-note-lead {
		font-size: 0.875rem;
		color: var(--color-muted);
		margin: 0 0 0.75rem;
	}

	/* ==========================================================================
	   ガイド：注意チェックリスト
	   ========================================================================== */
	.draft-checklist {
		list-style: none;
		margin: 0 0 1rem;
		padding: 0;
		border: 1px solid var(--color-border);
		border-radius: 8px;
		overflow: hidden;
		background: #fff;

		li {
			position: relative;
			padding: 0.85rem 1rem 0.85rem 2.6rem;
			border-bottom: 1px solid var(--color-border-soft);
			line-height: 1.7;
			font-size: 0.95rem;

			&:last-child { border-bottom: none; }
		}
		li::before {
			content: "\f14a"; /* square-check */
			font-family: "Font Awesome 6 Free";
			font-weight: 900;
			position: absolute;
			left: 0.9rem;
			top: 0.95rem;
			color: var(--color-accent);
			font-size: 0.95em;
		}
		small {
			display: inline-block;
			color: var(--color-muted);
			font-size: 0.82em;
			line-height: 1.6;
		}
		a { color: var(--color-accent-dark); font-weight: 700; }
	}

	/* ガイド：カード内の点線区切りリスト */
	.draft-dot-list {
		margin: 0 0 1rem;
		padding: 0;
		list-style: none;

		li {
			position: relative;
			padding: 0 0 0.5rem 1.2em;
			margin-bottom: 0.5rem;
			border-bottom: 1px dotted var(--color-border);
			line-height: 1.7;
			font-size: 0.95rem;

			&:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
			&::before {
				content: "";
				position: absolute;
				left: 0.1em;
				top: 0.65em;
				width: 6px;
				height: 6px;
				border-radius: 50%;
				background: var(--color-accent);
			}
		}
		a { color: var(--color-accent-dark); font-weight: 700; }
	}

	/* ガイド：補足ノートボックス（カード内の淡背景の注意リスト） */
	.draft-note-box {
		background: var(--color-surface-soft, #fafaf7);
		border: 1px solid var(--color-border);
		border-radius: 8px;
		padding: 0.9rem 1.1rem;
		margin: 1rem 0;

		ul { margin: 0; padding-left: 1.2rem; }
		li { margin-bottom: 0.4rem; line-height: 1.7; font-size: 0.9rem; }
		li:last-child { margin-bottom: 0; }
	}

	/* ==========================================================================
	   ガイド：手順カード
	   ========================================================================== */
	.draft-card {
		border: 1px solid var(--color-border);
		border-radius: 10px;
		overflow: hidden;
		margin: 1rem 0;
		background: #fff;
	}
	.draft-card-head {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		padding: 0.9rem 1.1rem;
		background: var(--color-accent-soft);
		border-bottom: 1px solid var(--color-accent-border);

		h4 {
			margin: 0;
			font-size: 1rem;
			font-weight: 700;
			color: var(--color-accent-dark);
			line-height: 1.5;
		}
	}
	.draft-card-num {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		border-radius: 50%;
		background: var(--color-accent);
		color: #fff;
		font-weight: 700;
		font-size: 0.9rem;
		line-height: 1;
	}
	.draft-card-body {
		padding: 1.1rem;

		p { margin: 0 0 0.85rem; line-height: 1.8; font-size: 0.95rem; }
		p:last-child { margin-bottom: 0; }
		ul { margin: 0 0 0.85rem; }
		a { color: var(--color-accent-dark); }
	}
	.draft-card-body .draft-checklist { margin-bottom: 1rem; }
	.draft-center { text-align: center; }
	.draft-card-cta {
		margin-top: 1rem;
		text-align: center;
	}

	/* もっと見る（外部リンク） */
	.draft-more {
		margin: 0 0 0.85rem;

		a {
			display: inline-flex;
			align-items: center;
			gap: 0.4em;
			color: var(--color-primary);
			font-weight: 700;
			text-decoration: none;
			font-size: 0.9rem;

			&:hover { text-decoration: underline; }
		}
		.draft-more-sub { font-size: 0.8em; color: var(--color-muted); font-weight: 400; }
	}

	/* 図版 */
	.draft-figure {
		margin: 0.75rem 0;
		text-align: center;

		img {
			max-width: 100%;
			height: auto;
			border: 1px solid var(--color-border-soft);
			border-radius: 6px;
		}
	}
	.draft-figure--narrow img { max-width: 360px; }

	/* ==========================================================================
	   ガイド：箔押し可能範囲などのサイズ別カード（3カラム）
	   ========================================================================== */
	.draft-size-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1rem;
		margin: 1rem 0 0;

		@media (max-width: 768px) { grid-template-columns: 1fr; }
	}
	.draft-size-card {
		border: 1px solid var(--color-border);
		border-radius: 8px;
		padding: 1rem;
		background: #fff;

		h5 {
			margin: 0 0 0.5rem;
			font-size: 1rem;
			font-weight: 700;
			color: var(--color-accent-dark);
		}
		.draft-figure { margin-top: 0; }
		p { margin: 0.5rem 0 0; font-size: 0.85rem; line-height: 1.7; }
	}

	/* ==========================================================================
	   ガイド：折りたたみ（箔押し・UV印刷・浮き出しデータ作成ガイド）
	   ネイティブ <details>/<summary> を使用（JS不要）。
	   ========================================================================== */
	.draft-details {
		border: 1px solid var(--color-accent-border);
		border-radius: 8px;
		margin: 1rem 0 0;
		overflow: hidden;
	}
	.draft-details > summary {
		cursor: pointer;
		padding: 0.85rem 1.1rem;
		background: var(--color-accent-soft);
		color: var(--color-accent-dark);
		font-weight: 700;
		list-style: none;

		&::-webkit-details-marker { display: none; }
		&::before {
			content: "\2b"; /* + */
			display: inline-block;
			width: 1.2em;
			font-weight: 700;
			color: var(--color-accent);
		}
	}
	.draft-details[open] > summary {
		border-bottom: 1px solid var(--color-accent-border);

		&::before { content: "\2212"; } /* − */
	}
	.draft-details-body { padding: 1.1rem; }
	.draft-subguide {
		margin: 0 0 1.25rem;

		&:last-child { margin-bottom: 0; }

		h5 {
			margin: 0 0 0.4rem;
			font-size: 1rem;
			font-weight: 700;
			color: var(--color-primary);
		}
		p { margin: 0 0 0.6rem; line-height: 1.8; font-size: 0.92rem; }
	}

	/* ==========================================================================
	   ガイド：リサイクルマーク識別表示の義務（注意アラート）
	   ========================================================================== */
	.draft-alert {
		margin: 1.25rem 0 0;
		padding: 1rem 1.1rem;
		background: #fff8e6;
		border: 1px solid #f0d28a;
		border-left: 4px solid #e0a800;
		border-radius: 8px;
		font-size: 0.9rem;
		line-height: 1.7;
	}
	.draft-alert-title {
		margin: 0 0 0.5rem;
		font-weight: 700;
		color: #b3261e;

		i { margin-right: 0.4em; }
	}
	.draft-alert-refs {
		margin: 0.75rem 0 0;

		dt { font-weight: 700; margin-bottom: 0.3rem; }
		dd { margin: 0; }
		ul { margin: 0; padding-left: 1.2rem; }
		li { margin-bottom: 0.2rem; }
		a { color: var(--color-accent-dark); }
	}

	/* ==========================================================================
	   2カラムの図版説明（名入れガイドの画像データNG例など）
	   ========================================================================== */
	.draft-two-col {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1.25rem;
		margin: 0 0 1rem;

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

		h5 { margin: 0 0 0.4rem; font-size: 0.95rem; color: var(--color-accent-dark); }
		p  { margin: 0.4rem 0 0; font-size: 0.875rem; line-height: 1.7; }
	}

	/* ==========================================================================
	   .c-btn 変種の独立定義（raw CSS で &-- が効かないための補完）
	   draft 系ページでのみ読み込まれるため副作用なし。
	   ========================================================================== */
	.draft-page .c-btn--primary {
		background: var(--color-accent);
		color: #fff;
		border-color: var(--color-accent);
	}
	.draft-page .c-btn--primary:hover {
		background: var(--color-accent-dark);
		border-color: var(--color-accent-dark);
		color: #fff;
	}
	.draft-page .c-btn--secondary {
		background: #fff;
		color: var(--color-accent-dark);
		border-color: var(--color-accent);
	}
	.draft-page .c-btn--secondary:hover {
		background: var(--color-accent-soft);
		color: var(--color-accent-dark);
	}

	/* 戻るリンク */
	.draft-page .back-to-parent {
		margin-top: 2rem;

		a {
			display: inline-flex;
			align-items: center;
			gap: 0.3em;
			color: var(--color-primary);
			font-weight: 700;
			text-decoration: none;

			&:hover { text-decoration: underline; }
		}
	}

}