/* 上座・下座診断ツール 専用スタイル(他ツールとは共用しない) */

/* ---------- ハブページ：シーン選択(カードだと場所を取りすぎるため、
   ボタン/タブのような小さいピル型リンクに変更) ---------- */
.pt-jgg-scene-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.25rem 0 1.75rem;
}

.pt-jgg-scene-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #ccd3da;
    color: var(--pt-blue);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pt-jgg-scene-button:hover,
.pt-jgg-scene-button:focus-visible {
    background: var(--pt-green-bg);
    border-color: var(--pt-green);
    color: var(--pt-green-dark);
    outline: none;
}

.pt-jgg-scene-button__type {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: #f0f2f4;
    color: #777;
    font-size: 0.7rem;
    font-weight: 700;
}

/* ---------- シーン個別ページ：理由・注記 ---------- */
.pt-jgg-reasons {
    margin: 1rem 0;
    padding-left: 1.4rem;
}

.pt-jgg-reasons li {
    margin-bottom: 0.5rem;
    line-height: 1.7;
}

/* ---------- 静的シーン(タクシー・エレベーター・車)のシルエット図 ---------- */
.pt-jgg-silhouette {
    display: block;
    width: 100%;
    max-width: 20rem;
    height: auto;
    margin: 1.5rem auto;
}

.pt-jgg-silhouette__seat {
    fill: #fafbfc;
    stroke: #d8dee5;
    stroke-width: 2;
}

.pt-jgg-silhouette__seat--joza {
    fill: var(--pt-green-bg);
    stroke: var(--pt-green);
}

.pt-jgg-silhouette__seat--geza {
    fill: #fdecec;
    stroke: #e07070;
}

.pt-jgg-silhouette__seat--mid {
    fill: #f0f0f0;
    stroke: #aaa;
}

.pt-jgg-silhouette__label {
    fill: #222;
}

.pt-jgg-silhouette__rank {
    fill: #555;
}

/* ---------- 静的シーン(タクシー・エレベーター・車)の座席一覧 ---------- */
.pt-jgg-seat-table {
    margin: 1.5rem 0;
}

.pt-jgg-seat-table th {
    white-space: nowrap;
}

.pt-jgg-seat-rank {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
}

.pt-jgg-seat-rank--joza {
    background: var(--pt-green-bg);
    color: var(--pt-green-dark);
}

.pt-jgg-seat-rank--geza {
    background: #fdecec;
    color: #a1272a;
}

.pt-jgg-seat-rank--mid {
    background: #f0f0f0;
    color: #555;
}

/* ---------- グリッド+入口シミュレーター(joza_geza_grid.jsが操作) ---------- */
.pt-jgg {
    margin: 1.5rem 0;
    padding: 1.25rem;
    border-radius: 1rem;
    border: 1px solid var(--pt-green-border);
    background: linear-gradient(160deg, #eef6ff 0%, var(--pt-green-bg) 100%);
}

.pt-jgg-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.pt-jgg-controls label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-weight: 700;
    font-size: 0.85rem;
    color: #333;
}

.pt-jgg-controls input[type="number"] {
    width: 5rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid #ccd3da;
    border-radius: 0.5rem;
    font-size: 1rem;
}

.pt-jgg-entrance-controls {
    margin-bottom: 1.25rem;
}

.pt-jgg-entrance-label {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 700;
    font-size: 0.85rem;
    color: #333;
}

.pt-jgg-entrance-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.pt-jgg-entrance-buttons button {
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    border: 1px solid #ccd3da;
    background: #fff;
    color: var(--pt-blue);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pt-jgg-entrance-buttons button.is-active {
    background: var(--pt-blue);
    border-color: transparent;
    color: #fff;
}

.pt-jgg-hint,
.pt-jgg-cell-hint {
    margin: 0.4rem 0 0;
    font-size: 0.78rem;
    color: #666;
}

/* 「入口を指定」/「避けたい場所を指定」のクリックモード切り替え */
.pt-jgg-mode-controls {
    margin-bottom: 1.25rem;
}

.pt-jgg-mode-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.pt-jgg-mode-buttons button {
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    border: 1px solid #ccd3da;
    background: #fff;
    color: #555;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pt-jgg-mode-buttons button.is-active {
    background: #fdecec;
    border-color: #e07070;
    color: #a1272a;
}

.pt-jgg-svg-wrap {
    padding: 0.5rem;
}

.pt-jgg-svg {
    display: block;
    width: 100%;
    max-width: 30rem;
    height: auto;
    margin: 0 auto;
}

.pt-jgg-room-outline {
    fill: #fff;
    stroke: #8fa8bd;
    stroke-width: 3;
}

.pt-jgg-door-label {
    font-size: 1.1rem;
    font-weight: 700;
    fill: #5b7d99;
}

.pt-jgg-seat {
    cursor: pointer;
}

.pt-jgg-seat__box {
    fill: #fafbfc;
    stroke: #d8dee5;
    stroke-width: 2;
    transition: fill 0.15s ease, stroke 0.15s ease;
}

.pt-jgg-seat:hover .pt-jgg-seat__box {
    stroke: var(--pt-blue-light);
}

.pt-jgg-seat.is-joza .pt-jgg-seat__box {
    fill: var(--pt-green-bg);
    stroke: var(--pt-green);
}

.pt-jgg-seat.is-geza .pt-jgg-seat__box {
    fill: #fdecec;
    stroke: #e07070;
}

.pt-jgg-seat.is-avoid .pt-jgg-seat__box {
    fill: #f0f0f0;
    stroke: #aaa;
    stroke-dasharray: 4 3;
}

.pt-jgg-seat__rank {
    font-size: 2.1rem;
    font-weight: 900;
    fill: #222;
}

.pt-jgg-seat__tag {
    font-size: 1.1rem;
    font-weight: 700;
    fill: #555;
}

.pt-jgg-seat__avoid-icon,
.pt-jgg-seat__door-icon {
    font-size: 1.3rem;
}

.pt-jgg-legend {
    margin: 0.75rem 0 0;
    font-size: 0.82rem;
    color: #555;
}