@import url('https://fonts.cdnfonts.com/css/lucida-sans-unicode');

body {
    margin: 0;
    overflow: hidden;
    background-color: #f4f7f6;
//    font-family: 'Arial', sans-serif;
	font-family: 'Lucida Sans Unicode','Noto Sans Japanese', sans-serif;

}
#visualization {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
	z-index: -1;
	pointer-events: auto;
}

/* ★★★ 疾病リスク凡例のスタイル (位置とフォントをコンパクトに修正) ★★★ */
#risk-legend {
	margin-top:20px;
    padding: 8px; /* パディングを縮小 */
}
#risk-legend h3 {
    margin: 0 0 5px 0; 
    font-size: 1.0em;
    color: #3498db;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}
.legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 3px; 
}
.legend-color {
    display: inline-block;
    width: 10px; 
    height: 10px; 
    border-radius: 50%; 
    margin-right: 5px; 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.legend-item p {
    margin: 0;
    font-size: 0.9em; /* フォントサイズを縮小 */
    color: #333;
}
.legend-note {
    font-size: 0.9em; /* フォントサイズを縮小 */
    color: #555;
    margin-top: 5px; 
    border-top: 1px dashed #eee;
    padding-top: 5px;
}
/* 凡例のカラー定義 (cloud.jsと同期) */
.legend-level-3 { background-color: #e74c3c; } 
.legend-level-2 { background-color: #f39c12; } 
.legend-level-1 { background-color: #2ecc71; } 

/* ★★★ 疾病名ラベルのスタイル ★★★ */
.risk-label {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 1.0em;
    font-weight: bold;
    pointer-events: none; 
    white-space: nowrap;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    z-index: 999 !important;;
}
.label-level-3 { color: #e74c3c; border-left: 5px solid #e74c3c; } 
.label-level-2 { color: #f39c12; border-left: 5px solid #f39c12; } 
.label-level-1 { color: #2ecc71; border-left: 5px solid #2ecc71; } 

/* リスクモーダル　疾病名を右クリックしたときにでるモーダル */
.risk-modal {
    position: fixed;
    top: 50px; /* 初期位置 */
    right: 10px;
    
    width: 320px;
    padding: 15px;
    border: 1px solid #c0c0c0;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
    z-index: 1010;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none; 
}
.risk-modal.visible {
    opacity: 1;
    pointer-events: auto; 
}

.risk-modal h2 {
    font-size: 1.0em;
    margin-top: 0;
    padding-top: 2px;
    padding-bottom: 8px;
    border-bottom: 2px solid #3498db;
    color: #3498db;
}

.risk-modal h3 {
    font-size: 0.95em;
    margin: 10px 0 5px 0;
    color: #555;
}
#risk-modal ul {
    list-style: disc;
    padding: 0;
}

.risk-modal li {
    font-size: 0.9em;
    padding: 7px 0;
    border-bottom: 1px dotted #e0e0e0;
    justify-content: space-between;
	text-align:left;
}
.risk-modal li.caution{
    color: #3498db;
	font-weight:bold;
	text-align:left;
}
.risk-modal li:last-child {
    border-bottom: none;
}
/* 閉じるボタン */
#close-risk-modal { 
    position: absolute;
    top: 13px;
    right: 10px;
    z-index: 2000;
	padding:0;
    background: #aaa; 
    color: white;
    border: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1em;
}
/* googleリンク */
.google_link{
    font-size: 0.9em;
	margin-top: 10px; 
	display: inline-block;
	text-decoration:none;
    padding: 8px;
    background-color: #3498db; 
    color: white;
    text-decoration: none;
    font-weight: nomal;
    border-radius: 5px;
}
/* 主要疾病リスク　左上のリスク一覧 */
#risk-quick-view {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1000; /* 3D表示の上に表示 */
    background: rgba(255, 255, 255, 0.9);
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    font-size: 15px;
}
#risk-quick-view h3 {
    margin: 0 0 10px 0;
    font-size: 16px;
    border-bottom: 1px solid #3498db;
    padding-bottom: 5px;
	color: #3498db;
}
.risk-item {
    justify-content: space-between;
    padding: 4px 0;
    cursor: pointer; /* 今後のJSでのクリック動作を想定 */
}
.risk-name {
    font-weight: normal;
    font-size: 15px;
}
.risk-name:hover {
	color: #3498db;
}
.risk-item.active {
        background-color: #f0f0f0; /* クリックされたアイテムをグレーでハイライト */
        border-left: 3px solid #3498db; /* 左側に青いラインを追加 */
        padding-left: 7px;
}
/* ★★★ 登録情報パネルのCSS (左スライドインを維持) ★★★ */
#user-data-panel { 
    position: fixed;
    top: 0;
    left: 0; 
    width: 40%; 
    max-width: 90%; 
    height: 100%;
    background-color: #fff;
    box-shadow: 4px 0 10px rgba(0, 0, 0, 0.2);
    z-index: 2001;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    transform: translateX(-100%); 
    transition: transform 0.3s ease-in-out; 
}
/* パネルが開いたときのクラス */
#user-data-panel.open {
    transform: translateX(0);
}

/* ★★★ ログアウトボタンのスタイル (追加) ★★★ */
#logout-button {
    position: fixed;
    top: 0;
    right: 10px;
    padding: 8px 15px;
    background-color: #3498db; 
    color: white;
    text-decoration: none;
    font-weight: bold;
///    border-radius: 5px;
	border-bottom-left-radius: 13px; /* 左下を角丸に */
    border-bottom-right-radius: 13px; /* 右下を角丸に */

    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 2000;
    cursor: pointer;
    transition: background-color 0.2s;
}
#logout-button:hover {
    background-color: #2980b9;
}

/* 開くボタン */
#open-user-data { 
    position: fixed;
    top: 0;
    right: 140px; 
    padding: 8px 15px;
    background-color: #3498db;
    color: white;
    border: none;
    cursor: pointer;
    z-index: 2000;
	border-bottom-left-radius: 13px; /* 左下を角丸に */
    border-bottom-right-radius: 13px; /* 右下を角丸に */

    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2); 
}
/* パネルが開いている間、ボタンを非表示にするためのCSS */
#open-user-data.hidden {
//     display: none;
}

/* 閉じるボタン */
#close-user-data { 
    position: absolute;
    top: 10px;
    right: 10px;
    background: #aaa; 
    color: white;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2em;
}
/* ボタンの基本的なスタイル（PHRサービスのデザインに合わせて調整してください） */
#geminiConsultButton {
    position: fixed;
    top: 0px;
    right: 290px; 
    padding: 8px 15px;
    font-size: 16px;
    cursor: pointer;
    background-color: #4A90E2;
    color: white;
    border: none;
	border-bottom-left-radius: 13px; 
    border-bottom-right-radius: 13px; 
    z-index: 1000; /* 他の要素の上に表示 */

}
#userQuestionContainer {
    position: fixed; /* ボタンの高さ（paddingと文字サイズ）を考慮し、約40px下に配置 */
    top: 40px; /* ボタンと同じ right 位置に配置 */
    right: 290px; 
    width: 320px;
    padding: 5px;
    background-color: white;
    border: 2px solid #3498db;
    border-radius: 8px 8px 8px 8px; /* 下側の角を丸める */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 10001; /* 他の要素の上に表示 */
    display: none;
}

#userQuestionInput {
    width: 100%;
    padding: 5px;
    box-sizing: border-box; /* padding を含めて幅を計算 */
    resize: vertical; /* 縦方向のみリサイズ可能 */
    border: none;
    font-size: 14px;
	padding:5px
}
#userQuestionInput:focus {
	outline: none !important; 
	border:none;
	background-color:#c1d6f7;
	opacity:0.5;
}


/* ツールチップのスタイル */
.tooltip {
    position: fixed; /* 画面に固定 */
    top: 10px;
	left: 30%;
    background-color: #333;
    color: white;
    padding: 15px;
    border-radius: 8px;
    z-index: 10001; /* 他の要素の上に表示 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    display: none; /* 初期状態では非表示 */
    opacity: 0;
    transition: opacity 0.5s;
    font-size: 14px;
	line-height:140%;
}
#user-data-panel h2 {
    margin-top: 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #3498db;
    color: #3498db;
    font-size: 1.2em;
    margin-bottom: 15px;
    cursor: pointer;

}
/* 出典 */
div#ref{
	color: #696969;
	background: #f5f5f5;
	margin-bottom:0;
	line-height:130%;
    font-size: 0.7em;
	padding: 10px;
	margin-top:15px;
}
div#ref a{
	color: #696969;
	text-decoration:none;
}

/* データ表示エリアのスタイル */
.data-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
    font-size: 0.95em;
}
.data-item p {
     font-weight: 500;
     color: #555;
	width:40%;
	padding-top:8px;
}
.data-item span {
    font-weight: bold;
    color: #333;
	margin: auto 0;
	width:60%;
}
.data-section-title {
    font-size: 1.1em;
    font-weight: bold;
    color: #3498db;
    margin: 20px 0 10px 0;
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;
}

/* SCのCSS */
.sc_link{
    font-size: 0.95em;
}
.sc_link li{
	padding:3px 0 3px 10px;
}
.sc_link a{
	color:#555;
    text-decoration:none;
}

/* ★★★ フォーム要素のスタイル ★★★ */

/* input type="text" や type="password" に適用するスタイル */
.form-input {
    width: 95%; /* 横幅を統一 */
    padding: 7px 10px; /* パディングを増やして高さを出す */
    border: 1px solid #ccc;
    border-radius: 5px; /* 角丸化 */
    box-sizing: border-box;
    font-size: 1em;
    font-weight: normal; 
    color: #333;
    transition: border-color 0.2s, box-shadow 0.2s; 
}
/* 新規追加: kgやcmなどの単位表示で改行を防ぐために幅を調整したinput */
.form-input-short {
    width: 85%; /* ユーザー要望の幅 */
}

/* input, textarea, select の共通フォーカススタイル */
.form-input:focus, 
.form-select-full:focus, 
.form-textarea-full:focus {
    border-color: #3498db; 
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.5); 
    outline: none;
}

/* ★★★ select/textarea のスタイル調整 ★★★ */
.form-select-full, .form-textarea-full {
    width: 95%; 
    padding: 7px 10px; 
    border: 1px solid #ccc;
    border-radius: 5px; 
    box-sizing: border-box;
    font-size: 1em;
    font-weight: normal;
    color: #333;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-textarea-full {
    resize: vertical; 
}


/* ★★★ radio button のスタイル調整 ★★★ */
.radio-group-inline {
    display: flex;
    width: 100%;
    font-weight: normal;
}
.radio-group-inline label {
    font-weight: normal;
    color: #333;
    margin-right: 25px; 
}
.data-item span label {
    font-weight: normal;
}
.radio-group-inline input[type="radio"] {
    margin-right: 5px;
}

/* スライダーの色を #3498db (青) に変更するCSS */
input[type="range"] {
	width:80%;
	--slider-progress: 50%; /* JSがロードされるまでの初期値 */
	accent-color: #3498db;
	color:#fff;
	background: #fff; /* 明るい灰色（白に近く、ツマミとの境目がわかりやすい） */
	cursor: pointer;
	border: slid 1px #3498db;
	border-radius: 8px;

    --slider-norm-start-border: 0%; 
    --slider-norm-border: 0%;   
    --slider-value-fill: 0%;    /* ツマミの位置（進捗） */
    --fill-color: #3498db;      /* ツマミまでの塗りつぶし色 (濃い青) */
	--post-fill-color: #c1d6f7; /* 【修正1】ツマミ直後の初期色を #c1d6f7 に */
    --risk-color-low: #c1d6f7;  /* 【修正2】低リスクゾーンの色を #c1d6f7 に */
    --risk-color-high: #c1d6f7; /* 【修正3】高リスクゾーンの色を #c1d6f7 に */
    --norm-color: #2ecc71;      /* 基準値内の色 (緑) */
    --thumb-color: #62A4F2;
}
input[type="range"]::-webkit-slider-runnable-track {
    background: 
        linear-gradient(to right, 
                        /* 1. ツマミまでのアクティブなフィル色 (濃い青) */
                        var(--fill-color) 0%, 
                        var(--fill-color) var(--slider-value-fill), 

                        /* 2. フィル後の色（ツマミから基準値開始までの色: post-fill-color） */
                        var(--post-fill-color) var(--slider-value-fill), 
                        
                        /* --- 固定された3つのゾーンの定義 --- */
                        
                        /* A. 低リスク側ゾーン (post-fill-color で上書きされる) */
                        var(--risk-color-low) var(--slider-norm-start-border),
                        
                        /* B. 基準値内ゾーン（normStartからnormEndまで）*/
                        var(--norm-color) var(--slider-norm-start-border), 
                        var(--norm-color) var(--slider-norm-border),

                        /* C. 高リスク側ゾーン（normEndから100%まで）*/
                        var(--risk-color-high) var(--slider-norm-border),
                        var(--risk-color-high) 100%
        );
    height: 10px; /* トラックの高さ（前回設定した値に合わせてください） */
	border: slid 1px #3498db;

    border-radius: 30%; /* トラックの角を丸くする設定（任意） */
}
/* Firefox のスライダーのトラック（バーの部分）に適用 (互換性のため) */
input[type=range]::-moz-range-track {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    
    /* WebKitと同様の動的グラデーション */
    background: linear-gradient(to right, 
                        var(--fill-color) 0%, 
                        var(--fill-color) var(--slider-value-fill), 
                        var(--post-fill-color) var(--slider-value-fill), 
                        
                        var(--risk-color-low) var(--slider-norm-start-border),
                        var(--norm-color) var(--slider-norm-start-border), 
                        /* --- ここを修正しました --- */
                        var(--norm-color) var(--slider-norm-border),
                        var(--risk-color-high) var(--slider-norm-border),
                        var(--risk-color-high) 100%
        );
}

input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	background: #3498db; /* 青色 */
	margin-top: -4px; /* 位置の調整が必要 */
	height: 40px;
	width: 40px;
	border-radius: 50%;
}
input[type="range"]::-moz-range-thumb {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: var(--thumb-color); 
    cursor: pointer;

    border: none;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

.risk_sv{
	position:relative;
	bottom:0;left:0px; 
	padding-top: 5px;
	display:inline-block;
	font-weight:normal;
}
input[type="radio"] {
	accent-color: #3498db;
}


/* ★★★ フォームのボタン・グループのスタイル ★★★ */
.button-group {
    display: flex; 
    justify-content: space-between; 
    gap: 10px; 
    margin-top: 30px;
}

/* 共通ボタンベーススタイル */
.update-button, .save-button {
    flex-grow: 1; 
    padding: 10px;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}

/* 登録情報を更新ボタン (緑系) */
.update-button {
    background-color: #2ecc71; 
    color: white;
}
.update-button:hover {
    background-color: #27ae60;
}

/* 保存するボタン (青系) */
.save-button {
    background-color: #3498db; 
    color: white;
}
.save-button:hover {
    background-color: #2980b9;
}

/* ★★★ レスポンシブデザインの追加 (max-width: 768px 以下) ★★★ */
@media (max-width: 768px) {
    /* パネルの幅を全画面にする */
    #user-data-panel { 
        width: 100%;
        max-width: 100%;
    }
    
    /* フォーム項目を縦に近づける（幅を50%ずつに再調整） */
    .data-item p {
        width: 35%;
    }
    .data-item span {
        width: 65%;
    }

	/* tooltips */
	.tooltip {
		position: fixed; /* 画面に固定 */
		top: 10px;
		left: 15%;
	}
}
/* ★★★ PC画面でのパネルオープン時の調整 (ここから追記) ★★★ */
@media (min-width: 769px) {
    /* body.panel-open の時に、#visualization を右側の60%の領域に移動・縮小する */
    body.panel-open #visualization {
        /* 左端から40%の位置に移動 */
        left: 40%; 
        /* 幅を60%に設定 */
        width: 60%;
        /* 高さは100%のまま維持 */
        height: 100%;
    }
}

/* DB更新後のモーダル */
#db-notification-modal {
    position: fixed;
    top: 0;
	left: 28%;
    width: 40%;
    padding: 20px 0;

    background-color: #666;
    color: white;
	font-size:14px;
    text-align: center;
    font-weight: normal;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 10000; /* 最前面に表示 */

	border-bottom-left-radius: 13px; /* 左下を角丸に */
    border-bottom-right-radius: 13px; /* 右下を角丸に */

    /* 初期状態: 画面上部に隠す */
    transform: translateY(-100%); 

    transition: transform 0.5s ease-in-out;
}

/* 表示（スライドイン）時に適用するクラス */
#db-notification-modal.show {
    transform: translateY(0);
}

/* 失敗時の色（PeterさんがPHPで切り替えるためのクラス） */
#db-notification-modal.error {
    background-color: #F44336; /* エラーを示す赤 */
}