/* ============================================================
   chic.css — 「シック」デザイン(ラグジュアリー × ミニマル / 明朝体)

   生成り(または墨)の地に、細い線と、控えめな金茶のアクセント。
   影・光・ぼかしは使わず、「余白・線・文字の組み」だけで上質さを出す。
   紹介ページ(welcome.html / css/welcome.css)と、同じ色・同じ書体にそろえてある。

   <html data-skin="chic"> のときだけ効く。
   作り方は neo.css と同じ:
   1. tokens.css の変数(色・線・文字・形)を入れ替える → 既存の部品の色が、自動で変わる
   2. 形や書体を変えたい部品だけを、この下で上書きする

   ★ 約束は変えない: 達成率を出さない / 赤を使わない / 空の枠を出さない
   ★ 明るい・暗いは、端末の設定に従う(設定 → 表示 で、固定もできる)
   ★ 書体は、端末に入っている明朝だけを使う(外のフォントは読み込まない)
   ============================================================ */

/* ---- 1. 色・書体・形の入れ替え ------------------------------ */
html:root[data-skin="chic"] {
  color-scheme: light;

  --bg:          #F5F1EA;   /* 生成り */
  --bg-card:     #FBF9F5;   /* 一段明るい面 */
  --bg-sunken:   #ECE6DB;   /* 入力欄 */

  --line:        #DDD4C7;
  --line-strong: #C9BEAE;

  --text:        #1E1A17;   /* 墨 */
  --text-sub:    #5E564E;
  --text-weak:   #877D72;

  --accent:      #7F6633;   /* 金茶(くすませた金) */
  --accent-2:    #7F6633;
  --accent-weak: #ECE3D1;
  --brown:       #7F6633;

  --warn:        #9A5B3A;   /* 赤は使わず、焦げ茶の橙 */
  --warn-weak:   #F0E4DB;

  --ink:         #1E1A17;   /* 濃い面(主なボタン・大きなカード) */
  --on-ink:      #F5F1EA;

  --serif: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", YuMincho,
           "Noto Serif JP", "Noto Serif CJK JP", "Source Han Serif JP", "MS PMincho", serif;
  --font:        var(--serif);
  --font-quote:  var(--serif);

  --radius:      2px;
  --radius-sm:   2px;
  --radius-full: 999px;

  --shadow:      none;
  --lh:          1.85;

  background: var(--bg);
}

@media (prefers-color-scheme: dark) {
  html:root[data-skin="chic"]:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:          #12100E;
    --bg-card:     #1A1714;
    --bg-sunken:   #0E0C0A;
    --line:        #2F2A25;
    --line-strong: #453E36;
    --text:        #EDE7DD;
    --text-sub:    #A89F93;
    --text-weak:   #7D7468;
    --accent:      #C7AC77;
    --accent-2:    #C7AC77;
    --accent-weak: #2A241B;
    --brown:       #C7AC77;
    --warn:        #D79A72;
    --warn-weak:   #2C221B;
    --ink:         #EDE7DD;
    --on-ink:      #14110E;
  }
}
html:root[data-skin="chic"][data-theme="dark"] {
  color-scheme: dark;
  --bg:          #12100E;
  --bg-card:     #1A1714;
  --bg-sunken:   #0E0C0A;
  --line:        #2F2A25;
  --line-strong: #453E36;
  --text:        #EDE7DD;
  --text-sub:    #A89F93;
  --text-weak:   #7D7468;
  --accent:      #C7AC77;
  --accent-2:    #C7AC77;
  --accent-weak: #2A241B;
  --brown:       #C7AC77;
  --warn:        #D79A72;
  --warn-weak:   #2C221B;
  --ink:         #EDE7DD;
  --on-ink:      #14110E;
}

html[data-skin="chic"] body {
  background: var(--bg);
  font-feature-settings: "palt";
  letter-spacing: 0.04em;
}
html[data-skin="chic"] ::selection { background: var(--accent-weak); }
html[data-skin="chic"] :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- 2. 見出し(明朝・細め・字間を広く) -------------------- */
html[data-skin="chic"] h1,
html[data-skin="chic"] h2,
html[data-skin="chic"] h3 { font-weight: 500; letter-spacing: 0.1em; }
html[data-skin="chic"] .header__title { font-weight: 500; letter-spacing: 0.18em; font-size: 16px; }
html[data-skin="chic"] .section__title {
  font-size: 13px; font-weight: 500; letter-spacing: 0.28em;
  color: var(--accent);
  display: flex; align-items: center; gap: 12px;
}
html[data-skin="chic"] .section__title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
html[data-skin="chic"] .subtitle,
html[data-skin="chic"] .lead { color: var(--text-sub); }
html[data-skin="chic"] .meta { letter-spacing: 0.06em; }

/* ---- 3. アイコン(細い線・アクセント色) -------------------- */
html[data-skin="chic"] .ic { stroke: currentColor; stroke-width: 1.3; vertical-align: -0.18em; filter: none; }
html[data-skin="chic"] .row__icon .ic,
html[data-skin="chic"] .sheet__icon .ic,
html[data-skin="chic"] .tile__icon .ic,
html[data-skin="chic"] .quote__mark .ic,
html[data-skin="chic"] .sheet__grid-item .ic,
html[data-skin="chic"] .row__avatar .ic,
html[data-skin="chic"] .person__photo .ic,
html[data-skin="chic"] .listen .ic { stroke: var(--accent); }
html[data-skin="chic"] .tile__icon .ic { width: 28px; height: 28px; }
html[data-skin="chic"] .row__icon .ic  { width: 22px; height: 22px; }
html[data-skin="chic"] .btn .ic,
html[data-skin="chic"] .chip .ic,
html[data-skin="chic"] .more .ic,
html[data-skin="chic"] .listen .ic { margin-right: 0.4em; }

/* ---- 4. ヘッダー ------------------------------------------- */
html[data-skin="chic"] .header {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}
html[data-skin="chic"] .header__action { color: var(--text-sub); }
html[data-skin="chic"] .header__action:active { color: var(--accent); }

/* ---- 5. 下タブ(平らな帯・細い線・字間広め) ---------------- */
html[data-skin="chic"] .tabbar {
  background: var(--bg);
  border-top: 1px solid var(--line);
  box-shadow: none;
}
html[data-skin="chic"] .tabbar__item {
  position: relative; color: var(--text-weak);
  font-size: 11px; letter-spacing: 0.16em;
}
html[data-skin="chic"] .tabbar__item svg { stroke-width: 1.2; }
html[data-skin="chic"] .tabbar__item.is-active { color: var(--text); }
html[data-skin="chic"] .tabbar__item.is-active svg { stroke: var(--accent); }
html[data-skin="chic"] .tabbar__item.is-active::before {
  content: ""; position: absolute; top: -1px; left: 50%; width: 28px; height: 2px;
  margin-left: -14px; background: var(--accent);
}

/* ---- 6. 「＋」ボタン(墨の丸・細い金の縁) ------------------ */
html[data-skin="chic"] .fab {
  background: var(--ink); color: var(--on-ink);
  box-shadow: 0 0 0 1px var(--accent) inset, 0 6px 18px rgba(30, 26, 23, 0.22);
}
html[data-skin="chic"] .fab .ic { stroke: var(--on-ink); stroke-width: 1.4; width: 24px; height: 24px; }
html[data-skin="chic"] .fab:active { transform: scale(0.96); }

/* ---- 7. カード(面+細い線。影もぼかしもなし) -------------- */
html[data-skin="chic"] .card,
html[data-skin="chic"] .tile {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
}
html[data-skin="chic"] .card { padding: var(--sp-5) var(--sp-4); }
html[data-skin="chic"] .tile:active { background: var(--accent-weak); }
html[data-skin="chic"] .tile__label { letter-spacing: 0.12em; }

/* 今日のひとこと: 墨の面に、明るい文字 */
html[data-skin="chic"] .quote {
  background: var(--ink); color: var(--on-ink);
  border: 1px solid var(--ink); border-radius: var(--radius);
  box-shadow: none;
}
html[data-skin="chic"] .quote__text { font-weight: 500; letter-spacing: 0.1em; line-height: 2; }
html[data-skin="chic"] .quote__mark,
html[data-skin="chic"] .quote__src { color: var(--accent); }
html[data-skin="chic"] .quote .ic { stroke: var(--accent); }

html[data-skin="chic"] .home__date { font-weight: 400; font-size: 30px; letter-spacing: 0.12em; }
html[data-skin="chic"] .home__greet { color: var(--accent); letter-spacing: 0.24em; font-size: 12px; }
html[data-skin="chic"] .timerow__time,
html[data-skin="chic"] .meta-time { font-family: var(--serif); color: var(--accent); letter-spacing: 0.08em; }

/* ---- 8. ボタン(線のボタン / 墨のボタン) ------------------ */
html[data-skin="chic"] .btn {
  min-height: 48px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  background: transparent; color: var(--text);
  font-size: 15px; letter-spacing: 0.16em;
  box-shadow: none;
}
html[data-skin="chic"] .btn:active { background: var(--accent-weak); }
html[data-skin="chic"] .btn--primary { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
html[data-skin="chic"] .btn--primary:active { background: var(--accent); border-color: var(--accent); color: var(--bg); }
html[data-skin="chic"] .btn--primary .ic { stroke: var(--on-ink); }
html[data-skin="chic"] .btn--danger { background: transparent; border-color: var(--warn); color: var(--warn); }
html[data-skin="chic"] .btn--danger:active { background: var(--warn-weak); }
html[data-skin="chic"] .btn--danger .ic { stroke: var(--warn); }
html[data-skin="chic"] .btn--quiet { border-color: var(--line-strong); color: var(--text-sub); }
html[data-skin="chic"] .btn--small { min-height: 36px; font-size: 13px; letter-spacing: 0.12em; }
html[data-skin="chic"] .more { color: var(--text-sub); letter-spacing: 0.14em; }

/* ---- 9. チップ(細い線の札) -------------------------------- */
html[data-skin="chic"] .chip {
  border: 1px solid var(--line-strong); background: transparent; color: var(--text-sub);
  letter-spacing: 0.1em; font-size: 13px;
}
html[data-skin="chic"] .chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
html[data-skin="chic"] .chip.is-active .ic { stroke: var(--on-ink); }
html[data-skin="chic"] .listen {
  color: var(--text); border: 1px solid var(--line-strong); background: transparent;
  letter-spacing: 0.12em;
}

/* ---- 10. 入力欄(下線だけ・または薄い面) ------------------- */
html[data-skin="chic"] .field,
html[data-skin="chic"] .editor__body,
html[data-skin="chic"] .editor__quote {
  background: var(--bg-card); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  box-shadow: none; font-family: var(--serif); letter-spacing: 0.04em;
}
html[data-skin="chic"] .field:focus,
html[data-skin="chic"] .editor__body:focus,
html[data-skin="chic"] .editor__quote:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
html[data-skin="chic"] .field::placeholder,
html[data-skin="chic"] .editor__body::placeholder,
html[data-skin="chic"] .editor__title::placeholder { color: var(--text-weak); }
html[data-skin="chic"] .editor__title { font-weight: 500; letter-spacing: 0.1em; border-bottom-color: var(--line); background: transparent; }
html[data-skin="chic"] .editor__title:focus { border-bottom-color: var(--accent); }
html[data-skin="chic"] .editor__label,
html[data-skin="chic"] .fieldrow__label { letter-spacing: 0.14em; color: var(--text-sub); }
html[data-skin="chic"] .switchrow input { accent-color: var(--accent); }
html[data-skin="chic"] select.field { color: var(--text); }
html[data-skin="chic"] .dictate__btn {
  background: transparent; border-color: var(--line-strong); color: var(--accent); box-shadow: none;
}
html[data-skin="chic"] .dictate__btn.is-on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  html[data-skin="chic"] .dictate__btn.is-on { animation: chic-pulse 1.4s ease-in-out infinite; }
}
@keyframes chic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(127, 102, 51, 0.45); }
  50%      { box-shadow: 0 0 0 9px rgba(127, 102, 51, 0); }
}

/* ---- 11. チェックボックス(角のある細い枠) ------------------ */
html[data-skin="chic"] .check__box { border: 1px solid var(--ink); border-radius: 2px; background: transparent; }
html[data-skin="chic"] .check__box.is-done { background: var(--ink); border-color: var(--ink); }
html[data-skin="chic"] .check__box.is-done::after { border-color: var(--on-ink); }
html[data-skin="chic"] .check__title.is-done { color: var(--text-weak); }

/* ---- 12. 一覧の行 ------------------------------------------ */
html[data-skin="chic"] .row,
html[data-skin="chic"] .linkrow,
html[data-skin="chic"] .quoterow,
html[data-skin="chic"] .timerow { border-bottom-color: var(--line); }
html[data-skin="chic"] .row:active,
html[data-skin="chic"] .quoterow:active,
html[data-skin="chic"] .timerow:active { background: var(--accent-weak); }
html[data-skin="chic"] .row__title { letter-spacing: 0.06em; }
html[data-skin="chic"] .row__avatar { background: var(--bg-card); box-shadow: 0 0 0 1px var(--line-strong); }
html[data-skin="chic"] .person__photo { background: var(--bg-card); border: 1px solid var(--line-strong); box-shadow: none; }
html[data-skin="chic"] .thumb { border-color: var(--line); box-shadow: none; border-radius: 2px; }
html[data-skin="chic"] .quoterow__text { font-weight: 400; }

/* ---- 13. カレンダー ---------------------------------------- */
html[data-skin="chic"] .cal__nav { color: var(--accent); }
html[data-skin="chic"] .cal__label { letter-spacing: 0.2em; font-weight: 500; }
html[data-skin="chic"] .cal__cell { border: 1px solid transparent; border-radius: 2px; }
html[data-skin="chic"] .cal__cell.is-today { color: var(--accent); font-weight: 700; }
html[data-skin="chic"] .cal__cell.is-selected { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
html[data-skin="chic"] .cal__cell.is-selected.is-today { color: var(--on-ink); }
html[data-skin="chic"] .cal__dot { background: var(--accent); box-shadow: none; }

/* ---- 14. シート・ダイアログ -------------------------------- */
html[data-skin="chic"] .overlay__scrim { background: rgba(30, 26, 23, 0.5); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-skin="chic"] .sheet__card {
  background: var(--bg); border-top: 1px solid var(--line-strong);
  border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-skin="chic"] .sheet__title { letter-spacing: 0.18em; font-weight: 500; }
html[data-skin="chic"] .sheet__item { border-bottom-color: var(--line); }
html[data-skin="chic"] .sheet__item:active { background: var(--accent-weak); }
html[data-skin="chic"] .sheet__grid-item {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--text); box-shadow: none; letter-spacing: 0.1em;
}
html[data-skin="chic"] .sheet__grid-item:active { background: var(--accent-weak); }
html[data-skin="chic"] .sheet__cancel { color: var(--text-sub); letter-spacing: 0.14em; }
html[data-skin="chic"] .dialog__card {
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(30, 26, 23, 0.28);
}
html[data-skin="chic"] .dialog__title { letter-spacing: 0.14em; font-weight: 500; }
html[data-skin="chic"] .dialog__message { color: var(--text-sub); }
html[data-skin="chic"] .result { border-bottom-color: var(--line); }
html[data-skin="chic"] .viewer { background: rgba(18, 16, 14, 0.97); }

/* ---- 15. お知らせ・取り消し -------------------------------- */
html[data-skin="chic"] .snackbar {
  background: var(--ink); color: var(--on-ink); border: none; border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(30, 26, 23, 0.3); letter-spacing: 0.08em;
}
html[data-skin="chic"] .snackbar__action { color: var(--accent); }
html[data-skin="chic"] .updatebar {
  background: var(--bg-card); color: var(--text); border: 1px solid var(--accent);
  border-radius: var(--radius); box-shadow: 0 10px 28px rgba(30, 26, 23, 0.18);
}
html[data-skin="chic"] .notice,
html[data-skin="chic"] .warnline { border: 1px solid var(--warn); background: var(--warn-weak); color: var(--warn); border-radius: var(--radius-sm); }

/* ---- 16. はじめての画面 ------------------------------------ */
html[data-skin="chic"] .welcome__text { font-weight: 400; letter-spacing: 0.14em; line-height: 2.2; }
html[data-skin="chic"] .dot { background: var(--line-strong); }
html[data-skin="chic"] .dot.is-on { background: var(--accent); box-shadow: none; }

/* ---- 17. 写真から読み取る ---------------------------------- */
html[data-skin="chic"] .scan__preview { border: 1px solid var(--line-strong); box-shadow: none; border-radius: 2px; }
html[data-skin="chic"] .scan__state { color: var(--accent); text-shadow: none; letter-spacing: 0.12em; }

/* ---- 18. アプリロック -------------------------------------- */
html[data-skin="chic"] .lock { background: var(--bg); }
html[data-skin="chic"] .lock__brand { letter-spacing: 0.3em; color: var(--accent); background: none; -webkit-text-fill-color: currentColor; }
html[data-skin="chic"] .lock__title { font-weight: 400; letter-spacing: 0.16em; }
html[data-skin="chic"] .lock__dot { border-color: var(--ink); }
html[data-skin="chic"] .lock__dot.is-on { background: var(--ink); border-color: var(--ink); box-shadow: none; }
html[data-skin="chic"] .lock__key {
  background: transparent; border: 1px solid var(--line-strong); border-radius: 999px; box-shadow: none;
  font-family: var(--serif); font-weight: 400;
}
html[data-skin="chic"] .lock__key:active { background: var(--ink); color: var(--on-ink); border-color: var(--ink); transform: none; box-shadow: none; }
html[data-skin="chic"] .lock__key--blank { background: none; border: none; }
html[data-skin="chic"] .lock__danger { color: var(--warn); background: transparent; border: 1px solid var(--warn); box-shadow: none; }
html[data-skin="chic"] .dup__why.is-strong { color: var(--warn); }
html[data-skin="chic"] select.field option { background: var(--bg); color: var(--text); }