/* App stylesheet (reads tokens from theme.css) */

*{ box-sizing:border-box; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, ui-sans-serif, sans-serif; }
body{ margin:0; background:var(--bg); color:var(--ink); }

/* Radii (kept) */
:root{ --radius: 12px; --radius-pill: 14px; }

/* Header */
header{
  position:sticky; top:0; z-index:20; height:56px;
  display:flex; align-items:center; gap:12px; padding:0 20px;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  border-bottom:1px solid var(--border); backdrop-filter:blur(8px);
}
header h1{ margin:0; font-size:18px; }

.app-header{
  position: sticky; top:0; z-index:20;
  height: 56px;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:0 12px;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(8px);
}
.brand{ display:flex; align-items:center; gap:8px; margin:0; font-size:16px; }
.brand .logo{ font-size:18px; }
.brand .brand-text{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand .brand-text-small{display:none;}
.h-actions{ display:flex; align-items:center; gap:8px; }
.icon-btn{
  display:inline-flex; align-items:center; gap:8px;
  height:36px; padding:0 10px;
  background:var(--btn-bg); border:1px solid var(--btn-border); color:var(--btn-ink);
  border-radius:999px; cursor:pointer;
}
.icon-btn .icon{ width:18px; height:18px; fill:currentColor; display:block; }
.icon-btn .btn-label{ display:inline; font-size:12px; }
@media (max-width: 640px){
  .icon-btn{ padding:0 8px; height:36px; }
  .icon-btn .btn-label{ display:none; }
  .brand .brand-text{ max-width: 42vw; }
}
@media (max-width: 380px){
  .app-header{ gap:6px; padding:0 8px; }
  .h-actions{ gap:6px; }
  #previewToggleBtn { width: 40px; padding: 8px; text-indent:-9999px; position: relative; }
  #previewToggleBtn::before{ content: attr(data-icon); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-indent:0; }
}

#text-mode{ display:grid; grid-template-columns:460px 1fr; gap:16px; min-height:calc(100dvh - 56px); padding:16px; }
aside{ border-right:1px solid var(--border); padding-right:16px; }
section{ padding-left:16px; }

.group{ background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:14px; margin-bottom:12px; box-shadow: var(--soft-shadow); }
.group h3{ margin:0 0 10px; font-size:14px; color:var(--muted); }
label{ display:block; font-size:12px; color:var(--muted); margin:6px 0; }

/* 角丸統一 */
.icon-btn, .btn, .h-actions .icon-btn, #previewToggleBtn{ border-radius: var(--radius-pill); }

/* Danger buttons */
.uf-btn.danger,
.btn.danger{
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger-ink);
}

/* Inputs */
input[type="text"], select, input[type="number"]{
  width:100%; background:var(--input-bg); color:var(--input-ink);
  border:1px solid var(--input-border); border-radius:10px; padding:10px 12px; outline:none;
}
input[type="number"].mini{ padding:8px 10px; border-radius:8px; width:100%; }

/* Rows */
.row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.row3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.row4{ display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; }
.row-compact{ display:grid !important; grid-template-columns:1fr 120px 120px; gap:10px; align-items:end; }

/* Buttons */
.btn{
  background:var(--btn-bg); border:1px solid var(--btn-border); color:var(--btn-ink);
  padding:10px 12px; border-radius:10px; cursor:pointer;
}
.btn.primary{ background:var(--btn-primary-bg); border-color:var(--btn-primary-border); color:var(--btn-primary-ink); }
.btn.mini{ padding:6px 8px; font-size:12px; border-radius:8px; }
.btnbar{ display:flex; gap:8px; flex-wrap:wrap; }
hr{ border:0; border-top:1px solid var(--border); margin:10px 0; }

/* Range */
input[type="range"]{
  -webkit-appearance: none; appearance: none; height: 4px; border-radius: 999px; background: var(--border);
}
input[type="range"]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb{
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent);
  border: 2px solid color-mix(in srgb, var(--accent) 25%, #0000);
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
input[type="range"]::-moz-range-progress{ background: var(--accent); height:4px; border-radius:999px; }
input[type="range"]::-moz-range-track{ background: var(--border); height:4px; border-radius:999px; }

/* Preview / JSON */
.sticky{ position:sticky; }
.sticky.preview{ top:calc(56px + 16px); }
.sticky.json{ top:calc(56px + 16px + 60vh + 16px); display: none !important; }

.preview-wrap{
  background:var(--preview-bg); border:1px dashed var(--preview-border); border-radius:14px;
  display:flex; align-items:center; justify-content:center; height:60vh;
}
.preview-wrap img{ max-width:100%; max-height:100%; object-fit:contain; }

/* Layer list */
.layer-list{ display:flex; flex-direction:column; gap:8px; }
.layer-item{ background:color-mix(in srgb, var(--panel) 86%, #0000); border:1px solid var(--border); border-radius:12px; padding:10px; }
.layer-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }

/* Stops */
.stops{ display:flex; flex-direction:column; gap:8px; }
.stop{
  display:grid; grid-template-columns:1fr 110px 1fr auto; gap:8px; align-items:center;
  background:color-mix(in srgb, var(--panel) 80%, #0000); border:1px solid var(--border); padding:8px; border-radius:10px;
}
.stop .ops{ display:flex; gap:6px; }
.stop .posWrap{
  display:grid; grid-template-columns:1fr 68px; gap:8px; align-items:center;
  grid-column:1 / -1; margin-top:6px;
}

/* Notes */
.subtle{ color:#8f9aab; font-size:12px; }
.note{ font-size:12px; color:#a8b1c1; }
.jsonbox{
  white-space:pre-wrap; background:var(--card); border:1px solid var(--input-border); border-radius:10px;
  padding:12px; max-height:38vh; overflow:auto;
}

/* Font credit */
.font-credit{
  grid-column: 1 / -1;
  display:block; margin-top:6px; padding:10px 12px;
  font-size:12px; line-height:1.6; color: var(--muted);
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px; word-break: break-word;
}
.font-credit a{ color: var(--ink); text-decoration: underline; }
.font-credit a:hover{ opacity:.9; text-decoration-thickness:2px; }

/* Tablet & down */
@media (max-width:1280px){
  #text-mode{ display:flex; flex-direction:column; gap:16px; }
  #text-mode > section{ order:-1; }
  .sticky.preview{ top:calc(56px + 16px); position:sticky;}
  #aside{ overflow-y:scroll ;}

}

/* <= 980px */
@media (max-width:980px){
  #text-mode{ display:flex; flex-direction:column; gap:16px; }
  #text-mode > section{ order:-1; }
  aside{ border-right:none; padding-right:0; }
  section{ padding-left:0; }
  .sticky.preview,.sticky.json{ top:calc(56px + 16px); }
  .sticky.json{ margin-top:16px; }
  .preview-wrap{ height:50vh; }
}

/* <= 820px */
@media (max-width:820px){
  :root{ --header-height:56px; --gap-sm:8px; --preview-max-h:30vh; }
  #text-mode{ display:flex; flex-direction:column; gap:var(--gap-sm); }
  #text-mode > section{ order:-1; }
  #previewToggleBtn{display:none;}
.brand .brand-text{display:none;}
.brand .brand-text-small{display:contents;}

  .sticky.preview{
    position:sticky; top:calc(var(--header-height) + var(--gap-sm));
    z-index:10; background:var(--bg); border-bottom:1px solid var(--border); padding:6px 0;
  }
  .preview-wrap{ max-height:calc(var(--preview-max-h) + 2vh); display:flex; align-items:center; justify-content:center; overflow:hidden; }
  #preview{ max-width:100%; height:auto; max-height:var(--preview-max-h); display:block; }

  aside{
    max-height:calc(100vh - (var(--header-height) + var(--gap-sm)) - var(--preview-max-h) - 24px);
    overflow:auto; -webkit-overflow-scrolling:touch;
  }
}

/* User badge */
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:10px;
  border:1px solid var(--border-color);
  color: var(--btn-fg);
  line-height:1; white-space:nowrap;
}
.badge .icon{ font-size:14px; line-height:1; }
.badge .label{ font-size:12px; }
@media (max-width:640px){ .badge .label{ display:none; } }

/* Preview actions (Reset) */
.preview-actions{ display:flex; align-items:center; justify-content:flex-end; margin-top:8px; }
.reset-btn{
  background:var(--danger-bg);
  border:1px solid var(--danger-border);
  color:var(--danger-ink);
  padding:8px 12px; border-radius:10px;
}
.reset-btn:hover{ filter: brightness(1.02); }

/* Badge tone hints */
.badge.guest   { opacity:.95; }
.badge.limited { border-color: color-mix(in srgb, var(--muted) 40%, var(--border)); }
.badge.full    { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); }
.badge.admin   { border-color: color-mix(in srgb, #f59e0b 65%, var(--border)); }

/* TTC Index disabled state */
.is-disabled { opacity: .5; pointer-events: none; }

/* ロック通知バー（テーマ追従） */
.lock-notice{
  display:flex; align-items:center; gap:12px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  border: 1px solid var(--border);
  color: var(--ink);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
  box-shadow: var(--soft-shadow, 0 10px 24px rgba(0,0,0,.25));
}
.lock-notice[hidden]{ display:none !important; }

.lock-notice__icon{ font-size:18px; line-height:1; }
.lock-notice__text{ font-size:13px; line-height:1.5; }
.lock-notice__text strong{ font-weight:600; }

.lock-notice__reset{
  margin-left: auto;
  /* 既存 .btn.danger が var(--danger-*) を使う前提だが、念のため */
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger-ink);
}


.panel.hidden { display:none; }
.align-grid { display:grid; grid-template-columns: repeat(3, 28px); gap:6px; }
.align-grid button { width:28px; height:28px; border:1px solid #ccc; border-radius:4px; }
.align-grid button.active { outline:2px solid #4b9; }
.multi-toolbar { display:flex; gap:8px; align-items:center; padding:6px; border-bottom:1px solid #ddd; }
.multi-toolbar.hidden { display:none; }
.multi-toolbar .divider { width:1px; height:18px; background:#ddd; margin:0 6px; }
.modal.hidden { display:none; }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; }
.modal-content { background:#fff; padding:16px 20px; border-radius:12px; min-width:320px; max-width:520px; }
.shortcuts kbd { background:#f3f3f3; border:1px solid #ddd; border-bottom:2px solid #ccc; padding:0 6px; border-radius:4px; }
.row { display:flex; align-items:center; gap:8px; margin:8px 0; }
.row input[type="number"] { width:80px; }
.checkbox { display:flex; align-items:center; gap:8px; }
.crop-fields { gap:10px; }

/* プレビューが position:relative を持つように */
.layout-preview, .preview-stage { position: relative; z-index: 1; }

/* モーダルを最前面に */
.modal { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; }
.modal.hidden { display: none; }

/* --- ユーザーメニュー dropdown --- */
.dropdown[hidden]{ display:none !important; }
.dropdown{
  position:absolute;
  right:12px; top:56px;
  min-width: 220px;
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  padding: 6px;
  z-index: 2000;
}
.dropdown .item{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px; cursor:pointer;
}
.dropdown .item:hover{ background: rgba(125,125,125,.36); }
.dropdown .sep{ height:1px; background: rgba(255,255,255,.08); margin:6px 4px; }

/* --- サムネイルギャラリー modal --- */
.tg-modal::backdrop{ background: rgba(0,0,0,.55); }
.tg-modal{ width:min(960px, 92vw); border:none; border-radius:16px; padding:0; }
.tg-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--line,#333); }

.tg-body{
  padding:12px;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
  gap:12px;
  max-height:60vh;
  overflow-y:auto;
  overflow-x:hidden; /* 横スクロール抑止 */
}

.tg-card{ overflow:hidden; } /* はみ出し抑止 */
.tg-card img{
  display:block;       /* 画像行間の隙間をなくす */
  width:100%;
  height:auto;
  aspect-ratio:16/9;   /* 比率固定 */
  object-fit:cover;
  border-radius:8px;
  background:#111;
  max-width:100%;
}

.tg-card img[alt=""]:after{ content:''; }
.tg-card .no-thumb{ display:grid; place-items:center; width:100%; aspect-ratio:16/9; border-radius:8px; background:#111; color:#888; font-size:12px; }
.tg-card .row{ display:flex; gap:8px; justify-content:space-between; align-items:center; }
.tg-foot{ padding:12px 16px; border-top:1px solid var(--line,#333); display:flex; justify-content:flex-end; gap:8px; }
.tg-close{ background:none; border:none; font-size:20px; cursor:pointer; }
/* --- toast for gallery switch --- */
.toast{
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(16px);
  min-width: 220px;
  max-width: 90vw;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 14px;
  line-height: 1.3;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 2147480000; /* 他固定UIより上に */
}
@media (prefers-reduced-motion: reduce){
  .toast{ transition: none; }
}
:root[data-theme="light"] .toast{
  background: rgba(20,22,26,0.92);
  color:#fff;
}
.toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* user menu radio styles */
#userMenu .group-title{ opacity:.7; padding:6px 10px; font-size:12px; }
#userMenu .item[role="menuitemradio"]{ display:flex; gap:8px; align-items:center; }
#userMenu .item[role="menuitemradio"] .check{ width:1em; text-align:center; }
#userMenu .item[aria-checked="true"] .check{ content:"✓"; }

/* ===== Segmented Slider Toggle ===== */
.seg-toggle{
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  width: clamp(200px, 24vw, 210px);
  background: var(--seg-bg, rgba(127,127,127,.12));
  border-radius: 999px;
  padding: 4px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  font-size: x-small;
}
:root[data-theme="dark"] .seg-toggle{ --seg-bg: rgba(255,255,255,.08); }

.seg-btn{
  position: relative;
  z-index: 1;
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
}
.seg-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, canvasText 20%, transparent);
  border-radius: 999px;
}
.seg-btn[aria-pressed="true"]{ color: var(--seg-on, canvasText); font-weight: 600; }
:root[data-theme="dark"] .seg-btn[aria-pressed="true"]{ --seg-on: white; }

.seg-thumb{
  position: absolute;
  z-index: 0;
  top: 4px; bottom: 4px;
  width: calc(50% - 4px);
  left: 4px;
  background: var(--accent);
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  transition: transform .18s ease, left .18s ease;
}
:root[data-theme="dark"] .seg-thumb{
  background: var(--accent);
}

/* thumbの位置：layout時は右側にスライド */
body[data-mode="layout"] .seg-toggle .seg-thumb{
  transform: translateX(100%);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .seg-thumb{ transition: none; }
}

/* ===== 旧ボタンをヘッダーから非表示（メニュー統合済）===== */
#themeToggleBtn, #loginBtn, #logoutBtn{
  display: none !important;
}

/* アクセス制御の視覚 */
[aria-disabled="true"]{
  opacity: .5; pointer-events: none; cursor: not-allowed;
}

.site-foot{
  margin-top: 24px; padding: 18px 16px;
  border-top: 1px solid var(--border);
  color: var(--muted); background: color-mix(in srgb, var(--bg) 96%, transparent);
}
.site-foot .foot-inner{ display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.legal-links a{ color: var(--ink); opacity:.85; text-decoration:none; border:1px solid var(--border);
  padding:6px 10px; border-radius:999px; font-size:12px; margin-right:6px; }
.legal-links a:hover{ opacity:1; }
.legal-links .sep{ color: var(--muted); margin:0 2px; display:none; } /* pillリンクなので区切りは非表示 */
@media (max-width:640px){ .legal-links a{ margin-bottom:6px; } }