/* 登録フォーム用 ver.5.6 over（修正済み） */

/* ▼基礎 */
:where(form.changeName){

	/* ★カスタム */
	--form-background: #f6f7f8;
	--form-color: #222222;
	--form-padding: 2px;
	--form-border: 1px solid;
	--form-border-radius: 0;
	--form-focus-outline: 2px solid hsl(210 75% 80%);

	--button-background: #111;
	--button-color: #FFF;
	--button-padding: 10px;
	--button-border: 0;
	--button-border-radius: 0;
	--button-focus-outline: 2px solid hsl(210 75% 80%);

	--layout-gap: .5em;
	--btn-input: '〇';
	--btn-reset: '×';

	--message-bg: #000;
	--message-font: #fff;
	--message-border: none;

	width:fit-content;
	max-width: 100%;
	margin: 0;
	box-sizing: border-box;

	& :where(:is(fieldset,legend, ul, p, div)){
		margin:0; padding:0; border:none; background: transparent none;
		font-weight: normal; font-style: normal; box-sizing: border-box; 
	}

	& :where(fieldset){
		min-inline-size: 0;
	}

	& :where(legend){
		display: none !important; /* ← legend（名前変換）を非表示 */
	}

	& :where(:is(ul,li)){
		list-style: none !important; /* ← 黒丸を消す */
		margin-left: 0 !important;
		padding-left: 0 !important;
	}

	& li::marker {
		display: none !important;
		content: none !important;
	}

	& :where(:is(input,select,option, button)){
		vertical-align: middle;
		font-size: 100%; font-family:inherit;
		max-width: 100%; line-height:1; box-sizing: border-box; 
	}

	& :where(:is(label, select, button, input[type="submit"])){
		cursor:pointer; 
	}

	& :is(input[type="text"], select){
		background: var(--form-background);
		color: var(--form-color);
		padding: var(--form-padding);
		border: var(--form-border);
		border-radius: var(--form-border-radius);
		&:is(:focus-visible, :active){ outline: var(--form-focus-outline);


    /* 追加：青い枠を消す */
    outline: none;
    box-shadow: none;  /* iOS/Safari用に念のため */ 
}
	}



	& button{
		touch-action:manipulation;
		background: var(--button-background);
		color: var(--button-color);
		padding: var(--button-padding);
		border: var(--button-border);
		border-radius: var(--button-border-radius);
		&:is(:focus-visible, :active){ outline: var(--button-focus-outline); }
	}

	& :where(.dream-noCookie){ 
		margin-bottom: 1em; font-size: small; 
	}

	& ul:not([class]){ 
		display: grid; gap: var(--layout-gap, .5em);
		align-items: center;
		&>li{
			display:flex; align-items: center; gap: 0 var(--layout-gap); 
			& label{ font-size:82%; line-height:1.2;  }
		}
	}

	& .process{
		margin-top: var(--layout-gap, .5em);
		display: flex; flex-flow: row nowrap;
		justify-content: center; align-items: center;
		gap: var(--layout-gap, .5em);
		&>li:first-child{ order: 1;}
		& button{ white-space: nowrap; }
	}

	& #dreamphp-save-message[popover]{
		position: fixed; inset: 2vw 0 auto; 
		margin:auto; padding: 1em; line-height:1; 
		background: var(--message-bg); color: var(--message-font); border: var(--message-border);
		animation: openAnimation .5s;
		&.dreamphp-message-close{
			 animation: closeAnimation .5s forwards; 
		}
	}

	&.dreamphp-action ul:not([class]){
		animation: .8s saveAnimation;
	}
}

@keyframes saveAnimation {
	0% { opacity:0; }
	100%{ opacity:100%; }
}
@keyframes openAnimation {
	0% { opacity:0; transform: translateY(calc( -3em + 2vw)) }
	100%{ opacity:100%; transform: translateY(0) }
}
@keyframes closeAnimation {
	0% { opacity: 100%; transform: translateY(0) }
	100%{ opacity: 0; transform: translateY(calc( -3em + 2vw)) }
}

/* 提供既定デザイン ==================== */
div:has(form.changeName){

	--form-width: 8em;
	--label-width: 4em;

	&.dreamphp-layout-flex{ 
		ul:not([class]){
			display:flex;flex-flow:row wrap;
			:is(input,select){ width:var(--form-width); }
		}
		&.dreamphp-position-center{
			ul:not([class]){justify-content:center}
		}
		&.dreamphp-position-right {
			ul:not([class]) { justify-content: end }
		}
	}
	&.dreamphp-layout-repeat form.changeName {
		width: auto;
		& ul:not([class]) {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(calc(var(--label-width, 4em) + 5em), 1fr));
			:is(input, select) { width: 100% }
		}
	}
	&.dreamphp-layout-1column ul:not([class]) {
		grid-template-columns: 1fr;
		:is(input, select) { width: 100% }
	}
	&.dreamphp-layout-2column ul:not([class]) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		:is(input, select) { width: 100% }
	}
	&.dreamphp-layout-3column ul:not([class]) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		:is(input, select) { width: 100% }
	}
	&.dreamphp-label-top ul:not([class])>li {
		flex-flow: column nowrap;
		align-items: start
	}
	&.dreamphp-label-bottom ul:not([class])>li {
		flex-flow: column-reverse nowrap;
		align-items: start
	}
	&.dreamphp-label-left ul:not([class])>li,
	&.dreamphp-label-right ul:not([class])>li {
		flex-flow: row nowrap; align-items: center;
		& label { width: var(--label-width, 4em); text-align: right }
		& :is(input, select) { flex: 1 1 5em }
	}
	&.dreamphp-label-right ul:not([class])>li {
		& label { order: 1; text-align: left }
	}
	&.dreamphp-process-center .process {
		justify-content: center
	}
	&.dreamphp-process-right .process {
		justify-content: flex-end
	}
	&.dreamphp-process-left .process {
		justify-content: flex-start
	}
	&.dreamphp-process-between .process {
		justify-content: space-between
	}
	&.dreamphp-process-column fieldset {
		display: grid; gap: 15px;
		grid-template-columns: 1fr fit-content(20%);
		align-items: end
	}
	&.dreamphp-position-left form {
		margin-left: 0;
		margin-right: auto
	}
	&.dreamphp-position-right form {
		margin-left: auto;
		margin-right: 0
	}
	&.dreamphp-position-center form {
		margin-left: auto;
		margin-right: auto
	}
	&.dreamphp-process-column fieldset legend, &.dreamphp-legend-hidden legend {
		position: fixed!important;
		top: 0;
		left: 0;
		width: 4px!important;
		height: 4px!important;
		opacity: 0!important;
		overflow: hidden!important;
		border: none!important;
		margin: 0;
		padding: 0;
		display: block!important;
		visibility: visible!important
	}
	&.dreamphp-button-editer {
		& ul.process button {
			span { display: none }
			&[value="input"]::before { content: var(--btn-input) }
			&[value="reset"]::before { content: var(--btn-reset) }
		}
	}
}




/* ① ボタン横並び・② ボタン配色白背景＋黒文字・③ 文言（可能な範囲） */
form.changeName {
  --button-background: #f6f7f8;
  --button-color: #000000;
  --btn-input: '〇';
  --btn-reset: '×';

}

form.changeName .process {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1em;
}

form.changeName .process li {
  display: inline-block;
}

form.changeName button {
  background: transparent;
  color: var(--button-color);
  padding: 4px 8px;

  border: 0;
  border-bottom: 1px solid #222222;  /* ← 下線だけ */

  border-radius: 0;
  width: 6em;
  white-space: nowrap;

    /* 追加 */
    outline: none;
    box-shadow: none;

}


form.changeName label {
  display: none !important;
}


/* フォームを中央に戻す */
div:has(form.changeName) form.changeName {
    margin-left: auto;
    margin-right: auto;
}



/* 下線フォーム化 */
form.changeName{
    --form-border: 0;
    --form-border-radius: 0;
    --button-border: 0;
}

form.changeName :is(input[type="text"], select){
    border-bottom: 1px solid #222222;
    background: transparent;
}

form.changeName button{
    border-bottom: 1px solid #222222;
    background: transparent;
}


/* フォーム長さ */
div:has(form.changeName){
    --form-width: 7em;   /* ← 入力欄の幅だけ細く */
}

/* ボタン長さ */
form.changeName .process button{
    flex: 0 0 auto;   /* ← これが超重要 */
    width: 2em;      /* 好きな短さ */
}