/* *
 * Copyright 2025 丼猫 (donneko)
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at:
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

:root {
    /* --- 基本フォント --- */
    --panel-font-size: 18px;

    /* --- 色系 --- */
    --panel-bg: #ffffffb5;

    /* キーボードフォーカス */
    --focus-color:#1d50a2;
    --focus-shadow-color-inline:#ffffffba;
    --focus-shadow-color-outline:#000000ba;
    /* zindex */
    --z-index:1;

    /* ブラー */
    --backdrop-filter:blur(2px);

    /* シャドー */
    --shadow-panel: 1px 2px 3px #000000a9;

    /* ボタン（追加） */
    --add-btn-border: #03D603;
    --add-btn-bg: #03D60350;
    --add-icon-bg: #03D603;
    --add-icon-border-highlight: #ffffff50;

    /* 枠・線 --- */
    --border-dark: #515151;
    --border-dark-light: #51515150;
    --border-dark-soft: #51515190;

    /* URL入力の枠色 --- */
    --url-input-border: #3977db;

    /* --- 文字色 --- */
    --text-dark: #000000d0;
    --text-light: #ffffff;
    --text-shadow: rgba(0, 0, 0, 0.7);

    /* --- サイズ系 --- */
    --radius-small: 0.2em;
    --radius-medium: 0.4em;
    --radius-large: 5px;

    --panel-gap: 10px;
    --panel-padding: 10px;

    /* --- 線の太さ --- */
    --border-thin: 2px;
    --border-medium: 3px;
    --border-thick: 5px;

    /* --- アイコンサイズ --- */
    --icon-size-big: 3em;
    --icon-size-add: 4em;

    /* --- 入力系 --- */
    --input-font-size: 0.8em;
}


/* ↓↓↓ 元のCSS + 変数化 ↓↓↓ */

.panel * {
    all: unset;
}
.panel {
    font-size: var(--panel-font-size);
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: var(--z-index);
    display: inline-flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: var(--panel-gap);
}

.panel-header {
    background: var(--panel-bg);
    backdrop-filter: var(--backdrop-filter);
    width: 100%;
    text-align: center;
    border-radius: var(--radius-large);
    padding: 5px 0;
    font-size: 2em;
    box-shadow: var(--shadow-panel);

}

.panel-body {
    background: var(--panel-bg);
    backdrop-filter: var(--backdrop-filter);
    display: flex;
    flex-direction: column;
    gap: var(--panel-gap);
    padding: var(--panel-padding);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-panel);
}

.panel-actions {
    display: flex;
    justify-content: space-between;
    gap: 1em;
}

.panel-actions-add {
    display: inline-flex;
    font-size: var(--icon-size-add);
    height: 1em;
    border-radius: var(--radius-small);
    border: var(--add-btn-border) var(--border-thick) solid;
    background: var(--add-btn-bg);
    box-sizing: border-box;
}

.panel-actions-add-icon {
    display: flex;
    position: relative;
    height: 100%;
    color: var(--text-light);
    align-items: center;
    justify-content: center;
    background: var(--add-icon-bg);
    border-right: var(--add-btn-border) var(--border-thick) solid;
    aspect-ratio: 1 / 1;
    font-size: 0.5em;
    border-radius: 0 var(--radius-small) var(--radius-small) 0;
}

.panel-actions-add-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border: var(--add-icon-border-highlight) var(--border-thick) solid;
    border-radius: var(--radius-medium);
}

.panel-actions-add-text {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    text-shadow: 2px 2px 1px var(--text-shadow);
    padding: 0 1em;
    font-size: 0.5em;
    white-space: nowrap;
}

.panel-actions-addnumber {
    display: inline-flex;
    border: var(--border-dark) var(--border-thick) solid;
    flex: 1;
    border-radius: var(--radius-medium);
    overflow: hidden;
}

.panel-actions-addnumber-input {
    display: flex;
    flex: 1;
    font-size: 1.5em;
    padding: 0 0.5em;
    padding-right: 0.2em;
    border-right: var(--border-dark-light) 4px solid;
    text-align: right;
}

.panel-actions-addnumber-text {
    display: flex;
    padding: 0.2em 0.3em;
    font-size: 1.5em;
    align-items: end;
    justify-content: center;
}

.panel-url {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 3em;
    gap: 1em;
}

.panel-url-leadicon {
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1 / 1;
    height: 100%;
    font-size: var(--icon-size-big);
}

.panel-url-input {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

.panel-url-input-info {
    display: block;
    font-size: 0.6em;
    flex: 1;
}

.panel-url-input-info span {
    padding: 0.2em 0.5em;
    border-radius: var(--radius-small);
    border: var(--border-dark-soft) var(--border-medium) solid;
    color: var(--text-dark);
}

.panel-url-input input {
    display: block;
    flex: 2;
    padding: 0 0.2em;
    border: var(--url-input-border) var(--border-medium) solid;
    border-radius: var(--radius-small);
    font-size: var(--input-font-size);
}

/* ===============================
    ボタン：追加（＋）
=============================== */
.panel-actions-add:hover {
    background: var(--add-btn-bg-hover, #03d60380);
    cursor: pointer;
    transition: 0.15s ease;
}

.panel-actions-add-icon:hover {
    background: var(--add-icon-bg-hover, #03bb0380);
    transition: 0.15s ease;
}

/* “追加” テキストの hover */
.panel-actions-add-text:hover {
    color: var(--text-light);
    text-shadow: 2px 2px 2px rgba(55, 55, 55, 0.8);
    transition: 0.15s ease;
}

/* ===============================
    数値入力ブロック
=============================== */
.panel-actions-addnumber:hover {
    border-color: var(--border-dark-soft);
    transition: 0.15s ease;
}
/* input 部分 */
.panel-actions-addnumber-input:hover {
    background: rgba(0,0,0,0.03);
    transition: 0.15s ease;
}
/* 入力欄 */
.panel-url-input input:hover {
    border-color: var(--url-input-border-hover, #193b75);
    background: rgba(0,0,0,0.03);
    transition: 0.15s ease;
}

/* その他 */
.hidden-label{
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
}

.panel-actions-add:focus{
    border: var(--focus-color) var(--border-thick) solid;
    box-shadow:0px 0px 0px 1px var(--focus-shadow-color-inline),
                0px 0px 0px 2px var(--focus-shadow-color-outline);
}
.panel-actions-addnumber:has(.panel-actions-addnumber-input:focus-visible){
    border: var(--focus-color) var(--border-thick) solid;
    box-shadow:0px 0px 0px 1px var(--focus-shadow-color-inline),
                0px 0px 0px 2px var(--focus-shadow-color-outline);
}
.panel-url-input input:focus-visible{
    border: var(--focus-color) var(--border-medium)  solid;
    box-shadow:0px 0px 0px 1px var(--focus-shadow-color-inline),
                0px 0px 0px 2px var(--focus-shadow-color-outline);

}