/* Nettoge Chocobo Color — FF14 バディチョコボの羽根の色の計算。
 * 色・線・角はサイトのトークン（tokens-nettoge.css の --ntg-* / --nettoge-retro-block-*）をそのまま使い、
 * ライト／ダーク（html[data-nettoge-theme]）はサイト側の切り替えに任せる。フォールバックはトークンが無い環境（プレビュー）用 */
.ntg-cc {
	--cc-radius: var(--nettoge-retro-block-radius, 0);
	--cc-bg: var(--nettoge-retro-block-panel-bg, var(--ntg-surface-1, #fff));
	--cc-surface: var(--ntg-surface-1, #fff);
	--cc-stripe: var(--nettoge-retro-block-list-stripe, var(--ntg-surface-2, #f4f4f5));
	--cc-border: var(--nettoge-retro-block-panel-border, var(--ntg-steel, #6b6f76));
	--cc-line: var(--nettoge-retro-block-list-border, rgba(107, 111, 118, .45));
	--cc-ink: var(--ntg-ink, #1a1c1e);
	--cc-muted: var(--ntg-muted, #5c6168);
	--cc-band: var(--nettoge-retro-block-panel-title-bg, #6b6f76);
	--cc-band-fg: var(--nettoge-retro-block-panel-title-fg, #fff);
	--cc-band-border: var(--nettoge-retro-block-panel-title-border, #4b4e53);
	--cc-num-bg: var(--nettoge-retro-block-list-num-bg, #6b6f76);
	--cc-num-fg: var(--nettoge-retro-block-list-num-fg, #fff);
	--cc-num-border: var(--nettoge-retro-block-list-num-border, #2a2e34);
	--cc-accent: var(--ntg-teal, #2f7a72);
	--cc-hover: var(--nettoge-retro-block-menu-hover-bg, var(--ntg-surface-3, #e8e8e9));
	--cc-shadow: var(--nettoge-retro-block-card-shadow, 1px 1px 0 #fff);
	background: var(--cc-bg);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius);
	box-shadow: var(--cc-shadow);
	color: var(--cc-ink);
	margin: 1.2em 0 1.6em;
}

.ntg-cc > p {
	margin: 0;
	padding: 14px;
}

.ntg-cc__title {
	background: var(--cc-band);
	border-bottom: 1px solid var(--cc-band-border);
	color: var(--cc-band-fg);
	font-size: .95em;
	font-weight: 700;
	letter-spacing: .04em;
	padding: 7px 14px;
}

.ntg-cc__inner {
	padding: 14px;
}

.ntg-cc__form {
	align-items: end;
	display: grid;
	gap: 8px 12px;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

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

	.ntg-cc__arrow {
		display: none;
	}
}

.ntg-cc__field {
	display: block;
	margin: 0;
	min-inline-size: 0;
	position: relative;
}

.ntg-cc__label {
	color: var(--cc-muted);
	display: block;
	font-size: .85em;
	font-weight: 700;
	margin-bottom: 4px;
}

/* 色の選択: ボタン＋一覧（項目ごとに色の四角。スマホの標準セレクトでは付けられないため自前） */
.ntg-cc__pick {
	align-items: center;
	background: var(--cc-surface);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius);
	color: var(--cc-ink);
	cursor: pointer;
	display: flex;
	font: inherit;
	font-size: 16px;
	gap: 8px;
	inline-size: 100%;
	min-block-size: 44px;
	padding: 4px 10px;
	text-align: left;
}

.ntg-cc__pick:hover,
.ntg-cc__pick[aria-expanded="true"] {
	border-color: var(--cc-accent);
}

.ntg-cc__pick:focus-visible,
.ntg-cc__opt:focus-visible,
.ntg-cc__chip:focus-visible,
.ntg-cc__step:focus-visible,
.ntg-cc__btn:focus-visible {
	outline: 2px solid var(--cc-accent);
	outline-offset: 1px;
}

.ntg-cc__pickname {
	flex: 1 1 auto;
}

.ntg-cc__caret {
	color: var(--cc-muted);
	font-size: 1.1em;
}

.ntg-cc__list {
	background: var(--cc-surface);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
	left: 0;
	margin-top: 2px;
	max-block-size: min(60vh, 420px);
	overflow-y: auto;
	overscroll-behavior: contain;
	position: absolute;
	right: 0;
	z-index: 20;
}

.ntg-cc__list[hidden] {
	display: none;
}

.ntg-cc__group {
	background: var(--cc-band);
	border-bottom: 1px solid var(--cc-band-border);
	color: var(--cc-band-fg);
	font-size: .8em;
	font-weight: 700;
	padding: 4px 12px;
	position: sticky;
	top: 0;
	z-index: 1;
}

.ntg-cc__opt {
	align-items: center;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--cc-line);
	color: var(--cc-ink);
	cursor: pointer;
	display: flex;
	font: inherit;
	font-size: 15px;
	gap: 8px;
	inline-size: 100%;
	min-block-size: 40px;
	padding: 4px 12px;
	text-align: left;
}

.ntg-cc__opt:hover {
	background: var(--cc-hover);
}

.ntg-cc__opt[aria-selected="true"] {
	background: var(--cc-stripe);
	box-shadow: inset 3px 0 0 var(--cc-accent);
	font-weight: 700;
}

.ntg-cc__arrow {
	color: var(--cc-muted);
	font-size: 1.4em;
	line-height: 44px;
}

.ntg-cc__sw {
	border: 1px solid rgba(0, 0, 0, .35);
	border-radius: 0;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
	display: inline-block;
	flex: none;
	block-size: 1.2em;
	inline-size: 1.2em;
	margin-right: .35em;
	vertical-align: -3px;
}

.ntg-cc__pick .ntg-cc__sw,
.ntg-cc__opt .ntg-cc__sw {
	block-size: 22px;
	inline-size: 22px;
	margin: 0;
}

/* 色見本（SWELL のアコーディオンの中） */
.ntg-cc__more.swell-block-accordion {
	margin: 12px 0 0;
}

.ntg-cc__more .swell-block-accordion__body {
	padding-block: 8px 12px;
}

.ntg-cc__palette {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.ntg-cc__chip {
	border: 1px solid rgba(0, 0, 0, .35);
	border-radius: 0;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
	block-size: 28px;
	cursor: pointer;
	inline-size: 28px;
	padding: 0;
}

.ntg-cc__chip.is-on {
	outline: 3px solid var(--cc-accent);
	outline-offset: 1px;
}

/* 結果 */
.ntg-cc__result {
	margin-top: 14px;
}

.ntg-cc__result p {
	margin: 0 0 .7em;
}

.ntg-cc__head {
	border-bottom: 2px solid var(--cc-border);
	font-weight: 700;
	padding-bottom: 6px;
}

.ntg-cc__fruits {
	border: 1px solid var(--cc-line);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ntg-cc__fruits li {
	align-items: center;
	border-bottom: 1px solid var(--cc-line);
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 6px 10px;
}

.ntg-cc__fruits li::before {
	content: none;
}

.ntg-cc__fruits li:nth-child(even) {
	background: var(--cc-stripe);
}

.ntg-cc__fruits li:last-child {
	border-bottom: 0;
}

.ntg-cc__num {
	margin-left: auto;
	min-inline-size: 3.5em;
	text-align: right;
}

.ntg-cc__icon {
	border-radius: 0;
	block-size: 24px;
	inline-size: 24px;
	vertical-align: middle;
}

/* 本文の p の上の余白 0（#body_wrap .post_content p）に勝つよう、起点に #body_wrap .post_content（!important は使わない。2026-10-10） */
#body_wrap .post_content .ntg-cc__total {
	font-size: 1.1em;
	font-weight: 700;
	margin-top: 6px;
	text-align: right;
}

.ntg-cc__note,
.ntg-cc__sub {
	font-size: .9em;
}

.ntg-cc__note {
	color: var(--cc-muted);
}

#body_wrap .post_content .ntg-cc__sub {
	font-weight: 700;
	margin-top: 1em;
}

.ntg-cc__tip {
	background: var(--nettoge-retro-block-notice-bg, var(--cc-stripe));
	border: 1px solid var(--nettoge-retro-block-notice-border, var(--cc-line));
	border-left: 4px solid var(--cc-accent);
	padding: 8px 10px;
}

/* 与える順番（押すと済み） */
.ntg-cc__steps {
	counter-reset: ntg-cc-step;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ntg-cc__steps li {
	counter-increment: ntg-cc-step;
	margin: 0 0 6px;
	padding: 0;
}

.ntg-cc__steps li::before {
	content: none;
}

.ntg-cc__step {
	align-items: center;
	background: var(--nettoge-retro-block-step-bg, var(--cc-stripe));
	border: 1px solid var(--nettoge-retro-block-step-border, var(--cc-line));
	border-radius: var(--cc-radius);
	box-shadow: var(--nettoge-retro-block-step-shadow, none);
	color: var(--cc-ink);
	cursor: pointer;
	display: flex;
	flex-wrap: wrap;
	font: inherit;
	gap: 6px;
	inline-size: 100%;
	min-block-size: 44px;
	padding: 6px 10px;
	text-align: left;
}

.ntg-cc__step::before {
	align-items: center;
	background: var(--cc-num-bg);
	border: 1px solid var(--cc-num-border);
	color: var(--cc-num-fg);
	content: counter(ntg-cc-step);
	display: inline-flex;
	flex: none;
	font-size: .85em;
	font-weight: 700;
	block-size: 1.7em;
	justify-content: center;
	inline-size: 1.7em;
	margin-right: 4px;
}

.ntg-cc__step:hover {
	background: var(--nettoge-retro-block-step-hover-bg, var(--cc-hover));
}

.ntg-cc__step[aria-pressed="true"] {
	opacity: .5;
	text-decoration: line-through;
}

.ntg-cc__step[aria-pressed="true"]::after {
	content: "済み";
	font-size: .8em;
	font-weight: 700;
	margin-left: auto;
	text-decoration: none;
}

.ntg-cc__btn {
	background: var(--nettoge-retro-block-btn-bg, var(--cc-accent));
	border: 1px solid var(--nettoge-retro-block-btn-border, var(--cc-accent));
	border-radius: var(--cc-radius);
	box-shadow: var(--nettoge-retro-block-btn-shadow, none);
	color: var(--nettoge-retro-block-btn-fg, #fff);
	cursor: pointer;
	font: inherit;
	font-size: .9em;
	font-weight: 700;
	margin: 6px 0 0;
	min-block-size: 40px;
	padding: 4px 14px;
}

/* 本文の ul/ol の型（番号・点）を打ち消す */
.ntg-cc ul.ntg-cc__fruits,
.ntg-cc ol.ntg-cc__steps {
	list-style: none;
	padding-left: 0;
}

.ntg-cc .ntg-cc__fruits > li::marker,
.ntg-cc .ntg-cc__steps > li::marker {
	content: "";
}