/* 配色トークン。二次色(ラベル・時刻・ENo等の控えめな文字)は必ずこの変数を使う。
   #2c6a5e = 深緑寄りのティール(色相168)。アクセント色 #3366cc(色相220)と50度以上離れているため、
   ボタン等と混同されない。
   (対白 6.31:1 / 対背景 4.68:1。旧 rgba(60,60,67,0.6) は 3.44:1 で不足していた)
   なお二次色のリンク(.talk-eno / .side-eno)は通常時は装飾せず、ホバー時のみ下線+リンク色にする。 */
:root {
    --text-secondary: #2c6a5e;
    /* リンク色。ボタン・フォーカスリングと同じアクセント色。
       Enoリンクのホバー時にのみ使う(通常時は二次色) */
    --text-link: #3366cc;
    /* 白カードの背景。.right(右メニュー)と同じ半透明白。#e1ddddの上では実効 #f3f1f1 になり、
       純白 #ffffff のような眩しさが出ない */
    --card-bg: rgba(255, 255, 255, 0.6);
    /* 上を合成した不透明版。半透明を使えない/使いたくない箇所のフォールバック用 */
    --card-bg-solid: #f3f1f1;
}
body {
    display: flex;
    justify-content: center;/* 水平方向の中央揃え */
    background-color: #e1dddd;
    /* サイト全体にシステムフォントを適用(.rightの個別指定と重複するが問題ない) */
    font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    color: #1d1d1f;
}
/* 見出しはウェイトと負トラッキング・タイトなリーディングで作る(大きい文字ほど詰める) */
h2, h3 {
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.layout {
    display: grid;
    grid:
    "header header header header header header" auto
    "top top top top right right" auto
    "talk-left talk-left talk-right talk-right  right right" 1fr
    "paging paging paging paging right right" auto
    "footer footer footer footer footer footer" auto
    / 1fr 1fr 1fr 1fr 6% 6%;
    gap: 8px;

    max-width: 1600px; /* 幅の最大値を1600pxに制限 */
    padding: 16px; /* 内部余白を追加 */
    border-radius: 8px; /* 角に丸みをつける */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* ボックスに影をつける */

}

.header { grid-area: header;
    background-color: lightblue;
    border-radius: 12px;/* .rightのマテリアル語彙と揃える(色は変えない) */}
/* min-width:0 = 横広な中身(戦闘ステータスの4列グリッド等)が1frトラックを押し広げてページ幅をはみ出させるのを防ぐ根本対処 */
.top { grid-area: top;
    min-width: 0;}
.right { grid-area: right;
    /* 半透明マテリアル: 下に何があってもサイドバーとして浮いて見える層 */
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    padding: 12px 10px;
    font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-size: 14px;
    color: #1d1d1f;}
.talk-left { grid-area: talk-left;
    min-width: 0;}
.talk-right { grid-area: talk-right;
    min-width: 0;}
.footer { grid-area: footer;
    border-radius: 12px;/* .headerと揃える(背景色なしのため見た目は変わらない) */}
/* talk-left と talk-right を768px以上で横並びにする */
@media (min-width: 1200px) {/*ワイド用*/
    .layout {
        min-width: 1200px;
        grid-template-areas:
        "header header header header header header"
        "top top top top right right"
        "talk-left talk-left talk-right talk-right right right"
        "paging paging paging paging right right"
        "footer footer footer footer footer footer";
    }
}

/* talk-left と talk-right を768px未満で縦並びにする */
@media (max-width: 1200px) {/*ナロー用*/
    /* 万一中身がはみ出しても左寄せ(=右方向にあふれ、スクロールで届く向き)にする保険。
       中央寄せのままだと左半分が画面外に押し出され、スクロールしても届かなくなる */
    body {
        justify-content: flex-start;
    }
    .layout {
        grid-template-areas:
        "header"
        "top"
        "talk-left"
        "talk-right"
        "paging"
        "right"
        "footer";
        grid-template-columns: 1fr; /* 幅いっぱいを1カラムにする */
        grid-template-rows: none; /* 基本レイアウトの1fr行指定を打ち消し、全行を内容の高さに合わせる */
        justify-content: center;/* 水平方向の中央揃え */
        max-width: 100%; /* ビューポート幅を超えて広がらないよう制限 */
        box-sizing: border-box; /* paddingを含めて100%に収める */
    }
}
/* 戦闘ステータス(横広な4列グリッド)を横スクロール可能にするラッパ。
   overflow-x:auto なので、収まる幅(デスクトップの4列など)ではスクロールバーは出ない */
.statuswrap {
    overflow-x: auto;
}
hr{
    border: 1px solid gray;
    margin-left: 0px;
    width: 40%;
}
/* 発言装飾(deco.php textDecoration が出力するクラス) */
/* サイズ系はpx指定: 入れ子でも%のように掛け算されず、一番内側のサイズが適用される */
.s {
    font-size: 15px;
}
.ss {
    font-size: 14px;
}
.sss {
    font-size: 13px;
}
.ssss {
    font-size: 11px;
}
.L{
    font-size: 18px;
}
.LL{
    font-size: 19px;
}
.LLL{
    font-size: 21px;
}
.B{
    font-weight: bold;
}
.U{
    text-decoration: underline wavy;
}
.T{
    text-decoration: line-through wavy;
}
.Red{
    color: red;
}
.Blue{
    color: blue;
}
.Pink{
    color: pink;
}
.Pink2{
    color: #f55e76;
}
.Rw{
    /* 虹色グラデーション(流れるアニメーション付き) */
    background: linear-gradient(90deg, #e40303, #ff8c00, #e6c000, #0f9d3a, #0066cc, #7b2fbe, #e40303);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: rwflow 4s linear infinite;
}
@keyframes rwflow {
    from { background-position: 0% 0; }
    to { background-position: 200% 0; }
}

/* R18マーク(インスタンス一覧・タイトル表示で使用) */
.r18-mark {
    display: inline-block;
    background-color: #d32a2a;
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 3px;
    margin-right: 5px;
    vertical-align: 2px;
}

/* R15マーク(.r18-markと同型・色のみオレンジ。レーティング15で使用) */
.r15-mark {
    display: inline-block;
    background-color: #e07a00;
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 3px;
    margin-right: 5px;
    vertical-align: 2px;
}

/* 宿泊可マーク(.r18-markと同型・色のみ青。宿泊可インスタンスで使用) */
.stay-mark {
    display: inline-block;
    background-color: #2a6fd3;
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 3px;
    margin-right: 5px;
    vertical-align: 2px;
}

/* 発言1件の表示 */
/* 罫線でなく影で浮かせる白カード(.fav-tab-active / .side-* と同じ影の語彙) */
.talk-item {
    background-color: var(--card-bg);
    border-radius: 12px;
    padding: 10px 12px;
    margin: 8px 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.talk-rt-head {
    font-size: 13px;
    color: var(--text-secondary); /* 緑をやめ二次色に(⇄記号自体でRTと伝わる) */
}
.talk-head {
    font-size: 90%;
    display: flex;
    gap: 8px;
    align-items: baseline;
    flex-wrap: wrap;
}
/* 階層はサイズでなくウェイトと二次色で作る */
.talk-name {
    font-weight: 600;
}
.talk-eno {
    font-size: 13px;
    /* プロフィールへのリンク。通常時は二次色のまま目立たせず、ホバーで下線+リンク色にして押せると示す */
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 150ms ease;
}
.talk-eno:hover {
    color: var(--text-link);
    text-decoration: underline;
}
.talk-head-right {
    margin-left: auto; /* 時刻とNoを右端に寄せる */
    font-size: 13px;
    color: var(--text-secondary);
}
.talk-head-right .talk-mn {
    color: var(--text-secondary); /* No:リンクも同系の二次色に */
}
.talk-body {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.talk-icon {
    max-width: 120px;
    max-height: 120px;
    flex-shrink: 0;
    border-radius: 10px;
}
.talk-icon-none { /* アイコンなし発言のプレースホルダー(薄グレーの箱) */
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    background-color: #f2f2f2;
    border-radius: 10px;
}
.talk-message {
    flex: 1;
    overflow-wrap: anywhere;
}
.talk-actions {
    margin-top: 6px;
    display: flex;
    gap: 8px; /* 円形ヒットエリアが実質の間隔を作るため詰める */
    align-items: center;
}
.talk-actions form {
    display: inline;
    margin: 0;
}
/* 💬★⇄ は .loc-fav-star と同じ円形ヒットエリア方式(32px円形・hover淡背景・:active縮小) */
.talk-actions button, .talk-reply {
    background: none;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 110%;
    line-height: 1;
    color: var(--text-secondary); /* ★/⇄のstate色(gold/green/灰)はinlineで上書きされる */
    transition: background-color 150ms ease, transform 100ms ease-out;
}
.talk-actions button:hover, .talk-reply:hover {
    background-color: rgba(0, 0, 0, 0.05);
}
.talk-actions button:active, .talk-reply:active {
    background-color: rgba(0, 0, 0, 0.1);
    transform: scale(0.85);
    transition-duration: 50ms;
}
.talk-actions .talk-rt {
    font-weight: bold; /* ⇄(U+21C4)は細身なので太らせて視認性を上げる */
}

/* 投稿フォームのアイコン選択(画像パレット) */
.icon-select {
    position: relative;
    display: inline-block;
}
.icon-current {
    width: 60px;
    height: 60px;
    border: 1px solid #cccccc;
    border-radius: 8px;
    background-color: var(--card-bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 150ms ease;
}
.icon-current:hover { /* 押せる(アイコン変更できる)ことを示す淡背景 */
    background-color: rgba(0, 0, 0, 0.05);
}
.icon-current img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.icon-none-text {
    color: #666666;
    font-size: 90%;
}
.icon-picker {
    display: none;
    position: absolute;
    top: 62px;
    left: 0;
    z-index: 10;
    width: 508px; /* タイル60px×8 + gap4px×7。8個ぴったりで右余白が出ない */
    max-width: calc(100vw - 24px); /* ナロー画面で画面外にはみ出さないための保険 */
    max-height: 300px;
    overflow-y: auto;
    scrollbar-gutter: stable both-edges; /* スクロールバー出現時も左右の隙間を均等に保つ */
    /* ポップオーバーのマテリアル(.rightと同じ半透明ガラス語彙) */
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    padding: 4px;
    /* トリガー(.icon-current)起点でマテリアライズ: opacity+scaleを150msで */
    opacity: 0;
    transform: scale(0.95);
    transform-origin: top left;
    transition: opacity 150ms ease-out, transform 150ms ease-out;
    /* allow-discrete対応ブラウザではdisplay切替もアニメーションに含める(非対応は上行を使う) */
    transition: opacity 150ms ease-out, transform 150ms ease-out, display 150ms allow-discrete;
}
.icon-picker.open {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-content: flex-start;
    opacity: 1;
    transform: scale(1);
}
/* 初回出現時の開始状態(@starting-style非対応ブラウザでもopacity 0→1で可視化されるので破綻しない) */
@starting-style {
    .icon-picker.open {
        opacity: 0;
        transform: scale(0.95);
    }
}
.icon-tile {
    width: 60px;
    height: 60px;
    box-sizing: border-box;
    border: 2px solid transparent;
    border-radius: 8px;
    object-fit: contain;
    cursor: pointer;
}
.icon-tile:hover {
    border-color: #99bbee;
}
.icon-tile.selected { /* 選択枠はfocus ring風(.side-login input:focusと同語彙) */
    border-color: #3366cc;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.25);
}
.icon-tile-none {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666666;
    font-size: 90%;
    border-color: #dddddd;
}

/* ===== 投稿フォーム(parts/chatarea.php の form.chat-form 内に限定) ===== */
/* 入力欄は.side-login inputと同じ流儀(他ページの素のinput/textareaは変えない) */
.chat-form input[type=text],
.chat-form textarea {
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    font-family: inherit;
}
.chat-form input[type=text]:focus,
.chat-form textarea:focus {
    outline: none;
    border-color: #3366cc;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.25);
}
/* 投稿ボタンは.side-login buttonと同じ(青背景・角丸8px・:active縮小) */
.chat-form button {
    padding: 7px 16px;
    border: none;
    border-radius: 8px;
    background-color: #3366cc;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 150ms ease, transform 100ms ease-out;
}
.chat-form button:hover {
    background-color: #2f5dbb;
}
.chat-form button:active {
    background-color: #2a55aa;
    transform: scale(0.97);
    transition-duration: 50ms;
}

/* 装飾タグ挿入ボタン(parts/deco_buttons.php)。小さな角丸チップ */
.deco-btn {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    background-color: rgba(0, 0, 0, 0.06);
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    transition: background-color 150ms ease, transform 100ms ease-out;
}
.deco-btn:hover {
    background-color: rgba(0, 0, 0, 0.12);
}
.deco-btn:active {
    transform: scale(0.95);
    transition-duration: 50ms;
}

/* 通知(封筒マークと未読赤丸) */
.notice-mail {
    position: relative;
    display: inline-block;
    text-decoration: none;
    font-size: 120%;
    margin-left: 4px;
}
.notice-badge {
    position: absolute;
    top: -2px;
    right: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: red;
}

.notice-item {
    padding: 4px 0;
    border-bottom: 1px solid #cccccc;
}

/* ページング */
.paging {
    grid-area: paging;
    text-align: center;
    padding: 8px;
    min-width: 0; /* 横広な中身がページ幅を押し広げるのを防ぐ(.top等と同様) */
}
/* ページ番号・前後リンクをチップ化 */
.paging a, .paging strong, .paging .paging-off {
    display: inline-block;
    min-width: 28px;
    margin: 0 2px;
    padding: 4px 6px;
    border-radius: 14px;
    text-align: center;
    text-decoration: none;
}
.paging a {
    transition: background-color 150ms ease, transform 100ms ease-out;
}
.paging a:hover {
    background-color: rgba(0, 0, 0, 0.05);
}
.paging a:active {
    transform: scale(0.97);
    transition-duration: 50ms;
}
.paging strong { /* 現在ページは白背景+影の選択チップ(.fav-tab-activeと同語彙) */
    background-color: var(--card-bg);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.paging-off {
    color: #999999;
}

/* ===== 右サイドバー(parts/html_right.php) ===== */
/* ユーザーカード: アイコン+名前+ENo。ナビとは罫線で区切る */
.side-user {
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.side-avatar img {
    max-width: 100%;
    max-height: 120px;
    border-radius: 10px;
}
.side-avatar-none { /* アイコン未設定時のプレースホルダー */
    width: 64px;
    height: 64px;
    margin: 0 auto;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.06);
}
.side-name {
    margin-top: 6px;
    font-size: 15px;
    font-weight: 600;
    overflow-wrap: anywhere;
}
.side-eno {
    display: block; /* aタグ化してもdiv時代と同じ行取りを保つ */
    font-size: 12px;
    letter-spacing: 0.02em; /* 小さい文字は少し広めのトラッキングで可読性を確保 */
    /* 自分のプロフィールへのリンク(.talk-enoと同仕様): 通常時は二次色、ホバーで下線+リンク色 */
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 150ms ease;
}
.side-eno:hover {
    color: var(--text-link);
    text-decoration: underline;
}

/* ナビゲーション */
.side-nav {
    display: flex;
    flex-direction: column;
    padding-top: 8px;
}
.side-group {
    margin-top: 10px;
}
.side-group-title {
    padding: 0 8px 3px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
}
.side-link {
    display: block;
    padding: 6px 8px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    /* 押下フィードバックは即時(短い遷移)、戻りも軽く */
    transition: background-color 150ms ease, transform 100ms ease-out;
}
.side-link:hover {
    background-color: rgba(0, 0, 0, 0.05);
}
.side-link:active { /* pointer-downの瞬間に反応させる */
    background-color: rgba(0, 0, 0, 0.1);
    transform: scale(0.97);
    transition-duration: 50ms;
}
.side-logout {
    color: #c03030; /* 退出=破壊的寄りの操作は赤で区別 */
}

/* ログインフォーム(未ログイン時) */
.side-login {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.side-login-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    padding: 2px 0 4px;
}
.side-login label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}
.side-login input {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    font-family: inherit;
}
.side-login input:focus {
    outline: none;
    border-color: #3366cc;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.25);
}
.side-login button {
    margin-top: 2px;
    padding: 7px;
    border: none;
    border-radius: 8px;
    background-color: #3366cc;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 150ms ease, transform 100ms ease-out;
}
.side-login button:hover {
    background-color: #2f5dbb;
}
.side-login button:active {
    background-color: #2a55aa;
    transform: scale(0.97);
    transition-duration: 50ms;
}

/* 透明度を減らす設定の環境では不透明にフォールバック */
@media (prefers-reduced-transparency: reduce) {
    .right, .icon-picker {
        background: var(--card-bg-solid);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-color: rgba(0, 0, 0, 0.15);
    }
}
/* 動きを減らす設定の環境では縮小フィードバックを止め、色変化のみ残す */
@media (prefers-reduced-motion: reduce) {
    .side-link, .side-login button {
        transition: background-color 150ms ease;
    }
    .side-link:active, .side-login button:active {
        transform: none;
    }
}

/* ===== ロケーションお気に入り ===== */
/* タイトル行: タイトルを左、☆を右端に配置する */
.loc-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
/* タイトル行右端・お気に入り一覧の☆トグルボタン(枠なしの円形ボタン) */
.loc-fav-star {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    color: var(--text-secondary);
    /* 押下フィードバックは即時(サイドバーの.side-linkと同じ流儀) */
    transition: background-color 150ms ease, transform 100ms ease-out;
}
.loc-fav-star:hover {
    background-color: rgba(0, 0, 0, 0.05);
}
.loc-fav-star:active {
    background-color: rgba(0, 0, 0, 0.1);
    transform: scale(0.85);
    transition-duration: 50ms;
}

/* お気に入りページのタブ(セグメンテッドコントロール風) */
.fav-tabs {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    margin-bottom: 10px;
    border-radius: 9px;
    background-color: rgba(0, 0, 0, 0.06);
}
.fav-tabs a {
    padding: 5px 14px;
    border-radius: 7px;
    text-decoration: none;
    color: inherit;
    font-size: 14px;
    transition: background-color 150ms ease, transform 100ms ease-out;
}
.fav-tabs a:hover {
    background-color: rgba(0, 0, 0, 0.04);
}
.fav-tabs a:active {
    transform: scale(0.97);
    transition-duration: 50ms;
}
.fav-tabs a.fav-tab-active {
    background-color: var(--card-bg);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); /* 選択中セグメントは浮かせて示す */
}

/* 動きを減らす設定の環境では縮小フィードバックを止め、色変化のみ残す */
@media (prefers-reduced-motion: reduce) {
    .loc-fav-star, .fav-tabs a {
        transition: background-color 150ms ease;
    }
    .loc-fav-star:active, .fav-tabs a:active {
        transform: none;
    }
}

/* ===== ロケーション一覧(ブロック/エリア/プレイス/インスタンス/ルーム一覧のtable.loc-list) ===== */
/* 行間を空けて各行を白カードにする(.talk-item / .fav-tab-activeと同じ影の語彙) */
.loc-list {
    border-collapse: separate;
    border-spacing: 0 6px;
}
.loc-list td {
    background-color: var(--card-bg);
    vertical-align: middle;
    /* 文字だけのセル(ルーム内インスタンス一覧等)が左右に詰まりすぎないよう最低限の余白 */
    padding-left: 2px;
    padding-right: 2px;
}
/* 先頭/末尾セルだけ角丸にしてカードの左右端を作る */
.loc-list td:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.loc-list td:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.loc-list tr {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: background-color 150ms ease;
}
/* 看板など一覧内の画像(必ず1列目の看板セル)は共通サイズ+角丸に。
   以前は各ページのimgにインラインstyleで同じ値をコピペしていた */
.loc-list img {
    width: 80px;
    height: 60px;
    padding: 10px;
    border-radius: 8px;
}
/* 見出し行(.loc-head)は背景・影なしで二次色の小ラベルに(.side-group-titleと同語彙) */
.loc-list tr.loc-head {
    box-shadow: none;
}
.loc-list tr.loc-head td,
.loc-list tr.loc-head th {
    background: none;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
    text-align: left;
}
/* リンク行と分かるようhoverで淡背景(見出し行は除く) */
.loc-list tr:not(.loc-head):hover td {
    background-color: rgba(0, 0, 0, 0.02);
}

/* オーナー用ボタンの横並び(p/talk_place.php。管理する/特別宿泊するは向き先が違うので別フォーム) */
.place-owner-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
}
.place-owner-actions form {
    margin: 0;
}

/* ===== 看板つき一覧の列幅(p/talk_place.php の room-list / p/talk_area.php の place-list) =====
   どちらも 看板/名称/説明/(固有の列)/有効期限 の並び。説明以外に必要な幅を先に確保し、
   余った幅を説明が受け取って折り返す(以前は説明にmin-width:30vwを与えて他列を圧迫していた) */
.room-list,
.place-list {
    width: 100%;
}
/* 看板(画像80px)・料金・有効期限は内容ぴったりまで縮める(width:1%+nowrapで最小内容幅になる)。
   「150,000円」「7月4日 9:05」や見出しの「有効期限」が折り返さない幅が保たれる */
.room-list th:nth-child(1), .room-list td:nth-child(1),
.room-list th:nth-child(4), .room-list td:nth-child(4),
.room-list th:nth-child(5), .room-list td:nth-child(5),
.place-list th:nth-child(1), .place-list td:nth-child(1),
.place-list th:nth-child(5), .place-list td:nth-child(5) {
    width: 1%;
    white-space: nowrap;
}
/* 名称はR18/宿マークが付いても名前が数文字並ぶ下限を確保する(超えた分は折り返す) */
.room-list th:nth-child(2), .room-list td:nth-child(2),
.place-list th:nth-child(2), .place-list td:nth-child(2) {
    min-width: 12em;
}
/* オーナー名は6文字が1行に収まる下限(それより長い名前は折り返す) */
.place-list th:nth-child(4), .place-list td:nth-child(4) {
    min-width: 7em;
}
/* 説明は残り幅をそのまま使う。左右の余白はセル側で持つ(以前はspanのinline paddingだった) */
.room-list td:nth-child(3),
.place-list td:nth-child(3) {
    padding-left: 12px;
    padding-right: 12px;
}

/* ===== 看板つき一覧の列幅(p/talk.php のブロック一覧 block-list / エリア一覧 area-list) =====
   どちらも 看板/名称/説明 の3列で構成が同じなので同じ幅ルールを共有する。
   上の room-list / place-list と考え方は同一(説明以外を先に確保し、残りを説明が受け取る) */
.block-list,
.area-list {
    width: 100%;
}
/* 看板は内容ぴったり(画像80px+padding)まで縮める */
.block-list td:nth-child(1),
.area-list td:nth-child(1) {
    width: 1%;
    white-space: nowrap;
}
/* 名称はマーク類が付かない分 room/place より控えめの下限(超えた分は折り返す) */
.block-list td:nth-child(2),
.area-list td:nth-child(2) {
    min-width: 8em;
}
/* 説明は残り幅をそのまま使う。左右の余白はセル側で持つ(以前はspanのinline paddingだった) */
.block-list td:nth-child(3),
.area-list td:nth-child(3) {
    padding-left: 12px;
    padding-right: 12px;
}

/* ===== メッセージ(DM)一覧の列幅(p/message.php の dm-list。2026-07-30) =====
   アイコン/相手/最新の受信日 の3列。看板一覧と違い説明列が無いので、相手の列が残り幅を受け取る */
.dm-list {
    width: 100%;
}
/* アイコン(60px)と日付は内容ぴったりまで縮める(「7月4日 9:05」が折り返さない幅が保たれる) */
.dm-list td:nth-child(1), .dm-list th:nth-child(1),
.dm-list td:nth-child(3), .dm-list th:nth-child(3) {
    width: 1%;
    white-space: nowrap;
}
/* 相手はEno+名前が並ぶ下限を確保する(超えた分は折り返す) */
.dm-list td:nth-child(2), .dm-list th:nth-child(2) {
    min-width: 12em;
    padding-left: 12px;
    padding-right: 12px;
}
/* アイコンのサイズはicon_placeholderのinline style(60px正方形)が勝つが、
   .loc-list img の padding:10px はインラインstyleに含まれず勝てないのでここで詰める */
.dm-list img {
    padding: 6px;
}

/* 動きを減らす設定の環境では、今回追加した縮小フィードバックも止める */
@media (prefers-reduced-motion: reduce) {
    .talk-actions button, .talk-reply,
    .paging a, .deco-btn {
        transition: background-color 150ms ease;
    }
    .talk-actions button:active, .talk-reply:active,
    .paging a:active, .deco-btn:active {
        transform: none;
    }
    /* アイコンパレットはscaleをやめopacityのみでフェードイン */
    .icon-picker {
        transform: none;
        transition: opacity 150ms ease-out;
        transition: opacity 150ms ease-out, display 150ms allow-discrete;
    }
    .icon-picker.open {
        transform: none;
    }
    /* .Rw(虹色)の流れるアニメーションを止める(色は残す) */
    .Rw {
        animation: none;
    }
}

/* ===== プレイス編集(p/place_edit.php の .place-edit 内に限定。.chat-formと同じ入力語彙) ===== */
/* テーブルはナロー画面で横スクロール(.statuswrapと同じ流儀) */
.place-edit table {
    display: block;
    overflow-x: auto;
    border-collapse: collapse;
}
.place-edit input[type=text],
.place-edit input[type=number] {
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    font-family: inherit;
}
.place-edit select {
    box-sizing: border-box;
    padding: 5px 8px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    font-family: inherit;
}
.place-edit input[type=text]:focus,
.place-edit input[type=number]:focus,
.place-edit select:focus,
.place-edit .room-desc:focus {
    outline: none;
    border-color: #3366cc;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.25);
}
/* ルーム説明欄(スロットごとに1行使い、装飾ボタン+textareaを置く) */
.place-edit .room-desc-row td { padding: 2px 6px 12px; }
.place-edit .room-desc {
    box-sizing: border-box;
    width: 100%;
    max-width: 32em;
    height: 4.5em;
    margin-top: 4px;
    padding: 6px 8px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
}
/* 列ごとの幅は内容に合わせる(設計§3) */
.place-edit input[name^="name"]        { width: 12em; }
.place-edit input[name^="fee"]         { width: 7em; }
.place-edit input[name^="stay_member"] { width: 3.5em; }
.place-edit input[name^="expire"]      { width: 4em; }
.place-edit .place-input-url           { width: 100%; max-width: 32em; }
.place-edit button {
    padding: 7px 16px;
    border: none;
    border-radius: 8px;
    background-color: #3366cc;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 150ms ease, transform 100ms ease-out;
}
.place-edit button:hover { background-color: #2f5dbb; }
.place-edit button:active {
    background-color: #2a55aa;
    transform: scale(0.97);
    transition-duration: 50ms;
}
/* プレイス設定(看板)カード */
.place-section {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 12px 14px;
    margin: 8px 0;
    max-width: 34em;
}
.place-board-preview { margin: 8px 0; }
.place-board-preview img { border-radius: 8px; display: block; }

/* ===== 参加許可(p/instance.php の .permit-section。発言欄と馴染む白カード) ===== */
.permit-section {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 12px 14px;
    margin: 0 0 12px;
    max-width: 34em;
}
.permit-title { margin: 0 0 8px; font-size: 16px; }
.permit-list { list-style: none; margin: 0 0 10px; padding: 0; }
.permit-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.permit-name { flex: 1; }
.permit-host { font-size: 13px; color: #3366cc; font-weight: 600; }
.permit-inline { display: inline; margin: 0; }
.permit-add { display: flex; gap: 8px; align-items: center; }
.permit-eno-input { width: 8em; }
/* 削除ボタン(追加ボタンは.chat-form語彙が効く) */
.permit-inline button {
    padding: 5px 12px;
    border: none;
    border-radius: 8px;
    background-color: #3366cc;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 150ms ease, transform 100ms ease-out;
}
.permit-inline button:hover { background-color: #2f5dbb; }
.permit-inline button:active { transform: scale(0.97); transition-duration: 50ms; }

/* 動きを減らす設定では縮小フィードバックを止め、色変化のみ残す */
@media (prefers-reduced-motion: reduce) {
    .place-edit button:active,
    .permit-inline button:active {
        transform: none;
    }
}

/* ===== 編集フォーム共通(p/icon.php の .icon-edit / p/char_edit.php・p/status.php の .char-edit) ===== */
/* 入力欄・ボタンは.chat-form / .side-loginと同じ語彙。
   .char-editはカード(.profile-section)に併せて付けるだけで中の入力欄・ボタンに効く */
.icon-edit input[type=text],
.icon-edit input[type=number],
.char-edit input[type=text],
.char-edit input[type=number],
.char-edit select,
.char-edit textarea {
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    font-family: inherit;
}
.icon-edit input:focus,
.char-edit input:focus,
.char-edit select:focus,
.char-edit textarea:focus {
    outline: none;
    border-color: #3366cc;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.25);
}
.icon-edit button,
.char-edit button {
    padding: 7px 16px;
    border: none;
    border-radius: 8px;
    background-color: #3366cc;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 150ms ease, transform 100ms ease-out;
}
.icon-edit button:hover,
.char-edit button:hover { background-color: #2f5dbb; }
.icon-edit button:active,
.char-edit button:active {
    background-color: #2a55aa;
    transform: scale(0.97);
    transition-duration: 50ms;
}
/* 押せないボタンは見た目で分かるようにする(EXP不足のレベルアップ・未入力の割り振り)。
   :hover/:activeの反応も止めて「押せそう」に見えないようにする */
.icon-edit button:disabled,
.char-edit button:disabled {
    opacity: 0.4;
    cursor: default;
}
.icon-edit button:disabled:hover,
.char-edit button:disabled:hover { background-color: #3366cc; }
.icon-edit button:disabled:active,
.char-edit button:disabled:active {
    background-color: #3366cc;
    transform: none;
}
/* 能力値の割り振り入力(p/status.php)。列幅は内容に合わせる(.place-edit の流儀) */
.char-edit input[name^="add_"] { width: 4.5em; }
/* ステータス画面の表(.profile-sectionと.char-editを併用するカード内)。
   .profile-section tableのwidth:100%だと1列目が余り幅を吸って「現在」「割り振り」が
   右端まで離れるので、内容幅に寄せて列間はpaddingで一定に空ける */
.profile-section.char-edit table { width: auto; }
.profile-section.char-edit table th,
.profile-section.char-edit table td {
    padding-right: 28px;
    /* スキル表用のnth-child(2)(3) width:1% を打ち消す。1%指定は「内容幅÷1%」の
       仮想幅を生んでテーブルをカード幅まで膨らませるため、内容幅指定に戻す */
    width: auto;
}
.profile-section.char-edit table th:last-child,
.profile-section.char-edit table td:last-child { padding-right: 0; }
/* 項目ラベル(.side-login labelと同語彙の小さな二次色ラベル) */
.form-label {
    display: block;
    margin: 12px 0 3px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}
/* 注意書き・補足(二次色の小文字) */
.form-note {
    font-size: 13px;
    color: var(--text-secondary);
}
/* 汎用の二次色テキスト。各PHPが style="color:#999" 等を直書きしていたものの受け皿。
   「(なし)」「(戦闘中のみ)」のような補足表示に使う。
   ※状態を表す色(#c00 全滅/昏倒、#c60 クリティカル/麻痺、#777 石化)は
     意味を持つ色分けなのでこのクラスに寄せないこと */
.text-sub {
    color: var(--text-secondary);
}
/* 保存結果メッセージ(白カードで浮かせる) */
.form-msg {
    display: inline-block;
    background-color: var(--card-bg);
    border-radius: 10px;
    padding: 8px 14px;
    margin-bottom: 10px;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ===== アイコン設定(p/icon.php) ===== */
/* 操作列: 更新ボタンと注意書きを1行に */
.iconedit-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 10px;
    flex-wrap: wrap;
}
/* アイコン1件=白カード1枚(.talk-itemと同じ影の語彙) */
.iconedit-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: var(--card-bg);
    border-radius: 12px;
    padding: 10px 12px;
    margin: 8px 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
/* サムネイル枠: 画像なし時は薄グレーの箱がそのままプレースホルダーになる */
.iconedit-thumb {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 8px;
    background-color: #f2f2f2;
    overflow: hidden;
}
.iconedit-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.iconedit-fields {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.iconedit-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
/* 行内ラベルは二次色の小文字(入力欄の直前に置き、近接で対応を示す) */
.iconedit-line label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}
.iconedit-no { /* dev環境のみ表示する内部IDチップ */
    font-size: 12px;
    color: var(--text-secondary);
    background-color: rgba(0, 0, 0, 0.06);
    border-radius: 6px;
    padding: 2px 6px;
}
.iconedit-main { /* 用途固定枠の目印(no=0=メイン画像 / no=1=60px / no=2=30px) */
    font-size: 12px;
    color: var(--text-link);
    border: 1px solid var(--text-link);
    border-radius: 6px;
    padding: 1px 6px;
}
.iconedit-comment { width: 11em; }
.iconedit-url { width: 100%; }
/* 並べ替えのつまみ(2026-07-28に表示順の手入力をドラッグ&ドロップへ置き換え)。
   .icon-edit button の青いボタン装飾を打ち消すため、クラス2つで指定する */
.icon-edit .iconedit-handle {
    flex-shrink: 0;
    width: 28px;
    align-self: stretch;
    padding: 0;
    border: none;
    border-radius: 8px;
    background-color: transparent;
    color: var(--text-secondary);
    cursor: grab;
    touch-action: none;/* タッチの縦ドラッグをページスクロールに取られないようにする */
}
/* つまみの絵柄はフォントに頼らずCSSの点で描く(環境差で豆腐にならない) */
.icon-edit .iconedit-handle::before {
    content: "";
    display: block;
    width: 10px;
    height: 16px;
    margin: 0 auto;
    opacity: 0.55;
    background-image: radial-gradient(currentColor 1.5px, transparent 1.6px);
    background-size: 5px 5px;
}
.icon-edit .iconedit-handle:hover {
    background-color: rgba(0, 0, 0, 0.06);
}
.icon-edit .iconedit-handle:active {
    background-color: rgba(0, 0, 0, 0.06);
    cursor: grabbing;
    transform: none;
}
.icon-edit .iconedit-handle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.25);
}
/* 空きスロット(並べ替え対象外)はつまみの幅だけ空けてサムネイルの左端を揃える */
.iconedit-nohandle {
    flex-shrink: 0;
    width: 28px;
}
/* 掴んでいるカード。指・カーソルに追従して浮いて見えるようにする */
.iconedit-dragging {
    position: relative;
    z-index: 2;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    opacity: 0.95;
}

/* ----- URL一括取り込み(p/icon.php の折りたたみ + p/icon_bulk.php の確認画面) ----- */
.iconbulk {
    background-color: var(--card-bg);
    border-radius: 12px;
    padding: 10px 12px;
    margin: 12px 0;
}
.iconbulk summary {
    cursor: pointer;
    font-weight: 600;
}
.iconbulk-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 8px 0;
}
.iconbulk-line > label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}
.iconbulk-radio { /* ラジオは本文と同じ大きさにして押しやすくする */
    font-size: inherit;
    font-weight: normal;
    color: inherit;
}
.iconbulk-urls {
    width: 100%;
    box-sizing: border-box;
    font-family: monospace;
    font-size: 12px;
}
.iconbulk-table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0;
}
.iconbulk-table th,
.iconbulk-table td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 6px 8px;
    text-align: left;
    vertical-align: top;
    font-size: 13px;
}
/* URLは長いので折り返す。表全体を横スクロールさせない */
.iconbulk-table .iconbulk-url {
    word-break: break-all;
}
.iconbulk-old {
    font-size: 12px;
    color: var(--text-secondary);
}
.iconbulk-warnrow { /* 既存URLが消える行 */
    background-color: rgba(220, 120, 0, 0.12);
}
.iconbulk-warn {
    border-left: 3px solid rgba(220, 120, 0, 0.8);
    padding-left: 8px;
    margin: 8px 0;
}
.iconbulk-error {
    color: #b3261e;
    margin: 8px 0;
    padding-left: 1.2em;
}

/* ===== プロフィール編集(p/char_edit.php) ===== */
/* 入力欄は横幅いっぱい(上限550px)。固定pxをやめナローでも収める */
.char-edit input[type=text],
.char-edit textarea {
    width: 100%;
    max-width: 550px;
}
.char-edit textarea {
    resize: vertical;
    line-height: 1.5;
}
/* 装飾プレビュー(自己紹介・プロフィールの下に出る整形結果)は白カードで実表示に寄せる */
.char-edit .deco-preview {
    background-color: var(--card-bg);
    border-radius: 12px;
    padding: 10px 12px;
    margin: 8px 0;
    max-width: 550px;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow-wrap: anywhere;
}
.char-edit .form-actions {
    margin-top: 14px;
}

/* 動きを減らす設定では縮小フィードバックを止め、色変化のみ残す */
@media (prefers-reduced-motion: reduce) {
    .icon-edit button, .char-edit button {
        transition: background-color 150ms ease;
    }
    .icon-edit button:active, .char-edit button:active {
        transform: none;
    }
}

/* ===== プロフィール(p/profile.php) ===== */
/* ワイド: 左=テキスト、右=キャラ画像の2カラム。ナローは縦積み(画像が先頭) */
.profile-wrap {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.profile-main {
    flex: 1;
    min-width: 0;
}
.profile-img {
    width: 50%;
    max-width: 600px;
    flex-shrink: 0;
    text-align: center;
}
.profile-img img {
    max-width: 100%;
    max-height: 800px; /* 上限600x800。小さい画像は原寸(拡大しない) */
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
/* 画像未設定時のプレースホルダー(.talk-icon-none等と同じ薄グレーの箱。縦800:横600の比率) */
.profile-img-none {
    width: 100%;
    aspect-ratio: 3 / 4;
    max-height: 800px;
    background-color: #f2f2f2;
    border-radius: 12px;
}
@media (max-width: 1200px) {
    .profile-wrap { flex-direction: column; }
    .profile-img { width: 100%; order: -1; } /* ナローでは画像を最初に見せる */
}
/* 見出し: Enoは二次色、名前を主役に */
.profile-title {
    margin: 4px 0 2px;
}
.profile-title .profile-eno {
    font-weight: 400;
    color: var(--text-secondary);
    font-size: 70%;
    margin-right: 6px;
}
.profile-nickname { /* 本名と別のニックネームを添える二次色の小文字 */
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
/* セクション=白カード(.talk-itemと同じ影の語彙) */
.profile-section {
    background-color: var(--card-bg);
    border-radius: 12px;
    padding: 12px 14px;
    margin: 10px 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow-wrap: anywhere;
}
.profile-section h3 {
    margin: 0 0 8px;
    font-size: 16px;
}
/* タグチップ: クリックでそのタグ検索(char_list.php?q=)へ。.paging aと同じ押下フィードバック */
.profile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.tag-chip {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 14px;
    background-color: rgba(0, 0, 0, 0.06);
    font-size: 13px;
    text-decoration: none;
    color: inherit;
    transition: background-color 150ms ease, transform 100ms ease-out;
}
.tag-chip:hover {
    background-color: rgba(0, 0, 0, 0.12);
}
.tag-chip:active {
    transform: scale(0.95);
    transition-duration: 50ms;
}
/* クラス内訳(見出しLvの下に普通のテキストで並べる) */
.profile-classes {
    font-size: 14px;
}
/* ステータス欄(HP/SP/PPのゲージ)。枠と棒は戦闘画面と共用(.status-panel/.status-bar)で、
   ここは並べ方だけを持つ。幅が取れれば2列以上に折り返す(PPが最大7段あるため) */
.vital-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 4px 16px;
}
.vital-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}
.vital-label { /* ラベル幅を固定してバーの左端を揃える(PP1〜PP7とHP/SPの混在) */
    width: 2.8em;
    flex-shrink: 0;
}
.vital-num {
    font-variant-numeric: tabular-nums;
}
/* .vital-list内の改行制御(p/status.php)。列の縦位置を揃えるには全段を1つのリストに
   入れる必要があるため、行の切れ目はクラスで明示する */
.vital-full { grid-column: 1 / -1; }  /* 1行を独占(EXPゲージ) */
.vital-break { grid-column: 1; }      /* この項目から新しい行(PP1) */
/* セクション内テーブル(スキル等)。罫線は淡く、見出しは二次色小ラベル */
.profile-section table {
    border-collapse: collapse;
    width: 100%;
}
.profile-section th {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
    text-align: left;
    padding: 2px 8px 4px 0;
}
.profile-section td {
    padding: 4px 8px 4px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 14px;
}
/* スキル表: 属性(2列目)・消費(3列目)は内容幅まで詰め、余った幅を概要(4列目)へ回す */
.profile-section th:nth-child(2), .profile-section td:nth-child(2),
.profile-section th:nth-child(3), .profile-section td:nth-child(3) {
    width: 1%;
    white-space: nowrap;
    padding-right: 6px;
}

@media (prefers-reduced-motion: reduce) {
    .tag-chip { transition: background-color 150ms ease; }
    .tag-chip:active { transform: none; }
}

/* ===== 戦術設定(p/tactics.php)。8枠を縦カードで積み、各枠にシチュ/n/アクション+カットインを集約 ===== */
/* 説明カード(白カードの語彙。secondaryなnoteは二次色) */
.tactics-intro {
    background-color: var(--card-bg);
    border-radius: 12px;
    padding: 12px 16px;
    margin: 10px 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    font-size: 14px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}
.tactics-intro h2 { margin: 0 0 8px; font-size: 18px; }
.tactics-intro p { margin: 4px 0; }
.tactics-note { font-size: 13px; color: var(--text-secondary); }
.tactics-help p { margin: 6px 0; }
.tactics-form { margin: 0; }

/* 隊列カード */
.tactics-card {
    background-color: var(--card-bg);
    border-radius: 12px;
    padding: 12px 14px;
    margin: 10px 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.tactics-card-title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.tactics-row-opts { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.tactics-radio {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.05);
    font-size: 14px;
    cursor: pointer;
    transition: background-color 150ms ease;
}
.tactics-radio:hover { background-color: rgba(0, 0, 0, 0.09); }

/* 枠カード: 左に枠番号バッジ+右に操作群。優先度=上ほど高い(縦積みで自然に表現) */
.tactics-slots { margin: 10px 0; }
.tactics-slot {
    display: flex;
    gap: 12px;
    background-color: var(--card-bg);
    border-radius: 12px;
    padding: 12px 14px;
    margin: 8px 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.tactics-slot-no {
    flex: 0 0 auto;
    align-self: flex-start;
    min-width: 46px;
    padding: 6px 0;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #3366cc;
    background-color: rgba(51, 102, 204, 0.08);
    border-radius: 10px;
    letter-spacing: 0.02em;
}
.tactics-slot-body { flex: 1 1 auto; min-width: 0; }

/* シチュ/n/アクションの3フィールド。狭幅では縦積み(§5 flexibility) */
.tactics-fields {
    display: grid;
    grid-template-columns: 1fr 90px 1fr;
    gap: 8px;
}
.tactics-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tactics-field > span {
    font-size: 12px;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}
.tactics-field-cutin { margin-top: 8px; }

/* 入力・セレクト共通(.chat-form入力と同じ流儀。フォーカスリングで即時応答) */
.tactics-form select,
.tactics-form input[type=number],
.tactics-form input[type=url] {
    box-sizing: border-box;
    width: 100%;
    padding: 6px 8px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    font-family: inherit;
    color: #1d1d1f;
}
.tactics-form select:focus,
.tactics-form input:focus {
    outline: none;
    border-color: #3366cc;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.25);
}

/* カットインのライブプレビュー */
.tactics-cutin-preview { margin-top: 6px; }
.tactics-cutin-preview img {
    max-width: 100%;
    max-height: 120px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* 保存ボタン(.chat-form buttonと同じ押下フィードバック) */
.tactics-save {
    padding: 9px 22px;
    border: none;
    border-radius: 8px;
    background-color: #3366cc;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 150ms ease, transform 100ms ease-out;
}
.tactics-save:hover { background-color: #2f5dbb; }
.tactics-save:active {
    background-color: #2a55aa;
    transform: scale(0.97);
    transition-duration: 50ms;
}

@media (max-width: 720px) {
    .tactics-fields { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .tactics-radio { transition: none; }
    .tactics-save { transition: background-color 150ms ease; }
    .tactics-save:active { transform: none; }
}

/* ===== 探索・戦闘系の共通パーツ(p/explore.php, p/battle.php, p/fuwamemo.php, p/treasurebox.php) =====
   これらの画面は灰色1px罫線の旧語彙をインラインstyleで複製していた。
   他画面と同じ「影で浮かせる白カード」(.talk-item語彙)に統一する */

/* 結果メッセージ枠(探索結果・エラー・宝箱の結果表示) */
.msg-box {
    background-color: var(--card-bg);
    border-radius: 12px;
    padding: 10px 12px;
    margin: 0 0 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow-wrap: anywhere;
}
/* 移動ボタン直後の結果枠。空でも高さを保ち、有無でボタン位置がズレないようにする */
.msg-box-fixed {
    margin: 8px 0;
    min-height: 3em;
}

/* ふわふわメモ。通常のカードと区別が要るのでアクセント色の淡いティント
   (.tactics-slot-no と同じ語彙。旧: 1px dashed #99c + #f4f4ff) */
.memo-box {
    background-color: rgba(51, 102, 204, 0.08);
    border-radius: 12px;
    padding: 10px 12px;
    margin: 8px 0;
    overflow-wrap: anywhere;
}

/* パーティ状況パネル。カードの中に沈める面なので影ではなく淡い陰影で表現(旧: #f4f4f4) */
.status-panel {
    background-color: rgba(0, 0, 0, 0.04);
    border-radius: 10px;
    padding: 8px 10px;
    margin: 6px 0;
}

/* HP/SPバー(parts/deco.php status_bar)。溝は背景に依存しない不透明度指定にする(旧: #ccc) */
.status-bar {
    display: inline-block;
    width: 100px;
    height: 10px;
    background-color: rgba(0, 0, 0, 0.12);
    border-radius: 5px;
    overflow: hidden;
    vertical-align: middle;
}
.status-bar > span {
    display: block;
    height: 10px;
}

/* アイコン(parts/deco.php icon_placeholder)。サイズは呼び出し側が指定するのでここでは形だけ整える。
   未設定時の箱は .talk-icon-none と同じ #f2f2f2 に揃える(旧: #ddd) */
.icon-img {
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 8px;
}
.icon-ph {
    background-color: #f2f2f2;
    flex-shrink: 0;
    border-radius: 8px;
}

/* ===== スキル習得条件エディタ(gm/skill_admin.php) ===== */
/* 習得条件グループ(skill_learn_complex)1つ=白カード1枚(.iconedit-rowと同じ影の語彙)。
   カードの区切りがそのまま「ORの単位」を表す */
.learn-group {
    background-color: var(--card-bg);
    border-radius: 12px;
    padding: 10px 12px;
    margin: 6px 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
/* グループ見出し(「グループ1 ── 以下をすべて満たす」) */
.learn-group-head {
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-secondary);
}
/* グループ内の1行(条件1件・条件追加フォーム・グループ削除ボタン) */
.learn-cond {
    margin: 4px 0;
}
/* グループ間のOR表示。カードとカードの間に置く */
.learn-or {
    margin: 4px 0 4px 12px;
    font-weight: 600;
    color: var(--text-secondary);
}