/* Visit Log だけの部品（サンプル 10/30 版の見た目をそのまま写したもの）。色は tokens.css の変数だけを使う。
   骨組み・一覧・詳細・編集・窓は作品アプリの app.css をそのまま使い、ここには場所と訪問の部品だけを置く。 */
.g-stay { --g: var(--g-stay); --gs: var(--g-stay-soft); }
.g-eat { --g: var(--g-eat); --gs: var(--g-eat-soft); }
.g-play { --g: var(--g-play); --gs: var(--g-play-soft); }
.g-buy { --g: var(--g-buy); --gs: var(--g-buy-soft); }
.app-menu { --vz-primary: var(--fx); }

/* 印（また行きたい など）。状態の札と同じ大きさ */
.mk { display: inline-flex; align-items: center; gap: 3px; font-size: .7rem; font-weight: 600; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--line); color: var(--ink-2); background: transparent; white-space: nowrap; }
.mk.again { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.mk.never { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
.mk.closed { color: var(--ink-3); border-style: dashed; }
.st-went { color: var(--ok); background: var(--ok-soft); }
.rs-table .s { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.rs-table .kd { color: var(--ink-2); font-size: .78rem; }
.c-n { font-family: rs-num, var(--vz-body-font-family); font-variant-numeric: tabular-nums; }
.tile .tl { font-size: .74rem; color: var(--ink-2); margin-top: 1px; }

/* 詳細の上のエリア（10/30 矢吹さんの指定：すき間を減らして情報を密に）。
   表紙は正方形 140px、右に 種類・地域・ブランド／名前と⭐／読み／タグ、その下に 状態と印、4つの数字を1本の帯に */
.hero.vlh { grid-template-columns: 140px minmax(0, 1fr); grid-template-rows: auto auto; gap: 4px 20px; padding: .8rem 1.2rem .7rem; }
.vlh .hcov { grid-row: 1 / span 2; align-self: start; }
.vl-meta { display: flex; gap: 4px 10px; align-items: center; flex-wrap: wrap; font-size: .78rem; color: var(--ink-2); }
.vl-meta .plink { font-size: .78rem; }
.vl-name { display: flex; align-items: center; gap: 4px 16px; flex-wrap: wrap; margin-top: 2px; }
.vl-name h2 { margin: 0; }
.vlh .stars { margin-top: 0; }
.vlh .kana { margin-top: 0; }
.vlh .tags { margin-top: 4px; }
.vlh .hx { display: flex; flex-direction: column; gap: 8px; align-self: end; }
.vlh .stseg { margin-top: 0; }
.hero .kpis.vlk { margin-top: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line-strong); border-radius: 4px; }
.vlk .kpi { border: 0; border-right: 1px solid var(--line-strong); border-radius: 0; padding: .3rem .65rem; }
.vlk .kpi:last-child { border-right: 0; }
.vlk .kpi span { font-size: .66rem; }
.vlk .kpi b { font-size: .95rem; line-height: 1.3; }
@media (min-width: 768px) { .det-top { padding: .3rem .6rem; } .vlh h2 { font-size: 1.35rem; } }
.nextbar { margin: 0 1.2rem .7rem; padding: .4rem .7rem; }
@media (max-width: 767.98px) {
  .hero.vlh { grid-template-columns: 96px minmax(0, 1fr); padding: .8rem 1rem .4rem; }
  .vlh .hcov { grid-row: auto; }
  .hero .kpis.vlk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vlk .kpi:nth-child(2n) { border-right: 0; }
  .vlk .kpi:nth-child(-n+2) { border-bottom: 1px solid var(--line-strong); }
  .nextbar { margin: 0 1rem .7rem; }
}

/* 印の切り替え（詳細）。状態の切り替えと同じ形 */
.mkseg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.mkseg button { border: 0; background: transparent; color: var(--ink-2); font-size: .8rem; padding: 5px 10px; display: inline-flex; gap: 4px; align-items: center; }
.mkseg button + button { border-left: 1px solid var(--line); }
.mkseg button[aria-pressed="true"].again { background: var(--ok-soft); color: var(--ok); font-weight: 600; }
.mkseg button[aria-pressed="true"].never { background: var(--bad-soft); color: var(--bad); font-weight: 600; }
.mkseg button[aria-pressed="true"].closed { background: var(--sunk); color: var(--ink); font-weight: 600; }
.hx .segs { display: flex; gap: 8px; flex-wrap: wrap; }

/* 観点 ◎○△× */
.asp { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.asp div { border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; display: flex; justify-content: space-between; align-items: center; }
.asp b { font-size: 1.15rem; color: var(--vz-heading-color); }
.asp .no { color: var(--ink-3); }

/* 訪問の表（案A） */
.vtbl { font-size: .85rem; }
.vtbl td, .vtbl th { white-space: nowrap; }
.vtbl td.memo { white-space: normal; min-width: 180px; color: var(--ink-2); }
.vtbl .yen { display: block; font-size: .72rem; color: var(--ink-2); }
.vadd { margin-top: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* 訪問の流れ（案B） */
.tl-list { display: flex; flex-direction: column; gap: 10px; }
.tl-it { display: grid; grid-template-columns: 74px 1fr; border: 1px solid var(--line); border-radius: 8px; background: var(--vz-secondary-bg); overflow: hidden; }
.tl-d { background: var(--sunk); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 4px; text-align: center; }
.tl-d .dd { font-family: rs-num, var(--vz-body-font-family); font-size: 1.6rem; font-weight: 700; line-height: 1; color: var(--vz-heading-color); }
.tl-d .ym { font-size: .72rem; color: var(--ink-2); margin-top: 4px; }
.tl-d .wd { font-size: .72rem; color: var(--ink-2); }
.tl-b { padding: 10px 12px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tl-h { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tl-h .grow { flex: 1; }
.chip { display: inline-flex; align-items: center; gap: 3px; font-size: .74rem; padding: 1px 7px; border-radius: 4px; background: var(--sunk); color: var(--ink); border: 1px solid var(--line); white-space: nowrap; }
.tl-m { display: flex; gap: 14px; flex-wrap: wrap; font-size: .82rem; color: var(--ink-2); }
.tl-m b { color: var(--ink); font-weight: 600; }
.tl-n { font-size: .85rem; margin: 0; }
.tl-ev { font-size: .82rem; font-weight: 600; color: var(--vz-heading-color); }
.strip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.strip .pthumb { flex: none; width: 92px; }
.pthumb { display: block; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); background: var(--gs); position: relative; aspect-ratio: 4 / 3; }
.pthumb::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--g) 10%, transparent) 10px 20px); }
.pthumb i { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); color: var(--g); font-size: 18px; opacity: .8; }
.pthumb span { position: absolute; left: 0; right: 0; bottom: 0; font-size: .66rem; padding: 2px 5px; background: color-mix(in srgb, var(--vz-secondary-bg) 88%, transparent); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-grid .pthumb { aspect-ratio: 4 / 3; }
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.vgrid .pthumb span { font-size: .74rem; padding: 3px 6px; }


/* カレンダー */
.calh { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.calh b { font-size: 1.05rem; min-width: 110px; text-align: center; font-family: rs-num, var(--vz-body-font-family); }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.cal > div { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 86px; padding: 4px; display: flex; flex-direction: column; gap: 3px; min-width: 0; background: var(--vz-secondary-bg); }
.cal .wh { min-height: 0; text-align: center; font-size: .72rem; color: var(--ink-2); background: var(--head-bg); font-weight: 600; }
.cal .out { background: var(--sunk); }
.cal .dn { font-size: .72rem; color: var(--ink-2); font-family: rs-num, var(--vz-body-font-family); }
.cal .ev { display: block; text-align: left; border: 0; border-left: 3px solid var(--g); background: var(--gs); color: var(--ink); font-size: .68rem; padding: 1px 4px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
@media (max-width: 767.98px) { .cal > div { min-height: 58px; padding: 2px; } .cal .ev { font-size: 0; height: 6px; padding: 0; border-left-width: 0; background: var(--g); } }

/* 訪問の記録（案B の一覧） */
.vlog-m { font-size: .8rem; color: var(--ink-2); font-weight: 600; margin: 16px 0 6px; }
.vlog-m:first-child { margin-top: 0; }
.vrow { display: grid; grid-template-columns: 56px 44px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--vz-secondary-bg); width: 100%; text-align: left; color: var(--ink); margin-bottom: 6px; }
.vrow:hover { background: var(--row-hover); }
.vrow .vd { font-family: rs-num, var(--vz-body-font-family); font-weight: 700; color: var(--vz-heading-color); line-height: 1.1; }
.vrow .vd small { display: block; font-weight: 400; font-size: .7rem; color: var(--ink-2); }
.vrow .cov { width: 44px; height: 44px; }
.vrow .vt { min-width: 0; }
.vrow .vt b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vrow .vt span { font-size: .78rem; color: var(--ink-2); }
.vrow .va { text-align: right; font-size: .82rem; }
@media (max-width: 767.98px) { .vrow { grid-template-columns: 46px 1fr auto; } .vrow .cov { display: none; } }

/* 訪問を記録する窓 */
.vmodal .fl { display: block; margin-bottom: 0; line-height: 1.3; }
.vmodal .rate .rn input, .vmodal .rate .rn .btn { height: 38px; padding-top: 4px; padding-bottom: 4px; }
.vmodal .modal-dialog { max-width: 720px; }
/* 窓の中にスクロールバーを出さない（10/30 矢吹さん）。画面より高いときだけ窓ごと動くが、バーは見せない */
.vmodal { scrollbar-width: none; }
.vmodal::-webkit-scrollbar { display: none; }
/* メモ・感想は画面が高いほど大きく（最低 120px） */
.vmodal #vN { height: max(120px, calc(100vh - 600px)); }
.vmodal .modal-dialog { margin-top: 12px; margin-bottom: 12px; min-height: calc(100% - 24px); }
.vmodal .modal-header { padding-top: 12px; padding-bottom: 12px; }
.vmodal .modal-body { padding-top: 8px; padding-bottom: 8px; }
.vmodal .modal-footer { padding-top: 10px; padding-bottom: 10px; }
.vmodal .fgrid { gap: 8px 14px; }
.vmodal .fw { gap: 2px; }
.vmodal .newpl { padding: 8px 12px; }
.vmodal .newpl-t { margin-bottom: 4px; }
.vmodal .newpl-t small { font-weight: 400; color: var(--ink-2); margin-left: 8px; }
.fw.w4 { grid-column: span 4; }
.fw.w3 { grid-column: span 3; }
@media (max-width: 767.98px) { .fw.w3 { grid-column: span 6; } }
.cur { display: grid; grid-template-columns: 90px 1fr; gap: 6px; }
.cbox { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; border: 1px solid var(--vz-input-border-custom, var(--line)); border-radius: 6px; padding: 4px 6px; min-height: 38px; }
.cbox .chip button { border: 0; background: transparent; padding: 0 0 0 2px; color: var(--ink-2); line-height: 1; }
.cbox input { border: 0; flex: 1; min-width: 80px; background: transparent; color: var(--ink); outline: 0; font-size: 16px; }

/* ブランド */
.brand-call { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--vz-secondary-bg); font-size: .85rem; flex-wrap: wrap; }

/* 段0 の画面の部品（つないだ直後の表） */
.vl-rows { margin: 0 0 18px; padding: 0; list-style: none; font-size: .86rem; }
.vl-rows li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--vz-border-color); }
.vl-rows li span { color: var(--ink-2); }
.vl-rows li b { font-weight: 600; color: var(--vz-heading-color); }

/* 訪問の窓：場所を一緒に作るときの囲み */
.newpl { border: 1px dashed var(--line-strong); border-radius: 8px; padding: 10px 12px; background: var(--sunk); }
.newpl-t { display: block; font-size: .82rem; font-weight: 600; color: var(--vz-heading-color); margin-bottom: 8px; }
.newpl .fgrid { margin-bottom: 6px; }
.vmodal .rate .rn input { width: 92px; }
/* 訪問の行・カレンダーの札は押せる */
.vrow { cursor: pointer; }
.tl-it .det-ic { width: 30px; height: 30px; }
.empty-hero { text-align: center; padding: 2.5rem 1rem; color: var(--ink-2); }
.empty-hero i { font-size: 34px; color: var(--ink-3); display: block; margin-bottom: 8px; }
.empty-hero b { display: block; color: var(--vz-heading-color); margin-bottom: 6px; }
.err .btn-close { float: right; }