/* ===================================================================
   TDIL Product Design System — round & friendly edition
   署名: キャラクター Tidil の「丸いボディ」。色はロゴ8色のまま維持。
   全ファイナリスト共通。レイアウトはサービス別、部品はこれに統一。
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700&family=Zen+Maru+Gothic:wght@400;500;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* --- Color (logo palette / 変更なし) --- */
  --ds-ink:        #202121;
  --ds-black:      #1a1a1a;
  --ds-grey-d:     #555555;
  --ds-grey-m:     #999899;
  --ds-grey-l:     #e8e4de;
  --ds-line:       #e2ddd4;
  --ds-white:      #fafafa;
  --ds-paper:      #f6f3ee;
  --ds-paper-2:    #efeae1;
  --ds-terracotta: #c0634c;
  --ds-terra-d:    #a8503b;
  --ds-terra-soft: #f0d9d1;
  --ds-beige:      #e8ddd0;
  --ds-olive:      #6b7052;
  --ds-olive-l:    #8a9072;
  --ds-olive-soft: #dfe2d4;

  /* --- semantic --- */
  --ds-accent:     var(--ds-terracotta);
  --ds-ok:         var(--ds-olive);
  --ds-bg:         var(--ds-paper);
  --ds-surface:    #ffffff;
  --ds-text:       var(--ds-ink);
  --ds-text-2:     var(--ds-grey-d);
  --ds-text-3:     #8f8a83;
  --ds-border:     var(--ds-line);

  /* --- type (rounded) --- */
  --ds-ui:    'M PLUS Rounded 1c', system-ui, sans-serif;
  --ds-read:  'Zen Maru Gothic', 'M PLUS Rounded 1c', sans-serif;
  --ds-mono:  'JetBrains Mono', ui-monospace, monospace;

  /* --- type scale --- */
  --ds-fs-display: clamp(1.6rem, 4.5vw, 2.4rem);
  --ds-fs-h1: 1.375rem;
  --ds-fs-h2: 1.0625rem;
  --ds-fs-body: 0.9375rem;
  --ds-fs-sm: 0.8125rem;
  --ds-fs-xs: 0.6875rem;
  --ds-fs-label: 0.6875rem;

  /* --- space (8pt) --- */
  --ds-1: 0.25rem; --ds-2: 0.5rem; --ds-3: 0.75rem; --ds-4: 1rem;
  --ds-5: 1.5rem; --ds-6: 2rem; --ds-7: 3rem; --ds-8: 4rem;

  /* --- radius (丸み) --- */
  --ds-r-sm: 10px;
  --ds-r:    16px;
  --ds-r-lg: 24px;
  --ds-r-xl: 32px;
  --ds-r-pill: 999px;

  /* --- elevation (soft) --- */
  --ds-sh-1: 0 2px 7px rgba(60,50,44,.06);
  --ds-sh-2: 0 14px 40px rgba(60,50,44,.13);
  --ds-sh-card: 0 5px 20px rgba(60,50,44,.08);

  --ds-dur: .2s;
  --ds-ease: cubic-bezier(.34,1.56,.64,1); /* gentle overshoot = 可愛い弾み */
  --ds-ease-soft: cubic-bezier(.22,1,.36,1);
}

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ds-ui);
  color: var(--ds-text);
  background: var(--ds-bg);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
a { color: inherit; }

/* ============ SIGNATURE: 丸み（Tidil のボディ）============ */
/* 旧 .ds-cut 系は丸角にマップ（既存デモの参照を壊さず一斉に丸くする） */
.ds-cut    { border-radius: var(--ds-r); }
.ds-cut-tr { border-radius: var(--ds-r); }
.ds-cut-sm { border-radius: var(--ds-r-sm); }

/* Tidil ブロブ: 少しいびつな丸（卵型）。ブランドマーク等に */
.ds-blob { border-radius: 58% 42% 55% 45% / 55% 50% 50% 45%; }

/* テラコッタの丸ドット・アクセント（旧 .ds-mark の三角を可愛い丸に） */
.ds-mark { position: relative; }
.ds-mark::after {
  content: ''; position: absolute; top: .5rem; right: .5rem;
  width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--ds-accent); pointer-events: none;
}
.ds-mark--olive::after { background: var(--ds-olive); }

/* ============ TYPOGRAPHY HELPERS ============ */
.ds-display { font-family: var(--ds-ui); font-weight: 700; font-size: var(--ds-fs-display); line-height: 1.25; letter-spacing: .01em; }
.ds-h1 { font-family: var(--ds-ui); font-weight: 700; font-size: var(--ds-fs-h1); }
.ds-h2 { font-family: var(--ds-ui); font-weight: 700; font-size: var(--ds-fs-h2); }
.ds-read { font-family: var(--ds-read); }
.ds-label {
  font-family: var(--ds-mono); font-size: var(--ds-fs-label);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ds-text-3);
}
.ds-num { font-family: var(--ds-mono); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
.ds-muted { color: var(--ds-text-3); }
.ds-mono { font-family: var(--ds-mono); }

/* ============ BUTTON (pill = 可愛い) ============ */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--ds-ui); font-weight: 500; font-size: var(--ds-fs-sm);
  letter-spacing: .01em; padding: .7em 1.4em; min-height: 2.7em;
  background: var(--ds-surface); color: var(--ds-text);
  border: 1.5px solid var(--ds-border); border-radius: var(--ds-r-pill);
  transition: transform var(--ds-dur) var(--ds-ease), background var(--ds-dur), border-color var(--ds-dur);
}
.ds-btn:hover { transform: translateY(-1px); }
.ds-btn:active { transform: scale(.95); }
.ds-btn--primary { background: var(--ds-accent); color: var(--ds-white); border-color: var(--ds-accent); font-weight: 700; }
.ds-btn--primary:hover { background: var(--ds-terra-d); border-color: var(--ds-terra-d); }
.ds-btn--dark { background: var(--ds-ink); color: var(--ds-white); border-color: var(--ds-ink); font-weight: 700; }
.ds-btn--dark:hover { background: #000; }
.ds-btn--ghost { background: transparent; }
.ds-btn--ghost:hover { border-color: var(--ds-text); }
.ds-btn--sm { font-size: var(--ds-fs-xs); padding: .5em 1.05em; min-height: 2.3em; }
.ds-btn--block { display: flex; width: 100%; }
.ds-btn--icon { padding: .6em; min-height: 2.6em; aspect-ratio: 1; border-radius: 50%; }

/* ============ APP BAR ============ */
.ds-appbar {
  display: flex; align-items: center; gap: var(--ds-3);
  padding: var(--ds-3) var(--ds-4); background: var(--ds-surface);
  border-bottom: 1.5px solid var(--ds-border); min-height: 3.4rem;
}
.ds-appbar--ink { background: var(--ds-ink); color: var(--ds-white); border-bottom: none; }
.ds-appbar__brand { display: inline-flex; align-items: center; gap: .5em; font-weight: 700; letter-spacing: .03em; }
/* ロゴ縮図 = Tidil ブロブ */
.ds-brandmark {
  width: .95em; height: .95em; background: var(--ds-accent); flex-shrink: 0;
  border-radius: 58% 42% 55% 45% / 55% 50% 50% 45%;
}
.ds-appbar__title { font-family: var(--ds-ui); font-weight: 700; font-size: var(--ds-fs-h2); }
.ds-appbar__sub { font-family: var(--ds-mono); font-size: var(--ds-fs-xs); color: var(--ds-text-3); }
.ds-appbar__spacer { margin-left: auto; }

/* ============ SEGMENTED / TABS ============ */
.ds-seg { display: inline-flex; padding: 4px; gap: 2px; background: var(--ds-paper-2); border-radius: var(--ds-r-pill); }
.ds-seg__item {
  font-family: var(--ds-ui); font-size: var(--ds-fs-sm); padding: .45em 1.1em;
  color: var(--ds-text-3); border-radius: var(--ds-r-pill); transition: all var(--ds-dur) var(--ds-ease-soft); font-weight: 500;
}
.ds-seg__item.is-active { background: var(--ds-ink); color: var(--ds-white); }

/* underline tabs (丸い下線インジケータ) */
.ds-tabs { display: flex; gap: var(--ds-4); border-bottom: 1.5px solid var(--ds-border); }
.ds-tab {
  position: relative; padding: .75em 0; font-size: var(--ds-fs-sm); color: var(--ds-text-3);
  font-weight: 500; transition: color var(--ds-dur);
}
.ds-tab.is-active { color: var(--ds-text); }
.ds-tab.is-active::after {
  content: ''; position: absolute; left: 0; bottom: -1.5px; width: 100%; height: 3px;
  background: var(--ds-accent); border-radius: var(--ds-r-pill);
}

/* ============ BOTTOM TAB BAR ============ */
.ds-tabbar { display: flex; background: var(--ds-surface); border-top: 1.5px solid var(--ds-border); padding: 2px 0; }
.ds-tabbar__item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: .55rem 0 .6rem; font-size: var(--ds-fs-label); color: var(--ds-text-3);
  font-family: var(--ds-mono); letter-spacing: .02em; transition: color var(--ds-dur);
}
.ds-tabbar__item .ds-ico { width: 23px; height: 23px; transition: transform var(--ds-dur) var(--ds-ease); }
.ds-tabbar__item.is-active { color: var(--ds-accent); }
.ds-tabbar__item.is-active .ds-ico { transform: translateY(-1px) scale(1.08); }

/* ============ CARD / ROW / LIST ============ */
.ds-card {
  background: var(--ds-surface); border: 1.5px solid var(--ds-border);
  border-radius: var(--ds-r); padding: var(--ds-4); box-shadow: var(--ds-sh-1);
}
.ds-card--flat { box-shadow: none; }
.ds-card--pad-lg { padding: var(--ds-5); }
.ds-card--accent { border-left: 4px solid var(--ds-accent); }
.ds-card--olive { border-left: 4px solid var(--ds-olive); }

.ds-list { display: flex; flex-direction: column; background: var(--ds-surface); border: 1.5px solid var(--ds-border); border-radius: var(--ds-r); overflow: hidden; }
.ds-row { display: flex; align-items: center; gap: var(--ds-3); padding: var(--ds-3) var(--ds-4); border-bottom: 1.5px solid var(--ds-border); }
.ds-row:last-child { border-bottom: none; }
.ds-row__main { flex: 1; min-width: 0; }
.ds-row__title { font-size: var(--ds-fs-body); font-weight: 500; }
.ds-row__sub { font-size: var(--ds-fs-xs); color: var(--ds-text-3); }
.ds-row__end { margin-left: auto; text-align: right; flex-shrink: 0; }

/* ============ CHIP / TAG / BADGE / STATUS (pill) ============ */
.ds-chip {
  display: inline-flex; align-items: center; gap: .4em; font-family: var(--ds-mono);
  font-size: var(--ds-fs-xs); letter-spacing: .02em; padding: .3em .85em;
  background: var(--ds-paper-2); color: var(--ds-text-2); border: 1.5px solid transparent; border-radius: var(--ds-r-pill);
}
.ds-chip.is-on { background: var(--ds-ink); color: var(--ds-white); }
.ds-tag {
  display: inline-block; font-family: var(--ds-mono); font-size: var(--ds-fs-label);
  letter-spacing: .04em; padding: .25em .75em; border-radius: var(--ds-r-pill);
  background: var(--ds-paper-2); color: var(--ds-text-3);
}
.ds-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.5em;
  height: 1.5em; padding: 0 .45em; font-family: var(--ds-mono); font-size: var(--ds-fs-xs);
  background: var(--ds-accent); color: var(--ds-white); border-radius: var(--ds-r-pill);
}
.ds-dot { width: .5em; height: .5em; border-radius: 50%; display: inline-block; background: var(--ds-grey-m); }
.ds-dot--ok { background: var(--ds-olive); }
.ds-dot--warn { background: var(--ds-accent); }

/* status pill */
.ds-status { font-family: var(--ds-mono); font-size: var(--ds-fs-xs); padding: .22em .75em; border-radius: var(--ds-r-pill); font-weight: 500; }
.ds-status--warn { color: var(--ds-terra-d); background: var(--ds-terra-soft); }
.ds-status--ok { color: var(--ds-olive); background: var(--ds-olive-soft); }
.ds-status--mute { color: var(--ds-text-3); background: var(--ds-paper-2); }

/* ============ FIELD / INPUT ============ */
.ds-field { display: flex; flex-direction: column; gap: .35em; }
.ds-field__label { font-family: var(--ds-mono); font-size: var(--ds-fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ds-text-3); }
.ds-input {
  font-family: var(--ds-ui); font-size: var(--ds-fs-body); padding: .65em .95em;
  background: var(--ds-surface); border: 1.5px solid var(--ds-border); border-radius: var(--ds-r-sm); color: var(--ds-text); width: 100%;
}
.ds-input:focus { outline: none; border-color: var(--ds-accent); }
.ds-input::placeholder { color: var(--ds-text-3); }
.ds-searchbar { display: flex; align-items: center; gap: .5em; background: var(--ds-surface); border: 1.5px solid var(--ds-border); border-radius: var(--ds-r-pill); padding: .55em 1em; }
.ds-searchbar input { border: none; background: none; width: 100%; font-family: var(--ds-ui); font-size: var(--ds-fs-sm); }
.ds-searchbar input:focus { outline: none; }

/* ============ SWITCH ============ */
.ds-switch { position: relative; width: 46px; height: 26px; background: var(--ds-grey-l); border-radius: var(--ds-r-pill); transition: background var(--ds-dur); flex-shrink: 0; }
.ds-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--ds-white); transition: transform var(--ds-dur) var(--ds-ease); box-shadow: var(--ds-sh-1); }
.ds-switch.is-on { background: var(--ds-olive); }
.ds-switch.is-on::after { transform: translateX(20px); }

/* ============ STAT / METRIC ============ */
.ds-stat { display: flex; flex-direction: column; }
.ds-stat__value { font-family: var(--ds-mono); font-weight: 500; font-size: 1.75rem; line-height: 1; font-variant-numeric: tabular-nums; }
.ds-stat__label { font-family: var(--ds-mono); font-size: var(--ds-fs-label); letter-spacing: .06em; color: var(--ds-text-3); margin-top: .4em; }
.ds-stat--hero .ds-stat__value { font-size: 3rem; }
.ds-statrow { display: flex; gap: var(--ds-5); }

/* ============ DIVIDER / META / BAR ============ */
.ds-divider { height: 1.5px; background: var(--ds-border); border: none; margin: var(--ds-4) 0; }
.ds-meta { font-family: var(--ds-mono); font-size: var(--ds-fs-xs); color: var(--ds-text-3); }
.ds-bar { height: 7px; background: var(--ds-grey-l); border-radius: var(--ds-r-pill); overflow: hidden; }
.ds-bar__fill { height: 100%; background: var(--ds-accent); border-radius: var(--ds-r-pill); }
.ds-bar__fill--olive { background: var(--ds-olive); }

/* ============ DEVICE FRAMES ============ */
.ds-stage {
  min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--ds-4); padding: var(--ds-6) var(--ds-4) var(--ds-7);
  background: radial-gradient(120% 80% at 50% 0%, var(--ds-paper) 0%, var(--ds-paper-2) 100%);
}
.ds-stage--ink { background: #1b1e21; }

/* iPhone */
.ds-iphone { width: 380px; max-width: 92vw; aspect-ratio: 380 / 800; background: #0c0d0e; border-radius: 48px; padding: 12px; box-shadow: var(--ds-sh-2); }
.ds-iphone__screen { width: 100%; height: 100%; border-radius: 38px; overflow: hidden; background: var(--ds-bg); position: relative; display: flex; flex-direction: column; }
.ds-iphone__notch { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 34%; height: 22px; background: #0c0d0e; border-radius: 0 0 16px 16px; z-index: 20; }
.ds-statusbar { display: flex; align-items: center; justify-content: space-between; padding: .6rem 1.4rem .2rem; font-family: var(--ds-mono); font-size: .65rem; color: var(--ds-text-2); flex-shrink: 0; }

/* iPad */
.ds-ipad { width: 820px; max-width: 94vw; aspect-ratio: 4 / 3; background: #0c0d0e; border-radius: 30px; padding: 14px; box-shadow: var(--ds-sh-2); }
.ds-ipad__screen { width: 100%; height: 100%; border-radius: 16px; overflow: hidden; background: var(--ds-bg); display: flex; }

/* browser */
.ds-browser { width: 1000px; max-width: 96vw; background: var(--ds-surface); border: 1.5px solid var(--ds-border); border-radius: var(--ds-r-lg); overflow: hidden; box-shadow: var(--ds-sh-2); }
.ds-browser__bar { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; background: var(--ds-paper-2); border-bottom: 1.5px solid var(--ds-border); }
.ds-browser__dots { display: flex; gap: 7px; }
.ds-browser__dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--ds-grey-l); display: block; }
.ds-browser__url { flex: 1; font-family: var(--ds-mono); font-size: var(--ds-fs-xs); color: var(--ds-text-2); background: var(--ds-surface); border: 1.5px solid var(--ds-border); border-radius: var(--ds-r-pill); padding: .35em 1em; }
.ds-browser__body { display: block; }

/* panel (Mac menubar / watch / LINE 等の土台) */
.ds-panel { background: var(--ds-surface); border: 1.5px solid var(--ds-border); border-radius: var(--ds-r-lg); box-shadow: var(--ds-sh-2); overflow: hidden; }

/* watch */
.ds-watch { width: 200px; height: 240px; background: #0c0d0e; border-radius: 56px; padding: 13px; box-shadow: var(--ds-sh-2); }
.ds-watch__screen { width: 100%; height: 100%; border-radius: 42px; overflow: hidden; background: #000; color: var(--ds-white); display: flex; flex-direction: column; }

/* ============ DEMO CHROME ============ */
.ds-backchip {
  position: fixed; left: 14px; bottom: 14px; z-index: 100;
  font-family: var(--ds-mono); font-size: var(--ds-fs-xs); letter-spacing: .02em;
  color: var(--ds-text-2); background: rgba(255,255,255,.85); backdrop-filter: blur(6px);
  border: 1.5px solid var(--ds-border); border-radius: var(--ds-r-pill); padding: .5em 1em; text-decoration: none;
  box-shadow: var(--ds-sh-1);
}
.ds-backchip:hover { color: var(--ds-text); }
.ds-infobar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 12px; z-index: 90;
  display: flex; flex-wrap: wrap; gap: .4em 1em; justify-content: center; align-items: center;
  max-width: calc(100vw - 28px);
  padding: .6em 1.3em; background: var(--ds-ink); color: rgba(250,250,250,.74);
  font-family: var(--ds-mono); font-size: var(--ds-fs-label); letter-spacing: .02em;
  border-radius: var(--ds-r-pill); box-shadow: var(--ds-sh-2);
}
.ds-infobar b { color: var(--ds-white); font-weight: 500; }
.ds-infobar .sep { opacity: .4; }

/* helpers */
.ds-screen { display: none; }
.ds-screen.is-active { display: flex; flex-direction: column; flex: 1; min-height: 0; animation: ds-pop .26s var(--ds-ease); }
@keyframes ds-pop { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
.ds-scroll { flex: 1; overflow-y: auto; }
.ds-stack { display: flex; flex-direction: column; gap: var(--ds-3); }
.ds-pad { padding: var(--ds-4); }
@media (prefers-reduced-motion: reduce) { .ds-screen.is-active { animation: none; } .ds-btn, .ds-tabbar__item .ds-ico { transition: none; } }