/* ========= common.css ========= */
*{box-sizing:border-box}
[hidden]{display:none!important}

body{
  font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  color:#222;
  margin:20px;
  background:#f5f5f7;
}

/* コンテナ */
.ts{
  max-width:780px;
  margin:0 auto;
  padding:14px 16px;
  border:1px solid var(--ts-bdr);
  border-radius:var(--ts-radius);
  background:var(--ts-bg);
  color:var(--ts-text);
}

/* 見出し/要約 */
.ts-headline{
  font-weight:700;
  font-size:16px;
  margin-bottom:8px;
  position:relative;
  padding-left:10px;
}
.ts-headline::before{
  content:"";
  position:absolute;
  left:0;
  top:.35em;
  bottom:.35em;
  width:4px;
  border-radius:999px;
  background:var(--ts-primary);
}
.ts-summary{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom::8px;
}
.ts-stars{font-size:16px;letter-spacing:1px}
.ts-divider{height:1px;background:#eee;margin:10px 0}

/* 展開パネル（listでもsliderでも同じパネルを使うなら共通でOK） */
.ts-cat-panel{
  margin-top:6px;
  padding:10px;
  border-radius:10px;
  background:var(--ts-panel-bg);
  border:1px solid var(--ts-bdr);
}
.ts-block-head{font-weight:700;margin-bottom:6px}
.ts-rate-box{
  margin:6px 0;
  padding:8px 10px;
  border-radius:var(--ts-radius);
  background:var(--ts-rate-bg);
  border:1px solid var(--ts-rate-bdr);
}
.ts-field{display:block;margin:8px 0}
.ts-field input[type="text"],
.ts-field input[type="password"],
.ts-field textarea,
.ts-field select{
  width:92%;
  padding:8px;
  border:1px solid #ddd;
  border-radius:8px;
}

/* アイコン（画像/マスク両対応） */
.ico{
  display:inline-block;
  vertical-align:middle;
  width:18px;
  height:18px;
  background:no-repeat center/contain;
}
.ico.small{width:14px;height:14px}
.ico.badge{width:16px;height:16px}
.ico.mask{
  background-image:none!important;
  background-color:var(--ico-color,currentColor);
  -webkit-mask:var(--ico) center/contain no-repeat;
  mask:var(--ico) center/contain no-repeat;
}
/* empty の薄さを調整（.28が薄すぎてグレーに見えやすい） */
.ico.small.empty{opacity:.55}

/* スケールUI（ドラッグ対応） */
.ts-scale{
  display:flex;
  align-items:center;
  gap:10px;
  max-width:100%;
  width:93%;
  user-select:none;
  touch-action:pan-x;
  --cell-size:clamp(26px,6.5vw,38px);
}
.ts-scale .cells{
  display:flex;
  gap:6px;
  flex:1 1 0%;
  justify-content:space-between;
  align-items:center;
  min-width:0;
}
.ts-scale .cell{
  flex:0 0 auto;
  width:var(--cell-size);
  height:var(--cell-size);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  border-radius:50%;
  opacity:.35;
  transition:opacity .07s,transform .05s;
  pointer-events:auto;
  -webkit-user-select:none;
  user-select:none;
}
.ts-scale .cell.active{opacity:1;transform:scale(1.06)}
.ts-scale .cell.disabled{opacity:.15;pointer-events:none}
.ts-scale .ico{
  width:34px;
  height:34px;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}
@media (max-width:480px){
  .ts-scale .ico{width:40px;height:40px}
}

/* スケール表示モード別 */
.ts-scale[data-mode="both"]{display:flex;align-items:center;gap:10px}
.ts-scale[data-mode="both"] .cells-minus,
.ts-scale[data-mode="both"] .cells-plus{flex:1 1 0%}
.ts-scale[data-mode="both"] .bar{flex:0 0 auto;opacity:.6}
.ts-scale[data-mode="plus"]{--cell-size:clamp(36px,9vw,56px)}
.ts-scale[data-mode="plus"] .cells-plus{flex:1 1 0%}
.ts-scale[data-mode="plus"] .bar{display:none}
.ts-scale[data-mode="minus"] .cells-minus{flex:1 1 0%}
.ts-scale[data-mode="minus"] .bar{display:none}
.ts-legend{font-size:12px;color:#666;margin-top:6px}
@media (max-width:420px){
  .ts-scale{gap:8px}
  .ts-scale .cells{gap:4px}
}

/* 表示専用メーター（ヘッダ/カテゴリ右） */
.ts-head-meters{margin:4px 0 10px;display:grid;gap:4px}
.ts-meter-row{display:flex;align-items:center;gap:8px}
.ts-meter-label{width:20px;text-align:center;opacity:.8}
.ts-meter{display:flex;gap:4px;align-items:center}
.ts-meta{font-size:12px;color:var(--ts-text);}
.ts-meter-num{font-size:12px;color:var(--ts-text);}
.ts-meterline{display:flex;gap:8px;align-items:center;margin-top:6px}
.ts-meter .ico{width:22px;height:22px}
.ts-meter .ico.small{width:18px;height:18px}




/* img版アイコン対応 */
.ico.img{
  background:none !important;
  width:18px;
  height:18px;
  display:inline-block;
  vertical-align:middle;
  object-fit:contain;
}
.ico.img.small{width:14px;height:14px;}
.ico.img.large{width:22px;height:22px;}

/* ★ img版 empty も薄さ調整（グレー化しすぎ防止） */
.ico.img.empty{opacity:.55}

.ico.small.empty{opacity:1}
.ico.img.empty{opacity:1}

/* レビュー写真（thumb） */
.ts-photo-wrap{margin-top:6px}
.ts-photo-thumb{
  max-width:25%;
  height:auto;
  border-radius:8px;
  cursor:pointer;
  display:block;
  pointer-events:auto;
  z-index:20;
}
.ts-photo-note{font-size:12px;color:#666}

/* 画像投稿UI（編集側） */
.ts-actions .ts-photo-slot{display:inline-flex;margin-right:8px}
.ts-photo-btn{
  padding:6px 10px;
  font-size:13px;
  border-radius:999px;
  border:1px solid var(--ts-bdr, #ccc);
  background:#f8f8f8;
  cursor:pointer;
}
.ts-photo-btn:hover{background:#f0f0f0}
.ts-photo-preview{margin-top:8px;font-size:12px;color:#666}
.ts-photo-preview-label{margin-bottom:4px}
.ts-photo-preview img{
  max-width:120px;
  max-height:120px;
  display:block;
  border-radius:8px;
  border:1px solid #ddd;
}

/* パスワードモーダル */
.ts-pass-modal-box{
  width:min(520px,92vw);
  background:#fff;
  border-radius:12px;
  padding:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.ts-btn-secondary{
  padding:8px 12px;
  border-radius:8px;
  border:1px solid var(--ts-bdr);
  background:var(--ts-bg);
  cursor:pointer;
}

/* ===== モーダル表示中フラグ（JSで html に付ける） ===== */
html.ts-photo-modal-open,
html.ts-photo-modal-open body{
  overflow:hidden !important;
}

/* ★ fixed が親transformの影響を受ける環境対策（共通でOK） */
html.ts-photo-modal-open #ts-review,
html.ts-photo-modal-open .ts,
html.ts-photo-modal-open .ts-slider-row,
html.ts-photo-modal-open .ts-slider-viewport,
html.ts-photo-modal-open .ts-slider-track{
  transform:none !important;
  filter:none !important;
  perspective:none !important;
}

/* ===== 画像モーダル本体 ===== */
.ts-photo-modal-backdrop{
  position: fixed !important;
  top:0 !important; left:0 !important;
  width:100vw !important;
  height:100vh !important;
  height:100dvh !important;
  background: rgba(0,0,0,.6) !important;
  display:grid !important;
  place-items:center !important;
  padding:24px !important;
  z-index:2147483647 !important;
}
.ts-photo-modal-box{
  max-width:min(92vw, 980px) !important;
  max-height:calc(100dvh - 48px) !important;
}
.ts-photo-modal-img{
  display:block !important;
  max-width:100% !important;
  max-height:calc(100dvh - 96px) !important;
  border-radius:10px !important;
  box-shadow:0 10px 30px rgba(0,0,0,.4) !important;
}
/* 閉じるボタン */
.ts-photo-close{
  position:fixed !important;
  top:12px !important;
  right:12px !important;
  z-index:2147483647 !important;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.35);
  color:#fff;
  font-size:28px;
  line-height:40px;
  cursor:pointer;
}