/* 多摩市ビズ フロント共通スタイル（フェーズ1） */
.portal-wrap { max-width: 1040px; margin: 2rem auto 4rem; padding: 0 1rem; }
.portal-wrap--narrow { max-width: 720px; }
.portal-wrap h1 { font-size: 1.6rem; margin: 0 0 .4em; }
.portal-lead { color: #4b5563; margin: 0 0 2em; line-height: 1.7; }

/* タブ */
.portal-roletabs { display: flex; gap: .4rem; border-bottom: 2px solid #d1d5db; margin-bottom: 1.2rem; flex-wrap: wrap; }
.portal-roletabs a { padding: .6em 1.1em; text-decoration: none; color: #4b5563; border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0; }
.portal-roletabs a[aria-current="page"] { background: #fff; border-color: #d1d5db; color: #111827; font-weight: 600; margin-bottom: -2px; padding-bottom: calc(.6em + 2px); }
.portal-tabs { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.portal-tabs a { padding: .4em .9em; font-size: .9rem; text-decoration: none; color: #374151; background: #f3f4f6; border-radius: 999px; }
.portal-tabs a[aria-current="page"] { background: #1f7a4d; color: #fff; }

/* フォーム */
.portal-field { margin-bottom: 1.4rem; }
.portal-label { display: block; font-weight: 600; margin-bottom: .3em; }
.portal-required { color: #b42318; font-size: .78rem; font-weight: 600; }
.portal-hint { color: #6b7280; font-size: .85rem; margin: .2em 0 .5em; line-height: 1.6; }
.portal-field input[type="text"], .portal-field input[type="email"], .portal-field input[type="tel"],
.portal-field input[type="url"], .portal-field input[type="number"], .portal-field select, .portal-field textarea {
    width: 100%; max-width: 34rem; padding: .55em .7em; border: 1px solid #d1d5db; border-radius: 6px; font-size: 1rem; box-sizing: border-box;
}
.portal-checkgroup { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.portal-check { display: inline-flex; align-items: center; gap: .35em; font-size: .95rem; }
.portal-repeater-row { border: 1px solid #e5e7eb; border-radius: 6px; padding: .8em 1em; margin-bottom: .6em; }
.portal-repeater-row legend { font-size: .8rem; color: #6b7280; padding: 0 .4em; }
.portal-sublabel { display: block; font-size: .85rem; color: #374151; margin: .5em 0 .2em; }
.portal-button { display: inline-block; padding: .7em 1.6em; border: 0; border-radius: 6px; background: #1f7a4d; color: #fff; font-size: 1rem; font-weight: 600; cursor: pointer; text-decoration: none; }
.portal-button--sub { background: #fff; color: #1f7a4d; border: 1px solid #1f7a4d; }
.portal-button[disabled] { background: #d1d5db; color: #6b7280; cursor: not-allowed; }
.portal-actions { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; margin-top: 2rem; }

/* 状態表示 */
.portal-status { display: inline-block; padding: .2em .8em; border-radius: 999px; font-size: .82rem; font-weight: 600; }
.portal-status--publish { background: #d9f2e0; color: #0a6b2d; }
.portal-status--pending { background: #fff4d5; color: #7a5900; }
.portal-status--draft   { background: #e7eefc; color: #1d3f8a; }
.portal-status--stop    { background: #fce4e4; color: #8a1f11; }
.portal-panel { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1.2em 1.4em; margin-bottom: 1.6rem; }
.portal-panel h2 { font-size: 1.05rem; margin: 0 0 .6em; }
.portal-checklist { margin: .4em 0 0; padding-left: 1.3em; }
.portal-checklist li { margin: .2em 0; }

/* 一覧 */
.portal-filter { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1em 1.2em; margin-bottom: 1.6rem; }
.portal-filter label { display: block; font-size: .8rem; color: #4b5563; margin-bottom: .2em; }
.portal-filter select, .portal-filter input { padding: .45em .6em; border: 1px solid #d1d5db; border-radius: 6px; font-size: .95rem; }
.portal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.2rem; }
.portal-card { border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; background: #fff; transition: box-shadow .15s; }
.portal-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.portal-card-link { display: block; text-decoration: none; color: inherit; }
/* 高さは必ず入れ物側で決める。
   テーマのlazyload（lazysizes）が data-aspectratio からインラインの height を書き込むため、
   img 側の指定だけだと元画像の縦横比のまま伸びてしまう。!important でそれを打ち消している */
/* 公開ページの埋め込みプレビュー */
.portal-preview-frame { margin-top: 1rem; border: 1px solid #d8dee4; border-radius: 8px; overflow: hidden; background: #fff; }
.portal-preview-frame iframe { display: block; width: 100%; height: 70vh; min-height: 420px; border: 0; }
.portal-preview p a { margin-left: .8em; font-size: .88rem; }
@media (max-width: 700px) { .portal-preview-frame iframe { height: 60vh; } }

/* 入力欄の直前に置く説明。ラベルと入力欄の間に挟むので上下を詰める */
.portal-hint--field { margin: .1em 0 .45em; font-size: .82rem; color: #5b6570; line-height: 1.65; }
.portal-hint--field strong { color: #1f7a4d; font-weight: 700; }
/* サムネイルは正方形。画像は長辺を枠に合わせて縮小し、余った側は余白にする。
   切り抜かないので、縦長の商品写真や横長の店舗外観でも中身が欠けない。
   object-fit: scale-down は「contain だが元のサイズより大きくはしない」。
   小さい画像を引き伸ばしてぼやけさせないためにこれを使う。
   width/height の !important は、テーマのlazyloadが書き込むインラインの height を打ち消すため */
.portal-card-thumb { aspect-ratio: 1 / 1; max-height: 260px; overflow: hidden; background: #f3f4f6; display: grid; }
.portal-card-thumb img { display: block; width: 100% !important; height: 100% !important; max-width: none; object-fit: scale-down; }
.portal-card-thumb--empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5em;
  background: linear-gradient(135deg, #eef2f5, #dfe6ea); color: #9ca8b2; }
.portal-card-thumb--empty svg { width: 36px; height: 36px; }
.portal-card-thumb--empty span { font-size: .68rem; font-weight: 700; letter-spacing: .16em; }
.portal-card-body { padding: .9em 1em 1.1em; }
.portal-card-cat { font-size: .75rem; color: #1f7a4d; font-weight: 600; }
.portal-card-name { font-size: 1.05rem; margin: .25em 0 .35em; }
.portal-card-catch { font-size: .88rem; color: #374151; margin: 0 0 .5em; line-height: 1.6; }
.portal-card-area { font-size: .8rem; color: #6b7280; margin: 0; }
.portal-badge { display: inline-block; margin-top: .6em; padding: .15em .7em; background: #fff4d5; color: #7a5900; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.portal-pagination { display: flex; gap: .4rem; justify-content: center; margin-top: 2.4rem; flex-wrap: wrap; }
.portal-pagination a, .portal-pagination span { padding: .4em .8em; border: 1px solid #d1d5db; border-radius: 6px; text-decoration: none; color: #374151; }
.portal-pagination .current { background: #1f7a4d; color: #fff; border-color: #1f7a4d; }
.portal-empty { padding: 3em 1em; text-align: center; color: #6b7280; }

/* 詳細 */
.portal-detail-head { margin-bottom: 1.6rem; }
.portal-detail-cat { font-size: .85rem; color: #1f7a4d; font-weight: 600; }
.portal-detail-catch { font-size: 1.1rem; color: #374151; margin: .3em 0 0; }
.portal-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .6rem; margin-bottom: 2rem; }
.portal-gallery img { display: block; width: 100% !important; height: auto !important; aspect-ratio: 1 / 1;
  max-width: none; object-fit: scale-down; border-radius: 8px; background: #f3f4f6; }
.portal-section { margin-bottom: 2.2rem; }
.portal-section h2 { font-size: 1.15rem; border-left: 4px solid #1f7a4d; padding-left: .6em; margin-bottom: .7em; }
.portal-section p { line-height: 1.85; }
.portal-reason { background: #f2f9f4; border: 1px solid #cfe8d8; border-radius: 8px; padding: 1.2em 1.4em; }
.portal-meta dl { display: grid; grid-template-columns: minmax(9em, 14em) 1fr; gap: .5em 1.2em; margin: 0; }
.portal-meta dt { font-weight: 600; color: #4b5563; font-size: .92rem; }
.portal-meta dd { margin: 0; line-height: 1.75; }
.portal-meta-list { margin: 0; padding-left: 1.2em; }
.portal-infotable { width: 100%; border-collapse: collapse; }
.portal-infotable th, .portal-infotable td { text-align: left; padding: .7em .9em; border-bottom: 1px solid #e5e7eb; font-size: .95rem; }
.portal-infotable th { width: 9em; color: #4b5563; font-weight: 600; white-space: nowrap; }
.portal-sns { display: flex; gap: .6rem; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.portal-sns a { font-size: .88rem; }

@media (max-width: 600px) {
    .portal-meta dl { grid-template-columns: 1fr; gap: .1em; }
    .portal-meta dt { margin-top: .6em; }
    .portal-infotable th { width: auto; }
}

/* 応援ボタン */
.portal-favorite { background: #f2f9f4; border: 1px solid #cfe8d8; border-radius: 8px; padding: 1.1em 1.3em; margin-bottom: 1.8rem; }
.portal-favorite .portal-hint { margin-bottom: 0; }
.portal-favorite-note { font-size: .88rem; color: #1a4d2a; margin: .5em 0 0; min-height: 1.2em; }
.portal-button[aria-pressed="true"]::before { content: "\2713 "; }

/* お気に入り一覧・配信履歴 */
.portal-list { list-style: none; padding: 0; margin: 0; }
.portal-list > li { display: flex; gap: 1rem; align-items: flex-start; padding: 1em 0; border-bottom: 1px solid #e5e7eb; flex-wrap: wrap; }
.portal-list-thumb { flex: 0 0 auto; width: 88px; height: 88px; border-radius: 6px; overflow: hidden; background: #f3f4f6; display: grid; }
.portal-list-thumb img { width: 100% !important; height: 100% !important; max-width: none; object-fit: scale-down; display: block; }
.portal-list-thumb--empty { display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #eef2f5, #dfe6ea); color: #9ca8b2; }
.portal-list-thumb--empty svg { width: 22px; height: 22px; }
.portal-list-body { flex: 1 1 16rem; min-width: 0; }
.portal-list-body h3 { font-size: 1rem; margin: 0 0 .2em; }
.portal-list-body p { margin: 0; font-size: .88rem; color: #4b5563; }
.portal-list-actions { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.portal-list-actions button { padding: .35em .9em; font-size: .82rem; border-radius: 6px; border: 1px solid #d1d5db; background: #fff; color: #374151; cursor: pointer; }
.portal-list-actions button.is-danger { color: #8a1f11; border-color: #f0b4ae; }
.portal-quota { display: flex; gap: .6rem; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.portal-quota li { padding: .3em .9em; border-radius: 999px; font-size: .84rem; }
.portal-quota .is-open { background: #d9f2e0; color: #0a6b2d; }
.portal-quota .is-used { background: #eef2f5; color: #6b7280; }
.portal-trend { display: flex; align-items: flex-end; gap: 4px; height: 120px; margin: 1em 0 .4em; }
.portal-trend-bar { flex: 1; background: #1f7a4d; border-radius: 3px 3px 0 0; min-height: 2px; position: relative; }
.portal-trend-labels { display: flex; gap: 4px; font-size: .68rem; color: #6b7280; }
.portal-trend-labels span { flex: 1; text-align: center; }

/* ファイルアップロード */
.portal-uploader { border: 1px solid #e5e7eb; border-radius: 8px; padding: 1em 1.1em; background: #fbfcfd; }
.portal-uploader-grid { list-style: none; display: flex; flex-wrap: wrap; gap: .7rem; margin: 0 0 .8em; padding: 0; }
.portal-uploader-grid:empty { display: none; }
.portal-uploader-item { position: relative; width: 116px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; overflow: hidden; }
.portal-uploader-item img { display: block; width: 100%; height: 84px; object-fit: cover; }
.portal-uploader-file { display: flex; align-items: center; justify-content: center; height: 84px; background: #eef2f5; color: #4b5563; font-weight: 600; font-size: .85rem; }
.portal-uploader-name { display: block; padding: .35em .5em; font-size: .7rem; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portal-uploader-remove { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(17,24,39,.72); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; }
.portal-uploader-remove:hover { background: #b42318; }
.portal-uploader-actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: 0 0 .4em; }
.portal-uploader-actions label { cursor: pointer; }
.portal-uploader-count { font-size: .82rem; color: #6b7280; }
.portal-uploader-message { font-size: .85rem; color: #7a271a; margin: .3em 0 0; min-height: 1.2em; }
.portal-uploader .portal-hint { margin-bottom: 0; }

/* トップページ用 */
.portal-herosearch { display: flex; gap: .5rem; flex-wrap: wrap; align-items: stretch; max-width: 720px; margin: 0 auto; }
.portal-herosearch input[type="search"] { flex: 2 1 14rem; min-width: 0; }
.portal-herosearch select { flex: 1 1 9rem; }
.portal-herosearch input, .portal-herosearch select { padding: .7em .8em; border: 1px solid #d1d5db; border-radius: 6px; font-size: 1rem; background: #fff; }
.portal-herosearch .portal-button { flex: 0 0 auto; padding-left: 2em; padding-right: 2em; }

.portal-grid--wide { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.portal-more { text-align: center; margin-top: 1.6rem; }

.portal-reasons { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.4rem; }
.portal-reason-card { margin: 0; background: #f2f9f4; border: 1px solid #cfe8d8; border-radius: 10px; padding: 1.4em 1.5em;
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; }
.portal-reason-thumb { height: 150px; border-radius: 8px; overflow: hidden; background: #fff; display: grid; margin-bottom: 1em; }
.portal-reason-thumb img { display: block; width: 100% !important; height: 100% !important; max-width: none; object-fit: scale-down; }
/* テーマは blockquote に灰色の背景と絶対配置の擬似要素を付ける。
   カードの中では背景が二重になり、鉤括弧も本文とずれた位置に出るため打ち消す。
   鉤括弧はCSSではなくPHP側で本文に入れている（テーマの :before と衝突しないため） */
.portal-reason-card blockquote { margin: 0 0 1em; padding: 0; border: 0; background: none; position: static;
  font-size: 1rem; line-height: 1.9; color: #1f3d2b; }
.portal-reason-card blockquote::before,
.portal-reason-card blockquote::after { content: none; }
.portal-reason-card figcaption { font-size: .9rem; }
.portal-reason-card figcaption a { font-weight: 600; }
.portal-reason-card figcaption span { display: block; color: #4b5563; font-size: .8rem; margin-top: .2em; }

.portal-list--compact > li { padding: .8em 0; }
.portal-list--compact h3 { font-size: .98rem; }

.portal-facets { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .6rem; padding: 0; margin: 0; }
.portal-facets a { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .85em 1.1em; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; text-decoration: none; color: #374151; transition: border-color .15s, box-shadow .15s; }
.portal-facets a:hover { border-color: #1f7a4d; box-shadow: 0 2px 10px rgba(31,122,77,.12); }
.portal-facet-name { font-weight: 600; font-size: .95rem; }
.portal-facet-count { font-size: .8rem; color: #6b7280; background: #f3f4f6; border-radius: 999px; padding: .1em .7em; }
.portal-facets--area a { background: #f9fbfa; }

.portal-stats { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; padding: 0; margin: 0; text-align: center; }
.portal-stats li { padding: 1.2em .8em; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; }
.portal-stat-value { display: block; font-size: 1.7rem; font-weight: 700; color: #1f7a4d; line-height: 1.2; }
.portal-stat-label { display: block; font-size: .82rem; color: #6b7280; margin-top: .3em; }

@media (max-width: 600px) {
    .portal-herosearch { flex-direction: column; }
    .portal-herosearch .portal-button { width: 100%; }
}

/* 公開範囲とつながり */
.portal-visibility { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .5em 0 0; font-size: .82rem; color: #4b5563; }
.portal-visibility select { padding: .3em .5em; border: 1px solid #d1d5db; border-radius: 5px; font-size: .82rem; }
.portal-visibility-hint { color: #6b7280; }
.portal-connectinfo { display: grid; grid-template-columns: minmax(10em, 15em) 1fr; gap: .6em 1.2rem; margin: 0; }
.portal-connectinfo dt { font-weight: 600; color: #1f7a4d; font-size: .92rem; }
.portal-connectinfo dd { margin: 0; line-height: 1.8; }
.portal-hiddennote { background: #f7f8f9; border-left: 3px solid #cbd5dd; padding: .7em 1em; }
.portal-connect { background: #f9fbfa; border: 1px solid #e5e7eb; border-radius: 10px; padding: 1.4em 1.5em; }
.portal-connect h2 { margin-top: 0; }
.portal-connect-state { margin: 0 0 .6em; font-weight: 600; color: #1f7a4d; }
.portal-connect-message { background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; padding: .7em .9em; margin-top: .6em !important; font-size: .9rem; line-height: 1.7; }
@media (max-width: 600px) { .portal-connectinfo { grid-template-columns: 1fr; gap: .1em; } .portal-connectinfo dt { margin-top: .6em; } }

/* AIプロンプト */
.portal-prompt { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1em 1.1em; margin-top: 1em; }
.portal-prompt h3 { font-size: .98rem; margin: 0 0 .4em; }
.portal-prompt textarea { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; line-height: 1.6; padding: .7em .8em; border: 1px solid #d1d5db; border-radius: 6px; background: #fbfcfd; box-sizing: border-box; }
.portal-prompt-actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: .6em 0 0; }
.portal-prompt-message { font-size: .85rem; color: #1a4d2a; }