:root{
  /* テーマから上書きされる前提のデフォルト値 */
  --bg:#0b0f14;
  --fg:#e6eef5;
  --card:#121821;
  --muted:#8aa0b2;
  --acc:#5da0ff;
  --border:#263244;
  --field:#0d131a;
  --focus:#7db4ff;
  --success:#25c059;
  --error:#ff6b6b;
}

/* ベースレイアウト */
*,
*::before,
*::after{
  box-sizing:border-box;
}

html, body{
  margin:0;
  padding:0;
  overflow-x:hidden; /* ← 横スクロールの保険 */
}


body{
  min-height:100vh;
  background:var(--bg);
  color:var(--fg);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.6;
}

/* 共通カードコンテナ */
.container{
  /* width:100%; ← これは削除 */
  max-width:960px;
  margin:4vh auto;
  padding:24px 24px 28px;
  background:var(--card);
  border-radius:18px;
  border:1px solid var(--border);
  box-shadow:0 14px 36px rgba(0,0,0,.3);
}

/* スマホ向けレイアウト調整 */
@media (max-width:640px){
  .container{
    /* 画面幅から左右の余白を引いたサイズにする */
    max-width:calc(100% - 20px); /* 左右10pxずつ */
    margin:2vh auto 3vh;
    padding:18px 16px 22px;
  }
}


/* 見出し */
h1{
  margin:.2em 0 .7em;
  font-size:1.5rem;
}

label{
  display:block;
  margin:.9em 0 .3em;
  color:var(--muted);
  font-size:.9rem;
}

/* インプット系（テキスト系のみ） */
input[type="text"],
input[type="url"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
select,
textarea{
  width:100%;
  padding:11px 44px 11px 14px; /* 右を広めに取る（selectの▼用） */
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--field);
  color:var(--fg);
  font-size:.95rem;
  transition:
    border-color .14s ease,
    box-shadow .14s ease,
    background-color .14s ease,
    outline-color .14s ease;
  outline:none;
}

/* placeholder */
input::placeholder,
textarea::placeholder{
  color:rgba(138,160,178,.8); /* muted寄り */
}

/* hover */
input[type="text"]:hover,
input[type="url"]:hover,
input[type="password"]:hover,
input[type="email"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
select:hover,
textarea:hover{
  border-color:rgba(125,180,255,.9);
}

/* focus */
input[type="text"]:focus-visible,
input[type="url"]:focus-visible,
input[type="password"]:focus-visible,
input[type="email"]:focus-visible,
input[type="number"]:focus-visible,
input[type="search"]:focus-visible,
input[type="tel"]:focus-visible,
select:focus-visible,
textarea:focus-visible{
  border-color:var(--focus);
  box-shadow:0 0 0 3px rgba(125,180,255,.45);
  outline:2px solid var(--focus);
  outline-offset:2px;
}

/* select の矢印（ライト/ダーク両対応） */
select{
  -webkit-appearance:none;
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 14px) 50%;
  background-size:7px 7px,7px 7px;
  background-repeat:no-repeat;
}

/* スマホでの入力の打ちやすさ向上 */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
select,
textarea{
  min-height:40px;
}

@media (max-width:640px){
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  select,
  textarea{
    font-size:1rem;
    min-height:44px; /* 指でも押しやすい高さ */
  }
}

/* ボタン・リンクボタン */
button,
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:11px 18px;
  min-height:40px;
  border-radius:999px;
  border:none;
  background:var(--acc);
  color:#041625;
  font-size:.95rem;
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
  transition:
    background-color .12s ease,
    box-shadow .12s ease,
    transform .06s ease;
}

button:hover,
.btn:hover{
  box-shadow:0 8px 20px rgba(93,160,255,.45);
}

button:active,
.btn:active{
  transform:translateY(1px);
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}

button:focus-visible,
.btn:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
}

/* フォーム下の補足テキスト */
.note{
  font-size:.8rem;
  color:var(--muted);
}

/* 区切り線 */
.hr{
  height:1px;
  background:var(--border);
  margin:18px 0;
}

/* 2カラムの行（設定ページの行に使用） */
.row{
  display:grid;
  grid-template-columns:1.1fr 2fr;
  gap:12px 16px;
  align-items:center;
}

@media (max-width:720px){
  .row{
    grid-template-columns:1fr;
  }
}

/* エラー/成功メッセージ */
.err,
.ok{
  padding:10px 12px;
  border-radius:10px;
  margin-bottom:12px;
  font-size:.9rem;
}

.err{
  background:rgba(255,107,107,.14);
  border:1px solid rgba(255,107,107,.55);
  color:#ffd0d0;
}

.ok{
  background:rgba(37,192,89,.14);
  border:1px solid rgba(37,192,89,.55);
  color:#dcffe9;
}

/* トグルスイッチ（ニュースメールなど） */
.switch{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:32px;
}

.switch input{
  appearance:none;
  -webkit-appearance:none;
  width:40px;
  height:22px;
  border-radius:999px;
  background:var(--border);
  position:relative;
  cursor:pointer;
  outline:none;
  transition:background-color .12s ease;
}

/* ノブ */
.switch input::after{
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--fg);
  box-shadow:0 1px 3px rgba(0,0,0,.35);
  transition:transform .12s ease;
}

/* ON */
.switch input:checked{
  background:var(--acc);
}
.switch input:checked::after{
  transform:translateX(18px); /* 40 - 18 - 2*2 = 18 */
}

/* トグルフォーカス */
.switch input:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
}

/* アクセシビリティ：フォーカスした要素を少しスクロール上に置く */
:focus-visible{
  scroll-margin-top:20vh;
}

/* 小さいテキストリンク */
a.link-muted{
  color:var(--muted);
  font-size:.85rem;
  text-decoration:none;
}
a.link-muted:hover{
  text-decoration:underline;
}