/* ライトモード */
@media (prefers-color-scheme: light) {
body {
background: linear-gradient(
rgb(255 255 255 / 60%),
rgb(255 255 255 / 60%)
),#ffffff;
color: #000000;
}

.sidebar a {
color: #000000;
}

input[type="text"],
input[type="email"],
input[type="password"],
select,
input[type="datetime-local"],
textarea[name="bio"] {
color: #000000 !important;
}

.theme-item:hover {
background: #66c1d3;
}

}

/* ダークモード */
@media (prefers-color-scheme: dark) {
body {
background: linear-gradient(
rgb(0 0 0 / 60%),
rgb(0 0 0 / 60%)
),#111111;
color: #ffffff;
}

.sidebar a {
color: #ffffff;
}

input[type="text"],
input[type="email"],
input[type="password"],
select,
input[type="datetime-local"],
textarea[name="bio"], input[type="submit"],
input[type="button"],
button.btn_mode {
color: #ffffff !important;
}

.theme-item:hover {
background: #016d83;
}

}

@media print {
body {
display: none !important;
}
}

img {
touch-action: none;
}

* {
-ms-overflow-style: none;
scrollbar-width: none;
}

*::-webkit-scrollbar {
display: none;
}


body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
margin: 0;
padding: 0;
overflow: hidden;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); /* Safari対応 */
}

img {
pointer-events: auto;
user-drag: none;
-webkit-user-drag: none;
}

[contenteditable] {
user-select: auto !important;
}

hr {
margin: 50px 0;
}

.sidebar {
width: 80px;
padding: 30px 0;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
overflow-y: auto;
background: #00000030;
backdrop-filter: blur(100px);
-webkit-backdrop-filter: blur(100px); /* Safari対応 */
}

.sidebar a {
text-shadow: 0 0 10px #0f0f0f90;
font-size: 24px;
margin: 20px 0;
transition: 0.3s ease;
cursor: pointer;
}

.sidebar a:hover {
text-shadow: 0 0 20px #f0f0f090;
transition: 0.3s ease;
}

.container {
padding: 30px;
overflow-y: auto;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
opacity: 0;
transition: opacity 0.5s ease-in-out;
/*animation: fadeIn 1.5s ease-in-out;*/
}

@supports (-webkit-touch-callout: none) {
.sidebar {
height: -webkit-fill-available;
/* Safariで使用可能な高さを取得 */
}

.container {
height: -webkit-fill-available;
}
}

.container.loaded {
opacity: 1;

}

.container.fading {
opacity: 0;
}

h1 {
margin: 0 auto;
text-align: center;
width: 150px;
font-size: 42px;
border-radius: 10px;
}

p {
margin-bottom: 15px;
font-size: 16px;
}

/* ヘッダー */
.header {
background-color: #00b4d8;
padding: 1rem 0;
text-align: center;
}

.header-title {
margin: 0;
font-size: 1.5rem;
font-weight: bold;
}

/* プロフィールセクション */
.profile-section {
border-radius: 10px;


}

.profile-header {
text-align: center;
}

.profile-icon {
width: 200px;
height: 200px;
border-radius: 50%;
border: 3px solid #00b4d8;
margin-bottom: 1rem;
}

.profile-name {
font-size: 2rem;
font-weight: bold;
margin: 0.5rem 0;
}

.profile-bio {
margin-top: 1rem;
text-align: center;
}

.icon-gallery {
width: 100%;
display: flex;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
margin-top: 1rem;
}

.icon-option {
position: relative;
display: inline-block;
overflow-y: auto;
height: 200px;
}

#icon_selecter {
display: none;
padding: 20px;
border: 1px solid #99999944;
background: #88888833;
border-radius: 5px;
}

.icon-thumbnail {
width: 60px;
height: 60px;
border-radius: 50%;
border: 2px solid transparent;
transition: transform 0.3s,
border-color 0.3s;
cursor: pointer;
}

.icon-option input {
display: none;
}

.icon-option input:checked+.icon-thumbnail {
border-color: #007bff;
transform: scale(1.1);
}

input[type="text"],
input[type="email"],
input[type="password"],
select,
input[type="datetime-local"],
textarea[name="bio"] {
width: 100%;
padding: 12px;
margin-top: 5px;
border: none;
border-radius: 5px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); /* Safari対応 */
background: rgba(240, 240, 240, 0.2);
border: 1px solid rgba(240, 240, 240, 0.3);
font-size: 14px;
outline: none;
transition: all 0.3s ease-in-out;
}



input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input#info_cnt :focus,
select:focus,
input[type="datetime-local"]:focus,

textarea[name="bio"]:focus {
background: #8888884d;
}

textarea {
height: 50px;
}

input[type="checkbox"] {
margin-right: 10px;
width: 20px;
height: 20px;
accent-color: #00b4d8;
cursor: pointer;
}

input[type="range"] {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 6px;
border-radius: 3px;
outline: none;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); /* Safari対応 */
background: linear-gradient(to right, #00b4d8 50%, #222222 50%);
border: 1px solid rgba(255, 255, 255, 0.3);
}

/* トラック */
input[type="range"]::-webkit-slider-runnable-track {
height: 6px;
background: transparent;
}

/* サム */
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
background: #ffffff;
border: 2px solid #00b4d8;
border-radius: 50%;
cursor: pointer;
margin-top: -5px;
}

/* Firefox */
input[type="range"]::-moz-range-track {
height: 6px;
background: transparent;
}

input[type="range"]::-moz-range-thumb {
width: 16px;
height: 16px;
background: #ffffff;
border: 2px solid #00b4d8;
border-radius: 50%;
cursor: pointer;
}

/* IE/Edge (旧) */
input[type="range"]::-ms-track {
height: 6px;
background: transparent;
border-color: transparent;
color: transparent;
}

input[type="range"]::-ms-thumb {
width: 16px;
height: 16px;
background: #ffffff;
border: 2px solid #00b4d8;
border-radius: 50%;
cursor: pointer;
}


input[type="submit"],
input[type="button"],
button.btn_mode {
width: 100%;
padding: 12px;
border: none;
border-radius: 50px;
border: 1px solid #99999944;
color: #000000;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
margin-top: 40px;
margin-bottom: 10px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); /* Safari対応 */
background: rgba(240, 240, 240, 0.2);
border: 1px solid rgba(240, 240, 240, 0.3);
}

input[type="submit"]:hover,
input[type="button"]:hover {
background-color: #00b4d890;
}

#red_btn:hover {
background: #ff0000;
}

@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

.description {
font-size: 12px;
color: #888888;
margin-bottom: 5px;
}

.error {
color: #ff0000;
width: 200px;
font-size: 8px;
padding: 0 10px;
border-radius: 50px;
text-align: center;
}


.theme-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
;
/* 3列 */
gap: 10px;
/* アイテム間の余白 */
margin-bottom: 20px;
transition: 0.2s;
}

input[type="radio"]:checked+.theme-item {
background: #00b4d8;
transform: scale(1.05);
}

.theme-item:hover {
transform: scale(1.05);
}

.theme-container input[type="radio"] {
display: none;
}

.theme-item {
cursor: pointer;
border-radius: 20px;
display: flex;
width: 260px;
height: 120px;
transition: 0.2s;
align-items: center;
gap: 16px;
padding: 10px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); /* Safari対応 */
background: rgba(240, 240, 240, 0.2);
border: 1px solid rgba(240, 240, 240, 0.3);
}

.thumbnail {
width: 100px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 10px;
font-size: 14px;
text-align: center;
border-radius: 10px;
}

.theme-info {
flex: 1;
text-align: left;
}

.theme-title {
font-size: 20px;
margin-bottom: 10px;
}

.theme-description {
font-size: 14px;
line-height: 1.5;
}

.color-thumbnail {
display: inline-block;
width: 40px;
height: 40px;
margin: 5px;
cursor: pointer;
border: 2px solid #888888;
transition: border-color 0.3s ease;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
max-width: 40px;
max-height: 40px;
}

.color-thumbnail:hover {
border-color: #00b4d8;
}

.color-picker-button {
display: inline-block;
position: relative;
width: 40px;
height: 40px;
border: 2px solid #888888;
margin: 5px;
background: linear-gradient(90deg, red, orange, yellow, green, cyan, blue, violet);
/* 虹色のグラデーション */
cursor: pointer;
}

input[type="color"] {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
/* カラーピッカーを透明にしてマウスイベントをキャッチ */
cursor: pointer;
}

.color-picker-preview {
border: 2px solid transparent;
transition: border-color 0.3s ease;
}

.color-picker-preview:hover {
border-color: #00b4d8;
}

.success-message {
color: #00b4d8;
text-align: center;
margin-bottom: 20px;
}

.font-selector {
margin: 15px 0;
}


table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}

table,
th,
td {
border: 1px solid #888888;
}

th,
td {
padding: 12px;
text-align: left;
}

th {
background-color: #99999950;
}

tr {
background-color: #77777750;
}

tr:nth-child(even) {
background-color: #88888850;
}

kbd {
display: inline-block;
padding: 6px 10px;
margin: 0 5px;
font-size: 14px;
font-weight: bold;
color: #333;
background-color: #eee;
border-radius: 4px;
border: 1px solid #ccc;
box-shadow: 0 1px 0 #fff, 0 2px 0 #ccc inset;
font-family: 'Courier New', Courier, monospace;
}

.message {
color: #00b4d8;
font-size: 12px;
padding: 5px;
width: 350px;
border-radius: 20px;
position: fixed;
bottom: 20px;
left: 50%;
text-align: center;
transform: translateX(-50%);
z-index: 100000;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
animation: fadeInOut 5s ease-out forwards;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); /* Safari対応 */
background: rgba(240, 240, 240, 0.2);
border: 1px solid rgba(240, 240, 240, 0.3);
}

/* メッセージのアニメーション */
@keyframes fadeInOut {
0% {
opacity: 0;
}

10% {
opacity: 1;
}

90% {
opacity: 1;
}

100% {
opacity: 0;
}
}

@media screen and (max-width: 390px) {

body {
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}

.theme-container {
display: grid;
grid-template-columns: repeat(1, 1fr);
/* 3列 */
gap: 10px;
/* アイテム間の余白 */
margin-bottom: 20px;
}
}


.gallery {
margin: 30px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20%, 1fr));
gap: 30px;
}

.tab-item {
font-size: 48px;

}

.tab-item input + i {
animation: pop 0.35s ease;
transition: 0.2s;
color: #4a4a4a;
cursor: pointer;
}

.tab-item input:checked + i {
color: #00b4d8;
text-shadow: 0 0 5px #00b4d8;
transform: scale(1.2);

}

/* アクティブ時（クリック時）に軽く縮む効果 */
.tab-item input:active + i {
color: #00b4d8;
transform: scale(0.5);
}

/* ポップアニメーション */
@keyframes pop {
0% {
transform: scale(1);
}
40% {
transform: scale(1.5;
}
70% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}

@media (prefers-color-scheme: dark) {
.tab-item + i {
color: #a4a4a4;
}

}