/* 着せかえ: 水玉とモード（DRESSUP 用。2026-10-20）
 * 新しい作る画面（ui/style.css）の上に重ねる。はじめのキャラのデフォD（ベレー帽・紺のコート・ストライプのスカート）のフランス風の装いから、
 * 黒を主役にしたモードな雰囲気（黒いボタン・細い線・少し角の立った形・ストライプの区切り・雑誌の題字のような英字）に、
 * DRESSUP のトップの絵の水玉カラフルな可愛さ（ページの地の水玉・黒地に白の小さな水玉・ピンクの選んだしるし）を合わせる（ユーザー判断 2026-10-20）。
 * キャラの後ろ（.stage）には模様を置かない（完成の画像は透過で、紛らわしいため。ユーザー判断 2026-10-20）。
 * 英字の題字は端末にあるセリフ体（iPhone の Didot など。外のフォントは読まない）。日本語は今までどおり丸ゴシック。
 * 使い方: メーカーの create/index.php の $ui['theme'] = 'dressup-boutique'（ローカルでは ?theme=dressup-boutique で試せる） */
:root {
  --noir: #1d1a22;         /* モードの黒（ベレー帽・コート） */
  --noir-2: #38323f;       /* 黒の上で触ったとき */
  --gray: #74707a;         /* 補足の文字 */
  --pink: #ffb3bf;         /* クラシック版の差し色 */
  --pink-ink: #c2386a;     /* 文字にするときのピンク（白の上で 5.3:1） */
  --ink: var(--noir);
  --sub: var(--gray);
  --line: rgba(29, 26, 34, .12);
  --tile: #f4f3f5;
  --paper: #f4efe7;       /* 生成りの紙（カテゴリの土台。PC の整理用のタブ・カテゴリの列 --tab-paper と同じ色） */
  --tall-tile: rgba(244, 243, 245, .8); /* 全身のスマホのパーツのタイル（キャラの上に重ねるので半透明）。PC のタイル --tile と同じ色 */
  --glass: rgba(255, 255, 255, .92);
  --glass-line: rgba(29, 26, 34, .12);
  --accent: #ff8fab;
  --accent-2: #b9a3ff;
  --accent-mid: #dc99d6;
  --accent-soft: #fff0f5;
  --shadow-sm: 0 6px 16px -10px rgba(29, 26, 34, .4);
  --shadow-lg: 0 24px 50px -30px rgba(29, 26, 34, .38);
  --scroll-thumb: rgba(29, 26, 34, .32);   /* スクロールバーのつまみは黒（モード）、指を乗せるとピンク */
  --scroll-thumb-hover: var(--accent);
  --serif: "Didot", "Bodoni 72", "Bodoni MT", "Playfair Display", "Noto Serif", Georgia, "Times New Roman", serif;
  /* 黒地に白の小さな水玉（黒い水玉のワンピースのように） */
  --noir-dots: radial-gradient(circle, rgba(255, 255, 255, .2) 0 1.2px, transparent 1.6px) 0 0 / 9px 9px,
    radial-gradient(circle, rgba(255, 255, 255, .2) 0 1.2px, transparent 1.6px) 4.5px 4.5px / 9px 9px;
  /* ストライプの区切り（デフォD のスカート） */
  --stripe-rule: repeating-linear-gradient(90deg, rgba(29, 26, 34, .5) 0 1.5px, transparent 1.5px 5px);
  /* 水玉（トップの絵の色） */
  --dot-pink: 244, 143, 160;
  --dot-violet: 155, 135, 245;
  --dot-orchid: 229, 140, 232;
  --dot-coral: 244, 119, 110;
  --dot-lilac: 201, 168, 240;
}

/* 地はメーカーにかかわらず全体の TOP と同じ生成り #F5F3EF（style.css の body。2026-10-28 ユーザー決定）。メーカーの色は箱・ボタンで出す（前は白〜淡い灰色に大小の水玉。DRESSUP2 は水玉なし） */
button:focus-visible { outline-color: rgba(29, 26, 34, .55); }

/* ---- 浮いているボタン（ランダム・セーブ・ロゴのメニュー・十字キー）: 白に細い線 ---- */
.glass, .brand, .pad { border: 1px solid var(--line); box-shadow: var(--shadow-sm); }

/* 完成: 黒地に白の水玉、角にピンクの小さな丸（ボタンの飾り） */
.cta {
  position: relative;
  background: var(--noir-dots), var(--noir);
  color: #fff;
  box-shadow: 0 10px 22px -12px rgba(29, 26, 34, .7);
}
.cta::after { content: ""; position: absolute; top: 7px; right: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--pink); pointer-events: none; }
.cta:hover { filter: none; background: var(--noir-dots), var(--noir-2); }
.tool.on, .ptn-swap.on { background: var(--noir); color: #fff; }
.tool.on span { color: #fff; }
.first-terms a, .slots p.slots-msg, .rnd h3 .lock-n, .tour-step, .name-chip:hover { color: var(--pink-ink); }

/* ---- キャラの箱: 白のまま（模様は置かない）、細い線と少し角の立った形 ---- */
.stage { border-radius: 22px; box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); }
.view-btn { background: var(--noir); }
.name-chip { border-color: rgba(29, 26, 34, .3); background: rgba(255, 255, 255, .88); }
.name-chip:hover { border-color: var(--noir); }
.history, .rail { border-color: var(--line); box-shadow: var(--shadow-sm); }

/* ---- パーツのパネル ---- */
.panel { border-radius: 22px; border-color: var(--line); box-shadow: var(--shadow-lg); }
.cat { color: rgba(29, 26, 34, .66); }
.cat-ind { border-radius: 16px; background: var(--noir-dots), var(--noir); box-shadow: 0 8px 16px -10px rgba(29, 26, 34, .7); }
/* 全身のスマホの右の列で入っているボタン（色など）も、選んでいるカテゴリ・完成と同じ黒い水玉に（前はピンク〜紫のグラデーションで、この画面でここだけだった。2026-10-28） */
.side-btn.on { background: var(--noir-dots), var(--noir); color: #fff; }
.cat.sel { color: #fff; }
.cat-name { color: var(--noir); letter-spacing: .06em; }
/* 色の段の下は、スカートのようなストライプの区切り */
.colors { border-bottom: 0; background: var(--stripe-rule) left bottom / 100% 1.5px no-repeat; }
.part { border-radius: 16px; background: var(--tile); }
.part:hover { background: #fff; box-shadow: 0 0 0 1px rgba(29, 26, 34, .35); }
.part.sel { background: #fff; }
.part.sel::before { box-shadow: inset 0 0 0 2.5px var(--noir); }
.part.sel::after { background-color: var(--accent); } /* 選んだしるしはピンク */
.pal-chip:hover { background: #ebe9ed; }
/* 色の役割（2026-10-28 ユーザーに来た提案）: 黒は選んでいる・決定、ピンクは印（チェック・完成の点）、生成りは紙。ほかの色は画面に出さず、色はキャラだけが持つ。
   自由な色の丸は虹色を細い輪だけにして中は白、＋は黒（前は丸ごと虹色で、キャラ以外でいちばん目立っていた）。元の色に戻す丸の斜線はピンクから灰色に */
.sw.custom { background: radial-gradient(circle, #fff 0 calc(50% - 3.5px), transparent calc(50% - 3px)), conic-gradient(#ff8a8a, #ffd98a, #a8e89a, #8adcf0, #a99cf5, #f39ad8, #ff8a8a); }
/* ＋は丸と同じ大きさの SVG で描く（2026-10-28 ユーザー「＋が上下中央に来ていない」）。細い字の「+」は字の形のぶん下にずれ、線を背景で描くと長さ・位置が端数になって
   倍率ごとに 0.3〜0.9 画素ずれた。丸の箱いっぱい（0 0 / 100%）に置くので、＋は形の上で丸のまん中。端は丸く（ほかの絵と同じ） */
.sw.custom::after { content: ""; text-shadow: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M15 10v10M10 15h10' fill='none' stroke='%231d1a22' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.sw.reset::after { background: rgba(29, 26, 34, .45); }

/* ---- ダイアログ ---- */
.sheet { box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); }
.pill { background: var(--tile); }

/* ---- 完成画面: 黒の題字とストライプの下線 ---- */
.finish { background: rgba(29, 26, 34, .36); }
.finish-head { background: rgba(255, 255, 255, .96) var(--stripe-rule) left bottom / 100% 1.5px no-repeat; }
.finish-head h2 { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--noir); letter-spacing: .14em; }
.fa { border-radius: 16px; }
.fa-main { background: var(--noir-dots), var(--noir); color: #fff; box-shadow: 0 12px 24px -14px rgba(29, 26, 34, .75); }
.fa-main:hover { filter: none; background: var(--noir-dots), var(--noir-2); }

/* ---- 読み込み中の画面・はじめての人の同意の画面: 水玉の地に、雑誌の題字のような「DRESSUP」 ---- */
html #boot {
  background:
    radial-gradient(circle at 18% 22%, rgba(var(--dot-pink), .3) 0 44px, transparent 45px),
    radial-gradient(circle at 78% 16%, rgba(var(--dot-lilac), .34) 0 56px, transparent 57px),
    radial-gradient(circle at 86% 70%, rgba(var(--dot-orchid), .26) 0 36px, transparent 37px),
    radial-gradient(circle at 14% 80%, rgba(var(--dot-violet), .24) 0 30px, transparent 31px),
    radial-gradient(circle at 50% 92%, rgba(var(--dot-coral), .22) 0 20px, transparent 21px),
    linear-gradient(#f3f1f3, #ffffff);
  color: var(--noir);
}
html #boot .boot-name, .first-maker { font-family: var(--serif); font-size: 24px; font-weight: 400; letter-spacing: .36em; padding-left: .36em; color: var(--noir); }
html #boot .boot-rule.wait { height: 1.5px; border-radius: 0; background: rgba(29, 26, 34, .14); }
html #boot .boot-rule.wait::before { background: linear-gradient(to right, transparent, var(--noir), transparent); }
html.first-visit #first { background: linear-gradient(#f3f1f3, #ffffff); }

/* スマホ: 影は控えめに。全身を大きく映すとき（.app.tall）は、角と線をキャラの段の枠に */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .stage { border-radius: 20px; }
  .panel { border-radius: 22px 22px 0 0; }
  .cta::after { top: 6px; right: 8px; width: 5px; height: 5px; }
  .app.tall .stage { box-shadow: none; }
  .app.tall .stage-box { border-radius: 20px; box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); }

  /* ---- 全身のスマホを雑誌のように静かに（2026-10-28 ユーザーに来た提案） ---- */
  /* 浮いている部品（上のボタン・左右の列・グラデーションのバー・調整の道具）は、ふんわりした影をごく薄くして 1px の縁を主役に */
  .app.tall .glass, .app.tall .brand, .app.tall .side-group, .app.tall #colorsFold .fold-in, .app.tall .gbar, .app.tall .rail {
    border: 1px solid rgba(29, 26, 34, .13); box-shadow: 0 1px 3px rgba(29, 26, 34, .07);
  }
  .app.tall .cta { box-shadow: 0 2px 6px -2px rgba(29, 26, 34, .35); }
  /* 上の段: ランダムとセーブを1つの器に（ロゴ・道具・完成の3つに見えるように）。つなぎ目は細い線 */
  .app.tall .float.tr .glass.split { border-radius: 99px 0 0 99px; border-right: 0; }
  .app.tall .float.tr #btnSlots { margin-left: -6px; border-radius: 0 99px 99px 0; border-left-color: var(--line); padding: 0; } /* 絵は区切り線から右端までのまん中（前は左だけ 11px あけて右に寄っていた。2026-10-28 ユーザー） */
  .app.tall .float.tr .glass.split .split-more { border-radius: 0; }
  /* 小さい名前（設定・色・左右・調整・道具）は太字にしない（10px の太字は黒い塊に見えた）。丸ゴシックは太さが 1 つなので 500＝ふつうの太さ */
  .app.tall .side-btn span, .app.tall .tool span, .app.tall #colorsFold.strip .pal-chip .pal-cap { font-weight: 500; letter-spacing: .02em; color: rgba(29, 26, 34, .62); }
  .app.tall .side-btn.on span { color: #fff; }
  /* カテゴリの帯は生成りの紙（PC のカテゴリの列と同じ。浮いている白い道具と、土台のシートを分ける）。影は細い線 1 本に。
     カテゴリの絵の地（--icon-bg）も紙の色に（白のままだと絵の中に白い四角が残る） */
  .app.tall .cats { background: var(--paper); box-shadow: 0 -1px 0 rgba(29, 26, 34, .1); }
  .app.tall .cats .cat:not(.sel) { --icon-bg: var(--paper); }
  .app.tall .cats .cat:not(.sel):hover { --icon-bg: var(--tile); }
}

/* PC の整理用のタブ（style.css の .panel.has-groups）: 紙は生成り（--paper。スマホのカテゴリの帯と同じ）、帯はピンク */
.panel.has-groups { --tab-paper: var(--paper); }