:root{
    color-scheme: dark;
    --navheight: 80px;
    --sbxh: calc((50vw - 12px) / 2);
    --sbxw: calc(50vw - 12px);
    --primary: #D0BCFF;
    --footer: rgba(29, 25, 43, 0.5);
    --input-bg: #242327;
    --on-primary: #381E72;
    --primary-container: #4F378B;
    --primary-container30: rgba(79, 55, 139, 0.3);
    --on-primary-container: #EADDFF;
    --secondary-container: #4A4458;
    --on-secondary-container: #E8DEF8;
    --tertiary-container: #633B48;
    --on-tertiary-container: #FFD8E4;
    --background: #1C1B1F;
    --background50: rgba(28, 27, 31, 0.5);
    --on-background: #E6E1E5;
    --outline: #938F99;
    --surface: #1C1B1F;
    --surface50: rgba(28, 27, 31, 0.5);
    --on-surface-variant: #CAC4D0;
}
@media (prefers-color-scheme: light){
    :root{
        color-scheme: light;
        --primary: #6750A4;
        --footer: rgba(246, 237, 255, 0.5);
        --input-bg: #f6f2f5;
        --on-primary: #FFFFFF;
        --primary-container: #EADDFF;
        --primary-container30: rgba(234, 221, 255, 0.3);
        --on-primary-container: #21005D;
        --secondary-container: #E8DEF8;
        --on-secondary-container: #1D192B;
        --tertiary-container: #FFD8E4;
        --on-tertiary-container: #31111D;
        --background: #FFFBFE;
        --background50: rgba(255, 251, 254, 0.5);
        --on-background: #1C1B1F;
        --outline: #79747E;
        --surface: #FFFBFE;
        --surface50: rgba(255, 251, 254, 0.5);
        --on-surface-variant: #49454F;
    }
}
body,
button,
input{
    font-family: 'Cherry Bomb One', 'Hachi Maru Pop', cursive, system-ui;
    font-size: 100%;
}
html{
    scrollbar-color: var(--primary) var(--background);
    scrollbar-width: thin;
    overscroll-behavior-x: none;
}
body{
    background-color: var(--background);
    color: var(--on-background);
    padding-top: calc(env(titlebar-area-y, 0px) + env(titlebar-area-height, 50px));
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--navheight) + 12px);
    margin: 0;
    box-sizing: border-box;
    overscroll-behavior-x: none;
}
main > div{
    padding-left: calc(env(safe-area-inset-left, 0px) + 12px);
    padding-right: calc(env(safe-area-inset-left, 0px) + 12px);
    box-sizing: border-box;
}
main > div[data-show="i"]{
    display: none;
}
main > div[data-show="f"]{
    display: none;
}
main > div[data-show="t"]{
    animation: fadeup 0.3s;
}
@keyframes fadeup {
    0%{
        transform: translateY(50px);
        opacity: 0;
    }
}
main > div > h1{
    margin-top: 0;
    margin-bottom: 0;
    position: sticky;
    top: calc(env(titlebar-area-y, 0px) + env(titlebar-area-height, 50px));
    line-height: 50px;
    z-index: 1;
    animation-name: h1anm;
    animation-duration: 0.6s;
}
@keyframes h1anm {
    0%{
        opacity: 0;
    }
    50%{
        opacity: 0;
    }
}
#title-bar {
    position: fixed;
    left: env(titlebar-area-x, 0);
    top: env(titlebar-area-y, 0);
    height: calc(env(titlebar-area-height, 50px) + 50px);
    padding-bottom: 50px;
    width: 100%;
    padding-right: calc(100% - env(titlebar-area-width, 100%));
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-app-region: drag;
    font-size: 120%;
    backdrop-filter:blur(10px);
    background-color: var(--background50);
    box-sizing: border-box;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}
footer{
    position: fixed;
    left: 0;
    padding-left: env(safe-area-inset-left, 0);
    right: 0;
    padding-right: env(safe-area-inset-left, 0);
    bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    height: calc(var(--navheight) + env(safe-area-inset-bottom, 0px));
    backdrop-filter:blur(10px);
    background-color: var(--footer);
    display: flex;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    user-select: none;
}
footer > ul{
    display: flex;
    flex: 1;
    width: 100%;
    height: 100%;    
    padding: 0;
    margin: 0;
}
footer > ul > li{
    flex: 1;
    width: 100%;
    height: 100%;
    display: flex;
    list-style: none;
}
footer > ul > li[data-tab="t"]{
    pointer-events: none;
}
footer > ul > li > a{
    flex: 1;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transition: all 0.3s;
}
footer > ul > li > a:active{
    background-color: var(--primary-container);
    border-radius: var(--navheight);
}
footer > ul > li > a >:first-child{
    padding-top: 3px;
    padding-bottom: 3px;
    text-align: center;
    transition: all 0.2s 0.2s;
    min-width: 31px;
    border-radius: 0;
}
footer > ul > li[data-tab="f"] > a{
    color: var(--on-surface-variant);
}
footer > ul > li[data-tab="t"] > a >:last-child{
    color: var(--primary);
}
footer > ul > li[data-tab="t"] > a >:first-child{
    color: var(--on-primary-container);
    background-color: var(--primary-container);
    min-width: 62px;
    border-radius: var(--navheight);

}

.file-upload-container {
    padding: 20px;
    text-align: center;
    cursor: pointer;
    background-color: var(--primary-container);
    color: var(--on-primary-container);
    transition: all 0.3s;
    user-select: none;
    border-radius: 24px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* 実際のinput type="file"要素を隠すためのスタイル */
.file-input {
    display: none;
    background-color: red;
}

/* ファイルがドラッグされたときのスタイル */
.file-upload-container.dragover,
.file-upload-container:active {
    background-color: var(--primary);
    color: var(--on-primary);
}

/* アップロードアイコンのスタイル（任意のアイコンを指定しても構いません） */
.upload-icon {
    font-size: 64px;
    margin-bottom: 10px;
}

#page-add > form{
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: 24px;
}
#page-add > form input{
    border: none;
    border-radius: 24px;
    padding: 24px;
    background: none;
    background-color: var(--primary-container);
    color: var(--on-primary-container);
    font-size: 100%;
    caret-color: transparent;
    outline: none;
    box-sizing: border-box;
    transition: all 0.3s;
}
#page-add > form input:focus{
    background-color: var(--primary);
    color: var(--on-primary);
}
#page-add > form input::placeholder{
    color: var(--on-primary-container);
}
#page-add > form input:focus::placeholder{
    color: var(--on-primary);
    opacity: 0.5;
}
 /* テキスト入力フィールドの親要素 */
 .custom-input-container {
    position: relative;
    display: flex;
}
.custom-input{
    flex: 1;
}
.custom-input:not(:focus) + .custom-caret {
    background-color: transparent;
}

  /* カスタムキャレットを表す要素 */
.custom-caret {
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
    width: 3px;
    height: 36px;
    border-radius: 100px;
    background-color: var(--on-primary); /* キャレットの色（任意の色を指定） */
    pointer-events: none; /* カスタムキャレットをマウスイベントから除外 */
    animation-name: caretanm;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    transition: all 0.2s;
}
@keyframes caretanm {
    50%{
        opacity: 0.3;
        height: 18px;
        width: 3px;
    }
}
#page-add > form button{
    color: var(--on-primary-container);
    background: none;
    background-color: var(--primary-container);
    outline: none;
    border:none;
    font-size: 100%;
    padding: 24px;
    min-height: 42px;
    flex: 1;
    box-sizing: border-box;
    border-radius: 24px;
    cursor: pointer;
    transition: all 0.3s;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
#page-add > form button:active{
    background-color: var(--primary);
    color: var(--on-primary);
}
dialog{
    border: none;
    border-radius: 24px;
    padding: 0;
    color: var(--on-secondary-container);
    background-color: var(--secondary-container);
    animation-name: dialogopen;
    animation-duration: 0.3s;
}
.genHr{
    padding: 0;
    margin: 0;
    margin-left: 6px;
    margin-right: 6px;
    border-radius: 100px;
    background-color: var(--outline);
    height: 1px;
    border: none;
    box-sizing: border-box;
    opacity: 0.5;
}
.genHrV{
    padding: 0;
    margin: 0;
    margin-top: 6px;
    margin-bottom: 6px;
    border-radius: 100px;
    background-color: var(--outline);
    width: 1px;
    border: none;
    box-sizing: border-box;
    opacity: 0.5;
}
.genDiv{
    padding-top: 24px;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 18px;
}
.genButton{
    display: flex;
}
.genButton > button{
    color: var(--on-primary-container);
    background: none;
    background-color: var(--primary-container);
    outline: none;
    border:none;
    font-size: 100%;
    min-height: 48px;
    flex: 1;
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.genButton > button:first-child{
    border-bottom-left-radius: 24px;
}
.genButton > button:last-child{
    border-bottom-right-radius: 24px;
}
.genButton > button:active{
    color: var(--on-primary);
    background-color: var(--primary);
    border-radius: 24px;
}
.genDialog p{
    margin-top: 0;
    margin-bottom: 6px;
}
.genDialog h1{
    margin-top: 0;
    margin-bottom: 6px;
}
@keyframes dialogopen {
    0%{
        opacity: 0;
        transform: scale(90%);
    }
}
dialog[data-dialog="ca"] {
    animation-name: dialogclose;
    animation-duration: 0.3s;
}
@keyframes dialogclose {
    100%{
        opacity: 0;
        transform: scale(0%);
    }
}
dialog::backdrop{
    background-color: #1C1B1F;
    opacity: 0.5;
    animation-name: dialogopenB;
    animation-duration: 0.3s;
}
@keyframes dialogopenB {
    0%{
        opacity: 0;
    }
}
dialog[data-dialog="ca"]::backdrop{
    animation-name: dialogcloseB;
    animation-duration: 0.3s;
}
@keyframes dialogcloseB {
    100%{
        opacity: 0;
    }
}   

@media (prefers-color-scheme: light){
    dialog::backdrop{
        background-color: #FFFBFE;
        opacity: 0.5;
    }
}
#searchDialog{
    transition: all 0.3s;
}

.botRbutton{
    position: fixed;
    bottom: calc(var(--navheight) + 12px);
    right: 12px;
    animation-name: btanm;
    animation-duration: 0.6s;
}
@keyframes btanm {
    0%{
        opacity: 0;
    }
    50%{
        opacity: 0;
    }
}
.iconButton{
    height: 54px;
    width: 54px;
    border-radius: 24px;
    color: var(--on-primary-container);
    background: none;
    background-color: var(--primary-container);
    outline: none;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.3s;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    display: flex;
    justify-content: center;
    align-items: center;
}
.iconButton:active{
    background-color: var(--primary);
    color: var(--on-primary);
    width: calc(50vw - 12px);
    height: calc((50vw - 12px) / 2);
}
.iconButton:active::after,
#searchButtonX[data-s="t"]::after{
    content: "Search";
}
#searchButtonX[data-s="t"]{
    width: var(--sbxw);
    height: var(--sbxh);
    animation-name: sbxanm;
    animation-duration: 0.3s;
}
@keyframes sbxanm {
    100%{
        opacity: 0;
    }
}
#searchButtonXdiv[data-s="t"]{
    right: 0;
    left: 0;
    /* bottom: calc(var(--navheight) + 12px); */
    display: flex;
    justify-content: center;
    align-items: baseline;
    flex-direction: row;
    opacity: 0;
}
#searchButtonXdiv[data-s="temp"]{
    right: 0;
    left: 0;
    /* bottom: calc(var(--navheight) + 12px); */
    display: flex;
    justify-content: center;
    align-items: baseline;
    flex-direction: row;
}
#cardList{
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    gap: 12px;
}
#cardList > li{
    list-style: none;
    border-radius: 30px;
    display: flex;
    width: 100%;
}
#cardList > li > a{
    color: var(--on-primary-container);
    background-color: var(--primary-container30);
    flex: 1;
    width: 100%;
    line-height: 88px;
    border-radius: 30px;
    text-decoration: none;
    padding-left: 24px;
    padding-right: 24px;
    display: flex;
    gap: 18px;
    align-items: center;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transition: all 0.3s;
}
#cardList > li > a:active{
    background-color: var(--primary);
    color: var(--on-primary);
}
#cardList > li > a > div{
    height: 80px;
    width: 84px;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
#cardList > li > a > div > img{
    border-radius: 6px;
    max-width: 100%;
    max-height: 100%;
}
#imageContainer{
    display: flex;
    flex-direction: column;
    gap: 24px;
}
#imageContainer > img{
    max-width: 100%;
    margin: auto;
    border-radius: 12px;
}
div[data-list="no"] > .cardOK{
    display: none;
}
div[data-list="yes"] > .noCard{
    display: none;
}
#customImageNameInput{
    border: none;
    border-radius: 12px;
    padding: 12px;
    outline: none;
    box-sizing: border-box;
    transition: all 0.3s;
    background: none;
    background-color: var(--input-bg);
    color: var(--on-primary-container);
    font-size: 100%;
    caret-color: var(--on-primary-container);
}
#customImageNameInput::placeholder{
    color: var(--on-primary-container);
}
#customImageNameInput:focus{
    color: var(--primary);
}

::-webkit-scrollbar {
    width: 0;
    height: 0;
}
::-webkit-scrollbar-button{
    background-color: red;
}
::-webkit-scrollbar-thumb{
    background-color: rebeccapurple;
}
::-webkit-scrollbar-track{
    background-color: green;
}
::-webkit-scrollbar-track-piece{
    background-color: yellow;
    margin-top: 30px;
    margin-left: 10px;
}
::-webkit-scrollbar-corner{
    background-color: blue;
}
::-webkit-resizer{
    background-color: magenta;
}

.arr{
    position: fixed;
    z-index: 1;
    top: 0;
    bottom: 0;
    margin: auto;
    pointer-events: none;
    justify-content: center;
    display: flex;
    align-items: center;
}
.arr > div{
    background-color: var(--primary-container);
    color: var(--on-primary-container);
    height: 64px;
    width: 64px;
    border-radius: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s;
}
.arr > div > span{
    font-size: 36px;
}
#arrB{
    left: -64px;
}
#arrF{
    right: -64px;
}