body {
    font-family: "M+ 1p", "Rounded M+ 1m", "Myrica M", 
                 "Noto Sans", "Noto Sans CJK JP", "Noto Sans JP",
                 "Noto Sans Symbols", "Noto Sans Symbols 2", 
                 "Noto Sans Math", "Noto Color Emoji",
                 "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
                 "Hiragino Sans", "Yu Gothic UI", "Meiryo UI", 
                 sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #c0ffee;
    color: #000;
}

.container {
    background-color: #f4f4f4;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 80%;
    max-width: 600px;
}
.note {
    background: #fffbe6;
    border-left: 6px solid #ffd700;
    padding: 1em;
    margin: 1em 0;
    border-radius: 4px;
    color: #333;
    font-size: 1em;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    z-index: 1;
    opacity: 1;
    pointer-events: auto;
}

/* 共通のテキストスタイル */
.container p,
.container li,
.container a {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* リストのスタイル */
.container ul,
.container li {
    text-align: left;
    margin-bottom: 8px;
    line-height: 1.6;
}

h1 {
    font-weight: 600;
    margin-bottom: 20px;
    color: #333;
}

input[type="number"], select, textarea {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 12px;
    margin: 5px 0 15px;
    background-color: #f8f8f8;
    color: #333;
    font-size: 16px;
    outline: none;
    width: calc(100% - 24px);
    box-sizing: border-box;
    vertical-align: middle;
}

textarea {
    resize: vertical;
    min-height: 100px;
    /* レアな文字の表示を改善するためのフォント設定 */
    font-family: "M+ 1p", "Rounded M+ 1m", "Myrica M", 
                 "Noto Sans", "Noto Sans CJK JP", "Noto Sans JP",
                 "Noto Sans Symbols", "Noto Sans Symbols 2", 
                 "Noto Sans Math", "Noto Color Emoji",
                 "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
                 "Hiragino Sans", "Yu Gothic UI", "Meiryo UI", 
                 monospace, sans-serif;
    font-feature-settings: "liga" 1, "kern" 1;
    line-height: 1.5;
}

input[type="number"]::placeholder {
    color: #999;
}

button,
#copy-url-btn,
#generate-url-btn,
.regenerate-btn {
    padding: 12px 24px;
    background-color: #339988; /* 生成ボタンと同一 */
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
    font-size: 16px;
    margin-top: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    width: 100%;
    box-sizing: border-box;
}

/* hover: 濃すぎず文字が常に読みやすい色合いに調整 */
button:hover,
#copy-url-btn:hover,
#generate-url-btn:hover,
.regenerate-btn:hover {
    background-color: #2b7a66; /* #25705f よりやや明るめで可読性向上 */
    color: #fff;
}

/* アクセシビリティ: フォーカス時の見やすさを確保 */
button:focus,
#copy-url-btn:focus,
#generate-url-btn:focus,
.regenerate-btn:focus {
    outline: 3px solid rgba(51, 153, 136, 0.18);
    outline-offset: 2px;
}

#result pre {
    background-color: #f4f4f4;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.05);
    text-align: left;
    margin: 0;
}

#result code {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 1em;
    color: #333;
}

label {
    display: inline-block;
    width: auto;
    margin: 10px 0 5px;
    color: #555;
    font-size: 16px;
    text-align: left;
    vertical-align: middle; /* 縦方向中央揃え */
}

input[type="radio"] {
    margin-right: 5px;
    vertical-align: middle;
}

input[type="checkbox"] {
    vertical-align: middle;
    margin-right: 5px;
}

#url-description,
#noConfuse-description {
    font-size: 0.8em;
    color: #444;
    margin-left: 5px;
    vertical-align: middle;
}

/* テーブルスタイル */
label {
    display: inline-block;
    width: auto;
    margin: 10px 0 5px;
    color: #333;
    font-size: 16px;
    text-align: left;
    vertical-align: middle; /* 縦方向中央揃え */
}

th, td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
    font-weight: bold;
    color: #333;
}

td {
    color: #555;
}

.description {
    font-size: 0.8em;
    color: #444;
    margin-top: 4px;
}

/* フォームテーブルスタイル */
.form-table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 20px;
}

.form-table td {
    border: none;
    padding: 8px 12px;
    vertical-align: middle;
}

.form-table td:first-child {
    text-align: right;
    width: 30%;
    font-weight: bold;
    color: #555;
}

.form-table td:last-child {
    text-align: left;
    width: 70%;
}

#character-info {
    margin-top: 10px;
    font-size: 0.9em;
    color: #555;
    text-align: left;
}

.code-block-container {
    position: relative;
    display: inline-block;
    margin: 5px;
}

.code-block-container pre {
    cursor: pointer;
    transition: background-color 0.3s ease, border 0.3s ease;
}

.code-block-container pre:hover {
    background-color: rgba(128, 192, 170, 0.2);
    border: 1px solid #80c0aa;
}

#readme-content {
    text-align: left;
}

#readme-content h1 {
    font-size: 2em;
    margin-bottom: 20px;
}

#readme-content h2 {
    font-size: 1.5em;
    margin-top: 30px;
    margin-bottom: 10px;
}

#readme-content p {
    font-size: 1em;
    line-height: 1.6;
}

#readme-content ul {
    list-style-type: disc;
    margin-left: 20px;
}

#readme-content li {
    margin-bottom: 5px;
}

/* 小さく目立たない横並びのリンク (フッターやヘッダー用) */
.mini-nav {
    margin-top: 18px;
    font-size: 0.75rem; /* 小さい文字 */
    color: #666; /* 控えめな色 */
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap; /* 小さい画面で折り返す */
    align-items: center;
}
.mini-nav a {
    color: #444;
    text-decoration: none;
    opacity: 0.8;
}
.mini-nav a:hover {
    opacity: 1;
    text-decoration: underline;
}
.mini-sep {
    color: #444;
    user-select: none;
}

/* ハイライト表示用 */
.highlight-nonsjis {
    background: linear-gradient(90deg, rgba(255,230,230,0.9), rgba(255,200,200,0.9));
    border-radius: 4px;
    padding: 1px 3px;
    margin: 0 1px;
    display: inline-block;
}

.highlight-vs {
    background: linear-gradient(90deg, rgba(230,245,255,0.9), rgba(200,235,255,0.9));
    border-radius: 4px;
    padding: 1px 3px;
    margin: 0 1px;
    display: inline-block;
}

/* 両方ハイライトされるケース */
.highlight-nonsjis.highlight-vs {
    background: linear-gradient(90deg, rgba(255,230,230,0.9), rgba(200,235,255,0.9));
}

#preview {
    margin-top: 12px;
    text-align: left;
    word-break: break-word;
    white-space: pre-wrap;
    /* レアな文字やユニコード記号の表示を改善 */
    font-family: "M+ 1p", "Rounded M+ 1m", "Myrica M", 
                 "Noto Sans", "Noto Sans CJK JP", "Noto Sans JP",
                 "Noto Sans Symbols", "Noto Sans Symbols 2", 
                 "Noto Sans Math", "Noto Color Emoji",
                 "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
                 "Hiragino Sans", "Yu Gothic UI", "Meiryo UI", 
                 monospace, sans-serif;
    font-feature-settings: "liga" 1, "kern" 1;
    line-height: 1.6;
    font-variant-numeric: tabular-nums;
}

.muted { color: #444; }

/* レアな文字・古代文字・特殊記号の表示改善 */
.rare-chars, .ancient-scripts, .special-symbols {
    font-family: "Noto Sans Symbols 2", "Noto Sans Symbols", "Noto Sans Math",
                 "Noto Sans", "Noto Sans CJK JP", "Noto Sans JP",
                 "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji",
                 "Segoe UI Symbol", "Symbola", "DejaVu Sans",
                 "Unifont", "Code2000", monospace, sans-serif;
    font-feature-settings: "liga" 1, "kern" 1, "calt" 1;
    font-variant-ligatures: common-ligatures contextual;
    text-rendering: optimizeQuality;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Unicode Private Use Area等の特殊範囲をサポート */
.unicode-pua {
    font-family: "LastResort", "Noto Sans Symbols 2", "Noto Sans Symbols",
                 ".AppleSymbolsFB", "Symbola", "DejaVu Sans", 
                 monospace, sans-serif;
}

/* Shift-JIS互換性チェック結果のスタイル */
.sjis-compatible {
    color: #0d7377;
    background-color: rgba(192, 255, 238, 0.3);
    padding: 2px 8px;
    border-radius: 4px;
    border-left: 3px solid #0d7377;
}

.sjis-incompatible {
    color: #d63384;
    background-color: rgba(255, 228, 230, 0.7);
    padding: 2px 8px;
    border-radius: 4px;
    border-left: 3px solid #d63384;
}

/* タイムスタンプ表示のスタイル */
.timestamp-display {
    margin-top: 10px;
    padding: 8px 12px;
    background-color: rgba(192, 255, 238, 0.3);
    border: 1px solid #c0ffee;
    border-radius: 6px;
    font-weight: normal;
    color: #333;
    font-size: 0.9em;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* timestamp 内の小要素を整列 */
.timestamp-display .ts-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.timestamp-display .ts-label {
    font-size: 0.85em;
    color: #333;
    margin-right: 0.25rem;
}
.timestamp-display .ts-value {
    font-family: "OCR B", monospace;
    background: rgba(255,255,255,0.6);
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.06);
    cursor: pointer;
    user-select: all;
}
.timestamp-display .copy-hint {
    font-size: 0.8em;
    color: #666;
}

/* 生成ボタン下のコピー説明 */
.copy-hint {
    font-size: 0.8em;
    color: #444;
    margin: 5px 0;
    text-align: center;
}

/* シンプルなトースト通知 */
.toast {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    background: rgba(20,20,20,0.9);
    color: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 220ms ease, transform 220ms ease;
    z-index: 1200;
    pointer-events: none;
}
.toast.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* 強度表示バッジ */

.strength-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 6px 10px;
    border-radius: 999px;
    color: #fff;
    font-weight: 600;
}
/* パスワードの強さ表示用の色 */
.strength-0 { background: #FF4B00; color: #000; font-size: 1.2em; } /* 非常に危険 */
.strength-1 { background: #F6AA00; color: #000; font-size: 1.2em; } /* 解読されやすく危険 */
.strength-2 { background: #F2E700; color: #000; font-size: 1.2em; } /* やや解読されやすい */
.strength-3 { background: #00B06B; color: #fff; font-size: 1.2em; } /* 良好 */
.strength-4 { background: #1971FF; color: #fff; font-size: 1.2em; } /* 強い安全域 */
.strength-icon {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

/* アイコン円（色の強さに合わせて目立たせる） */
.strength-icon {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset;
}

/* URL 生成セクション用スタイル */
#pwgen-url-params-info {
    border: 1px solid rgba(0,0,0,0.06);
    padding: 1rem;
}
#pwgen-url-form {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: center;
}
#pwgen-url-form label {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    background: rgba(255,255,255,0.6);
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.04);
}
#generated-url {
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #fff;
}
#copy-url-btn, #generate-url-btn {
    padding: 8px 12px;
    border-radius: 8px;
    border: none;
    background: #80c0aa;
    color: #fff;
    cursor: pointer;
}
#copy-url-btn:hover, #generate-url-btn:hover {
    background: #60a090;
}

@media (max-width: 520px) {
    #pwgen-url-form {
        flex-direction: column;
        align-items: stretch;
    }
    #pwgen-url-form label {
        width: 100%;
    }
}

/* レスポンシブデザイン */
@media (max-width: 768px) {
    .container {
        width: 95%;
        padding: 20px;
    }
    
    input[type="number"], select, textarea {
        width: calc(100% - 24px);
    }
    
    table {
        font-size: 0.9em;
    }
    
    th, td {
        padding: 8px;
    }
}

/* カスタムモーダルダイアログ */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid #e0e0e0;
}

.modal-header h3 {
    margin: 0;
    color: #d32f2f;
    font-size: 1.25em;
    font-weight: 600;
}

.modal-body {
    padding: 20px 24px;
}

.modal-body p {
    margin: 0;
    line-height: 1.6;
    color: #333;
    white-space: pre-line;
}

.modal-footer {
    padding: 16px 24px 20px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.modal-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.modal-btn-primary {
    background-color: #d32f2f;
    color: white;
}

.modal-btn-primary:hover {
    background-color: #FF4B00;
}

.modal-btn-secondary {
    background-color: #339988;
    color: #fff;
    border: 1px solid #ddd;
}

/* テーマ変数 */
:root {
	--main: #C0FFEE;              /* メインカラー（薄いミント系、爽やかで軽やかな印象） */
	--main-h: 164;               /* おおよその色相（緑寄りシアン） */
	--main-s: 100%;
	--main-l: 88%;

	/* コントラスト用ダークバリエーション（strength 3/4 用） */
	--main-contrast: hsl(var(--main-h) var(--main-s) 50%);   /* やや暗め（strength-3） */
	--main-contrast-dark: hsl(var(--main-h) 60% 38%);       /* さらに暗め（strength-4） */

	--text-on-light: #000000;
	--text-on-dark: #ffffff;

	--btn-shadow: rgba(0,0,0,0.08);
}

/* ボタン系（main を基準に調整） */
.btn {
	background: var(--main);
	color: var(--text-on-light);
	border: 1px solid rgba(0,0,0,0.08);
	padding: 0.5rem 1rem;
	border-radius: 6px;
	box-shadow: 0 2px 6px var(--btn-shadow);
	cursor: pointer;
}

/* 強めのボタン（暗め背景での白文字を想定） */
.btn--strong {
	background: var(--main-contrast);
	color: var(--text-on-dark);
	border: none;
	box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}

/* ホバーの微調整（視覚的に控えめ） */
.btn:hover {
	filter: brightness(0.98);
}

/* 最低限のアクセシビリティ補助 */
.box { display:inline-block; min-width:8rem; text-align:center; }

/* 最低限のアクセシビリティ補助 */