/* Tiful v4.0 Style v2 — Pinterest/ShopMY Clean × Logo Luminance
 * T1-T9 トンマナ原則準拠
 * ベース: 白/オフホワイト/黒/3段階グレー、Sans主体、パステル大面積禁止
 * ロゴグラデは印象点（FAB発光・信頼ドット・達成ピーク）のみ
 */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink: #1A1A1A;
  --stone: #6B6B6B;
  --mist: #9B9B9B;
  --fog: #CFCFCF;
  --border: #F0F0F0;
  --border-strong: #E8E8E8;
  --porcelain: #FAFAFA;
  --white: #FFFFFF;
  --chip: #F5F5F5;
  --logo-gradient: linear-gradient(135deg, #E8A5B5 0%, #C5B0D1 50%, #7FB8D4 100%);
  --logo-glow-pink: rgba(232, 165, 181, 0.35);
  --logo-glow-blue: rgba(127, 184, 212, 0.25);
  --top-bar-h: 62px;

  /* DM Gate Components (H2 段階解放 / Spec v1.1 = 完全モノトーン化) */
  /* T1-T9 トンマナ: 白/オフホワイト/黒/3段階グレー / ロゴグラデは印象点のみ */
  --platinum: #5E6773;       /* Tiful+ identity tint (G2+ / G3+ / Q-D contract のみ) */
  --platinum-soft: rgba(94, 103, 115, 0.12);
}

body {
  font-family: 'Inter', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #E8E8E8;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  justify-content: center;
  padding: 20px;
  min-height: 100vh;
  letter-spacing: -0.005em;
}

.app-frame {
  width: 390px;
  min-height: 820px;
  background: var(--white);
  border-radius: 40px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.12);
  padding-bottom: 64px;
}

/* ============ Header ============ */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 10px;
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 10;
}

.app-header__title {
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.025em;
}

.app-header__icons {
  display: flex;
  gap: 8px;
}

.icon-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  cursor: pointer;
}

.icon-btn svg { width: 18px; height: 18px; }

/* ============ Underline Segment Tabs ============ */
.seg-underline {
  display: flex;
  gap: 24px;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.seg-underline::-webkit-scrollbar { display: none; }

.seg-underline__tab {
  padding: 12px 0 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--mist);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
  letter-spacing: -0.005em;
}

.seg-underline__tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ============ Category Strip (Pinterest-like) ============ */
.category-strip {
  display: flex;
  gap: 6px;
  padding: 14px 20px 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.category-strip::-webkit-scrollbar { display: none; }

.cat-chip {
  padding: 7px 14px;
  background: var(--chip);
  color: var(--stone);
  font-size: 13px;
  font-weight: 500;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.cat-chip.is-active {
  background: var(--ink);
  color: var(--white);
}

/* ============ Pinterest-like Masonry ============ */
.masonry {
  column-count: 2;
  column-gap: 8px;
  padding: 0 20px 40px;
}

.tile {
  break-inside: avoid;
  margin-bottom: 14px;
  cursor: pointer;
  position: relative;
}

.tile__image {
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  background: var(--chip);
  display: block;
}

.tile__image svg {
  width: 100%;
  height: auto;
  display: block;
}

.tile__info {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 2px 0;
}

.tile__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #E8A5B5, #7FB8D4);
  box-shadow: 0 0 6px rgba(232, 165, 181, 0.6), 0 0 10px rgba(127, 184, 212, 0.3);
  flex-shrink: 0;
}

.tile__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.tile__score {
  font-size: 11px;
  color: var(--mist);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  font-weight: 400;
}

/* ============ Mode switching ============ */
.mode { display: none; }
.mode.is-active { display: block; }

/* ============ My Circle mode ============ */
.circle-switcher {
  display: flex;
  gap: 8px;
  padding: 16px 20px 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.circle-switcher::-webkit-scrollbar { display: none; }

.circle-chip {
  padding: 7px 14px;
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--stone);
  white-space: nowrap;
  cursor: pointer;
}

.circle-chip.is-active {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

.circle-info {
  padding: 6px 20px 20px;
  border-bottom: 0.5px solid var(--border);
  margin-bottom: 8px;
}

.circle-info__name {
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
  letter-spacing: -0.025em;
}

.circle-info__meta {
  font-size: 12px;
  color: var(--mist);
  margin-bottom: 16px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.circle-info__actions {
  display: flex;
  gap: 8px;
}

.btn-ghost {
  padding: 10px 18px;
  background: none;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  border: 0.5px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -0.005em;
}

.btn-primary {
  padding: 10px 18px;
  background: var(--ink);
  color: var(--white);
  font-size: 13px;
  font-weight: 500;
  border: 0.5px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -0.005em;
}

/* ============ Trajectory Card (case c) ============ */
.traj-card {
  padding: 18px 20px;
  border-top: 1px solid var(--border);
  cursor: pointer;
  background: var(--white);
}

.traj-card:first-of-type {
  border-top: 1px solid var(--border);
}

.traj-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.avatar-sm {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--chip);
}

.avatar-sm svg { width: 100%; height: 100%; display: block; }

.traj-card__nameblock {
  flex: 1;
  min-width: 0;
}

.traj-card__name {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.015em;
}

.traj-card__statement {
  font-size: 12px;
  color: var(--stone);
  margin-top: 2px;
  font-weight: 400;
}

.traj-card__trust {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 15px;
  font-weight: 300;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.traj-card__wave {
  width: 100%;
  height: 60px;
  display: block;
  margin-bottom: 10px;
}

.traj-card__meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--mist);
  font-weight: 400;
}

/* ============ Most Trusted ============ */
.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px 10px;
}

.filter-header__label {
  font-size: 10px;
  color: var(--mist);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
}

.filter-header__select {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  letter-spacing: -0.005em;
}

.trusted-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  cursor: pointer;
}

.trusted-row__rank {
  font-size: 11px;
  font-weight: 400;
  color: var(--mist);
  font-variant-numeric: tabular-nums;
  width: 18px;
  letter-spacing: 0.02em;
}

.trusted-row__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--chip);
}

.trusted-row__avatar svg { width: 100%; height: 100%; display: block; }

.trusted-row__info {
  flex: 1;
  min-width: 0;
}

.trusted-row__name {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.015em;
}

.trusted-row__tags {
  font-size: 11px;
  color: var(--stone);
  margin-top: 3px;
  font-weight: 400;
}

.trusted-row__score {
  text-align: right;
  flex-shrink: 0;
  position: relative;
}

.trusted-row__score-num {
  font-size: 30px;
  font-weight: 300;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.04em;
}

.trusted-row__score-label {
  font-size: 9px;
  color: var(--mist);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 4px;
  font-weight: 500;
}

/* ============ FAB ============ */
.fab {
  position: absolute;
  bottom: 80px;
  right: 20px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--logo-gradient);
  box-shadow:
    0 12px 32px var(--logo-glow-pink),
    0 0 40px var(--logo-glow-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 24px;
  font-weight: 300;
  cursor: pointer;
  z-index: 6;
}

/* ============ Bottom Tab Bar ============ */
.tab-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: var(--white);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 6px;
  z-index: 5;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--mist);
  text-decoration: none;
  font-size: 10px;
  font-weight: 500;
  padding: 8px 0;
  transition: color 0.2s;
  letter-spacing: -0.005em;
}

.tab-item.is-active { color: var(--ink); }

.tab-item__icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab-item__icon svg { width: 22px; height: 22px; }

/* ============ iPhone Device Mode (≤430px) ============
 * Desktop モックアップ枠 (390px center frame) を解除し、実機で全幅表示。
 * Bottom Tab Bar は iOS 26 Liquid Glass 仕様 (Floating Pill + backdrop-filter)。
 * Safe-area inset (Home Indicator) 対応。
 */
@media (max-width: 430px) {
  body {
    background: var(--white);
    padding: 0;
    display: block;
    min-height: 100dvh;
  }

  .app-frame {
    width: 100%;
    min-height: 100dvh;
    border-radius: 0;
    box-shadow: none;
    /* sticky を完全に効かせるため (overflow:hidden は親 sticky context を制限する) */
    overflow: visible;
    /* Floating tab-bar (height 60 + bottom 10 + safe-area) を実コンテンツが避けるよう確保 */
    padding-bottom: calc(60px + 10px + env(safe-area-inset-bottom) + 12px);
  }

  /* Top Bar — Notch/Dynamic Island の Safe Area を確保 + sticky 維持 */
  .top-bar {
    padding-top: calc(14px + env(safe-area-inset-top));
  }

  /* Bottom Tab Bar — Liquid Glass Floating Pill */
  .tab-bar {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom) + 8px);
    height: 60px;
    padding: 0 6px;
    border: 0.5px solid rgba(255, 255, 255, 0.55);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.62);
    -webkit-backdrop-filter: saturate(180%) blur(28px);
    backdrop-filter: saturate(180%) blur(28px);
    box-shadow:
      0 12px 32px rgba(0, 0, 0, 0.10),
      0 2px 8px rgba(0, 0, 0, 0.04),
      inset 0 1px 0 rgba(255, 255, 255, 0.6);
    z-index: 50;
  }

  .tab-item {
    gap: 2px;
    padding: 8px 0 6px;
    font-size: 9.5px;
    color: var(--mist);
    transition: color 0.18s ease;
  }

  .tab-item__icon {
    width: 28px;
    height: 28px;
    border-radius: 14px;
    transition: background 0.18s ease, transform 0.18s ease;
  }

  .tab-item__icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.7;
  }

  .tab-item.is-active { color: var(--ink); }
  .tab-item.is-active .tab-item__icon {
    background: rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
  }

  /* Profile タブの avatar (実機モードでもサイズ統一) */
  .tab-item__avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08);
  }
  .tab-item__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .tab-item.is-active .tab-item__avatar { box-shadow: 0 0 0 1.5px var(--ink); }
}

/* ============ Journal: Petal Rings ============ */
.hero {
  position: relative;
  padding: 24px 20px 28px;
  overflow: hidden;
  background: var(--white);
}

.hero__aurora {
  position: absolute;
  top: -40px;
  right: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(232, 165, 181, 0.20) 0%,
    rgba(197, 176, 209, 0.12) 35%,
    rgba(127, 184, 212, 0.06) 60%,
    transparent 75%);
  filter: blur(20px);
  pointer-events: none;
  animation: aurora-breathe 8s ease-in-out infinite;
}

@keyframes aurora-breathe {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

.hero__greet {
  font-size: 12px;
  color: var(--stone);
  margin-bottom: 6px;
  position: relative;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.hero__name {
  font-size: 26px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.03em;
  position: relative;
  margin-bottom: 10px;
}

.hero__status {
  font-size: 12px;
  color: var(--stone);
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  font-weight: 400;
}

.hero__phase-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #E8A5B5, #7FB8D4);
  box-shadow: 0 0 8px rgba(232, 165, 181, 0.6);
}

/* Petal Ring wrapper */
.petal-card {
  padding: 12px 20px 28px;
  background: var(--white);
  position: relative;
}

.petal-ring {
  position: relative;
  width: 280px;
  height: 280px;
  margin: 0 auto 8px;
}

.petal-ring svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.petal-score {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

.petal-score__num {
  font-size: 54px;
  font-weight: 200;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.05em;
}

.petal-score__label {
  font-size: 10px;
  color: var(--mist);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-top: 6px;
  font-weight: 500;
}

.petal-legend {
  display: flex;
  justify-content: space-around;
  margin-top: 4px;
  padding: 0 12px;
}

.petal-legend__item {
  text-align: center;
}

.petal-legend__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: 0 auto 6px;
}

.petal-legend__label {
  font-size: 11px;
  color: var(--stone);
  font-weight: 500;
  margin-bottom: 2px;
  letter-spacing: -0.005em;
}

.petal-legend__value {
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ============ Journey Wave Chart ============ */
.section-h {
  padding: 16px 20px 8px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.section-h__title {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.section-h__meta {
  font-size: 11px;
  color: var(--mist);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.wave-chart {
  padding: 8px 0 20px;
  position: relative;
}

.wave-chart svg {
  width: 100%;
  height: 200px;
  display: block;
}

.wave-legend {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  margin-top: 8px;
  font-size: 10px;
  color: var(--mist);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.wave-events {
  padding: 8px 20px 20px;
}

.wave-event {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  font-size: 12px;
  color: var(--ink);
  border-top: 1px solid var(--border);
}

.wave-event:first-child { border-top: none; }

.wave-event__spark {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #E8A5B5, #7FB8D4);
  box-shadow: 0 0 8px rgba(232, 165, 181, 0.5);
  flex-shrink: 0;
}

.wave-event__date {
  color: var(--stone);
  font-weight: 500;
  min-width: 56px;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

.wave-event__text {
  flex: 1;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.005em;
}

/* ============ Skin Weather (light-radiated) ============ */
.weather {
  margin: 8px 20px 24px;
  padding: 22px;
  background: var(--white);
  border-radius: 20px;
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.weather__glow {
  position: absolute;
  top: -60px;
  left: -40px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(232, 165, 181, 0.18) 0%,
    rgba(127, 184, 212, 0.08) 40%,
    transparent 70%);
  filter: blur(24px);
  pointer-events: none;
}

.weather__label {
  font-size: 10px;
  color: var(--mist);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
  margin-bottom: 10px;
  position: relative;
}

.weather__phase {
  font-size: 24px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.03em;
  position: relative;
  margin-bottom: 4px;
}

.weather__phase-sub {
  font-size: 12px;
  color: var(--stone);
  position: relative;
  margin-bottom: 18px;
  font-weight: 400;
}

.weather__forecast {
  font-size: 12px;
  color: var(--ink);
  line-height: 1.6;
  position: relative;
  margin-bottom: 16px;
  font-weight: 400;
  letter-spacing: -0.005em;
}

.weather__forecast strong {
  font-weight: 500;
  color: var(--ink);
}

.weather__similar {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  font-size: 11px;
  color: var(--stone);
  font-weight: 500;
}

.weather__avatars {
  display: flex;
  align-items: center;
}

.weather__avatars .avatar-xs {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--white);
  margin-left: -6px;
  overflow: hidden;
  background: var(--chip);
}

.weather__avatars .avatar-xs:first-child { margin-left: 0; }

.weather__link {
  color: var(--ink);
  margin-left: auto;
  font-weight: 500;
}

/* ============ Profile Mini ============ */
.profile-mini {
  margin: 0 20px 20px;
  padding: 18px 20px;
  background: var(--porcelain);
  border-radius: 16px;
}

.profile-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}

.profile-row:last-child { border-bottom: none; }

.profile-row__label {
  color: var(--stone);
  font-weight: 400;
  letter-spacing: -0.005em;
}

.profile-row__value {
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.005em;
}

.update-mark {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #E8A5B5, #7FB8D4);
  box-shadow: 0 0 6px rgba(232, 165, 181, 0.5);
  margin-left: 6px;
  vertical-align: middle;
}

/* ============ Privacy footer ============ */
.privacy {
  margin: 0 20px 40px;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  border-top: 1px solid var(--border);
}

.privacy__text { color: var(--stone); font-weight: 400; }
.privacy__text strong { color: var(--ink); font-weight: 500; }
.privacy__link { color: var(--ink); font-weight: 500; }

/* ============================================================
 * v3: Logo TOP Bar (ShopMY style)
 * ============================================================ */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 12px;
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--border);
}

.top-bar__logo {
  height: 28px;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Phase 4: ロゴ → Home リンク化 (一般ページ用 / 2026-05-04) */
.top-bar__logo-link {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 28px;
  display: block;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.top-bar__logo-link .top-bar__logo {
  position: static;
  left: auto; top: auto;
  transform: none;
  pointer-events: auto;
  display: block;
  height: 100%;
}

.top-bar__icons {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.top-bar .icon-btn svg { width: 18px; height: 18px; stroke: var(--ink); }

/* Greet mini block below top bar */
.greet-block {
  padding: 18px 20px 10px;
  background: var(--white);
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.greet-block__content {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}

.greet-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--chip);
}

.greet-avatar svg,
.greet-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.greet-block__name {
  font-size: 19px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.025em;
  margin-bottom: 4px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.greet-block__handle {
  font-size: 13px;
  color: var(--stone);
  font-weight: 400;
  letter-spacing: -0.005em;
}

.greet-block__statement {
  font-size: 12px;
  color: var(--stone);
  letter-spacing: -0.005em;
  margin-bottom: 10px;
  font-weight: 400;
}

.if-actions {
  display: flex;
  gap: 8px;
  padding: 0 20px 20px;
  background: var(--white);
}

.if-actions .btn-primary,
.if-actions .btn-ghost {
  flex: 1;
}

.greet-block__meta {
  font-size: 12px;
  color: var(--stone);
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
}

.greet-block__phase-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #E8A5B5, #7FB8D4);
  box-shadow: 0 0 6px rgba(232, 165, 181, 0.5);
}

/* ============================================================
 * v3: Section Headers
 * ============================================================ */
.v3-sec {
  padding: 22px 20px 10px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.v3-sec__label {
  font-size: 10px;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
}

.v3-sec__meta {
  font-size: 11px;
  color: var(--mist);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.v3-sec__link {
  font-size: 11px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
}

/* Sort/toggle strip */
.strip-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px 14px;
}

.strip-toggle__select {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  padding: 4px 10px;
  background: var(--chip);
  border-radius: 999px;
  letter-spacing: -0.005em;
}

.strip-toggle__modes {
  display: flex;
  gap: 2px;
  background: var(--border);
  padding: 2px;
  border-radius: 999px;
}

.strip-toggle__mode {
  font-size: 11px;
  font-weight: 500;
  color: var(--stone);
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: -0.005em;
}

.strip-toggle__mode.is-active {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* ============================================================
 * v3: Dermal Record — 2-col grid
 * ============================================================ */
.record-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 10px;
  padding: 0 20px 8px;
}

.record-card {
  cursor: pointer;
}

.record-card__image {
  aspect-ratio: 1 / 1;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.record-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.record-card__image svg {
  width: 100%;
  height: 100%;
  display: block;
}

.record-card__category {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 8px;
  background: rgba(26, 26, 26, 0.82);
  color: var(--white);
  font-size: 9px;
  font-weight: 600;
  border-radius: 999px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.record-card__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.record-card__clinic {
  font-size: 11px;
  color: var(--stone);
  margin-bottom: 2px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.record-card__date {
  font-size: 10px;
  color: var(--mist);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Category-mode list */
.record-cat-list {
  padding: 0 20px 8px;
}

.record-cat {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  cursor: pointer;
}

.record-cat:first-child { border-top: none; }

.record-cat__thumb {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%);
  overflow: hidden;
  flex-shrink: 0;
  margin-right: 12px;
}

.record-cat__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.record-cat__info { flex: 1; min-width: 0; }

.record-cat__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.record-cat__sub {
  font-size: 11px;
  color: var(--stone);
  margin-top: 2px;
}

.record-cat__count {
  font-size: 16px;
  font-weight: 300;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.record-cat__count-label {
  font-size: 9px;
  color: var(--mist);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-left: 2px;
}

/* ============================================================
 * v3: HomeCare — 3 axis + 3-col grid
 * ============================================================ */
.axis-tabs {
  display: flex;
  gap: 6px;
  padding: 0 20px 12px;
}

.axis-tab {
  flex: 1;
  padding: 10px 0;
  text-align: center;
  background: var(--chip);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.axis-tab.is-active {
  background: var(--ink);
  color: var(--white);
}

.axis-tab.is-active .axis-tab__label { color: var(--white); }
.axis-tab.is-active .axis-tab__count { color: rgba(255,255,255,0.65); }

.axis-tab__icon {
  font-size: 16px;
  margin-bottom: 2px;
  line-height: 1;
}

.axis-tab__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.axis-tab__count {
  font-size: 10px;
  color: var(--mist);
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
  font-weight: 500;
}

/* SOS sub-chips */
.sos-subchips {
  display: flex;
  gap: 6px;
  padding: 0 20px 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.sos-subchips::-webkit-scrollbar { display: none; }

.sos-subchip {
  flex-shrink: 0;
  padding: 6px 12px;
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 12px;
  color: var(--stone);
  cursor: pointer;
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.sos-subchip.is-active {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

/* HomeCare 3-col product shelf */
.shelf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px 8px;
  padding: 0 20px 16px;
}

.shelf-item {
  cursor: pointer;
}

.shelf-item__image {
  aspect-ratio: 1 / 1;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 6px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shelf-item__image svg {
  width: 100%;
  height: 100%;
  display: block;
}

.shelf-item__image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.shelf-item__cat {
  font-size: 10px;
  color: var(--stone);
  letter-spacing: 0.03em;
  margin-bottom: 2px;
  font-weight: 500;
}

.shelf-item__brand {
  font-size: 11px;
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.005em;
}

/* ============================================================
 * v3: IFProfile — Tifuler detail
 * ============================================================ */
.if-hero {
  padding: 16px 20px 24px;
  background: var(--white);
  position: relative;
}

.if-hero__photo {
  width: 56%;
  aspect-ratio: 1 / 1;
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 18px;
  background: var(--chip);
}

.if-hero__photo svg { width: 100%; height: 100%; display: block; }
.if-hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.if-hero__name {
  font-size: 26px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}

.if-hero__statement {
  font-size: 13px;
  color: var(--stone);
  margin-bottom: 14px;
  letter-spacing: -0.005em;
}

.if-hero__meta {
  display: flex;
  gap: 20px;
  padding: 14px 0 16px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}

.if-hero__stat-num {
  font-size: 22px;
  font-weight: 300;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}

.if-hero__stat-label {
  font-size: 10px;
  color: var(--mist);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 6px;
  font-weight: 500;
}

.if-hero__actions {
  display: flex;
  gap: 8px;
}

.if-hero__actions .btn-primary,
.if-hero__actions .btn-ghost {
  flex: 1;
  padding: 12px 0;
}

/* IFProfile Tab */
.if-tabs {
  display: flex;
  gap: 0;
  padding: 0;
  border-bottom: 0.5px solid var(--border);
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 9;
}

.if-tab {
  flex: 1;
  padding: 14px 0 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--mist);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  letter-spacing: -0.005em;
  transition: color 0.2s, border-color 0.2s;
  text-align: center;
}

.if-tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* IFProfile content panels */
.if-panel { display: none; }
.if-panel.is-active { display: block; }

/* ============================================================
 * v4 EDITORIAL — T10-T13 準拠
 *   T10: カード境界全廃（border-radius/border/background枠を使わない）
 *   T11: 画像フルブリード or 大（4:5縦長でeditorial感）
 *   T12: タイポ階層のみで情報分離
 *   T13: 区切りは余白 or hairline のみ
 * ============================================================ */

/* Plan A: Journalistic Vertical Line — 左端の縦線で歴史の幹 */
.rec-a {
  position: relative;
  padding: 8px 20px 40px 44px;
}

.rec-a::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 12px;
  bottom: 12px;
  width: 0.5px;
  background: #D4D4D4;
}

.rec-a__year {
  font-size: 11px;
  font-weight: 500;
  color: var(--mist);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 18px;
  margin-left: -8px;
  position: relative;
  z-index: 1;
  background: var(--white);
  display: inline-block;
  padding-right: 12px;
  font-variant-numeric: tabular-nums;
}

.rec-a__item {
  position: relative;
  margin-bottom: 36px;
}

.rec-a__item:last-child { margin-bottom: 0; }

.rec-a__dot {
  position: absolute;
  left: -24px;
  top: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 3px var(--white);
}

.rec-a__date {
  font-size: 11px;
  color: var(--mist);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
  font-weight: 500;
}

.rec-a__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-bottom: 12px;
  overflow: hidden;
}

.rec-a__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rec-a__name {
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.rec-a__meta {
  font-size: 11px;
  color: var(--stone);
  letter-spacing: 0.02em;
  font-weight: 400;
}

.rec-a__meta-cat {
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 10px;
}

/* ============================================================
 * Plan B: Fashion Magazine Editorial — 画像フルブリード + 雑誌的タイポ
 * ============================================================ */
.rec-b {
  padding-bottom: 32px;
}

.rec-b__item {
  margin-bottom: 56px;
}

.rec-b__item:last-child { margin-bottom: 0; }

.rec-b__date-block {
  padding: 0 20px 18px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.rec-b__date {
  font-size: 22px;
  font-weight: 200;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.rec-b__cat {
  font-size: 10px;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
}

.rec-b__image {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%);
}

.rec-b__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 40px 20px;
  box-sizing: border-box;
}

.rec-b__caption {
  padding: 16px 20px 0;
}

.rec-b__name {
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.025em;
  margin-bottom: 4px;
}

.rec-b__clinic {
  font-size: 12px;
  color: var(--stone);
  letter-spacing: 0.02em;
  font-weight: 400;
}

.rec-b__note {
  font-size: 12px;
  color: var(--stone);
  line-height: 1.7;
  margin-top: 10px;
  font-weight: 400;
  letter-spacing: -0.005em;
  padding-top: 10px;
  border-top: 0.5px solid var(--border);
  max-width: 80%;
}

/* ============================================================
 * Plan C: Behance Case Study — 画像フル画面 × 大胆タイポ
 * ============================================================ */
.rec-c {
  padding-bottom: 32px;
}

.rec-c__item { margin-bottom: 48px; }

.rec-c__item:last-child { margin-bottom: 0; }

.rec-c__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #FFFFFF 0%, #F2F2F2 100%);
  overflow: hidden;
}

.rec-c__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 40px;
  box-sizing: border-box;
  display: block;
}

.rec-c__info {
  padding: 24px 20px 0;
}

.rec-c__no {
  font-size: 10px;
  color: var(--mist);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.18em;
  margin-bottom: 8px;
  font-weight: 500;
}

.rec-c__name {
  font-size: 28px;
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin-bottom: 12px;
}

.rec-c__meta {
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: var(--stone);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}

.rec-c__meta-label { color: var(--mist); }

/* ============================================================
 * Plan A+B Hybrid — A の歴史の幹 × B のエディトリアル組版
 * ============================================================ */
.rec-ab {
  position: relative;
  padding: 8px 0 40px;
}

.rec-ab::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 20px;
  bottom: 12px;
  width: 0.5px;
  background: #D4D4D4;
}

.rec-ab__year {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 28px 20px;
  background: var(--white);
  display: inline-block;
  padding-right: 12px;
  position: relative;
  z-index: 1;
  font-variant-numeric: tabular-nums;
}

.rec-ab__item {
  position: relative;
  padding-left: 44px;
  margin-bottom: 56px;
}

.rec-ab__item:last-child { margin-bottom: 0; }

.rec-ab__dot {
  position: absolute;
  left: 22px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 4px var(--white);
  z-index: 1;
}

.rec-ab__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-right: 20px;
  margin-bottom: 14px;
}

.rec-ab__date {
  font-size: 20px;
  font-weight: 200;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1;
}

.rec-ab__cat {
  font-size: 10px;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
}

.rec-ab__image {
  width: calc(100% - 20px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%);
}

.rec-ab__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 40px 20px;
  box-sizing: border-box;
  display: block;
}

.rec-ab__caption {
  padding: 14px 20px 0 0;
}

.rec-ab__name {
  font-size: 19px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.025em;
  margin-bottom: 3px;
}

.rec-ab__clinic {
  font-size: 12px;
  color: var(--stone);
  letter-spacing: 0.02em;
  font-weight: 400;
}

.rec-ab__note {
  font-size: 12px;
  color: var(--stone);
  line-height: 1.7;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 0.5px solid var(--border);
  font-weight: 400;
  letter-spacing: -0.005em;
  max-width: 90%;
}

/* ============================================================
 * v4 HomeCare Editorial — カード境界廃止
 * ============================================================ */

/* Axis tabs — editorial hairline underline, equal-width centered */
.axis-ed {
  display: flex;
  gap: 0;
  padding: 0;
  border-bottom: 0.5px solid var(--border);
  margin-bottom: 18px;
}

.axis-ed__tab {
  flex: 1;
  padding: 12px 0;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
}

.axis-ed__tab.is-active::after {
  content: "";
  position: absolute;
  bottom: -0.5px;
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--ink);
}

.axis-ed__name {
  font-size: 15px;
  font-weight: 500;
  color: var(--mist);
  letter-spacing: -0.015em;
  transition: color 0.2s;
}

.axis-ed__tab.is-active .axis-ed__name { color: var(--ink); }

.axis-ed__count {
  font-size: 10px;
  color: var(--mist);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* SOS sub chips — editorial underline style */
.sos-ed {
  display: flex;
  gap: 0;
  padding: 0 20px 18px;
  overflow-x: auto;
  scrollbar-width: none;
}
.sos-ed::-webkit-scrollbar { display: none; }

.sos-ed__chip {
  flex-shrink: 0;
  padding: 4px 0;
  margin-right: 20px;
  cursor: pointer;
  font-size: 12px;
  color: var(--mist);
  letter-spacing: 0.01em;
  font-weight: 500;
  white-space: nowrap;
  position: relative;
  transition: color 0.2s;
}

.sos-ed__chip.is-active { color: var(--ink); }

.sos-ed__chip.is-active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ink);
}

/* Shelf grid — editorial 2-col, no cards (Record と同じ編集強度) */
.shelf-ed {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 14px;
  padding: 4px 20px 32px;
}

.shelf-ed__item {
  cursor: pointer;
}

.shelf-ed__image {
  width: 100%;
  aspect-ratio: 4 / 5;
  margin-bottom: 14px;
  padding: 24px 18px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #FEFEFE 0%, #F4F4F4 100%);
}

.shelf-ed__image svg,
.shelf-ed__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.shelf-ed__cat {
  font-size: 10px;
  color: var(--ink);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 5px;
  font-weight: 600;
}

.shelf-ed__brand {
  font-size: 15px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin-bottom: 6px;
}

.shelf-ed__meta {
  font-size: 11px;
  color: var(--stone);
  letter-spacing: 0.02em;
  font-weight: 400;
  padding-top: 8px;
  border-top: 0.5px solid var(--border);
  font-variant-numeric: tabular-nums;
}

/* Section header — v4 editorial */
.sec-ed {
  padding: 32px 20px 18px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.sec-ed__label {
  font-size: 11px;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 600;
}

.sec-ed__meta {
  font-size: 11px;
  color: var(--mist);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.sec-ed__link {
  font-size: 11px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
}

/* Editorial strip toggle */
.strip-ed {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px 18px;
  flex-wrap: wrap;
  gap: 10px;
}

.strip-ed__ranges {
  display: flex;
  gap: 16px;
}

.strip-ed__range {
  font-size: 12px;
  font-weight: 500;
  color: var(--mist);
  cursor: pointer;
  letter-spacing: -0.005em;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.strip-ed__range.is-active {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.strip-ed__select {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  letter-spacing: -0.005em;
}

.strip-ed__modes {
  display: flex;
  gap: 22px;
  justify-content: center;
}

.strip-ed__mode {
  font-size: 11px;
  font-weight: 500;
  color: var(--mist);
  cursor: pointer;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.strip-ed__mode.is-active {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* === Editorial Record CLINIC list (D-3 / spec §4.4.1 α案: 外部遷移リンクのみ) === */
.rec-clinic-ed {
  padding: 18px 20px 24px;
}
.rec-clinic-ed__card {
  background: var(--white);
  border: 0.5px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 12px;
}
.rec-clinic-ed__card:last-child { margin-bottom: 0; }
.rec-clinic-ed__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.rec-clinic-ed__name {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.02em;
  min-width: 0;
  flex: 1;
}
.rec-clinic-ed__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: var(--ink);
  text-decoration: none;
  border: 0.5px solid var(--border);
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  letter-spacing: 0.02em;
  transition: background 0.2s;
}
.rec-clinic-ed__cta:hover { background: var(--paper); }
.rec-clinic-ed__cta-arrow {
  font-size: 11px;
  color: var(--mist);
}
.rec-clinic-ed__meta {
  font-size: 11px;
  color: var(--stone);
  margin-top: 6px;
  letter-spacing: 0.02em;
}
.rec-clinic-ed__procedures {
  font-size: 11.5px;
  color: var(--ink);
  margin-top: 10px;
  letter-spacing: 0.01em;
  line-height: 1.55;
}
.rec-clinic-ed__stats {
  font-size: 10.5px;
  color: var(--mist);
  margin-top: 8px;
  letter-spacing: 0.04em;
}

/* Editorial Record category list (for v4) */
.rec-cat-ed {
  padding: 0 20px 24px;
}

.rec-cat-ed__item {
  display: flex;
  align-items: center;
  padding: 14px 0;
  border-top: 0.5px solid var(--border);
  cursor: pointer;
}

.rec-cat-ed__item:first-child { border-top: none; }

.rec-cat-ed__thumb {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  margin-right: 16px;
  background: linear-gradient(180deg, #FDFDFD 0%, #F6F6F6 100%);
  padding: 6px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rec-cat-ed__thumb img { width: 100%; height: 100%; object-fit: contain; }

.rec-cat-ed__info { flex: 1; min-width: 0; }

.rec-cat-ed__name {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.015em;
}

.rec-cat-ed__sub {
  font-size: 11px;
  color: var(--stone);
  margin-top: 2px;
  letter-spacing: 0.02em;
}

.rec-cat-ed__count {
  font-size: 22px;
  font-weight: 200;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}

.rec-cat-ed__count-label {
  font-size: 9px;
  color: var(--mist);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 3px;
  font-weight: 500;
  text-align: right;
}

/* ============================================================
 * v4.1 Greet metrics (Hero block with auto-counts)
 * ============================================================ */
.greet-metrics {
  display: flex;
  gap: 6px;
  padding: 14px 20px 18px;
  border-top: 0.5px solid var(--border);
  background: var(--white);
  align-items: flex-end;
}

/* === Routine Panel (IFProfile / Journal 共通) === */
.routine-card {
  background: var(--white);
  border: 0.5px solid var(--border);
  border-radius: 12px;
  margin: 16px 20px 0;
  padding: 18px 18px 4px;
}
.routine-card:first-of-type { margin-top: 20px; }
.routine-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 0.5px solid var(--border);
}
.routine-card__label {
  font-weight: 600;
  letter-spacing: 0.1em;
  font-size: 13px;
}
.routine-card__meta {
  color: var(--stone);
  font-size: 10px;
  letter-spacing: 0.04em;
}
.routine-card__intro {
  font-size: 11px;
  color: var(--stone);
  padding: 10px 0 4px;
  line-height: 1.5;
}
.routine-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 0.25px solid var(--border);
}
.routine-step:last-child { border-bottom: none; }
.routine-step__num {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--stone);
  min-width: 20px;
  padding-top: 14px;
  letter-spacing: 0.04em;
}
.routine-step__image {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--paper);
}
.routine-step__image img { width: 100%; height: 100%; object-fit: cover; }
.routine-step__body { flex: 1; min-width: 0; padding-top: 2px; }
.routine-step__name {
  font-weight: 500;
  font-size: 13px;
  color: var(--ink);
}
.routine-step__note {
  font-size: 11px;
  color: var(--stone);
  margin-top: 3px;
  line-height: 1.4;
}
.routine-step__from {
  display: inline-block;
  font-size: 10px;
  color: #B47FF0;
  margin-top: 5px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* === SNS link strip (IFProfile / Journal 共通) === */
.if-social {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 4px 20px 18px;
  background: var(--white);
}
.if-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--ink);
  padding: 4px 0;
}
.if-social__link:hover .if-social__icon { opacity: 1; color: var(--ink); }
.if-social__icon {
  width: 22px;
  height: 22px;
  color: var(--ink);
  opacity: 0.92;
  transition: opacity 0.2s;
  flex-shrink: 0;
}

.greet-metric {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.greet-metric__num {
  font-size: 18px;
  font-weight: 300;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}

.greet-metric__label {
  font-size: 10px;
  color: var(--mist);
  letter-spacing: 0.04em;
  font-weight: 500;
  white-space: nowrap;
}

/* --- Center emphasis (D-2: Trust Score を Hero の主役として強調) --- */
.greet-metric--center .greet-metric__num {
  font-size: 26px;
  font-weight: 400;
  color: #5E6773;
  letter-spacing: -0.025em;
}
.greet-metric--center .greet-metric__label {
  color: #5E6773;
  font-weight: 600;
}

/* ============================================================
 * v4.1 Journal Tabs (Record / HomeCare / Journey)
 * ============================================================ */
.j-tabs {
  display: flex;
  gap: 0;
  padding: 0;
  background: var(--white);
  border-bottom: 0.5px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 9;
}

.j-tab {
  flex: 1;
  padding: 14px 0 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--mist);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  letter-spacing: -0.005em;
  transition: color 0.2s, border-color 0.2s;
  text-align: center;
}

.j-tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.j-panel { display: none; }
.j-panel.is-active { display: block; }

/* ============================================================
 * v4.1 Journey — Metrics Hero
 * ============================================================ */
.journey-metrics {
  padding: 28px 20px 32px;
  border-bottom: 0.5px solid var(--border);
  margin-bottom: 8px;
}

.journey-metrics__label {
  font-size: 10px;
  color: var(--mist);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 600;
  margin-bottom: 12px;
}

.journey-metrics__primary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 24px;
}

.journey-metrics__big {
  font-size: 54px;
  font-weight: 200;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.045em;
  line-height: 1;
}

.journey-metrics__suffix {
  font-size: 14px;
  color: var(--stone);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-right: 10px;
}

.journey-metrics__secondary {
  display: flex;
  gap: 40px;
}

.journey-metrics__sub {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.journey-metrics__num {
  font-size: 30px;
  font-weight: 200;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1;
}

.journey-metrics__sublabel {
  font-size: 10px;
  color: var(--mist);
  letter-spacing: 0.04em;
  font-weight: 500;
}

.journey-metrics__label {
  font-size: 11px;
  color: var(--mist);
  letter-spacing: 0.04em;
  font-weight: 600;
  margin-bottom: 12px;
}

/* ============================================================
 * v4.1 Procedure Calendar
 * ============================================================ */
.cal-wrap {
  padding: 8px 0 40px;
}

.cal-month {
  padding: 0 20px 28px;
}

.cal-month__header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 0 16px;
  border-bottom: 0.5px solid var(--border);
  margin-bottom: 8px;
}

.cal-month__year {
  font-size: 10px;
  color: var(--mist);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.18em;
  font-weight: 500;
}

.cal-month__name {
  font-size: 22px;
  font-weight: 300;
  color: var(--ink);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.cal-month__count {
  margin-left: auto;
  font-size: 10px;
  color: var(--mist);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.cal-weekday {
  text-align: center;
  font-size: 9px;
  color: var(--mist);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 4px 0 8px;
  font-weight: 600;
}

.cal-day {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--mist);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  position: relative;
  overflow: hidden;
}
a.cal-day {
  text-decoration: none;
  color: var(--mist);
  cursor: pointer;
}

.cal-day--empty {
  color: transparent;
}

.cal-day--today::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ink);
}

.cal-day--today .cal-day__num {
  color: var(--ink);
  font-weight: 600;
}

.cal-day--event {
  cursor: pointer;
}

.cal-day__num {
  z-index: 2;
  position: relative;
  pointer-events: none;
}

.cal-day__event {
  position: absolute;
  inset: 2px;
  background: linear-gradient(180deg, #FDFDFD 0%, #F4F4F4 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  z-index: 1;
}

.cal-day__event img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cal-day--event .cal-day__num {
  position: absolute;
  top: 1px;
  right: 2px;
  font-size: 8px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.9);
  padding: 0 3px;
  border-radius: 2px;
  font-weight: 600;
  z-index: 3;
  line-height: 1.3;
}

/* Calendar event detail (tap popup) */
.cal-detail {
  position: fixed;
  left: 50%;
  bottom: 80px;
  transform: translateX(-50%);
  width: 350px;
  max-width: 90vw;
  background: var(--white);
  padding: 20px 20px 18px;
  z-index: 100;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
}

.cal-detail.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(-4px);
}

.cal-detail__close {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 20px;
  color: var(--stone);
  cursor: pointer;
  line-height: 1;
}

.cal-detail__date {
  font-size: 11px;
  color: var(--mist);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.cal-detail__name {
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.025em;
  margin-bottom: 4px;
}

.cal-detail__meta {
  font-size: 12px;
  color: var(--stone);
  margin-bottom: 12px;
}

.cal-detail__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(180deg, #FDFDFD 0%, #F6F6F6 100%);
  padding: 30px;
  box-sizing: border-box;
  margin-top: 10px;
}

.cal-detail__image img { width: 100%; height: 100%; object-fit: contain; }

/* Plan header for comparison */
.plan-header {
  padding: 40px 20px 16px;
  border-top: 0.5px solid var(--border);
}

.plan-header:first-child { border-top: none; padding-top: 20px; }

.plan-header__tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: var(--mist);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.plan-header__title {
  font-size: 24px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.03em;
  margin-bottom: 6px;
}

.plan-header__desc {
  font-size: 12px;
  color: var(--stone);
  line-height: 1.6;
  font-weight: 400;
}

/* ============================================================
   CIRCLE v1 (Tier 2 — 2026-04-23)
   editorial 視覚言語 (hairline / uppercase / tabular) 踏襲
   ============================================================ */

/* --- Current Circle header (greet-block 変形) --- */
.circle-now {
  padding: 18px 20px 8px;
}

.circle-now__top {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}

.circle-now__name {
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.025em;
}

.circle-now__handle {
  font-size: 13px;
  color: var(--mist);
  font-weight: 400;
}

.circle-now__role {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink);
  border: 0.5px solid var(--ink);
  margin-left: auto;
}

.circle-now__statement {
  font-size: 13px;
  color: var(--stone);
  font-weight: 400;
  letter-spacing: -0.005em;
}

.circle-now__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 14px 20px 20px;
  border-bottom: 0.5px solid var(--border);
}

.circle-now__metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.circle-now__metric-num {
  font-size: 24px;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
}

.circle-now__metric-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--mist);
  font-weight: 500;
}

/* --- c-tabs (journal j-tabs と同スタイル) --- */
.c-tabs {
  display: flex;
  justify-content: space-around;
  padding: 0 12px;
  border-bottom: 0.5px solid var(--border);
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 5;
}

.c-tab {
  flex: 1;
  text-align: center;
  padding: 14px 0 13px;
  font-size: 12px;
  font-weight: 500;
  color: var(--mist);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1.5px solid transparent;
  cursor: pointer;
}

.c-tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.c-panel { display: none; padding: 0 20px; }
.c-panel.is-active { display: block; }

/* --- Feed panel --- */
.feed-rhythm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 18px;
  border-bottom: 0.5px solid var(--border);
}

.feed-rhythm__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--mist);
  font-weight: 500;
  margin-bottom: 4px;
}

.feed-rhythm__title {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.feed-rhythm__time {
  font-size: 11px;
  color: var(--stone);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.feed-rhythm__glow {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #E8A5B5, #7FB8D4);
  box-shadow: 0 0 10px rgba(232, 165, 181, 0.5), 0 0 16px rgba(127, 184, 212, 0.25);
}

.feed-theme {
  padding: 22px 0 18px;
  border-bottom: 0.5px solid var(--border);
}

.feed-theme__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--mist);
  font-weight: 500;
  margin-bottom: 6px;
}

.feed-theme__title {
  font-size: 20px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.feed-theme__desc {
  font-size: 12px;
  color: var(--stone);
  line-height: 1.6;
  font-weight: 400;
}

.feed-posts {
  padding: 8px 0 24px;
}

.feed-post {
  padding: 20px 0;
  border-bottom: 0.5px solid var(--border);
}

.feed-post:last-child { border-bottom: none; }

.feed-post__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.feed-post__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--chip);
  flex-shrink: 0;
}

.feed-post__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feed-post__avatar svg { width: 100%; height: 100%; display: block; }

.feed-post__who {
  flex: 1;
  min-width: 0;
}

.feed-post__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.feed-post__handle {
  font-size: 11px;
  color: var(--mist);
  font-variant-numeric: tabular-nums;
}

.feed-post__time {
  font-size: 10px;
  color: var(--mist);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.feed-post__body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.005em;
  margin-bottom: 10px;
}

.feed-post__image {
  width: 100%;
  aspect-ratio: 4/3;
  margin-bottom: 10px;
  overflow: hidden;
  background: var(--chip);
}

.feed-post__image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.feed-post__reply {
  margin-top: 10px;
  padding: 10px 0 0 14px;
  border-left: 0.5px solid var(--border-strong);
}

.feed-post__reply-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.feed-post__reply-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--chip);
}

.feed-post__reply-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.feed-post__reply-name {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink);
}

.feed-post__reply-tifuler {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink);
  padding: 1px 6px;
  border: 0.5px solid var(--ink);
}

.feed-post__reply-body {
  font-size: 12px;
  line-height: 1.7;
  color: var(--stone);
  font-weight: 400;
}

/* --- Cohort panel --- */
.cohort-section {
  padding: 20px 0 0;
}

.cohort-section__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--mist);
  font-weight: 500;
  padding-bottom: 8px;
  border-bottom: 0.5px solid var(--border);
  margin-bottom: 16px;
}

.cohort-item {
  display: flex;
  flex-direction: column;
  padding: 16px 0;
  border-bottom: 0.5px solid var(--border);
}

.cohort-item:last-child { border-bottom: none; }

.cohort-item__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.cohort-item__status {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 2px 7px;
  border: 0.5px solid var(--ink);
  color: var(--ink);
}

.cohort-item__status--live {
  background: var(--ink);
  color: var(--white);
}

.cohort-item__status--past {
  color: var(--mist);
  border-color: var(--mist);
}

.cohort-item__period {
  font-size: 10px;
  color: var(--mist);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.cohort-item__title {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin-bottom: 6px;
}

.cohort-item__meta {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--stone);
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}

.cohort-item__meta strong {
  color: var(--ink);
  font-weight: 500;
}

.cohort-item__progress {
  height: 2px;
  background: var(--border);
  position: relative;
  overflow: hidden;
}

.cohort-item__progress-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--ink);
}

/* --- Members panel --- */
.mem-section {
  padding: 20px 0 4px;
}

.mem-section__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--mist);
  font-weight: 500;
  padding-bottom: 8px;
  border-bottom: 0.5px solid var(--border);
  margin-bottom: 12px;
}

.mem-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 0.5px solid var(--border);
}

.mem-row:last-child { border-bottom: none; }

.mem-row__rank {
  font-size: 13px;
  font-weight: 400;
  color: var(--mist);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  width: 22px;
  flex-shrink: 0;
}

.mem-row__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--chip);
  flex-shrink: 0;
}

.mem-row__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mem-row__avatar svg { width: 100%; height: 100%; display: block; }

.mem-row__info { flex: 1; min-width: 0; }

.mem-row__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.mem-row__handle {
  font-size: 11px;
  color: var(--mist);
  font-variant-numeric: tabular-nums;
}

.mem-row__tifuler {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink);
  padding: 1px 6px;
  border: 0.5px solid var(--ink);
  margin-left: 6px;
}

.mem-row__score {
  text-align: right;
  flex-shrink: 0;
}

.mem-row__score-num {
  font-size: 22px;
  font-weight: 300;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
  display: block;
}

.mem-row__score-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--mist);
  font-weight: 500;
  margin-top: 2px;
}

.mem-avatars {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 4px 0 12px;
}

.mem-avatars__item {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--chip);
}

.mem-avatars__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mem-avatars__item svg { width: 100%; height: 100%; display: block; }

/* --- Glow Report panel --- */
.glow-next {
  padding: 22px 0 20px;
  border-bottom: 0.5px solid var(--border);
  margin-bottom: 4px;
}

.glow-next__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--mist);
  font-weight: 500;
  margin-bottom: 6px;
}

.glow-next__title {
  font-size: 18px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin-bottom: 8px;
}

.glow-next__countdown {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 8px;
}

.glow-next__countdown-num {
  font-size: 36px;
  font-weight: 200;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.03em;
}

.glow-next__countdown-suffix {
  font-size: 12px;
  color: var(--mist);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.glow-next__remind {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink);
  margin-top: 14px;
  padding-top: 10px;
  border-top: 0.5px solid var(--border);
  cursor: pointer;
}

.glow-archive-item {
  padding: 18px 0;
  border-bottom: 0.5px solid var(--border);
}

.glow-archive-item:last-child { border-bottom: none; }

.glow-archive-item__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}

.glow-archive-item__date {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--stone);
  letter-spacing: 0.04em;
}

.glow-archive-item__host {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--mist);
  font-weight: 500;
}

.glow-archive-item__ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.glow-archive-item__slot {
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--chip);
  position: relative;
}

.glow-archive-item__slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.glow-archive-item__slot svg { width: 100%; height: 100%; display: block; }

.glow-archive-item__slot::before {
  content: attr(data-label);
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--white);
  background: rgba(0, 0, 0, 0.45);
  padding: 2px 7px;
  font-weight: 500;
}

.glow-archive-item__caption {
  font-size: 12px;
  color: var(--stone);
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: -0.005em;
}

/* ============================================================
   TALK v1 (Tier 2 — 2026-04-23)
   editorial チャット UI — 角丸カード全廃、hairline、Sans
   ============================================================ */

/* --- t-tabs (c-tabs と同構造) --- */
.t-tabs {
  display: flex;
  justify-content: space-around;
  padding: 0 12px;
  border-bottom: 0.5px solid var(--border);
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 5;
}

.t-tab {
  flex: 1;
  text-align: center;
  padding: 14px 0 13px;
  font-size: 11px;
  font-weight: 500;
  color: var(--mist);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}

.t-tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.t-panel { display: none; padding: 0 20px; }
.t-panel.is-active { display: block; }

/* --- DM: Thread list --- */
.dm-list {
  padding: 4px 0 0;
  border-bottom: 0.5px solid var(--border);
  margin-bottom: 4px;
}

.dm-thread {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 0.5px solid var(--border);
  cursor: pointer;
  /* a 要素化対応 (Phase T-1) */
  text-decoration: none;
  color: inherit;
}

.dm-thread:last-child { border-bottom: none; }
.dm-thread.is-active { background: transparent; }
.dm-thread.is-active .dm-thread__name { font-weight: 500; }
.dm-thread.is-unread .dm-thread__name { font-weight: 600; }
.dm-thread.is-unread .dm-thread__excerpt { color: var(--ink); }

.dm-thread__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--chip);
  flex-shrink: 0;
}

.dm-thread__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dm-thread__avatar svg { width: 100%; height: 100%; display: block; }

.dm-thread__body { flex: 1; min-width: 0; }

.dm-thread__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dm-thread__tifuler {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink);
  padding: 1px 6px;
  border: 0.5px solid var(--ink);
  vertical-align: middle;
}

.dm-thread__excerpt {
  font-size: 12px;
  color: var(--stone);
  line-height: 1.5;
  font-weight: 400;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.005em;
}

.dm-thread__meta {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.dm-thread__time {
  font-size: 10px;
  color: var(--mist);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.dm-thread__unread {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, #E8A5B5, #7FB8D4);
  box-shadow: 0 0 6px rgba(232, 165, 181, 0.5);
}

/* --- DM: Active Thread --- */
.dm-active {
  padding: 14px 0 0;
}

.dm-active__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 0.5px solid var(--border);
}

.dm-active__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--chip);
  flex-shrink: 0;
}

.dm-active__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dm-active__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dm-active__handle {
  font-size: 11px;
  color: var(--mist);
  font-variant-numeric: tabular-nums;
}

.dm-active__status {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--mist);
  font-weight: 500;
  margin-top: 2px;
}

/* --- DM: Message bubbles (角丸ゼロ、editorial) --- */
.dm-msgs {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 0;
}

.dm-msg {
  max-width: 78%;
  font-size: 13px;
  line-height: 1.65;
  padding: 10px 12px;
  letter-spacing: -0.005em;
}

.dm-msg--recv {
  align-self: flex-start;
  background: var(--white);
  color: var(--ink);
  border: 0.5px solid var(--border-strong);
}

.dm-msg--sent {
  align-self: flex-end;
  background: var(--ink);
  color: var(--white);
}

.dm-msg__time {
  font-size: 10px;
  color: var(--mist);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

.dm-msg__time--sent { align-self: flex-end; }
.dm-msg__time--recv { align-self: flex-start; }

/* --- DM: Smart Q&A suggestion chips --- */
.dm-suggest {
  padding: 14px 0 12px;
  border-top: 0.5px solid var(--border);
}

.dm-suggest__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--mist);
  font-weight: 500;
  margin-bottom: 10px;
}

.dm-suggest__chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dm-suggest__chip {
  font-size: 11px;
  color: var(--ink);
  padding: 6px 10px;
  border: 0.5px solid var(--border-strong);
  letter-spacing: -0.005em;
  cursor: pointer;
}

.dm-suggest__chip:hover { border-color: var(--ink); }

/* --- DM: Input bar --- */
.dm-input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0 20px;
  border-top: 0.5px solid var(--border);
}

.dm-input__field {
  flex: 1;
  font-size: 13px;
  color: var(--ink);
  padding: 10px 12px;
  border: 0.5px solid var(--border-strong);
  background: var(--white);
  font-family: inherit;
  letter-spacing: -0.005em;
}

.dm-input__field::placeholder { color: var(--mist); }

.dm-input__send {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--white);
  background: var(--ink);
  padding: 10px 14px;
  font-weight: 500;
  cursor: pointer;
}

/* --- Smart Q&A --- */
.sqa-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 0 14px;
  border-bottom: 0.5px solid var(--border);
}

.sqa-head__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--chip);
  flex-shrink: 0;
  position: relative;
}

.sqa-head__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sqa-head__avatar::after {
  content: 'AI';
  position: absolute;
  right: -4px;
  bottom: -4px;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--white);
  background: var(--ink);
  padding: 2px 5px;
  line-height: 1;
}

.sqa-head__body { flex: 1; }

.sqa-head__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.sqa-head__meta {
  font-size: 10px;
  color: var(--mist);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-top: 2px;
  font-weight: 500;
}

.sqa-history {
  padding: 14px 0;
}

.sqa-history__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--mist);
  font-weight: 500;
  margin-bottom: 10px;
}

.sqa-history__item {
  padding: 12px 0;
  border-bottom: 0.5px solid var(--border);
  cursor: pointer;
}

.sqa-history__item:last-child { border-bottom: none; }

.sqa-history__q {
  font-size: 13px;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.5;
  margin-bottom: 4px;
}

.sqa-history__meta {
  display: flex;
  gap: 12px;
  font-size: 10px;
  color: var(--mist);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* --- Smart Q&A: Citations --- */
.sqa-cite {
  margin-top: 12px;
  padding: 10px 12px;
  border: 0.5px solid var(--border-strong);
  background: var(--porcelain);
}

.sqa-cite__label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--mist);
  font-weight: 500;
  margin-bottom: 8px;
}

.sqa-cite__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-top: 0.5px solid var(--border);
  font-size: 11px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.sqa-cite__item:first-of-type { border-top: none; padding-top: 0; }

.sqa-cite__src {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ink);
}

.sqa-cite__excerpt {
  flex: 1;
  color: var(--stone);
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Ask My Circle --- */
.ask-select {
  padding: 18px 0 8px;
}

.ask-select__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--mist);
  font-weight: 500;
  margin-bottom: 10px;
}

.ask-select__chips {
  display: flex;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 0.5px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}

.ask-select__chips::-webkit-scrollbar { display: none; }

.ask-select__chip {
  font-size: 13px;
  color: var(--mist);
  padding: 4px 0;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  font-weight: 400;
  letter-spacing: -0.005em;
}

.ask-select__chip.is-active {
  color: var(--ink);
  font-weight: 500;
}

.ask-select__chip.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: var(--ink);
}

.ask-compose {
  padding: 16px 0;
  border-bottom: 0.5px solid var(--border);
}

.ask-compose__field {
  width: 100%;
  font-size: 14px;
  color: var(--ink);
  padding: 12px 14px;
  border: 0.5px solid var(--border-strong);
  background: var(--white);
  font-family: inherit;
  letter-spacing: -0.005em;
  min-height: 88px;
  resize: vertical;
  line-height: 1.6;
}

.ask-compose__field::placeholder { color: var(--mist); }

.ask-compose__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}

.ask-compose__count {
  font-size: 10px;
  color: var(--mist);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.ask-compose__send {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--white);
  background: var(--ink);
  padding: 10px 16px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  font-family: inherit;
}

.ask-latest {
  padding: 18px 0 0;
}

.ask-latest__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--mist);
  font-weight: 500;
  margin-bottom: 10px;
}

.ask-latest__q {
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.6;
  letter-spacing: -0.01em;
  padding-bottom: 12px;
  border-bottom: 0.5px solid var(--border);
}

.ask-latest__qmeta {
  display: flex;
  gap: 12px;
  margin-top: 6px;
  font-size: 10px;
  color: var(--mist);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
}

.ask-answer {
  padding: 16px 0;
  border-bottom: 0.5px solid var(--border);
}

.ask-answer:last-child { border-bottom: none; }

.ask-answer__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.ask-answer__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--chip);
  flex-shrink: 0;
}

.ask-answer__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ask-answer__avatar svg { width: 100%; height: 100%; display: block; }

.ask-answer__who { flex: 1; min-width: 0; }

.ask-answer__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ask-answer__handle {
  font-size: 11px;
  color: var(--mist);
  font-variant-numeric: tabular-nums;
}

.ask-answer__trust {
  text-align: right;
  flex-shrink: 0;
}

.ask-answer__trust-num {
  font-size: 16px;
  font-weight: 300;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1;
  display: block;
}

.ask-answer__trust-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--mist);
  font-weight: 500;
  margin-top: 2px;
}

.ask-answer__body {
  font-size: 13px;
  line-height: 1.75;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.005em;
}

.ask-answer__time {
  font-size: 10px;
  color: var(--mist);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  margin-top: 8px;
}

/* ============================================================
   TIFULERS v3 (Tier 2 — 2026-04-23)
   editorial monochrome portrait × hairline strip × no-radius tile
   ============================================================ */

/* --- Hero (Tifulers ラベル + サブコピー) --- */
.tf-hero {
  padding: 20px 20px 6px;
  background: var(--white);
}
.tf-hero__label {
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.03em;
}
.tf-hero__sub {
  font-size: 13px;
  color: var(--stone);
  font-weight: 400;
  letter-spacing: -0.005em;
  margin-top: 4px;
}
.tf-hero__tagline {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
  margin-top: 10px;
  font-weight: 400;
  font-feature-settings: "tnum";
}

/* --- Metrics (3 列) --- */
.tf-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 14px 20px 18px;
  border-bottom: 0.5px solid var(--border);
  background: var(--white);
}
.tf-metrics--4 {
  grid-template-columns: repeat(4, 1fr);
  padding: 14px 16px 18px;
}
.tf-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.tf-metric__num {
  font-size: 22px;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
}
.tf-metric__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--mist);
  font-weight: 500;
}

/* --- Mode tabs (uppercase editorial, c-tabs と同構造) --- */
.tf-tabs {
  display: flex;
  padding: 0 12px;
  border-bottom: 0.5px solid var(--border);
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 5;
}
.tf-tab {
  flex: 1;
  text-align: center;
  padding: 14px 0 13px;
  font-size: 12px;
  font-weight: 500;
  color: var(--mist);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1.5px solid transparent;
  cursor: pointer;
}
.tf-tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.tf-panel { display: none; }
.tf-panel.is-active { display: block; }

/* --- Category strip (hairline underline) --- */
.tf-cat-strip {
  display: flex;
  gap: 18px;
  padding: 14px 20px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 0.5px solid var(--border);
  background: var(--white);
}
.tf-cat-strip::-webkit-scrollbar { display: none; }
.tf-cat {
  flex-shrink: 0;
  padding: 4px 0 8px;
  font-size: 12px;
  font-weight: 400;
  color: var(--mist);
  letter-spacing: -0.005em;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
}
.tf-cat.is-active {
  color: var(--ink);
  font-weight: 500;
}
.tf-cat.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--ink);
}

/* --- Discover masonry (editorial portrait tiles, border-radius 0) --- */
.tf-masonry {
  column-count: 2;
  column-gap: 10px;
  padding: 18px 20px 40px;
}
.tf-tile {
  break-inside: avoid;
  margin-bottom: 22px;
  cursor: pointer;
}
.tf-tile__image {
  width: 100%;
  overflow: hidden;
  background: var(--chip);
  display: block;
  filter: contrast(1.02);
}
.tf-tile__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.tf-tile__image[data-aspect="2:3"] { aspect-ratio: 2 / 3; }
.tf-tile__image[data-aspect="3:4"] { aspect-ratio: 3 / 4; }
.tf-tile__image[data-aspect="1:1"] { aspect-ratio: 1 / 1; }
.tf-tile__image[data-aspect="4:5"] { aspect-ratio: 4 / 5; }

.tf-tile__info {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 0 11px;
  border-bottom: 0.5px solid var(--border);
}
.tf-tile__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: linear-gradient(135deg, #E8A5B5, #7FB8D4);
  box-shadow: 0 0 5px rgba(232, 165, 181, 0.5);
  flex-shrink: 0;
}
.tf-tile__name {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.tf-tile__cat {
  font-size: 9px;
  color: var(--mist);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-left: 6px;
  font-weight: 500;
}
.tf-tile__score {
  font-size: 11px;
  color: var(--mist);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* --- My Circle: Circle switcher + trajectory (editorial portrait + wave) --- */
.tf-circle-strip {
  display: flex;
  gap: 18px;
  padding: 14px 20px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 0.5px solid var(--border);
  background: var(--white);
}
.tf-circle-strip::-webkit-scrollbar { display: none; }
.tf-circle-strip__chip {
  flex-shrink: 0;
  padding: 4px 0 8px;
  font-size: 12px;
  font-weight: 400;
  color: var(--mist);
  letter-spacing: -0.005em;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
}
.tf-circle-strip__chip.is-active {
  color: var(--ink);
  font-weight: 500;
}
.tf-circle-strip__chip.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--ink);
}
.tf-circle-strip__add {
  flex-shrink: 0;
  padding: 4px 0 8px;
  font-size: 12px;
  color: var(--mist);
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
}

.tf-circle-info {
  padding: 22px 20px 16px;
  border-bottom: 0.5px solid var(--border);
}
.tf-circle-info__name {
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.tf-circle-info__meta {
  font-size: 11px;
  color: var(--mist);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
}
.tf-circle-info__cta {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.tf-cta {
  flex: 1;
  padding: 10px 0;
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  letter-spacing: 0.14em;
  border: 0.5px solid var(--ink);
  color: var(--ink);
  background: var(--white);
  text-transform: uppercase;
}
.tf-cta--primary {
  background: var(--ink);
  color: var(--white);
}

.tf-traj {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  padding: 22px 20px;
  border-bottom: 0.5px solid var(--border);
  cursor: pointer;
}
.tf-traj__image {
  width: 96px;
  height: 120px;
  overflow: hidden;
  background: var(--chip);
}
.tf-traj__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tf-traj__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.tf-traj__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.tf-traj__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.tf-traj__handle {
  font-size: 11px;
  color: var(--mist);
  font-weight: 400;
}
.tf-traj__trust {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.tf-traj__statement {
  font-size: 12px;
  color: var(--stone);
  letter-spacing: -0.005em;
}
.tf-traj__wave {
  width: 100%;
  height: 34px;
}
.tf-traj__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 9px;
  color: var(--mist);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
}

/* --- Most Trusted --- */
.tf-trust-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 22px 20px 14px;
  border-bottom: 0.5px solid var(--border);
}
.tf-trust-head__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--mist);
  font-weight: 500;
}
.tf-trust-head__select {
  font-size: 13px;
  color: var(--ink);
  margin-left: auto;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
}
.tf-trust-row {
  display: grid;
  grid-template-columns: 28px 64px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 0.5px solid var(--border);
  cursor: pointer;
}
.tf-trust-row__rank {
  font-size: 14px;
  font-weight: 300;
  color: var(--mist);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.tf-trust-row__image {
  width: 64px;
  height: 64px;
  overflow: hidden;
  background: var(--chip);
}
.tf-trust-row__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tf-trust-row__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.tf-trust-row__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.tf-trust-row__handle {
  font-size: 11px;
  color: var(--mist);
  margin-left: 6px;
  font-weight: 400;
}
.tf-trust-row__tags {
  font-size: 9px;
  color: var(--mist);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
}
.tf-trust-row__score {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tf-trust-row__score-num {
  font-size: 18px;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
}
.tf-trust-row__score-label {
  font-size: 9px;
  color: var(--mist);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 500;
  margin-top: 4px;
}

/* D-7: Tier name + mark in name row (Most Trusted ranking only) */
.tf-trust-row__name .tf-mark {
  width: 12px;
  height: 12px;
  margin-left: 6px;
  vertical-align: middle;
}
.tf-trust-row__tier {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5E6773;
  margin-left: 4px;
  vertical-align: middle;
}

.tf-foot-note {
  padding: 28px 20px 40px;
  text-align: center;
  font-size: 11px;
  color: var(--mist);
  line-height: 1.8;
  letter-spacing: -0.005em;
}

/* ============================================================
   CARE v1 (Tier 2 — 2026-04-23)
   Routines / Cosme / Clinic — editorial rows, hairline-only
   ============================================================ */

/* --- Care section header (editorial uppercase) --- */
.care-sec {
  padding: 22px 20px 12px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 0.5px solid var(--border);
  background: var(--white);
}
.care-sec__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--mist);
  font-weight: 600;
}
.care-sec__sub {
  font-size: 11px;
  color: var(--mist);
  letter-spacing: -0.005em;
  font-weight: 400;
  text-transform: none;
}

/* --- Care row (routine / cosme) --- */
.care-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 0.5px solid var(--border);
  cursor: pointer;
}
.care-row__image {
  width: 64px;
  height: 80px;
  overflow: hidden;
  background: var(--chip);
}
.care-row__image img,
.care-row__image svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.care-row--square .care-row__image {
  height: 64px;
}
.care-row__body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.care-row__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.care-row__by {
  font-size: 11px;
  color: var(--mist);
  font-weight: 400;
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.care-row__steps {
  font-size: 11px;
  color: var(--stone);
  letter-spacing: -0.005em;
  line-height: 1.55;
}
.care-row__meta {
  display: flex;
  gap: 12px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--mist);
  font-weight: 500;
}
.care-row__cta {
  padding: 8px 12px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 0.5px solid var(--ink);
  color: var(--ink);
  background: var(--white);
  cursor: pointer;
  white-space: nowrap;
}
.care-row__cta--primary {
  background: var(--ink);
  color: var(--white);
}
.care-row__cta--running {
  background: var(--white);
  color: var(--mist);
  border-color: var(--border-strong);
  cursor: default;
}

/* --- Ingredient lab list (hairline) --- */
.care-ing {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 0.5px solid var(--border);
}
.care-ing__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.care-ing__note {
  font-size: 10px;
  color: var(--mist);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
}
.care-ing__reaction {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.care-ing__reaction--pos { color: var(--ink); }
.care-ing__reaction--neg { color: var(--mist); }

/* --- Clinic row --- */
.care-clinic {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 0.5px solid var(--border);
  cursor: pointer;
}
.care-clinic__badge {
  width: 56px;
  height: 56px;
  background: var(--chip);
  border: 0.5px solid var(--border-strong);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
.care-clinic__badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.care-clinic__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.care-clinic__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.care-clinic__name-arrow {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  color: var(--mist);
  vertical-align: middle;
  font-weight: 400;
}
.care-clinic__meta {
  font-size: 11px;
  color: var(--stone);
  letter-spacing: -0.005em;
}
.care-clinic__tags {
  font-size: 9px;
  color: var(--mist);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
}
.care-clinic__rating {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.care-clinic__score {
  font-size: 15px;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
}
.care-clinic__score-label {
  font-size: 9px;
  color: var(--mist);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 500;
}

/* --- Area search summary row --- */
.care-area {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 0.5px solid var(--border);
}
.care-area__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--mist);
  font-weight: 600;
}
.care-area__value {
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.care-area__change {
  margin-left: auto;
  font-size: 10px;
  color: var(--mist);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  cursor: pointer;
  font-weight: 500;
}

/* ==========================================================================
   Detail Screens (DermaL Detail / HomeCare Detail) — Phase 3
   spec: Tiful_v4_DetailScreens_Spec_v1.md
   ========================================================================== */

/* === Detail owner row (Tifuler header in detail screen) === */
.detail-owner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: var(--white);
  border-bottom: 0.5px solid var(--border);
  text-decoration: none;
  color: var(--ink);
}
.detail-owner__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.detail-owner__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.detail-owner__name {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.detail-owner__handle {
  font-size: 11px;
  color: var(--stone);
  margin-left: 4px;
}
.detail-owner__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  border: 0.5px solid var(--ink);
  padding: 2px 6px;
  margin-left: 6px;
  font-weight: 500;
  vertical-align: middle;
}
.detail-owner__badge--compass {
  border-color: #5E6773;
  color: #5E6773;
}

/* === Detail SNS card (the heart of the screen) === */
.detail-sns-card {
  position: relative;
  display: block;
  width: 100%;
  background: var(--white);
  border-bottom: 0.5px solid var(--border);
  text-decoration: none;
  color: var(--ink);
}
.detail-sns-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--chip);
}
.detail-sns-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.detail-sns-card__platform {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.5px solid var(--border);
}
.detail-sns-card__platform svg {
  width: 16px;
  height: 16px;
  color: var(--ink);
}
.detail-sns-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--paper);
  border-top: 0.5px solid var(--border);
}
.detail-sns-card__cta strong {
  font-weight: 500;
}
.detail-sns-card__cta-arrow {
  font-size: 14px;
  color: var(--stone);
}

/* === Detail meta block (uppercase label + value pairs) === */
.detail-meta-block {
  padding: 18px 20px;
  border-bottom: 0.5px solid var(--border);
  background: var(--white);
}
.detail-meta-block__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--stone);
  font-weight: 500;
  margin-bottom: 6px;
}
.detail-meta-block__title {
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.35;
}
.detail-meta-block__sub {
  font-size: 12px;
  color: var(--stone);
  margin-top: 4px;
}

/* Layout with thumbnail (machine/product image next to title) */
.detail-meta-block__layout {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: flex-start;
}
.detail-meta-block__thumb {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  background: var(--chip);
  overflow: hidden;
  border: 0.5px solid var(--border);
}
.detail-meta-block__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.detail-meta-block__layout-body {
  min-width: 0;
}

.detail-meta-block__body {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.65;
  font-weight: 400;
}
.detail-meta-block__body ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.detail-meta-block__body ul li {
  padding: 4px 0;
  border-bottom: 0.5px dashed var(--border);
  font-size: 13px;
}
.detail-meta-block__body ul li:last-child {
  border-bottom: none;
}
.detail-meta-block__link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 0.5px solid var(--ink);
  padding-bottom: 1px;
}
.detail-meta-block__link-arrow {
  display: inline-block;
  margin-left: 8px;
  font-size: 13px;
  color: var(--stone);
  font-weight: 400;
  letter-spacing: 0;
  border-bottom: none;
}

/* === Product row (HomeCare detail) === */
.detail-product-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 16px;
  padding: 18px 20px;
  background: var(--white);
  border-bottom: 0.5px solid var(--border);
  align-items: center;
}
.detail-product-row__image {
  width: 80px;
  height: 80px;
  background: var(--chip);
  border: 0.5px solid var(--border);
  overflow: hidden;
}
.detail-product-row__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.detail-product-row__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.detail-product-row__price {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.detail-product-row__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--white);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 500;
  align-self: flex-start;
}

/* === Tifuler note (italic-ish quote style) === */
.detail-note {
  padding: 18px 20px;
  background: var(--paper);
  border-bottom: 0.5px solid var(--border);
}
.detail-note__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--stone);
  font-weight: 500;
  margin-bottom: 8px;
}
.detail-note__body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
  font-weight: 400;
}

/* === Related (horizontal scroll) === */
.detail-related {
  padding: 18px 0 22px;
  background: var(--white);
}
.detail-related__head {
  padding: 0 20px 12px;
}
.detail-related__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--stone);
  font-weight: 500;
}
.detail-related__sub {
  font-size: 11px;
  color: var(--mist);
  margin-top: 2px;
}
.detail-related__rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 0 20px;
  scrollbar-width: none;
}
.detail-related__rail::-webkit-scrollbar {
  display: none;
}
.detail-related__card {
  flex: 0 0 auto;
  width: 140px;
  text-decoration: none;
  color: var(--ink);
}
.detail-related__card-image {
  width: 140px;
  height: 175px;
  background: var(--chip);
  border: 0.5px solid var(--border);
  overflow: hidden;
}
.detail-related__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.detail-related__card-name {
  font-size: 12px;
  font-weight: 500;
  margin-top: 8px;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.detail-related__card-meta {
  font-size: 10px;
  color: var(--stone);
  margin-top: 2px;
  letter-spacing: 0.04em;
}

/* Tap-to-detail anchor wrappers (a inside .rec-ab__image / .shelf-ed__image) */
.rec-ab__image-a,
.shelf-ed__image-a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* ==========================================================================
   Tifuler Badge + Tier Mark (Phase 4 — Trust Score / Tier)
   spec: Tiful_v4_TrustScoreTier_Spec_v1.md
   ========================================================================== */

/* Tifuler text + mark pair — SNS公式バッジ順 (text then mark, right) */
.tf-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
  padding: 2px 6px;
  border: 0.5px solid var(--ink);
  vertical-align: middle;
}
.tf-badge--compass {
  border-color: #5E6773;
  color: #5E6773;
}

.tf-mark {
  display: inline-block;
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  vertical-align: middle;
}

/* 4-Tier color tokens */
.tf-mark--seeker    { color: #9B6A3B; } /* Bronze */
.tf-mark--guide     { color: #8E949B; } /* Silver */
.tf-mark--navigator { color: #B8923E; } /* Gold */
.tf-mark--compass   { color: #5E6773; } /* Platinum */

/* Tifuler-name color tint (Compass only — per spec §4.2) */
.tf-name--compass { color: #5E6773; }

/* ============================================================
   Phase 5e: Tier 名インラインラベル (spec §4.7.5 マトリクス対応)
   IFProfile Hero / Most Trusted では Tier 名表示が許可される
   ============================================================ */
.tf-tier-name {
  display: inline-block;
  margin-left: 6px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
  opacity: 0.85;
}
.tf-tier-name--seeker    { color: #9B6A3B; }
.tf-tier-name--guide     { color: #8E949B; }
.tf-tier-name--navigator { color: #B8923E; }
.tf-tier-name--compass   { color: #5E6773; }

/* ============================================================
   Phase 5e r2: IFProfile Hero avatar 直下 Trusted 配置
   アクション量実績 (greet-metrics) と性質分離 — 累計信頼指標の独立配置
   ============================================================ */
.greet-avatar-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.greet-avatar-trusted {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  margin-top: 2px;
}
.greet-avatar-trusted__num {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #5E6773;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1;
}
.greet-avatar-trusted__label {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  color: #5E6773;
  letter-spacing: 0.14em;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1;
}

/* ============================================================
   Phase 5e: Tifulers tile に Trusted 累計 + Tier マーク追加
   spec §4.7.5: コンパススコア❌ / Trusted✅ / Tier名❌ / マーク✅
   ============================================================ */
.tf-tile__trusted {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-left: auto;
}
.tf-tile__trusted .tf-mark {
  width: 9px;
  height: 9px;
}

/* ============================================================
   D-5: Circle 3 種別 + 課金 3層 + FAB 拡張 (spec §4.9 改定)
   ============================================================ */

/* --- Circle 種別 バッジ (Header 内) --- */
.circle-now__type {
  display: inline-block;
  padding: 2px 8px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-right: 6px;
  border-radius: 0;
}
.circle-now__type--official {
  background: var(--ink);
  color: var(--white);
}
.circle-now__type--tifuler {
  background: #5E6773;
  color: var(--white);
}
.circle-now__type--peer {
  background: var(--paper-2, #ebe7df);
  color: var(--ink);
  border: 0.5px solid var(--ink);
}

/* --- Feed 上部 paywall インジケータ (Tifuler Circle 用) --- */
.feed-paywall-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px 11px;
  margin: 0 -20px 14px;
  background: var(--paper, #f5f2ec);
  border-bottom: 0.5px solid var(--border);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
}
.feed-paywall-bar__free {
  font-weight: 500;
  color: var(--ink);
}
.feed-paywall-bar__upgrade {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* --- post 課金ゲート バッジ --- */
.feed-post__gate {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  margin-bottom: 8px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border-radius: 0;
}
.feed-post__gate--free {
  background: transparent;
  color: var(--mist);
  border: 0.5px solid var(--mist);
}
.feed-post__gate--sub {
  background: #5E6773;
  color: var(--white);
}
.feed-post__gate--premium {
  background: var(--ink);
  color: var(--white);
}

/* --- Premium veil (本文 blur + CTA) --- */
.feed-post--premium .feed-post__body {
  position: relative;
  filter: blur(4px);
  user-select: none;
  pointer-events: none;
  max-height: 60px;
  overflow: hidden;
}
.feed-post__premium-veil {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 16px;
  margin-top: 10px;
  background: var(--paper, #f5f2ec);
  border: 0.5px solid var(--border);
  text-align: center;
  gap: 8px;
}
.feed-post__premium-veil__lock {
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.feed-post__premium-veil__price {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.feed-post__premium-veil__cta {
  display: inline-block;
  padding: 8px 18px;
  background: var(--ink);
  color: var(--white);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 4px;
}

/* --- FAB 拡張 (Circle 作成専用 / 1人1Circle 表示 + サブテキスト) --- */
.fab--circle {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  width: auto;
  height: auto;
  padding: 0;
  background: transparent;
  border: none;
  bottom: 84px;
  right: 16px;
  position: fixed;
  z-index: 30;
}
.fab--circle__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--white);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  border-radius: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.fab--circle__btn-plus {
  font-size: 16px;
  font-weight: 300;
  line-height: 1;
}
.fab--circle__quota {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.1em;
  opacity: 0.7;
  margin-left: 4px;
  padding-left: 8px;
  border-left: 0.5px solid rgba(255, 255, 255, 0.4);
}
.fab--circle__hint {
  display: block;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
  background: rgba(245, 242, 236, 0.96);
  padding: 4px 10px;
  border: 0.5px solid var(--border);
  text-align: right;
  /* D-6: 常時表示 → hover/focus-within のみ表示 (preview 視認性 + 実機の控えめ感) */
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}
.fab--circle:hover .fab--circle__hint,
.fab--circle:focus-within .fab--circle__hint {
  opacity: 1;
  transform: translateY(0);
}

/* --- 重複ガイド (Circle 開設フロー想定の注釈ブロック) --- */
.circle-dup-hint {
  margin: 0 20px 16px;
  padding: 12px 14px;
  border: 0.5px dashed var(--mist);
  font-size: 11px;
  line-height: 1.6;
  color: var(--stone);
  letter-spacing: 0.005em;
}
.circle-dup-hint__label {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink);
  margin-bottom: 4px;
}

/* --- PEER Circle 用追加スタイル (心理的安全地帯トーン) --- */
.peer-callout {
  margin: 0 20px 18px;
  padding: 14px 16px;
  background: var(--paper, #f5f2ec);
  border-left: 2px solid var(--ink);
  font-size: 12px;
  line-height: 1.7;
  color: var(--stone);
  letter-spacing: 0.005em;
}
.peer-callout__label {
  display: block;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink);
  margin-bottom: 6px;
}

/* --- post: PEER 投稿用 (匿名・施術日付き) --- */
.feed-post__pseudonym {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.feed-post__phase {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--mist);
  font-weight: 500;
  margin-left: 8px;
}

/* ============================================================
   Phase 5 (c) — My Studio (Section B: Trust Score & Tier)
   spec §4.7.5 / §4.7.6 / D-7 #41 / Phase 5c BEST WF
   設計原則: ECD = シンプル × 美しい × 圧倒的な生活者視点
   表示哲学: 数値 + Tier名 + マーク + アクション項目情報 + 行動ヒント
   非開示:   7カテゴリの重み / カテゴリ別現在スコア (gamification 防止)
   ============================================================ */

/* --- Section frame --- */
.ms-section {
  background: var(--white);
  padding-bottom: 32px;
}

.ms-section__heading {
  padding: 28px 24px 14px;
  border-top: 1px solid var(--border);
}
.ms-section__heading-main {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  font-family: 'Inter', sans-serif;
}
.ms-section__heading-sub {
  font-size: 12px;
  font-weight: 400;
  color: var(--mist);
  letter-spacing: 0.02em;
  margin-top: 4px;
  font-family: 'Noto Sans JP', sans-serif;
}

/* --- ① Hero (Compass mark + name + Tier + Score) --- */
.ms-hero {
  text-align: center;
  padding: 36px 20px 28px;
}

/* Portrait + Compass バッジ重ね (SNS公式バッジ準拠 / 2026-04-26 Yutaroフィードバック反映) */
.ms-hero__portrait-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 18px;
}
.ms-hero__portrait {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: var(--porcelain);
}
.ms-hero__badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 28px;
  height: 28px;
  background: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5E6773;  /* Compass プラチナ (Tier色は本人 Tier に応じてサーバ側で決定) */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.ms-hero__badge .tf-mark {
  width: 16px;
  height: 16px;
}

.ms-hero__name {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 4px;
}

.ms-hero__handle {
  font-size: 12px;
  color: var(--mist);
  letter-spacing: 0;
  margin-bottom: 18px;
}

.ms-hero__meta {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: #5E6773;
}
.ms-hero__tier {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.ms-hero__dot {
  font-size: 11px;
  color: var(--fog);
}
.ms-hero__score {
  font-family: 'Inter', sans-serif;
  font-weight: 200;
  font-size: 32px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* --- ② Maintenance status (K1: GO型 維持表示) --- */
.ms-keep {
  padding: 18px 24px 22px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.ms-keep__row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ms-keep__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist);
}

.ms-keep__status {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink);
}
.ms-keep__status--stable {
  color: #5E6773;  /* Compass プラチナ・安定状態 */
}
.ms-keep__status--warning {
  color: var(--ink);  /* 緩衝期間表示時 (例: "残り 14 日") */
}

.ms-keep__spark {
  flex: 1;
  height: 32px;
  color: var(--fog);
  margin-left: auto;
  max-width: 160px;
  overflow: visible;
}

.ms-keep__caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  color: var(--mist);
  margin-top: 10px;
  letter-spacing: 0;
  gap: 12px;
}
.ms-keep__threshold {
  color: var(--stone);
  font-variant-numeric: tabular-nums;
}
.ms-keep__current {
  color: #5E6773;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- ③ 7 Categories (動詞 + 英名 + 説明 + Howto) --- */
.ms-cats {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ms-cat {
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
}
.ms-cat:last-child {
  border-bottom: none;
}

.ms-cat__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.ms-cat__verb {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  font-family: 'Noto Sans JP', sans-serif;
}

.ms-cat__name {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--mist);
  font-family: 'Inter', sans-serif;
  white-space: nowrap;
}

.ms-cat__desc {
  font-size: 13px;
  color: var(--stone);
  line-height: 1.55;
  margin-bottom: 6px;
}

.ms-cat__howto {
  font-size: 12px;
  color: var(--ink);
  line-height: 1.55;
  letter-spacing: -0.005em;
}

.ms-cat__arrow {
  color: var(--fog);
  margin-right: 4px;
  font-weight: 400;
}

/* --- ④ Guide mantra (Phase 0: 静的 / Phase 1+: AI 動的) --- */
.ms-guide {
  padding: 32px 24px 24px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.ms-guide__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: 14px;
}

.ms-guide__mantra {
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.7;
  letter-spacing: 0.02em;
  font-family: 'Noto Sans JP', sans-serif;
}

/* ============================================================
   Phase 0 差分 (my_studio_v1_phase0.html 専用)
   spec §4.7.3.1 / §4.7.6 「現在地」差分
   ============================================================ */

/* Hero: Tier色を Seeker (Bronze) で上書き */
.ms-hero__meta--seeker {
  color: #9B6A3B;  /* Seeker Bronze */
}

/* 維持セクションの Phase 0 バリアント (sparkline なし) */
.ms-keep--phase0 .ms-keep__row {
  align-items: baseline;
}
.ms-keep--phase0 .ms-keep__status {
  color: var(--stone);
  font-weight: 400;
  flex: 1;
}
.ms-keep__caption--single {
  display: block;
  text-align: left;
}

/* カテゴリ Locked 状態 (Phase 1/2 解放待ち) */
.ms-cat--locked .ms-cat__verb,
.ms-cat--locked .ms-cat__name,
.ms-cat--locked .ms-cat__desc {
  color: var(--mist);
}
.ms-cat--locked .ms-cat__verb {
  font-weight: 500;
}

.ms-cat__locked-label {
  font-size: 11px;
  color: var(--mist);
  letter-spacing: 0.02em;
  padding: 4px 8px;
  display: inline-block;
  border: 0.5px solid var(--border-strong);
  background: var(--porcelain);
  margin-top: 2px;
}

/* カテゴリ Active タグ (Phase 0 で稼働中の Continuity / Content Quality に付与) */
.ms-cat__active-tag {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ink);
  padding: 2px 6px;
  border: 0.5px solid var(--ink);
  margin-left: 8px;
  align-self: center;
}

/* ============================================================
   Phase 5c — My Studio v2 (ShopMy トンマナ刷新)
   spec §4.7.6 / 2026-04-26 Yutaro デザインジャッジ JP1〜JP7 反映
   ============================================================
   namespace: .ms2-* (v1 と独立 / 退行リスクなし)
   構造: Hero card + Achievement (Tier色グラデ背景) + 7 Tips 折りたたみ + A/C カード + Guide
   Tier別グラデ: .ms2--seeker / --guide / --navigator / --compass
   ============================================================ */

/* --- Frame override (背景は ms2-bg レイヤーが描く) --- */
.app-frame.ms2 {
  background: #1A1A1A;  /* fallback / グラデ未対応時 */
  position: relative;
  overflow-x: hidden;
}

/* ============================================================
   Tier 別 グラデ背景 (Hero+Achievement エリアまで占有)
   ============================================================ */
.ms2-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 720px;       /* Hero card + Achievement までフルカバー */
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

/* Compass = プラチナ (最高位 / 5 stop メタリックグラデ + 強glow + 斜めハイライト) */
.ms2--compass .ms2-bg {
  background:
    /* 斜めメタリックハイライト (subtle) */
    linear-gradient(135deg,
      rgba(232, 238, 246, 0.20) 0%,
      rgba(232, 238, 246, 0) 28%,
      rgba(232, 238, 246, 0) 72%,
      rgba(232, 238, 246, 0.10) 100%),
    /* 主グラデ 5 stop (上:明るいプラチナ → 下:深い青灰) */
    linear-gradient(180deg,
      #9AA4B0 0%,
      #76808C 22%,
      #525B66 50%,
      #3A434E 78%,
      #262E37 100%);
}
.ms2--compass .ms2-bg__glow--1 {
  position: absolute;
  top: -140px;
  right: -120px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(232, 238, 246, 0.75), rgba(232, 238, 246, 0) 60%);
  filter: blur(50px);
}
.ms2--compass .ms2-bg__glow--2 {
  position: absolute;
  top: 220px;
  left: -140px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(195, 204, 218, 0.65), rgba(195, 204, 218, 0) 65%);
  filter: blur(60px);
}
.ms2--compass .ms2-bg__glow--3 {
  position: absolute;
  top: 480px;
  right: -100px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(160, 170, 185, 0.5), rgba(160, 170, 185, 0) 65%);
  filter: blur(50px);
}

/* Seeker = ブロンズ (出発点 / 5 stop + 強glow + 斜めハイライト) */
.ms2--seeker .ms2-bg {
  background:
    linear-gradient(135deg,
      rgba(248, 220, 188, 0.18) 0%,
      rgba(248, 220, 188, 0) 28%,
      rgba(248, 220, 188, 0) 72%,
      rgba(248, 220, 188, 0.08) 100%),
    linear-gradient(180deg,
      #B68855 0%,
      #966740 22%,
      #6F4A2C 50%,
      #503320 78%,
      #382216 100%);
}
.ms2--seeker .ms2-bg__glow--1 {
  position: absolute;
  top: -140px;
  right: -120px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(238, 200, 158, 0.7), rgba(238, 200, 158, 0) 60%);
  filter: blur(50px);
}
.ms2--seeker .ms2-bg__glow--2 {
  position: absolute;
  top: 220px;
  left: -140px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(204, 152, 102, 0.6), rgba(204, 152, 102, 0) 65%);
  filter: blur(60px);
}
.ms2--seeker .ms2-bg__glow--3 {
  position: absolute;
  top: 480px;
  right: -100px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(170, 120, 75, 0.5), rgba(170, 120, 75, 0) 65%);
  filter: blur(50px);
}

/* Guide = シルバー (5 stop + 強glow + 斜めハイライト) */
.ms2--guide .ms2-bg {
  background:
    linear-gradient(135deg,
      rgba(228, 232, 237, 0.18) 0%,
      rgba(228, 232, 237, 0) 28%,
      rgba(228, 232, 237, 0) 72%,
      rgba(228, 232, 237, 0.08) 100%),
    linear-gradient(180deg,
      #B4BAC0 0%,
      #8E949B 22%,
      #6A707A 50%,
      #4D525B 78%,
      #353941 100%);
}
.ms2--guide .ms2-bg__glow--1,
.ms2--guide .ms2-bg__glow--2,
.ms2--guide .ms2-bg__glow--3 {
  position: absolute;
}
.ms2--guide .ms2-bg__glow--1 {
  top: -140px; right: -120px; width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(225, 229, 234, 0.65), rgba(225, 229, 234, 0) 60%);
  filter: blur(50px);
}
.ms2--guide .ms2-bg__glow--2 {
  top: 220px; left: -140px; width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(185, 192, 200, 0.55), rgba(185, 192, 200, 0) 65%);
  filter: blur(60px);
}
.ms2--guide .ms2-bg__glow--3 {
  top: 480px; right: -100px; width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(150, 158, 168, 0.5), rgba(150, 158, 168, 0) 65%);
  filter: blur(50px);
}

/* Navigator = ゴールド (5 stop + 強glow + 斜めハイライト) */
.ms2--navigator .ms2-bg {
  background:
    linear-gradient(135deg,
      rgba(250, 224, 168, 0.20) 0%,
      rgba(250, 224, 168, 0) 28%,
      rgba(250, 224, 168, 0) 72%,
      rgba(250, 224, 168, 0.10) 100%),
    linear-gradient(180deg,
      #D4B070 0%,
      #B08D4F 22%,
      #886B36 50%,
      #634D26 78%,
      #45351A 100%);
}
.ms2--navigator .ms2-bg__glow--1,
.ms2--navigator .ms2-bg__glow--2,
.ms2--navigator .ms2-bg__glow--3 {
  position: absolute;
}
.ms2--navigator .ms2-bg__glow--1 {
  top: -140px; right: -120px; width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(245, 218, 160, 0.7), rgba(245, 218, 160, 0) 60%);
  filter: blur(50px);
}
.ms2--navigator .ms2-bg__glow--2 {
  top: 220px; left: -140px; width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(200, 162, 80, 0.6), rgba(200, 162, 80, 0) 65%);
  filter: blur(60px);
}
.ms2--navigator .ms2-bg__glow--3 {
  top: 480px; right: -100px; width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(170, 135, 60, 0.5), rgba(170, 135, 60, 0) 65%);
  filter: blur(50px);
}

/* ============================================================
   TOP Bar (透明 / グラデ越し)
   ============================================================ */
.ms2-topbar {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 8px;
}

.ms2-topbar__left,
.ms2-topbar__right {
  flex: 0 0 auto;
}

.ms2-topbar__nav {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 24px;
}

.ms2-topbar__tab {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.ms2-topbar__tab.is-active {
  color: rgba(255, 255, 255, 1);
}

.ms2-iconbtn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
}
.ms2-iconbtn svg { width: 18px; height: 18px; }

/* ============================================================
   Hero Card (Tier色背景 / Portrait + 名前 + Tier + 進捗)
   ============================================================ */
.ms2-hero-card {
  position: relative;
  z-index: 2;
  margin: 8px 16px 0;
  padding: 18px 18px 20px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  min-height: 220px;
  display: flex;
  flex-direction: column;
}

.ms2-hero-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.ms2-portrait-wrap {
  position: relative;
}
.ms2-portrait {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.4);
  display: block;
}

.ms2-hero-card__tier-tag {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.95);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-top: 6px;
}

.ms2-tier-tag-mark {
  width: 14px;
  height: 14px;
  color: rgba(255, 255, 255, 0.95);
}

.ms2-hero-card__name {
  font-family: 'Noto Serif JP', 'Inter', serif;
  font-weight: 500;
  font-size: 32px;
  color: rgba(255, 255, 255, 0.98);
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.15;
}
.ms2-hero-card__handle {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 4px;
  letter-spacing: 0;
}

.ms2-hero-card__bottom {
  margin-top: auto;
  padding-top: 32px;
}
.ms2-hero-card__metric {
  margin-bottom: 10px;
}
.ms2-hero-card__metric-num {
  font-family: 'Noto Serif JP', 'Inter', serif;
  font-weight: 400;
  font-size: 36px;
  color: rgba(255, 255, 255, 0.98);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.ms2-hero-card__metric-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 6px;
}

.ms2-hero-card__progress {
  height: 2px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 1px;
  overflow: hidden;
  margin-top: 6px;
}
.ms2-hero-card__progress-fill {
  height: 100%;
  width: 92%;  /* score / 100 */
  background: rgba(255, 255, 255, 0.85);
  border-radius: 1px;
}

/* ============================================================
   Achievement (You Are / Tier名 / 半円リング + Compassマーク + Score)
   ============================================================ */
.ms2-achievement {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 36px 20px 40px;
  color: rgba(255, 255, 255, 0.95);
}

.ms2-achievement__pre {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 6px;
}

.ms2-achievement__title {
  font-family: 'Noto Serif JP', 'Inter', serif;
  font-weight: 400;
  font-size: 48px;
  color: rgba(255, 255, 255, 0.98);
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin-bottom: 24px;
}

/* 半円リング + 中央配置 */
.ms2-ring {
  position: relative;
  width: 240px;
  height: 130px;
  margin: 0 auto 18px;
}

.ms2-ring__svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ms2-ring__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 14px;
  pointer-events: none;
}

.ms2-ring__compass {
  width: 38px;
  height: 38px;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 6px;
}

.ms2-ring__score {
  font-family: 'Inter', sans-serif;
  font-weight: 200;
  font-size: 40px;
  color: rgba(255, 255, 255, 0.98);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.ms2-ring__label {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 4px;
}

.ms2-achievement__caption {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0;
  margin-top: 8px;
}

/* === Needle (回転針 / 速度メーター型) ===
   針はSVG <g transform="rotate(${score*1.8 - 90} 120 122)"> で score 角度に向く
   score 0 → -90° (左端) / score 100 → 90° (右端) */
.ms2-needle {
  transform-origin: 120px 122px;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.ms2-needle__line {
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 1.4;
  stroke-linecap: round;
}
.ms2-needle__tip {
  fill: rgba(255, 255, 255, 0.98);
}
.ms2-needle__pivot {
  fill: rgba(255, 255, 255, 0.95);
  stroke: rgba(0, 0, 0, 0.15);
  stroke-width: 0.5;
}

/* === Tier セグメント境界 dot (リング上、3点: 30/60/85) === */
.ms2-tier-tick {
  fill: rgba(255, 255, 255, 0.55);
}
.ms2-tier-tick--current {
  fill: rgba(255, 255, 255, 0.95);
}

/* === Next Tier (Caption / 連続性表現 α) === */
.ms2-next {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.85);
}
.ms2-next__row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ms2-next__label {
  color: rgba(255, 255, 255, 0.6);
}
.ms2-next__tier {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
}
.ms2-next__bar {
  width: 180px;
  height: 2px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 1px;
  overflow: hidden;
}
.ms2-next__bar-fill {
  height: 100%;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 1px;
  /* width は inline style で score 連動 (具体数値は出さない) */
}
/* 最高位 (Compass) の場合の表示 */
.ms2-next--max .ms2-next__row {
  color: rgba(255, 255, 255, 0.95);
}
.ms2-next--max .ms2-next__bar { display: none; }

/* === 4Tier ladder (連続性表現 β) === */
.ms2-ladder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 18px;
  padding: 0 6px;
}
.ms2-ladder__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.ms2-ladder__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.45);
  transition: all 0.3s ease;
}
.ms2-ladder__step.is-current .ms2-ladder__dot {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(255, 255, 255, 0.98);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18);
}
.ms2-ladder__step.is-passed .ms2-ladder__dot {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.55);
}
.ms2-ladder__label {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.ms2-ladder__step.is-current .ms2-ladder__label {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
}
.ms2-ladder__step.is-passed .ms2-ladder__label {
  color: rgba(255, 255, 255, 0.65);
}
.ms2-ladder__line {
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
  align-self: center;
  margin: 0 4px;
  margin-top: -10px;  /* dot 中央と整列 */
}
.ms2-ladder__line.is-passed {
  background: rgba(255, 255, 255, 0.55);
}

/* ============================================================
   White Surface (グラデ背景終了 / 白基調エリア開始)
   ============================================================ */
.ms2-surface {
  position: relative;
  z-index: 3;
  background: var(--white);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  margin-top: -16px;
  padding-bottom: 24px;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
}

/* ============================================================
   Section heading (共通)
   ============================================================ */
.ms2-section {
  padding: 28px 24px 8px;
  border-bottom: 1px solid var(--border);
}
.ms2-section:last-of-type {
  border-bottom: none;
}

.ms2-section__head {
  margin-bottom: 16px;
}
.ms2-section__title {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.ms2-section__sub {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  color: var(--mist);
  margin-top: 4px;
  letter-spacing: 0.02em;
}

/* ============================================================
   Tifuler 7 Tips (折りたたみ)
   ============================================================ */
.ms2-tips {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ms2-tip {
  border-top: 1px solid var(--border);
}
.ms2-tip:last-child {
  border-bottom: 1px solid var(--border);
}

.ms2-tip__head {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 18px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--ink);
  font-family: inherit;
}

.ms2-tip__verb {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  flex: 1;
}

.ms2-tip__name {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist);
  white-space: nowrap;
}

.ms2-tip__chev {
  width: 14px;
  height: 14px;
  color: var(--mist);
  flex-shrink: 0;
  transition: transform 0.25s ease;
  align-self: center;
}
.ms2-tip.is-open .ms2-tip__chev {
  transform: rotate(180deg);
}

.ms2-tip__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.25s ease;
  opacity: 0;
}
.ms2-tip.is-open .ms2-tip__body {
  max-height: 240px;
  opacity: 1;
  padding-bottom: 18px;
}

.ms2-tip__desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  color: var(--stone);
  line-height: 1.55;
  margin-bottom: 6px;
}

.ms2-tip__howto {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  color: var(--ink);
  line-height: 1.55;
  letter-spacing: -0.005em;
}

.ms2-tip__arrow {
  color: var(--fog);
  margin-right: 4px;
  font-weight: 400;
}

/* Locked (Phase 0) */
.ms2-tip--locked .ms2-tip__verb,
.ms2-tip--locked .ms2-tip__name {
  color: var(--mist);
}
.ms2-tip--locked .ms2-tip__head {
  cursor: default;
}
.ms2-tip__locked-tag {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--mist);
  text-transform: uppercase;
  padding: 2px 6px;
  border: 0.5px solid var(--border-strong);
  background: var(--porcelain);
  margin-left: 6px;
  align-self: center;
  white-space: nowrap;
}

/* Active (Phase 0 で稼働中) */
.ms2-tip__active-tag {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ink);
  padding: 2px 6px;
  border: 0.5px solid var(--ink);
  margin-left: 6px;
  align-self: center;
  white-space: nowrap;
}

/* ============================================================
   Studio Sections (A / C カードナビ)
   ============================================================ */
.ms2-studio-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 8px;
}

.ms2-studio-card {
  position: relative;
  background: var(--porcelain);
  border: 0.5px solid var(--border);
  padding: 14px 14px 16px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 110px;
}

.ms2-studio-card__label {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--mist);
}

.ms2-studio-card__title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.ms2-studio-card__metric {
  font-family: 'Noto Serif JP', 'Inter', serif;
  font-weight: 400;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-top: 4px;
  line-height: 1.1;
}

.ms2-studio-card__sub {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--mist);
  margin-top: 2px;
  letter-spacing: 0;
}

.ms2-studio-card__chev {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 14px;
  height: 14px;
  color: var(--mist);
}

/* Studio card locked (Phase 0) */
.ms2-studio-card--locked {
  pointer-events: none;
}
.ms2-studio-card--locked .ms2-studio-card__title,
.ms2-studio-card--locked .ms2-studio-card__metric,
.ms2-studio-card--locked .ms2-studio-card__sub {
  color: var(--mist);
}

/* ============================================================
   Guide (静的マントラ)
   ============================================================ */
.ms2-guide {
  padding: 32px 24px 28px;
  text-align: center;
  background: var(--white);
  border-top: 1px solid var(--border);
}
.ms2-guide__label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: 14px;
}
.ms2-guide__mantra {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.7;
  letter-spacing: 0.02em;
}

/* ============================================================
   Phase 5c — My Compass v1 (旧 My Studio / 二軸対応 / 淡プラチナ強化)
   spec §4.7.6 / 2026-04-26 全仕様確定 (JT1〜JT6 + JC1〜JC9 + デザイン r3)
   ============================================================
   namespace: .mc-* (新規 / .ms2-* と独立)
   核仕様:
     - コンパススコア (0-100 / 本人のみ / 多面評価 / Tier判定)
     - Trustスコア (累計 / 全公開 / ユーザー側信頼行動)
     - Trustスコア表示/非表示設定 (本人 hide可 / Trust < 5 で自動非表示)
     - 過去90日ローリング平均 (Compass 後も維持インセンティブ)
     - 14日 Tier Stability
     - Tier別グラデ (淡プラチナ強化版)
     - 双頭針 (コンパス針らしく)
     - レイアウト分離 (針と Score 重ならない)
   ============================================================ */

/* ===== Frame override ===== */
.app-frame.mc {
  /* 2026-05-11 FB① 再修正: #1A1A1A → #FFFFFF (= mc-bg Tier グラデ 760px 越えで露出していた dark 黒帯を解消 / Tier グラデは absolute 重ね描きで影響なし) */
  background: #FFFFFF;
  position: relative;
  overflow-x: hidden;
  /* 2026-05-11 FB③: A Tifuler is / Learner 最下端 section が tab-bar 下に隠れる問題の修正 (= tab-bar 64px + 余白 24px) */
  padding-bottom: 88px;
}

/* ============================================================
   Tier別 グラデ背景 (淡く / 強glow / 斜めハイライト)
   ============================================================ */
.mc-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 760px;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

/* Compass = プラチナ (r5b 真珠パール強化 / トーン明度UP / 上=純白パール → 下=明るめプラチナ) */
.mc--compass .mc-bg {
  background:
    /* パール斜めシマー (太く強く) */
    linear-gradient(118deg,
      transparent 0%,
      transparent 26%,
      rgba(255, 255, 255, 0.50) 42%,
      rgba(238, 232, 255, 0.30) 50%,
      rgba(218, 232, 250, 0.22) 58%,
      transparent 72%,
      transparent 100%),
    /* 紫味の真珠ハイライト (本物のパール感) */
    linear-gradient(165deg,
      rgba(255, 255, 255, 0.65) 0%,
      rgba(248, 245, 255, 0.30) 12%,
      rgba(232, 235, 248, 0.10) 28%,
      rgba(255, 255, 255, 0) 48%,
      rgba(255, 255, 255, 0) 75%,
      rgba(255, 255, 255, 0.18) 100%),
    /* メイン縦グラデ (6stop / 全体明度UP / 下半分も明るめプラチナ) */
    linear-gradient(180deg,
      #FFFFFF 0%,
      #F4F6FA 14%,
      #DCE2EB 30%,
      #ACB6C2 52%,
      #6E7884 76%,
      #4A5460 100%);
}
.mc--compass .mc-bg__glow--1 {
  position: absolute;
  top: -160px;
  right: -140px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 60%);
  filter: blur(48px);
  mix-blend-mode: screen;
}
.mc--compass .mc-bg__glow--2 {
  position: absolute;
  top: 200px;
  left: -160px;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(232, 224, 255, 0.85), rgba(232, 224, 255, 0) 65%);
  filter: blur(56px);
  mix-blend-mode: screen;
}
.mc--compass .mc-bg__glow--3 {
  position: absolute;
  top: 520px;
  right: -110px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(200, 215, 240, 0.65), rgba(200, 215, 240, 0) 65%);
  filter: blur(50px);
  mix-blend-mode: screen;
}

/* Navigator = シャンパンゴールド (r5 暖色リッチ / 上=シャンパン → 下=深ブロンズゴールド) */
.mc--navigator .mc-bg {
  background:
    /* 斜めシマー (ゴールド光の流線) */
    linear-gradient(118deg,
      transparent 0%,
      transparent 30%,
      rgba(255, 244, 210, 0.28) 46%,
      rgba(255, 230, 175, 0.14) 54%,
      transparent 68%,
      transparent 100%),
    /* 上部シャンパンハイライト */
    linear-gradient(155deg,
      rgba(255, 248, 220, 0.42) 0%,
      rgba(255, 248, 220, 0.10) 20%,
      rgba(255, 248, 220, 0) 40%,
      rgba(255, 248, 220, 0) 70%,
      rgba(255, 248, 220, 0.08) 100%),
    /* メイン縦グラデ (6stop / 深み追加) */
    linear-gradient(180deg,
      #FFF6E0 0%,
      #F5DCA0 16%,
      #DDB46A 36%,
      #B8923E 58%,
      #856726 80%,
      #5A4418 100%);
}
.mc--navigator .mc-bg__glow--1 {
  position: absolute;
  top: -160px;
  right: -140px;
  width: 580px;
  height: 580px;
  background: radial-gradient(circle, rgba(255, 240, 195, 0.85), rgba(255, 240, 195, 0) 60%);
  filter: blur(50px);
  mix-blend-mode: screen;
}
.mc--navigator .mc-bg__glow--2 {
  position: absolute;
  top: 220px;
  left: -160px;
  width: 540px;
  height: 540px;
  background: radial-gradient(circle, rgba(248, 220, 160, 0.78), rgba(248, 220, 160, 0) 65%);
  filter: blur(58px);
  mix-blend-mode: screen;
}
.mc--navigator .mc-bg__glow--3 {
  position: absolute;
  top: 540px;
  right: -110px;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(170, 130, 60, 0.5), rgba(170, 130, 60, 0) 65%);
  filter: blur(50px);
}

/* Guide = マットシルバー (r5 マット軽量化 / Compassと差別化 / ニュートラル寄り) */
.mc--guide .mc-bg {
  background:
    /* 軽い斜めシマー (控えめ) */
    linear-gradient(118deg,
      transparent 0%,
      transparent 32%,
      rgba(255, 255, 255, 0.18) 48%,
      transparent 64%,
      transparent 100%),
    /* 上部の軽いハイライト */
    linear-gradient(155deg,
      rgba(255, 255, 255, 0.28) 0%,
      rgba(255, 255, 255, 0.08) 22%,
      rgba(255, 255, 255, 0) 45%,
      rgba(255, 255, 255, 0) 100%),
    /* メイン縦グラデ (6stop / マット感維持) */
    linear-gradient(180deg,
      #F0F2F5 0%,
      #DDE0E4 16%,
      #B5BAC0 36%,
      #8E949B 58%,
      #6F757C 80%,
      #4D5258 100%);
}
.mc--guide .mc-bg__glow--1 {
  position: absolute;
  top: -150px;
  right: -130px;
  width: 540px;
  height: 540px;
  background: radial-gradient(circle, rgba(240, 243, 247, 0.55), rgba(240, 243, 247, 0) 60%);
  filter: blur(58px);
}
.mc--guide .mc-bg__glow--2 {
  position: absolute;
  top: 240px;
  left: -150px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(210, 215, 222, 0.5), rgba(210, 215, 222, 0) 65%);
  filter: blur(62px);
}
.mc--guide .mc-bg__glow--3 {
  position: absolute;
  top: 520px;
  right: -100px;
  width: 440px;
  height: 440px;
  background: radial-gradient(circle, rgba(150, 158, 168, 0.4), rgba(150, 158, 168, 0) 65%);
  filter: blur(55px);
}

/* Seeker = アースブロンズ (r5 大地・出発点の温かみ強化 / 暖色アースカラー) */
.mc--seeker .mc-bg {
  background:
    /* 斜めシマー (温かい光の流線) */
    linear-gradient(118deg,
      transparent 0%,
      transparent 30%,
      rgba(255, 235, 200, 0.28) 46%,
      rgba(255, 220, 175, 0.14) 54%,
      transparent 68%,
      transparent 100%),
    /* 上部サンディハイライト */
    linear-gradient(155deg,
      rgba(255, 240, 215, 0.42) 0%,
      rgba(255, 240, 215, 0.10) 20%,
      rgba(255, 240, 215, 0) 40%,
      rgba(255, 240, 215, 0) 70%,
      rgba(255, 240, 215, 0.08) 100%),
    /* メイン縦グラデ (6stop / 大地的深み) */
    linear-gradient(180deg,
      #F8E5C8 0%,
      #E0BC92 16%,
      #B68855 36%,
      #8A5A2E 58%,
      #5C3A1C 80%,
      #3D2812 100%);
}
.mc--seeker .mc-bg__glow--1 {
  position: absolute;
  top: -160px;
  right: -140px;
  width: 580px;
  height: 580px;
  background: radial-gradient(circle, rgba(255, 230, 200, 0.85), rgba(255, 230, 200, 0) 60%);
  filter: blur(50px);
  mix-blend-mode: screen;
}
.mc--seeker .mc-bg__glow--2 {
  position: absolute;
  top: 220px;
  left: -160px;
  width: 540px;
  height: 540px;
  background: radial-gradient(circle, rgba(228, 188, 145, 0.75), rgba(228, 188, 145, 0) 65%);
  filter: blur(58px);
  mix-blend-mode: screen;
}
.mc--seeker .mc-bg__glow--3 {
  position: absolute;
  top: 540px;
  right: -110px;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(140, 95, 50, 0.5), rgba(140, 95, 50, 0) 65%);
  filter: blur(50px);
}

/* ============================================================
   Top Bar (透明 / グラデ越し)
   ============================================================ */
.mc-topbar {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 8px;
}
.mc-topbar__left,
.mc-topbar__right {
  flex: 0 0 auto;
}
.mc-topbar__nav {
  flex: 1;
  display: flex;
  justify-content: center;
}
.mc-topbar__tab {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.95);
}
/* Compass / Guide / Navigator は 文字 white が背景に対して見えるが、
   薄い背景 (Compass 上部) では暗めにする必要 */
.mc--compass .mc-topbar__tab,
.mc--guide .mc-topbar__tab,
.mc--seeker .mc-topbar__tab,
.mc--navigator .mc-topbar__tab {
  color: rgba(40, 45, 55, 0.85);  /* 上部の淡い背景に対して読めるよう dark text */
}
.mc-iconbtn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(40, 45, 55, 0.85);
  cursor: pointer;
}
.mc-iconbtn svg { width: 18px; height: 18px; }

/* ============================================================
   Hero Card (Tier色 / Portrait + Name + Tier-tag + Trust + Compass score)
   ============================================================ */
.mc-hero {
  position: relative;
  z-index: 2;
  margin: 8px 16px 0;
  padding: 18px 18px 20px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 0.5px solid rgba(255, 255, 255, 0.25);
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: rgba(40, 45, 55, 0.92);
}

.mc-hero__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.mc-portrait {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.55);
  display: block;
  background: var(--porcelain);
}

.mc-hero__tier-tag {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(40, 45, 55, 0.95);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-top: 6px;
}
.mc-tier-tag-mark {
  width: 14px;
  height: 14px;
  color: rgba(40, 45, 55, 0.95);
}

.mc-hero__name {
  font-family: 'Noto Serif JP', 'Inter', serif;
  font-weight: 500;
  font-size: 32px;
  color: rgba(20, 25, 35, 1);
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.15;
}
.mc-hero__handle {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: rgba(40, 45, 55, 0.6);
  letter-spacing: 0;
  margin-top: -6px;
}

/* Trust 行 (公開メイン / Hero 内) */
.mc-hero__trust-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 0.5px solid rgba(40, 45, 55, 0.18);
}
.mc-hero__trust {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.mc-hero__trust-num {
  font-family: 'Noto Serif JP', 'Inter', serif;
  font-weight: 400;
  font-size: 28px;
  color: rgba(20, 25, 35, 1);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.mc-hero__trust-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(40, 45, 55, 0.7);
}
/* Trust hide toggle */
.mc-hero__hide-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(40, 45, 55, 0.55);
  background: none;
  border: 0.5px solid rgba(40, 45, 55, 0.3);
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.mc-hero__hide-toggle svg { width: 11px; height: 11px; }

/* Trust hide 状態 (本人画面のみ表示) */
.mc-hero__trust-hidden-note {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  color: rgba(40, 45, 55, 0.5);
  letter-spacing: 0;
  font-style: italic;
}

/* ============================================================
   Achievement (You Are / Tier名 / 半円メーター + 双頭針 + コンパススコア)
   ============================================================ */
.mc-achievement {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 32px 20px 28px;
  color: rgba(40, 45, 55, 0.92);
}

.mc-achievement__pre {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(40, 45, 55, 0.7);
  margin-bottom: 6px;
}

.mc-achievement__title {
  font-family: 'Noto Serif JP', 'Inter', serif;
  font-weight: 400;
  font-size: 48px;
  color: rgba(20, 25, 35, 1);
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin-bottom: 24px;
}

/* Meter 半円 (v3 r4 ロールバック: 双頭針廃止 / 中央 Compass マーク + Score overlay) */
.mc-meter {
  position: relative;
  width: 260px;
  height: 160px;
  margin: 0 auto 14px;
}
.mc-meter__svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* 中央 overlay (Compass マーク + Score + label) */
.mc-meter__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 14px;
  pointer-events: none;
}
.mc-meter__compass {
  width: 38px;
  height: 38px;
  color: rgba(20, 25, 35, 0.85);
  margin-bottom: 6px;
}

/* メーター scale 線 */
.mc-meter__bg {
  fill: none;
  stroke: rgba(40, 45, 55, 0.22);
  stroke-width: 1;
  stroke-linecap: round;
}
.mc-meter__active {
  fill: none;
  stroke: rgba(20, 25, 35, 0.7);
  stroke-width: 1.5;
  stroke-linecap: round;
  /* r5: メーター成長アニメ (Tier 切替時 / 初期表示時) */
  transition: stroke-dasharray 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* r5: 現在 tick の "現在地" 強調パルス */
.mc-meter__tick--current {
  fill: rgba(20, 25, 35, 1);
  animation: mc-tick-pulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes mc-tick-pulse {
  0%, 100% { r: 2.6; opacity: 1; }
  50% { r: 3.2; opacity: 0.85; }
}

/* r5d: Compass Tier 水光肌 (물광) 艶アニメ — 韓国水光肌風の内側から滲む潤い演出
   Compass マーク点滅は撤回 (他Tier同様の静止に戻す) */

/* glow 3層をゆっくり呼吸 (translate なし / scale + opacity のみ / 内側からの発光感) */
.mc--compass .mc-bg__glow--1 {
  animation: mc-mulgwang-breath-1 14s ease-in-out infinite;
  transform-origin: center;
  will-change: transform, opacity;
}
.mc--compass .mc-bg__glow--2 {
  animation: mc-mulgwang-breath-2 17s ease-in-out infinite;
  transform-origin: center;
  will-change: transform, opacity;
}
.mc--compass .mc-bg__glow--3 {
  animation: mc-mulgwang-breath-3 11s ease-in-out infinite;
  transform-origin: center;
  will-change: transform, opacity;
}
@keyframes mc-mulgwang-breath-1 {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.10); opacity: 1; }
}
@keyframes mc-mulgwang-breath-2 {
  0%, 100% { transform: scale(1); opacity: 0.78; }
  50% { transform: scale(1.08); opacity: 1; }
}
@keyframes mc-mulgwang-breath-3 {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.06); opacity: 0.95; }
}

/* Hero エリアに水光肌 sheen — 斜めの光の帯が表面を流れる (韓国水光肌コスメCM風)
   (Hero カード内に閉じ込めた r5e 版で確定) */
.mc--compass .mc-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* メインの光の帯 (純白) — 6s で左→右に流れる */
.mc--compass .mc-hero::before {
  content: '';
  position: absolute;
  top: -30%;
  left: 0;
  width: 55%;
  height: 160%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 255, 255, 0.32) 46%,
    rgba(255, 255, 255, 0.78) 50%,
    rgba(245, 240, 255, 0.45) 54%,
    transparent 62%,
    transparent 100%
  );
  filter: blur(3px);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: -1;
  animation: mc-mulgwang-flow 6s ease-in-out infinite;
}
/* 副の光の帯 (パール紫 / 細め) — 9s で角度違い・遅れて流れる (二重の艶) */
.mc--compass .mc-hero::after {
  content: '';
  position: absolute;
  top: -30%;
  left: 0;
  width: 40%;
  height: 160%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 40%,
    rgba(238, 230, 255, 0.45) 49%,
    rgba(232, 240, 252, 0.30) 52%,
    transparent 60%,
    transparent 100%
  );
  filter: blur(4px);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: -1;
  animation: mc-mulgwang-flow 9s ease-in-out infinite;
  animation-delay: 2s;
}
@keyframes mc-mulgwang-flow {
  0% { transform: translateX(-130%); }
  100% { transform: translateX(330%); }
}

/* Tier境界 dot */
.mc-meter__tick {
  fill: rgba(40, 45, 55, 0.55);
}
.mc-meter__tick--current {
  fill: rgba(20, 25, 35, 1);
}

/* 双頭針 (コンパス針らしく) */
.mc-needle {
  transform-origin: 130px 130px;  /* meter中心 */
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.mc-needle__north {
  fill: rgba(20, 25, 35, 0.95);  /* N側 = 強い色 (濃) */
}
.mc-needle__south {
  fill: rgba(40, 45, 55, 0.35);  /* S側 = 装飾 (淡) */
}
.mc-needle__pivot-outer {
  fill: rgba(255, 255, 255, 0.95);
  stroke: rgba(20, 25, 35, 0.5);
  stroke-width: 0.7;
}
.mc-needle__pivot-inner {
  fill: rgba(20, 25, 35, 0.85);
}

/* メーター中央 Score (overlay 内 / v3 r4 ロールバック) */
.mc-meter__score {
  font-family: 'Inter', sans-serif;
  font-weight: 200;
  font-size: 38px;
  color: rgba(20, 25, 35, 1);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.mc-meter__score-label {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(40, 45, 55, 0.65);
  margin-top: 4px;
}

.mc-achievement__caption {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  color: rgba(40, 45, 55, 0.65);
  letter-spacing: 0;
  margin-top: 18px;
}

/* ============================================================
   Next Tier (連続性 α) + 4Tier ladder (連続性 β)
   ============================================================ */
.mc-next {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  position: relative;
  z-index: 2;
}
.mc-next__row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.mc-next__label { color: rgba(40, 45, 55, 0.6); }
.mc-next__tier { color: rgba(20, 25, 35, 1); font-weight: 600; }
/* 2026-05-11 FB① hotfix3: .mc-next__bar + .mc-next__bar-fill + .mc-next--max .mc-next__bar 全削除 (= デザイン上不要 / Yutaro 確定 / Tier ラダー dot で進捗表現が十分) */

.mc-ladder {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  padding: 0 6px;
  position: relative;
  z-index: 2;
}
.mc-ladder__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.mc-ladder__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(40, 45, 55, 0.4);
  transition: all 0.3s ease;
}
.mc-ladder__step.is-current .mc-ladder__dot {
  background: rgba(20, 25, 35, 1);
  border-color: rgba(20, 25, 35, 1);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.4);
}
.mc-ladder__step.is-passed .mc-ladder__dot {
  background: rgba(40, 45, 55, 0.55);
  border-color: rgba(40, 45, 55, 0.55);
}
.mc-ladder__label {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(40, 45, 55, 0.45);
}
.mc-ladder__step.is-current .mc-ladder__label {
  color: rgba(20, 25, 35, 1);
  font-weight: 600;
}
.mc-ladder__step.is-passed .mc-ladder__label {
  color: rgba(40, 45, 55, 0.65);
}
.mc-ladder__line {
  width: 28px;
  height: 1px;
  background: rgba(40, 45, 55, 0.25);
  align-self: center;
  margin: 0 4px;
  margin-top: -10px;
}
.mc-ladder__line.is-passed { background: rgba(40, 45, 55, 0.55); }

/* ============================================================
   White Surface (グラデ背景終了 / 白基調エリア)
   ============================================================ */
.mc-surface {
  position: relative;
  z-index: 3;
  background: var(--white);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  margin-top: -16px;
  padding-bottom: 24px;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.10);
}

/* Section heading */
.mc-section {
  padding: 28px 24px 8px;
  border-bottom: 1px solid var(--border);
}
.mc-section:last-of-type { border-bottom: none; }
.mc-section__head { margin-bottom: 16px; }
.mc-section__title {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.mc-section__sub {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  color: var(--mist);
  margin-top: 4px;
  letter-spacing: 0.02em;
}

/* ============================================================
   Tifuler 7 Tips (折りたたみ)
   ============================================================ */
.mc-tips { list-style: none; padding: 0; margin: 0; }
.mc-tip { border-top: 1px solid var(--border); }
.mc-tip:last-child { border-bottom: 1px solid var(--border); }
.mc-tip__head {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 18px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--ink);
  font-family: inherit;
}
.mc-tip__verb {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  flex: 1;
}
.mc-tip__name {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist);
  white-space: nowrap;
}
.mc-tip__chev {
  width: 14px;
  height: 14px;
  color: var(--mist);
  flex-shrink: 0;
  transition: transform 0.25s ease;
  align-self: center;
}
.mc-tip.is-open .mc-tip__chev { transform: rotate(180deg); }

.mc-tip__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.25s ease;
  opacity: 0;
}
.mc-tip.is-open .mc-tip__body {
  max-height: 240px;
  opacity: 1;
  padding-bottom: 18px;
}

.mc-tip__desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  color: var(--stone);
  line-height: 1.55;
  margin-bottom: 6px;
}
.mc-tip__howto {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  color: var(--ink);
  line-height: 1.55;
  letter-spacing: -0.005em;
}
.mc-tip__arrow {
  color: var(--fog);
  margin-right: 4px;
  font-weight: 400;
}
.mc-tip--locked .mc-tip__verb,
.mc-tip--locked .mc-tip__name { color: var(--mist); }
.mc-tip--locked .mc-tip__head { cursor: default; }
.mc-tip__locked-tag {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--mist);
  text-transform: uppercase;
  padding: 2px 6px;
  border: 0.5px solid var(--border-strong);
  background: var(--porcelain);
  margin-left: 6px;
  align-self: center;
  white-space: nowrap;
}
.mc-tip__active-tag {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ink);
  padding: 2px 6px;
  border: 0.5px solid var(--ink);
  margin-left: 6px;
  align-self: center;
  white-space: nowrap;
}

/* ============================================================
   Your Activity (A / C カード)
   ============================================================ */
.mc-activity-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 8px;
}
.mc-activity-card {
  position: relative;
  background: var(--porcelain);
  border: 0.5px solid var(--border);
  padding: 14px 14px 16px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 110px;
}
/* .mc-activity-card__label = 2026-05-11 FB② 削除 (A/C 表記が意味不明 / Yutaro 確定) */
.mc-activity-card__title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.mc-activity-card__metric {
  font-family: 'Noto Serif JP', 'Inter', serif;
  font-weight: 400;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-top: 4px;
  line-height: 1.1;
}
.mc-activity-card__sub {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--mist);
  margin-top: 2px;
  letter-spacing: 0;
}
.mc-activity-card__chev {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 14px;
  height: 14px;
  color: var(--mist);
}
.mc-activity-card--locked { pointer-events: none; }
.mc-activity-card--locked .mc-activity-card__title,
.mc-activity-card--locked .mc-activity-card__metric,
.mc-activity-card--locked .mc-activity-card__sub { color: var(--mist); }

/* ============================================================
   A Tifuler is (静的マントラ)
   ============================================================ */
.mc-tifuler-is {
  padding: 32px 24px 28px;
  text-align: center;
  background: var(--white);
  border-top: 1px solid var(--border);
}
.mc-tifuler-is__label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: 14px;
}
.mc-tifuler-is__mantra {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.7;
  letter-spacing: 0.02em;
}

/* ============================================================
   Section A: Post URLs (投稿URL登録 / 別画面) — namespace .pu-*
   ============================================================ */
.pu-app { background: var(--white); min-height: 100vh; padding-bottom: calc(var(--tab-height) + 24px); }

.pu-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--white);
  position: sticky; top: 0; z-index: 10;
}
.pu-topbar__back, .pu-topbar__placeholder {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink); cursor: pointer;
}
.pu-topbar__back svg { width: 20px; height: 20px; }
.pu-topbar__title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
}

.pu-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: var(--white);
  padding: 0 16px;
}
.pu-tab {
  flex: 1;
  background: none; border: none;
  padding: 14px 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--mist);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.pu-tab.is-active {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--ink);
}
.pu-tab__count {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  margin-left: 4px;
  color: var(--mist);
  font-variant-numeric: tabular-nums;
}

.pu-list { padding: 8px 16px 100px; }
.pu-empty {
  padding: 80px 16px;
  text-align: center;
  color: var(--mist);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  line-height: 1.7;
}
.pu-empty__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--stone);
  margin-bottom: 6px;
}

.pu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.pu-item:last-child { border-bottom: none; }
.pu-item__thumb {
  width: 64px; height: 64px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(135deg, #F4F4F4, #ECECEC);
  position: relative;
}
.pu-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pu-item__thumb-platform {
  position: absolute;
  bottom: 4px; right: 4px;
  width: 18px; height: 18px;
  background: rgba(0,0,0,0.7);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white;
}
.pu-item__thumb-platform svg { width: 10px; height: 10px; }
.pu-item__body { flex: 1; min-width: 0; }
.pu-item__title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pu-item__meta {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--mist);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.pu-item__entry {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  color: var(--stone);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 4px 8px;
  margin-left: -8px;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}
.pu-item__entry:hover {
  background: var(--paper);
  color: var(--ink);
}
.pu-item__entry-arrow { color: var(--mist); transition: color 0.15s; }
.pu-item__entry:hover .pu-item__entry-arrow { color: var(--ink); }
.pu-item__chev { color: var(--mist); flex-shrink: 0; }
.pu-item__chev svg { width: 16px; height: 16px; }

.pu-fab {
  position: fixed;
  bottom: calc(var(--tab-height) + 16px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--white);
  border: none;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  z-index: 50;
  display: flex; align-items: center; gap: 6px;
}
.pu-fab svg { width: 16px; height: 16px; }

/* モーダル (URL登録 / 紐付け) */
.pu-modal {
  position: fixed; inset: 0;
  z-index: 100;
  display: none;
}
.pu-modal.is-open { display: block; }
.pu-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.4);
  animation: pu-modal-fade 0.2s ease-out;
}
.pu-modal__sheet {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--white);
  border-radius: 20px 20px 0 0;
  padding: 20px 16px 32px;
  max-height: 90vh;
  overflow-y: auto;
  animation: pu-modal-slide 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@keyframes pu-modal-fade {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes pu-modal-slide {
  from { transform: translateY(100%); } to { transform: translateY(0); }
}
.pu-modal__handle {
  width: 36px; height: 4px;
  background: var(--border-strong);
  border-radius: 2px;
  margin: 0 auto 16px;
}
.pu-modal__title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 20px;
}

.pu-field { margin-bottom: 18px; }
.pu-field__label {
  display: block;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--stone);
  margin-bottom: 6px;
  letter-spacing: 0.04em;
}
.pu-input, .pu-select, .pu-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  color: var(--ink);
  background: var(--white);
  box-sizing: border-box;
}
.pu-input:focus, .pu-select:focus, .pu-textarea:focus {
  outline: none;
  border-color: var(--ink);
}
.pu-textarea { resize: vertical; min-height: 60px; }

.pu-thumb-preview {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--bg-porcelain);
  border-radius: 8px;
  display: flex; align-items: center; gap: 10px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  color: var(--stone);
}
.pu-thumb-preview__img {
  width: 36px; height: 36px;
  border-radius: 6px;
  background: linear-gradient(135deg, #F4F4F4, #ECECEC);
  flex-shrink: 0;
}
.pu-thumb-preview__img img { width:100%; height:100%; object-fit:cover; border-radius: 6px; }
.pu-thumb-preview__status {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--mist);
  letter-spacing: 0.04em;
}
.pu-thumb-preview__status.is-success { color: #2A8F5C; }

.pu-radio-group { display: flex; flex-direction: column; gap: 10px; }
.pu-radio-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.pu-radio-row.is-selected {
  border-color: var(--ink);
  background: var(--bg-porcelain);
}
.pu-radio-row input[type="radio"] {
  margin-top: 2px;
  accent-color: var(--ink);
}
.pu-radio-row__label {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.pu-radio-row__body { flex: 1; }
.pu-radio-row__select { width: 100%; margin-top: 2px; }

.pu-modal__actions {
  display: flex; gap: 10px;
  margin-top: 24px;
}
.pu-btn {
  flex: 1;
  padding: 14px 20px;
  border-radius: 10px;
  border: none;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.pu-btn--ghost {
  background: var(--bg-porcelain);
  color: var(--stone);
}
.pu-btn--primary {
  background: var(--ink);
  color: var(--white);
}

/* ============================================================
   Section C: Circle Admin (Circle運営管理 / 別画面) — namespace .ca-*
   ============================================================ */
.ca-app { background: var(--white); min-height: 100vh; padding-bottom: calc(var(--tab-height) + 24px); }

.ca-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--white);
  position: sticky; top: 0; z-index: 10;
}
.ca-topbar__back {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink); cursor: pointer;
}
.ca-topbar__back svg { width: 20px; height: 20px; }
.ca-topbar__title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
}
.ca-topbar__placeholder { width: 32px; height: 32px; }

.ca-hero {
  padding: 24px 16px 18px;
  border-bottom: 1px solid var(--border);
}
.ca-hero__name {
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: 24px;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}
.ca-hero__meta {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--stone);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.ca-revenue {
  margin: 16px;
  padding: 18px 18px 16px;
  background: linear-gradient(180deg, #FAFBFC 0%, #F0F2F5 100%);
  border-radius: 14px;
  border: 1px solid var(--border-strong);
}
.ca-revenue__label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: var(--stone);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ca-revenue__total {
  font-family: 'Inter', sans-serif;
  font-weight: 200;
  font-size: 32px;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
  line-height: 1;
}
.ca-revenue__breakdown { display: flex; flex-direction: column; gap: 6px; }
.ca-revenue__row {
  display: flex; justify-content: space-between;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  color: var(--stone);
}
.ca-revenue__row-amt {
  font-family: 'Inter', sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 500;
}

.ca-subtabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
  margin-top: 4px;
}
.ca-subtab {
  flex: 1;
  background: none; border: none;
  padding: 14px 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--mist);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.ca-subtab.is-active {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--ink);
}
.ca-subtab__count {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  margin-left: 4px;
  color: var(--mist);
  font-variant-numeric: tabular-nums;
}

.ca-thread-list, .ca-member-list { padding: 8px 16px 16px; }

.ca-thread {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.ca-thread:last-child { border-bottom: none; }
.ca-thread__body { flex: 1; min-width: 0; }
.ca-thread__top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ca-thread__title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1;
}
.ca-thread__badge {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.ca-thread__badge--free {
  background: #EEF2F7;
  color: #5A6573;
}
.ca-thread__badge--premium {
  background: linear-gradient(135deg, #FFF6E0, #DDB46A);
  color: #5A4418;
}
.ca-thread__meta {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--mist);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.ca-thread__chev { color: var(--mist); flex-shrink: 0; }
.ca-thread__chev svg { width: 16px; height: 16px; }

.ca-member {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.ca-member:last-child { border-bottom: none; }
.ca-member__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #F4F4F4, #ECECEC);
  flex-shrink: 0;
}
.ca-member__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ca-member__body { flex: 1; min-width: 0; }
.ca-member__name {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 2px;
}
.ca-member__meta {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--mist);
  letter-spacing: 0.04em;
}

.ca-sort {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  color: var(--stone);
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.ca-sort__btn {
  background: none; border: 1px solid var(--border-strong);
  padding: 6px 12px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 11px;
  color: var(--stone);
  cursor: pointer;
}
.ca-sort__btn.is-active {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

.ca-reports {
  margin: 0 16px 24px;
  padding: 16px;
  background: var(--bg-porcelain);
  border-radius: 12px;
  border: 1px solid var(--border-strong);
}
.ca-reports__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.ca-reports__title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.ca-reports__count {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--mist);
  letter-spacing: 0.04em;
}
.ca-reports__empty {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  color: var(--mist);
  line-height: 1.6;
}

.ca-add {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%;
  padding: 14px;
  margin-top: 8px;
  background: var(--bg-porcelain);
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--stone);
  cursor: pointer;
}
.ca-add svg { width: 14px; height: 14px; }

/* =========================================================
   Detail SNS Post Chrome (Instagram-style mock for Detail screens)
   namespace .detail-sns-post-*
   Phase 0: HTML/CSS でSNS投稿スクショ風を再現
   本番: Tifuler が登録した URL から実投稿サムネを取得
   ========================================================= */

.detail-sns-post {
  position: relative;
  display: block;
  width: 100%;
  background: var(--white);
  border-bottom: 0.5px solid var(--border);
  text-decoration: none;
  color: var(--ink);
}

.detail-sns-post__chrome-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 0.5px solid var(--border);
}
.detail-sns-post__chrome-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--chip);
}
.detail-sns-post__chrome-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.detail-sns-post__chrome-handle {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  flex: 1;
  min-width: 0;
}
.detail-sns-post__chrome-handle small {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: var(--stone);
  margin-top: 1px;
  letter-spacing: 0.02em;
}
.detail-sns-post__chrome-platform {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.detail-sns-post__chrome-platform svg {
  width: 18px;
  height: 18px;
}

.detail-sns-post__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--chip);
}
.detail-sns-post__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.detail-sns-post__chrome-bottom {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px 6px;
}
.detail-sns-post__chrome-bottom svg {
  width: 22px;
  height: 22px;
  stroke: var(--ink);
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.detail-sns-post__chrome-bottom-spacer { flex: 1; }

.detail-sns-post__caption {
  padding: 4px 14px 12px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.detail-sns-post__caption strong {
  font-weight: 600;
  margin-right: 6px;
}
.detail-sns-post__caption-more {
  color: var(--stone);
  margin-left: 4px;
}

.detail-sns-post__placeholder-note {
  padding: 8px 14px 12px;
  font-size: 10px;
  line-height: 1.5;
  color: var(--stone);
  text-align: center;
  font-style: italic;
  letter-spacing: 0.04em;
  border-top: 0.5px dashed var(--border-strong);
  background: var(--bg-porcelain, #FAFAF8);
}

.detail-sns-post__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--paper);
  border-top: 0.5px solid var(--border);
  text-decoration: none;
}
.detail-sns-post__cta strong {
  font-weight: 500;
}
.detail-sns-post__cta-arrow {
  font-size: 14px;
  color: var(--stone);
}

/* Phase 13: <a> 化要素のスタイル継承担保 (chrome-top / media / cta) */
a.detail-sns-post__chrome-top,
a.detail-sns-post__media,
a.detail-sns-post__cta {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* ============================================================
   Phase 6 — PEER Circle Threads / Members
   spec §4.9.1.1 D-5 / 横並びピアサポート / フェーズ別グルーピング
   ECD: シンプル × 美しい × 圧倒的な生活者視点
   ============================================================ */

/* --- PEER Threads/Members 共通 Intro --- */
.peer-threads-intro,
.peer-mem-intro {
  margin: 0 20px 18px;
  padding: 14px 16px;
  background: var(--paper, #f5f2ec);
  border-left: 2px solid var(--ink);
  font-size: 12px;
  line-height: 1.7;
  color: var(--stone);
  letter-spacing: 0.005em;
}
.peer-threads-intro__label,
.peer-mem-intro__label {
  display: block;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink);
  margin-bottom: 6px;
}

/* --- PEER Thread Group (フェーズ別) --- */
.peer-thread-group {
  margin: 0 20px 28px;
}
.peer-thread-group__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 0.5px solid var(--border);
  flex-wrap: wrap;
}
.peer-thread-group__label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink);
  font-family: 'Inter', sans-serif;
}
.peer-thread-group__sub {
  font-size: 11px;
  color: var(--stone);
  letter-spacing: 0.005em;
}

/* --- PEER Thread row --- */
.peer-thread {
  display: block;
  padding: 12px 0;
  border-bottom: 0.5px solid var(--border);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background 0.12s ease, padding 0.12s ease;
}
.peer-thread:hover {
  background: rgba(245, 242, 236, 0.5);
  padding-left: 8px;
  padding-right: 8px;
}
.peer-thread:last-child {
  border-bottom: none;
}
.peer-thread__title {
  font-size: 14px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}
.peer-thread__meta {
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-size: 10px;
  color: var(--mist);
  letter-spacing: 0.01em;
}
.peer-thread__starter {
  color: var(--stone);
  font-weight: 500;
}
.peer-thread__dot {
  color: var(--mist);
}
.peer-thread__replies {
  color: var(--stone);
}
.peer-thread__time {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-left: auto;
  font-size: 9px;
  color: var(--mist);
}

/* --- PEER New thread CTA --- */
.peer-thread-cta {
  margin: 8px 20px 24px;
  padding: 16px 18px;
  background: transparent;
  border: 0.5px dashed var(--mist);
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  transition: background 0.14s ease, border-color 0.14s ease;
}
.peer-thread-cta:hover {
  background: rgba(245, 242, 236, 0.6);
  border-color: var(--ink);
  border-style: solid;
}
.peer-thread-cta__plus {
  font-size: 16px;
  font-weight: 300;
  color: var(--ink);
  line-height: 1;
}
.peer-thread-cta__text {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.peer-thread-cta__sub {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist);
  width: 100%;
  margin-top: 2px;
  font-weight: 500;
}

/* --- PEER Members Group (先輩/同期/新規) --- */
.peer-mem-group {
  margin: 0 20px 24px;
}
.peer-mem-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 0.5px solid var(--border);
  gap: 10px;
}
.peer-mem-group__label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink);
  font-family: 'Inter', sans-serif;
}
.peer-mem-group__count {
  font-size: 10px;
  color: var(--mist);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: 'Inter', sans-serif;
}

/* --- PEER Member row --- */
.peer-mem-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--border);
}
.peer-mem-row:last-child {
  border-bottom: none;
}
.peer-mem-row__avatar {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
.peer-mem-row__avatar img,
.peer-mem-row__avatar svg {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.peer-mem-row__info {
  flex: 1;
  min-width: 0;
}
.peer-mem-row__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}
.peer-mem-row__phase {
  font-size: 10px;
  color: var(--stone);
  letter-spacing: 0.01em;
}

/* "+ N more" 行 */
.peer-mem-row--more {
  justify-content: center;
  border-bottom: none;
  padding: 12px 0 4px;
  cursor: pointer;
}
.peer-mem-row--more .peer-mem-row__more-text {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist);
  font-weight: 500;
}
.peer-mem-row--more:hover .peer-mem-row__more-text {
  color: var(--ink);
}

/* ============================================================
   Phase 6 — 公式 Circle Feed (Spring Skin Challenge)
   spec §4.9.4 公式 Circle / 月次 Theme + 週次タスク + 専門医Q&A + Tifuler ガイド
   構造: 4ブロック縦スクロール (タブなし、シンプル原則)
   ============================================================ */

/* --- Block 1: 月次 Theme (Hero) --- */
.off-theme {
  margin: 0 20px 22px;
  padding: 22px 0 0;
  border-top: 1px solid var(--ink);
}
.off-theme__label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  margin-bottom: 8px;
}
.off-theme__title {
  font-family: 'Noto Serif JP', serif;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 12px;
}
.off-theme__desc {
  font-size: 13px;
  line-height: 1.7;
  color: var(--stone);
  margin: 0 0 20px;
  letter-spacing: 0.005em;
}
.off-theme__progress {
  margin-top: 16px;
}
.off-theme__progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
  font-family: 'Inter', sans-serif;
  margin-bottom: 6px;
}
.off-theme__progress-day {
  color: var(--ink);
  font-weight: 600;
}
.off-theme__progress-bar {
  height: 2px;
  background: var(--paper-2, #ebe7df);
  position: relative;
  overflow: hidden;
}
.off-theme__progress-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--ink);
}

/* --- Block 2: 週次タスク --- */
.off-tasks {
  margin: 0 20px 24px;
  padding: 18px 0;
  border-top: 0.5px solid var(--border);
}
.off-tasks__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.off-tasks__label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink);
  font-family: 'Inter', sans-serif;
}
.off-tasks__progress {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--stone);
  font-family: 'Inter', sans-serif;
}

.off-task-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 0.5px solid var(--border);
}
.off-task-row:last-child {
  border-bottom: none;
}
.off-task-row__check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 0.5px solid var(--mist);
  font-size: 11px;
  color: transparent;
  flex-shrink: 0;
  margin-top: 1px;
  line-height: 1;
}
.off-task-row--done .off-task-row__check {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}
.off-task-row--current .off-task-row__check {
  border-color: var(--ink);
  border-width: 1.5px;
}
.off-task-row__body {
  flex: 1;
  min-width: 0;
}
.off-task-row__title {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 3px;
  letter-spacing: 0.005em;
}
.off-task-row--done .off-task-row__title {
  color: var(--stone);
  text-decoration: line-through;
  text-decoration-color: var(--mist);
}
.off-task-row__sub {
  font-size: 10px;
  color: var(--mist);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.off-task-row--current .off-task-row__sub {
  color: var(--ink);
  font-weight: 500;
}

/* --- Block 3: 専門医ライブQ&A (Premium) --- */
.off-doctor {
  margin: 0 20px 24px;
  padding: 20px 18px;
  background: var(--paper, #f5f2ec);
  border-left: 2px solid var(--ink);
}
.off-doctor__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}
.off-doctor__label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink);
  font-family: 'Inter', sans-serif;
}
.off-doctor__price {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.off-doctor__upcoming {
  padding: 12px 0 14px;
  border-top: 0.5px solid var(--border);
  border-bottom: 0.5px solid var(--border);
  margin-bottom: 16px;
}
.off-doctor__upcoming-when {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 8px;
  font-family: 'Inter', sans-serif;
}
.off-doctor__upcoming-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}
.off-doctor__upcoming-topic {
  font-size: 12px;
  line-height: 1.6;
  color: var(--stone);
  margin-bottom: 14px;
  letter-spacing: 0.005em;
}
.off-doctor__cta {
  display: inline-block;
  padding: 9px 20px;
  background: var(--ink);
  color: var(--white);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  border-radius: 0;
  font-family: inherit;
}

.off-doctor__archive-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--mist);
  margin-bottom: 8px;
  font-family: 'Inter', sans-serif;
}
.off-doctor__archive-row {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
  font-size: 12px;
}
.off-doctor__archive-row:last-child {
  border-bottom: none;
}
.off-doctor__archive-date {
  font-size: 10px;
  color: var(--mist);
  letter-spacing: 0.04em;
  font-family: 'Inter', sans-serif;
  flex-shrink: 0;
  min-width: 36px;
}
.off-doctor__archive-topic {
  color: var(--stone);
  letter-spacing: 0.005em;
  line-height: 1.5;
}

/* --- Block 4: Tifuler ガイド投稿 (補助) --- */
.off-guide {
  margin: 0 20px 28px;
  padding-top: 16px;
  border-top: 0.5px solid var(--border);
}
.off-guide__head {
  margin-bottom: 12px;
}
.off-guide__label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  margin-bottom: 4px;
}
.off-guide__sub {
  font-size: 11px;
  color: var(--stone);
  letter-spacing: 0.005em;
}

.off-guide-post {
  padding: 14px 0;
  border-bottom: 0.5px solid var(--border);
}
.off-guide-post:last-child {
  border-bottom: none;
}
.off-guide-post__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.off-guide-post__avatar {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
.off-guide-post__avatar img,
.off-guide-post__avatar svg {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.off-guide-post__who {
  flex: 1;
  min-width: 0;
}
.off-guide-post__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}
.off-guide-post__handle {
  font-size: 11px;
  color: var(--stone);
  font-weight: 400;
  margin-left: 4px;
}
.off-guide-post__tifuler {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.14em;
  background: #5E6773;
  color: var(--white);
  vertical-align: middle;
  font-family: 'Inter', sans-serif;
}
.off-guide-post__time {
  font-size: 10px;
  color: var(--mist);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: 'Inter', sans-serif;
}
.off-guide-post__body {
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink);
  letter-spacing: 0.005em;
}

/* ============================================================
 * Phase 7 — Circle Hub TOP (3種別ハブ画面)
 * spec §4.9.1.3 役割分離 / 制約 #85 構造で差別化 を入口でも体現
 * 公式 = Serif Hero (権威感) / Tifuler = avatar 主体 (人格) / PEER = paper-2 グレー (横並び)
 * ============================================================ */

.circle-hub {
  display: block;
  padding: 0 0 100px;
  background: var(--paper);
}

/* === 共通: ブロック === */
.circle-hub__block {
  padding: 28px 20px 8px;
  border-bottom: 1px solid var(--paper-3);
}
.circle-hub__block:last-of-type {
  border-bottom: none;
}

.circle-hub__label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}
.circle-hub__label-type {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
}
.circle-hub__label-sub {
  font-size: 12px;
  color: var(--stone);
  letter-spacing: 0.02em;
  line-height: 1.5;
}

/* === 共通: hub-card 基本 === */
.circle-hub-card {
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.circle-hub-card:active {
  opacity: 0.7;
}

/* === Block 1: 公式 = Serif Hero card === */
.circle-hub-card--official-hero {
  background: linear-gradient(180deg, #FBF9F4 0%, #F5F1E8 100%);
  border: 1px solid #E6DDC8;
  border-radius: 4px;
  padding: 24px 22px 22px;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}
.circle-hub-card--official-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--ink);
}
.hub-hero__theme-label {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mist);
  font-family: 'Inter', sans-serif;
  margin-bottom: 8px;
}
.hub-hero__title {
  font-family: 'Noto Serif JP', 'Inter', serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: 0.01em;
  margin: 0 0 8px;
}
.hub-hero__sub {
  font-size: 13px;
  color: var(--stone);
  line-height: 1.6;
  letter-spacing: 0.01em;
  margin: 0 0 14px;
}
.hub-hero__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.hub-hero__meta-item {
  font-size: 11px;
  color: var(--ink);
  letter-spacing: 0.04em;
  font-family: 'Inter', sans-serif;
}
.hub-hero__meta-divider {
  color: var(--mist);
}
.hub-hero__chip {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--paper-3);
  padding: 5px 10px;
  border-radius: 2px;
  font-family: 'Inter', sans-serif;
}

.circle-hub-card--official-sub {
  background: var(--paper-1);
  border: 1px solid var(--paper-3);
  border-left: 2px solid var(--ink);
  border-radius: 4px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hub-sub__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.hub-sub__label {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mist);
  font-family: 'Inter', sans-serif;
}
.hub-sub__title {
  font-family: 'Noto Serif JP', serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.hub-sub__desc {
  font-size: 12px;
  color: var(--stone);
  line-height: 1.5;
}

/* === Block 2: Tifuler = avatar 主体カード === */
.circle-hub-card--tifuler {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--paper-2);
}
.circle-hub-card--tifuler:last-of-type {
  border-bottom: none;
}
.hub-tif__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--paper-2);
}
.hub-tif__avatar svg {
  width: 100%;
  height: 100%;
  display: block;
}
.hub-tif__body {
  flex: 1;
  min-width: 0;
}
.hub-tif__row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.hub-tif__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.hub-tif__role {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist);
  border: 1px solid var(--paper-3);
  padding: 2px 6px;
  border-radius: 2px;
  font-family: 'Inter', sans-serif;
}
.hub-tif__statement {
  font-size: 12px;
  color: var(--stone);
  line-height: 1.5;
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}
.hub-tif__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--mist);
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.02em;
}
.hub-tif__meta-dot {
  color: var(--paper-3);
}
.hub-tif__active {
  color: var(--stone);
}

/* === Block 3: PEER = paper-2 グレー / 横並び感 === */
.circle-hub-card--peer,
.circle-hub-card--peer-rec {
  background: var(--paper-1);
  border: 1px solid var(--paper-3);
  border-radius: 4px;
  padding: 14px 16px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.circle-hub-card--peer-rec {
  background: linear-gradient(180deg, #F4F4F4 0%, #ECECEC 100%);
  border-color: #DCDCDC;
}
.hub-peer__rec-label {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  margin-bottom: 2px;
}
.hub-peer__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.hub-peer__statement {
  font-size: 12px;
  color: var(--stone);
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.hub-peer__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--mist);
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.02em;
  margin-top: 2px;
}
.hub-peer__meta-dot {
  color: var(--paper-3);
}
.hub-peer__joined {
  color: var(--ink);
  font-weight: 500;
}

/* === 共通: 探す CTA === */
.circle-hub-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  margin-top: 8px;
  border: 1px dashed var(--paper-3);
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.circle-hub-cta:active {
  opacity: 0.6;
}
.circle-hub-cta__plus {
  font-size: 14px;
  color: var(--stone);
  font-weight: 300;
}
.circle-hub-cta__text {
  font-size: 12px;
  color: var(--stone);
  letter-spacing: 0.04em;
}

/* ============ Phase 8: Verified Real Badge (spec §4.10.4) ============ */
/* Detail 画面 header 用ピル / IFProfile 一覧用ミニを 2サイズ展開 */
.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 0.5px solid var(--mist);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  color: var(--stone);
  letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}
.verified-badge__check {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  stroke: var(--stone);
}
.verified-badge--mini {
  padding: 2px 7px;
  font-size: 10px;
  gap: 3px;
  border-color: rgba(155, 155, 155, 0.5);
}
.verified-badge--mini .verified-badge__check {
  width: 9px;
  height: 9px;
}

/* Detail header 内レイアウト: Treatment/Product header の Title 下に配置 */
.detail-meta-block__verified {
  margin-top: 8px;
}

/* IFProfile rec-ab__name にインラインで並べるための調整 */
.rec-ab__name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}
.rec-ab__name-row .rec-ab__name {
  margin-bottom: 0;
}

/* ============ Phase 9: top-bar centered variant + Bottom Sheet ============ */
/* Phase 13.1 (2026-04-27): top-bar ロゴ全画面センタリング統一 (.top-bar__logo absolute centering / 上部 .top-bar definition 参照)。
   .top-bar--centered variant + spacer は無効化 (HTML 側のクラス/spacer は no-op として残置可) */
.top-bar__spacer {
  display: none;
}

/* Bottom Sheet (Journal v4 FAB → 3アクション起点) */
.bottom-sheet {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  background: rgba(20, 20, 20, 0.32);
  align-items: flex-end;
  justify-content: center;
}
.bottom-sheet.is-open {
  display: flex;
  animation: bs-fade 0.18s ease-out;
}
@keyframes bs-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.bottom-sheet__panel {
  width: 100%;
  max-width: 420px;
  background: var(--white);
  border-radius: 16px 16px 0 0;
  padding: 12px 0 24px;
  animation: bs-slide 0.22s ease-out;
}
@keyframes bs-slide {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.bottom-sheet__handle {
  width: 36px;
  height: 4px;
  background: var(--mist);
  border-radius: 2px;
  margin: 0 auto 14px;
  opacity: 0.4;
}
.bottom-sheet__title {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
  text-align: center;
  font-weight: 500;
  padding: 0 20px 14px;
  border-bottom: 0.5px solid var(--border);
}
.bottom-sheet__actions {
  display: flex;
  flex-direction: column;
}
.bottom-sheet__action {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  border-bottom: 0.5px solid var(--border);
  transition: background 0.12s;
}
.bottom-sheet__action:last-child {
  border-bottom: none;
}
.bottom-sheet__action:active {
  background: rgba(0, 0, 0, 0.03);
}
.bottom-sheet__action-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.5px solid var(--border);
  border-radius: 50%;
  color: var(--ink);
}
.bottom-sheet__action-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--ink);
}
.bottom-sheet__action-body {
  flex: 1;
}
.bottom-sheet__action-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 2px;
  letter-spacing: -0.01em;
}
.bottom-sheet__action-sub {
  font-size: 11px;
  color: var(--stone);
  letter-spacing: 0.02em;
}
.bottom-sheet__action-chev {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: var(--mist);
}

/* ============ Phase 10: 新規記録フォーム (record_new_maintenance) ============ */
.record-topbar-title {
  flex: 1;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.record-topbar-spacer {
  width: 36px;
}

.record-block {
  padding: 18px 20px;
  border-bottom: 0.5px solid var(--border);
  background: var(--white);
}
.record-block__label {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
  font-weight: 500;
  margin-bottom: 14px;
}
.record-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
}
.record-row:last-child {
  margin-bottom: 0;
}
.record-row__label {
  font-size: 12px;
  color: var(--stone);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.record-row__label .req {
  color: var(--ink);
  margin-left: 2px;
}

.record-input,
.record-select,
.record-textarea {
  width: 100%;
  border: none;
  border-bottom: 0.5px solid var(--border);
  font-size: 15px;
  padding: 8px 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  letter-spacing: -0.005em;
}
.record-input:focus,
.record-select:focus,
.record-textarea:focus {
  outline: none;
  border-bottom-color: var(--ink);
}
.record-input::placeholder,
.record-textarea::placeholder {
  color: var(--mist);
}
.record-textarea {
  min-height: 80px;
  resize: vertical;
  border: 0.5px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.record-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239B9B9B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 14px;
  padding-right: 22px;
}

/* Accordion */
.record-accordion {
  border-bottom: 0.5px solid var(--border);
  background: var(--white);
}
.record-accordion__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.005em;
}
.record-accordion__head-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.record-accordion__head-icon {
  width: 16px;
  height: 16px;
  stroke: var(--stone);
  flex-shrink: 0;
}
.record-accordion__chev {
  width: 14px;
  height: 14px;
  stroke: var(--mist);
  transition: transform 0.2s;
}
.record-accordion.is-open .record-accordion__chev {
  transform: rotate(180deg);
}
.record-accordion__body {
  display: none;
  padding: 0 20px 18px;
}
.record-accordion.is-open .record-accordion__body {
  display: block;
}

.record-verified-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  color: var(--stone);
  padding: 8px 0 14px;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.record-verified-hint__icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  stroke: var(--stone);
  margin-top: 2px;
}
.record-verified-hint strong {
  color: var(--ink);
  font-weight: 500;
}

.record-file-btn {
  width: 100%;
  border: 0.5px dashed var(--border);
  background: transparent;
  border-radius: 8px;
  padding: 14px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--mist);
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.02em;
}
.record-file-btn:hover {
  border-color: var(--stone);
  color: var(--stone);
}

/* Privacy 2-option toggle */
.record-privacy {
  display: flex;
  gap: 10px;
}
.record-privacy__option {
  flex: 1;
  padding: 12px;
  border: 0.5px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--stone);
  text-align: center;
  transition: all 0.15s;
  background: var(--white);
}
.record-privacy__option.is-active {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

/* Save button bar (sticky bottom above tab-bar) */
.record-save-bar {
  position: sticky;
  bottom: 60px;
  padding: 14px 20px;
  background: var(--white);
  border-top: 0.5px solid var(--border);
  z-index: 5;
}
.record-save-btn {
  width: 100%;
  padding: 14px;
  background: var(--ink);
  color: var(--white);
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.05em;
  cursor: pointer;
  font-family: inherit;
}
.record-save-btn:active {
  opacity: 0.85;
}

/* ============ Phase 11: HomeCare 用 使用シーン チップ (複数選択) ============ */
.record-scene {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 0 4px;
}
.record-scene__chip {
  padding: 8px 16px;
  border: 0.5px solid var(--border);
  border-radius: 18px;
  font-size: 13px;
  color: var(--stone);
  cursor: pointer;
  user-select: none;
  background: var(--white);
  transition: all 0.18s;
  letter-spacing: 0.02em;
}
.record-scene__chip.is-active {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

/* ============ Phase 13: post_urls↔Detail 往復リンク (Direction B / 本人専用 footer) ============ */
.detail-edit-postlink-block {
  padding: 18px 20px 26px;
  border-top: 0.5px solid var(--border);
  text-align: center;
}
.detail-edit-postlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--stone);
  text-decoration: none;
  letter-spacing: 0.04em;
  padding: 8px 14px;
  border: 0.5px solid var(--border);
  border-radius: 999px;
  transition: all 0.18s;
  font-family: inherit;
}
.detail-edit-postlink:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.detail-edit-postlink__chev {
  width: 12px;
  height: 12px;
  color: var(--mist);
  transition: color 0.18s;
}
.detail-edit-postlink:hover .detail-edit-postlink__chev {
  color: var(--ink);
}
.detail-edit-postlink-block__owner-note {
  font-size: 9px;
  color: var(--mist);
  letter-spacing: 0.14em;
  margin-top: 8px;
  text-transform: uppercase;
}

/* ============ Phase 12: ルーティン登録ページ ============ */
/* Kind 単一選択 (Morning / Night / SOS) */
.record-rkind {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 0 4px;
}
.record-rkind__chip {
  padding: 8px 18px;
  border: 0.5px solid var(--border);
  border-radius: 18px;
  font-size: 13px;
  color: var(--stone);
  cursor: pointer;
  user-select: none;
  background: var(--white);
  transition: all 0.18s;
  letter-spacing: 0.02em;
}
.record-rkind__chip.is-active {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

/* 編集可能ステップカード (番号付き) */
.record-rstep {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 0.5px solid var(--border);
  position: relative;
}
.record-rstep:last-of-type { border-bottom: none; }
.record-rstep__num {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--stone);
  min-width: 22px;
  padding-top: 16px;
  letter-spacing: 0.06em;
  font-weight: 500;
}
.record-rstep__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.record-rstep__product {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  padding-right: 28px;
  border: 0.5px dashed var(--border);
  border-radius: 8px;
  background: var(--paper);
  cursor: pointer;
  transition: all 0.18s;
  min-height: 44px;
}
.record-rstep__product:hover {
  border-style: solid;
  border-color: var(--ink);
}
.record-rstep__product--filled {
  border-style: solid;
  border-color: var(--border);
  background: var(--white);
}
.record-rstep__product-image {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
}
.record-rstep__product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.record-rstep__product-image-empty {
  font-size: 18px;
  color: var(--mist);
  font-weight: 300;
  line-height: 1;
}
.record-rstep__product-name {
  flex: 1;
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.record-rstep__product-placeholder {
  flex: 1;
  font-size: 13px;
  color: var(--mist);
  letter-spacing: 0.02em;
}
.record-rstep__product-chev {
  width: 14px;
  height: 14px;
  color: var(--mist);
  flex-shrink: 0;
}
.record-rstep__note {
  width: 100%;
  border: none;
  padding: 4px 2px;
  background: transparent;
  font-size: 13px;
  color: var(--ink);
  font-family: inherit;
  resize: none;
  min-height: 24px;
  line-height: 1.5;
}
.record-rstep__note::placeholder {
  color: var(--mist);
}
.record-rstep__note:focus {
  outline: none;
  background: var(--paper);
  border-radius: 4px;
}
.record-rstep__delete {
  position: absolute;
  top: 14px;
  right: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--mist);
  transition: color 0.18s;
}
.record-rstep__delete:hover {
  color: #C04040;
}
.record-rstep__delete svg {
  width: 14px;
  height: 14px;
}

/* + ステップを追加 */
.record-rstep-add {
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  border: 0.5px dashed var(--border);
  border-radius: 8px;
  background: transparent;
  font-size: 13px;
  color: var(--stone);
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.02em;
  transition: all 0.18s;
}
.record-rstep-add:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* Shelf Modal (HomeCare 選択) */
.shelf-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 1000;
  display: none;
  align-items: flex-end;
  justify-content: center;
  transition: background 0.2s;
}
.shelf-modal.is-open {
  display: flex;
  background: rgba(0, 0, 0, 0.4);
}
.shelf-modal__panel {
  width: 100%;
  max-width: 390px;
  background: var(--white);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  animation: shelfSlideUp 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
}
@keyframes shelfSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.shelf-modal__handle {
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 8px auto 4px;
  flex-shrink: 0;
}
.shelf-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px 12px;
  border-bottom: 0.5px solid var(--border);
  flex-shrink: 0;
}
.shelf-modal__title {
  font-size: 15px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.shelf-modal__close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--stone);
  margin-right: -6px;
}
.shelf-modal__close svg {
  width: 18px;
  height: 18px;
}
.shelf-modal__list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.shelf-modal__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 0.5px solid var(--border);
}
.shelf-modal__item:last-child {
  border-bottom: none;
}
.shelf-modal__item:hover {
  background: var(--paper);
}
.shelf-modal__item-image {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--paper);
}
.shelf-modal__item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shelf-modal__item-body {
  flex: 1;
  min-width: 0;
}
.shelf-modal__item-name {
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
}
.shelf-modal__item-brand {
  font-size: 11px;
  color: var(--stone);
  margin-top: 2px;
  letter-spacing: 0.02em;
}

/* ============================================================
 * Bottom-nav Profile tab (Journal → Profile / Phase 14 #131)
 * 顔写真円形アイコン (home_v1.css と同一定義 / 全画面共有)
 * ============================================================ */
.tab-item__avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid currentColor;
  flex: 0 0 22px;
}
.tab-item__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* === Tifuler Profile + Picks UI 共通 Pick button (Map Pin / HOME同型) === */
.rec-ab__item, .rec-cat-ed__item, .shelf-ed__item, .routine-card {
  position: relative;
}
.ifp-pick {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(31, 35, 46, 0.08);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1F232E;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  transition: transform 150ms ease, background 150ms ease;
}
.ifp-pick svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
}
.ifp-pick:hover { background: white; transform: scale(1.06); }
.ifp-pick:active { transform: scale(0.95); }
.ifp-pick.is-picked { color: white; background: #D97757; }
.ifp-pick.is-picked svg { fill: white; stroke: white; }

.shelf-ed__item .ifp-pick {
  width: 26px;
  height: 26px;
  top: 6px;
  right: 6px;
}
.shelf-ed__item .ifp-pick svg { width: 13px; height: 13px; }


/* === Instagram式 HERO レイアウト (Tifuler Profile + My Page) === */
.greet-block--ig {
  flex-direction: row;
  align-items: center;
  gap: 18px;
}
.greet-block--ig .greet-avatar {
  width: 86px;
  height: 86px;
}
.greet-block--ig .greet-avatar-stack {
  align-items: center;
}
.greet-block--ig .greet-avatar-stack .greet-avatar {
  width: 86px;
  height: 86px;
}
.greet-block--ig .greet-block__content {
  flex: 1;
  min-width: 0;
  padding-top: 0;
}


/* === FB Round 5: Pick位置調整 (テキストと重ならないようimage領域内へ) === */
.rec-ab__image, .rec-cat-ed__thumb, .shelf-ed__image {
  position: relative;
}
.rec-ab__image .ifp-pick,
.rec-cat-ed__thumb .ifp-pick,
.shelf-ed__image .ifp-pick {
  width: 26px;
  height: 26px;
  top: 6px;
  right: 6px;
  bottom: auto;
}
.rec-ab__image .ifp-pick svg,
.rec-cat-ed__thumb .ifp-pick svg,
.shelf-ed__image .ifp-pick svg {
  width: 13px;
  height: 13px;
}

/* routine-card: head のUpdate日と重ならないようpadding-right */
.routine-card {
  padding-right: 50px;
}


/* === FB Round 6: Pick toast (Tifuler Profile 等の共通) === */
.pick-toast {
  position: fixed;
  bottom: 110px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(31, 35, 46, 0.94);
  color: white;
  padding: 12px 24px;
  border-radius: 999px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  opacity: 0;
  z-index: 100;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
}
.pick-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ==========================================================================
   Area Select (CLINIC エリア変更画面 / area_select_v1.html)
   - Detail back-nav (top-bar--detail / 戻る左 + タイトル中央)
   - Region chip (横スクロール / Tokyo Active / 他は Soon)
   - Area chip (折返し / 複数選択可 / ON=ink背景 OFF=線)
   - Sticky bottom CTA
   ========================================================================== */

/* Detail-style top-bar (back + center title) */
.top-bar--detail .top-bar__logo { display: none; }
.top-bar__title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
  pointer-events: none;
}
.top-bar__spacer {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
}

/* Lead text */
.as-lead {
  padding: 18px 20px 4px;
}
.as-lead__text {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--stone);
  letter-spacing: -0.005em;
}

/* Section */
.as-section {
  padding: 20px 0 14px;
}
.as-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 20px 12px;
}
.as-section__label {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--mist);
  text-transform: uppercase;
}
.as-section__hint {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--mist);
}

/* Chip group */
.as-chips {
  display: flex;
  gap: 8px;
}
.as-chips--scroll {
  padding: 0 20px 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.as-chips--scroll::-webkit-scrollbar { display: none; }
.as-chips--scroll::after { content: ''; flex: 0 0 12px; }
.as-chips--wrap {
  padding: 0 20px;
  flex-wrap: wrap;
  gap: 10px;
}

/* Chip */
.as-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 10px 16px;
  border: 0.5px solid var(--border-strong);
  border-radius: 22px;
  background: var(--white);
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--stone);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
  user-select: none;
  white-space: nowrap;
}
.as-chip:hover { color: var(--ink); border-color: var(--ink); }
.as-chip.is-active {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}
.as-chip.is-active:hover { color: var(--white); }
.as-chip:active { transform: scale(0.97); }

.as-chip.is-disabled {
  color: var(--mist);
  cursor: not-allowed;
  background: var(--porcelain);
  border-style: dashed;
}
.as-chip.is-disabled:hover { color: var(--mist); border-color: var(--border-strong); }

.as-chip__soon {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--mist);
  text-transform: uppercase;
  padding: 2px 6px;
  border: 0.5px solid var(--border-strong);
  border-radius: 4px;
  margin-left: 2px;
}

/* Area chip variant (折返し時の余白調整) */
.as-chip--area {
  font-size: 13.5px;
}

/* Sticky CTA */
.as-cta-wrap {
  position: sticky;
  bottom: 0;
  margin-top: 32px;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--white) 80%, rgba(255, 255, 255, 0));
  z-index: 5;
}
.as-cta {
  width: 100%;
  height: 52px;
  border: none;
  border-radius: 26px;
  background: var(--ink);
  color: var(--white);
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.12s ease, opacity 0.18s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}
.as-cta:hover { background: #000; }
.as-cta:active { transform: scale(0.98); }
.as-cta.is-disabled {
  background: var(--fog);
  color: var(--white);
  cursor: not-allowed;
  box-shadow: none;
  pointer-events: none;
}

/* iPhone実機モード: app-frame は overflow visible になっている (sticky 効く) */
@media (max-width: 430px) {
  .as-cta-wrap {
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
}

/* ============================================================
   v4 Circle Visual Upgrade — Phase 1 (共通基盤拡張)
   Spec: Tiful_v4_Circle_VisualUpgrade_Spec.md §5
   T1-T9 厳守 (T1: 無彩色UI / T2: 色面禁止 / T4: 写真主役 / T9: Inter Light Tabular)
   追加日: 2026-05-04 (Phase 1)
   ============================================================ */

/* === §5.1 トークン拡張 === */
:root {
  /* Stat タイポグラフィ (T9) */
  --stat-xl: 44px;   /* Admin Hero 数字 */
  --stat-lg: 32px;   /* セクション数字 */
  --stat-md: 24px;   /* カード数字 */
  --stat-sm: 18px;   /* meta 数字 */

  /* 印象点グラデ (T3 拡張 / 既存 --logo-glow-* とは別物) */
  --glow-pink: rgba(232, 165, 181, 0.6);
  --glow-blue: rgba(127, 184, 212, 0.5);
  --glow-mint: rgba(168, 220, 196, 0.5);   /* Cheer / Achievement 用 */
  --shimmer-glass: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.2) 100%);

  /* グラスモーフィズム (T4 補強 / 写真上のオーバーレイ専用 = T2 大面積禁止厳守) */
  --glass-blur-sm: blur(8px);
  --glass-blur-md: blur(16px);
  --glass-blur-lg: blur(24px);
  --glass-bg-light: rgba(255, 255, 255, 0.72);
  --glass-bg-dark: rgba(26, 26, 26, 0.55);

  /* 種別カラー (chip 専用 / T1-T2 厳守 = カード全面塗り禁止) */
  --chip-tifuler: linear-gradient(135deg, #E8E4D8 0%, #D2CCBC 100%);
  --chip-tifuler-ink: #3F3D38;
  --chip-peer: #EFEFEC;
  --chip-peer-ink: #5C5A55;
  --chip-official: #1F232E;
  --chip-official-ink: #FFFFFF;

  /* KV オーバーレイ (T4 写真主役) */
  --kv-overlay-light: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.05) 60%, rgba(0,0,0,0.35) 100%);
  --kv-overlay-strong: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.7) 100%);

  /* アニメーションイージング */
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* === §5.1 数字専用 utility (T9) === */
.stat-number {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' on;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.stat-number--xl { font-size: var(--stat-xl); line-height: 1.0; }
.stat-number--lg { font-size: var(--stat-lg); line-height: 1.05; }
.stat-number--md { font-size: var(--stat-md); line-height: 1.1; }
.stat-number--sm { font-size: var(--stat-sm); line-height: 1.2; }

/* === §5.2-① .kv-card (16:9 KV画像 + grad overlay / T4 写真主役) === */
.kv-card {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--porcelain);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  border-radius: 14px;
}
.kv-card--ratio-3-4 { aspect-ratio: 3 / 4; }
.kv-card--ratio-1-1 { aspect-ratio: 1 / 1; }
.kv-card--ratio-4-3 { aspect-ratio: 4 / 3; }
.kv-card--ratio-21-9 { aspect-ratio: 21 / 9; }
.kv-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--kv-overlay-light);
  pointer-events: none;
  z-index: 1;
}
.kv-card--overlay-strong::after { background: var(--kv-overlay-strong); }
.kv-card--overlay-none::after { display: none; }
.kv-card__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px 18px;
  color: var(--white);
  gap: 6px;
}
.kv-card__content--top { justify-content: flex-start; }
.kv-card__content--center { justify-content: center; align-items: center; text-align: center; }
.kv-card__title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.kv-card__sub {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  opacity: 0.92;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* === §5.2-② .glass-overlay (写真上の上品な情報レイヤー / T2 KV内のみ) === */
.glass-overlay {
  position: absolute;
  z-index: 3;
  background: var(--glass-bg-light);
  -webkit-backdrop-filter: var(--glass-blur-md);
  backdrop-filter: var(--glass-blur-md);
  border-radius: 12px;
  padding: 10px 14px;
  color: var(--ink);
  border: 0.5px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.glass-overlay--dark {
  background: var(--glass-bg-dark);
  color: var(--white);
  border: 0.5px solid rgba(255, 255, 255, 0.1);
}
.glass-overlay--blur-sm { -webkit-backdrop-filter: var(--glass-blur-sm); backdrop-filter: var(--glass-blur-sm); }
.glass-overlay--blur-lg { -webkit-backdrop-filter: var(--glass-blur-lg); backdrop-filter: var(--glass-blur-lg); }
.glass-overlay--top-left { top: 12px; left: 12px; }
.glass-overlay--top-right { top: 12px; right: 12px; }
.glass-overlay--bottom-left { bottom: 12px; left: 12px; }
.glass-overlay--bottom-right { bottom: 12px; right: 12px; }
.glass-overlay--top-full {
  top: 0; left: 0; right: 0;
  border-radius: 0;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
}
.glass-overlay--bottom-full {
  bottom: 0; left: 0; right: 0;
  border-radius: 0;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

/* === §5.2-③ .stat-block (数字 + ラベル + 30日変化 / Substack式) === */
.stat-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat-block--inline { flex-direction: row; align-items: baseline; gap: 12px; }
.stat-block__label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--mist);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.stat-block__value {
  /* .stat-number--xl/lg/md/sm を併用すること */
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' on;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.0;
}
.stat-block__delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--stone);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' on;
}
.stat-block__delta--up { color: #4FA88E; }
.stat-block__delta--down { color: #C9626F; }
.stat-block__delta-arrow {
  font-size: 10px;
  line-height: 1;
}
.stat-block__sub {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 12px;
  color: var(--stone);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' on;
  margin-top: 2px;
}
.stat-block__chart {
  margin-top: 10px;
  width: 100%;
  height: auto;
}

/* === §5.2-④ .milestone-bar (○日経過 / N段階 進捗バー / T9 数字併用) === */
.milestone-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.milestone-bar__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.milestone-bar__title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.milestone-bar__phase {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 11px;
  color: var(--stone);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.milestone-bar__track {
  position: relative;
  width: 100%;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: visible;
}
.milestone-bar__fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: var(--logo-gradient);
  border-radius: 3px;
  box-shadow: 0 0 8px var(--glow-mint);
  transition: width 1.2s var(--ease-soft);
}
.milestone-bar__steps {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}
.milestone-bar__step {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid var(--fog);
  position: relative;
  z-index: 2;
}
.milestone-bar__step--reached {
  background: var(--ink);
  border-color: var(--ink);
}
.milestone-bar__step--current {
  background: var(--white);
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.08);
}
.milestone-bar__meta {
  display: flex;
  gap: 16px;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 12px;
  color: var(--stone);
}
.milestone-bar__meta-item {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.milestone-bar__meta-num {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  color: var(--ink);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' on;
  letter-spacing: -0.01em;
}

/* === §5.2-⑤ .avatar-stack (overlap 7-9 avatar + +N more / PEER用) === */
.avatar-stack {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.avatar-stack__list {
  display: inline-flex;
  align-items: center;
}
.avatar-stack__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--white);
  background-color: var(--porcelain);
  background-size: cover;
  background-position: center;
  margin-left: -10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}
.avatar-stack__avatar:first-child { margin-left: 0; }
.avatar-stack__avatar--lg { width: 36px; height: 36px; margin-left: -12px; }
.avatar-stack__avatar--sm { width: 22px; height: 22px; margin-left: -8px; }
.avatar-stack__more {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 12px;
  color: var(--stone);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' on;
  white-space: nowrap;
}
.avatar-stack__more strong {
  color: var(--ink);
  font-weight: 500;
  margin-right: 2px;
}

/* === Phase 1 ここまで / Phase 2 (Hub Card) で .cv2-card に kv-card を組込予定 === */


/* ============================================================
 * §6 Profile (v4 ShopMy踏襲モデル) — 2026-05-05 Phase 6b で追加
 *   - 旧: tifulers_ifprofile_v4.html inline <style>
 *   - 共有先: tifulers_ifprofile_v4.html (Learner視点固定) / journal_v4.html (My Profile = Tifuler視点)
 *   - profile-hero / profile-detail / profile-tabs / profile-panel / mp-* / mt-* / hc-* / pc-* / aside-detail / pick-toast / add-dialog 等
 * ============================================================ */

/* =================================================================
   Tiful v4 Tifuler Profile — ShopMy踏襲モデル (Phase 2 パイロット)
   - TOP状態: Hero 38vh + Big Serif Name + Trusted + ABOUT button
   - Detail状態: 同一画面 transform 疑似遷移 (380ms)
   - 5固定タブ + 後ろに自由配置スタブ
   ================================================================= */

/* --- Body --- */
body { background: var(--bg-porcelain, #FAFAFA); }
body.is-detail { overflow: hidden; }

/* --- TOP Bar (Hero overlay = 透明) --- */
.app-frame { padding-bottom: 0; }
.profile-page .top-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  /* C: 上→下 dark gradient overlay (TOP/Detail 共通 / 白ロゴ・白アイコンの可読性確保) */
  background: linear-gradient(180deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.18) 55%, rgba(0,0,0,0) 100%);
  border-bottom: none;
  z-index: 10;
  padding: max(env(safe-area-inset-top), 12px) 16px 14px;
  transition: background 280ms ease;
}
.profile-page .top-bar .icon-btn { color: #fff; }
.profile-page .top-bar__logo-link { display: inline-flex; align-items: center; }
.profile-page .top-bar__logo { height: 22px; width: auto; display: inline-block; }
/* Detail でも top-bar は透明維持 + 白ロゴ + 白アイコンを継続 (ShopMy 踏襲) */

/* --- Hero (Profile部) --- */
.profile-hero {
  position: relative;
  width: 100%;
  height: 30vh;
  min-height: 230px;
  max-height: 300px;
  overflow: hidden;
  background: #1A1A1A;
  transition: height 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.profile-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transform: scale(1.04);
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
              object-position 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.profile-hero__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.25) 0%,
    rgba(0,0,0,0.05) 35%,
    rgba(0,0,0,0.15) 75%,
    rgba(0,0,0,0.55) 100%);
  pointer-events: none;
  transition: opacity 280ms ease;
}

/* --- Hero Title TOP状態 (Curated by + Big Name) --- */
.profile-hero__title {
  position: absolute;
  left: 0; right: 0;
  bottom: 64px;
  text-align: center;
  color: #fff;
  padding: 0 28px;
  transition: opacity 200ms ease, transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.profile-hero__curated {
  font-family: 'Noto Serif JP', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.04em;
  opacity: 0.85;
  margin-bottom: 4px;
}
.profile-hero__name {
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin-bottom: 10px;
  text-shadow: 0 1px 14px rgba(0,0,0,0.3);
}
.profile-hero__trusted {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.05em;
  opacity: 0.92;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  justify-content: center;
}
.profile-hero__trusted-num {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.02em;
}
.profile-hero__trusted-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  opacity: 0.72;
}

/* --- ABOUT button (右下) --- */
.profile-hero__about {
  position: absolute;
  right: 16px;
  bottom: 16px;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.32);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: opacity 200ms ease, background 200ms ease;
}
.profile-hero__about:hover { background: rgba(255,255,255,0.28); }

/* --- Hero Action icons (右上 share/compass) は top-bar に存在 --- */

/* =================================================================
   Detail 状態 (body.is-detail で切替)
   ================================================================= */
body.is-detail .profile-hero {
  height: 100vh;
  height: 100dvh;
  max-height: none;
}
body.is-detail .profile-hero__img {
  transform: scale(1.05);
  object-position: center 38%; /* B: 22%→38% / 顔位置を下げ Big Name と被らないように */
}
body.is-detail .profile-hero__gradient { opacity: 0.7; }

/* A: Detail で bottom tab-bar を hide (ShopMy同様 Detail = Profile詳細overlay性質) */
body.is-detail .tab-bar { display: none; }
body.is-detail .profile-hero__title { opacity: 0; transform: translateY(-12px); pointer-events: none; }
body.is-detail .profile-hero__about { opacity: 0; pointer-events: none; }

/* Detail Content (Big Name + Bio + Trusted + SNS strip) — ShopMy 踏襲サイズ */
.profile-detail {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  /* B: bottom余白 28px → 60px (tab-bar hide でも safe-area + 視覚的余裕を確保) */
  padding: 0 32px max(calc(env(safe-area-inset-bottom) + 32px), 60px);
  text-align: center;
  color: #fff;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 280ms ease 130ms, transform 380ms cubic-bezier(0.22, 1, 0.36, 1) 130ms;
  pointer-events: none;
}
body.is-detail .profile-detail {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.profile-detail__name {
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  font-size: 32px;
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin-bottom: 16px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.35);
}
.profile-detail__bio {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  font-size: 12.5px;
  line-height: 1.75;
  letter-spacing: 0.02em;
  opacity: 0.92;
  margin-bottom: 2px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}
.profile-detail__bio:last-of-type { margin-bottom: 0; }
.profile-detail__bio + .profile-detail__bio { margin-top: 0; }

/* Detail Metrics (ログ/相談/返信率/サポート) — ShopMy 踏襲スリム */
.profile-detail__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 18px 0 14px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.profile-detail__metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.profile-detail__metric-num {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: #fff;
  letter-spacing: 0.02em;
  line-height: 1;
  text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}
.profile-detail__metric-num-pct {
  font-size: 10px;
  opacity: 0.75;
  margin-left: 1px;
}
.profile-detail__metric-label {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 9.5px;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.72);
}

.profile-detail__trusted {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  font-weight: 400;
  opacity: 0.92;
  margin-top: 4px;
  margin-bottom: 18px;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  justify-content: center;
  width: 100%;
}
.profile-detail__trusted-num {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.02em;
}
.profile-detail__trusted-label {
  font-family: 'Inter', sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.72;
}
.profile-detail__social {
  display: flex;
  justify-content: center;
  gap: 28px;
}
.profile-detail__social a {
  color: #fff;
  width: 21px; height: 21px;
  display: inline-flex;
  align-items: center; justify-content: center;
  opacity: 0.95;
  transition: opacity 180ms ease, transform 180ms ease;
}
.profile-detail__social a:hover { opacity: 1; transform: translateY(-1px); }
.profile-detail__social svg { width: 100%; height: 100%; }

/* Detail Close button (左上 = 戻る) はtop-bar back ボタンを再利用 */

/* =================================================================
   Tabs (5固定 + 自由配置)
   ================================================================= */
.profile-tabs-wrap {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fff;
  border-bottom: 1px solid var(--border-soft, #F0F0F0);
  transition: opacity 200ms ease;
}
body.is-detail .profile-tabs-wrap { opacity: 0; pointer-events: none; }

.profile-tabs {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 16px;
}
.profile-tabs::-webkit-scrollbar { display: none; }
.profile-tab {
  flex: 0 0 auto;
  padding: 14px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--text-mist, #9B9B9B);
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  transition: color 180ms ease;
}
.profile-tab.is-active { color: var(--text-ink, #1A1A1A); }
.profile-tab.is-active::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px;
  bottom: 0;
  height: 2px;
  background: var(--text-ink, #1A1A1A);
}
.profile-tab__sep {
  flex: 0 0 auto;
  width: 1px;
  align-self: center;
  height: 14px;
  background: var(--border-mist, #E8E8E8);
  margin: 0 4px;
}
.profile-tab--add {
  color: var(--text-mist, #9B9B9B);
  font-size: 14px;
  letter-spacing: 0;
}

/* --- Panels --- */
.profile-panels { transition: opacity 200ms ease; }
body.is-detail .profile-panels { opacity: 0; pointer-events: none; }
.profile-panel { display: none; padding: 16px 16px 100px; }
.profile-panel.is-active { display: block; }

/* --- LATEST UPDATE: 時系列ミックス --- */
.lu-list { display: flex; flex-direction: column; gap: 14px; }
.lu-item {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--border-soft, #F0F0F0);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s, box-shadow 0.2s;
}
.lu-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
.lu-item__thumb {
  width: 92px; height: 92px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-porcelain, #FAFAFA);
  position: relative;
}
.lu-item__thumb img {
  width: 100%; height: 100%; object-fit: cover;
}
.lu-item__body { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.lu-item__head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.lu-item__pill {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--bg-porcelain, #FAFAFA);
  color: var(--text-stone, #6B6B6B);
}
.lu-item__pill--maintenance { background: #FAEEF1; color: #C2748B; }
.lu-item__pill--homecare    { background: #E8F2F8; color: #5A8AA6; }
.lu-item__pill--innercare   { background: #F4F0E8; color: #9B855A; }
.lu-item__pill--routine     { background: #EEEAF3; color: #7C6B96; }
.lu-item__date {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--text-mist, #9B9B9B);
  letter-spacing: 0.04em;
}
.lu-item__name {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-ink, #1A1A1A);
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lu-item__sub {
  font-size: 12px;
  color: var(--text-stone, #6B6B6B);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- 共通 Product Card (HOMECARE + INNERCARE 統一 / ShopMy 踏襲) --- */
.pc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.pc-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border-soft, #F0F0F0);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s, box-shadow 0.2s;
}
.pc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
.pc-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background: var(--bg-porcelain, #FAFAFA);
  overflow: hidden;
}
.pc-card__thumb img {
  width: 100%; height: 100%; object-fit: cover;
}
.pc-card__date {
  position: absolute;
  top: 10px; left: 10px;
  padding: 4px 9px;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-ink, #1A1A1A);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  border-radius: 4px;
}
.pc-card__pick {
  position: absolute;
  top: 8px; right: 8px;
  width: 30px; height: 30px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s, background 0.18s;
  padding: 0;
}
.pc-card__pick:hover { background: #fff; }
.pc-card__pick:active { transform: scale(0.92); }
.pc-card__pick svg {
  width: 16px; height: 16px;
  stroke: var(--text-stone, #6B6B6B);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pc-card__pick.is-picked svg {
  fill: #C2748B;
  stroke: #C2748B;
}
.pc-card__pick.is-picked { background: #fff; }
.pc-card__body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pc-card__cat {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--text-mist, #9B9B9B);
  text-transform: uppercase;
}
.pc-card__name {
  font-family: 'Noto Serif JP', serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-ink, #1A1A1A);
  letter-spacing: 0.02em;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pc-card__note {
  font-size: 11px;
  color: var(--text-stone, #6B6B6B);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 2px;
}

/* --- INNERCARE Grid --- */
.ic-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ic-card {
  background: #fff;
  border: 1px solid var(--border-soft, #F0F0F0);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s, box-shadow 0.2s;
}
.ic-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
.ic-card__thumb {
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(135deg, #FCF7EE 0%, #F4ECDA 100%);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.ic-card__thumb svg { width: 50%; height: 50%; opacity: 0.7; }
.ic-card__thumb--photo { background: var(--bg-porcelain, #FAFAFA); }
.ic-card__thumb--photo img {
  width: 100%; height: 100%; object-fit: cover;
}
.ic-card__cap-1, .ic-card__cap-2, .ic-card__cap-3, .ic-card__cap-4, .ic-card__cap-5 {
  position: absolute;
  font-family: 'Noto Serif JP', serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #9B855A;
  opacity: 0.5;
}
.ic-card__body { padding: 12px 14px 16px; }
.ic-card__cat {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: #9B855A;
  margin-bottom: 4px;
}
.ic-card__name {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-ink, #1A1A1A);
  margin-bottom: 4px;
  line-height: 1.4;
}
.ic-card__note {
  font-size: 11px;
  color: var(--text-stone, #6B6B6B);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- INNERCARE bottle SVG (色違い) --- */
.ic-bottle {
  width: 50%; height: 50%;
}

/* --- CIRCLE Panel: Hosting Circle Card --- */
.cc-intro {
  padding: 2px 4px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-bottom: 1px solid var(--border-soft, #F0F0F0);
  margin-bottom: 14px;
}
.cc-intro__title {
  font-family: 'Noto Serif JP', serif;
  font-size: 15px;
  color: var(--text-ink, #1A1A1A);
  letter-spacing: 0.02em;
}
.cc-card {
  display: block;
  background: #fff;
  border: 1px solid var(--border-soft, #F0F0F0);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s, box-shadow 0.2s;
}
.cc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
.cc-card__hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--bg-porcelain, #FAFAFA);
  position: relative;
  overflow: hidden;
}
.cc-card__hero img {
  width: 100%; height: 100%; object-fit: cover;
}
.cc-card__hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.18) 55%, rgba(0,0,0,0.45) 100%);
}
.cc-card__hero-text {
  position: absolute;
  left: 16px; right: 16px; bottom: 16px;
  color: #fff;
}
.cc-card__role-pill {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.94);
  color: #1A1A1A;
  margin-bottom: 10px;
}
.cc-card__title {
  font-family: 'Noto Serif JP', serif;
  font-size: 22px;
  letter-spacing: 0.02em;
  line-height: 1.25;
  margin-bottom: 4px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.cc-card__subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.92;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
}
.cc-card__body {
  padding: 16px 16px 18px;
}
.cc-card__lead {
  font-size: 13px;
  color: var(--text-stone, #6B6B6B);
  line-height: 1.6;
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cc-card__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft, #F0F0F0);
}
.cc-card__stat-num {
  font-family: 'Noto Serif JP', serif;
  font-size: 18px;
  color: var(--text-ink, #1A1A1A);
  letter-spacing: 0.02em;
  line-height: 1;
  margin-bottom: 4px;
}
.cc-card__stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--text-mist, #9B9B9B);
  text-transform: uppercase;
}
.cc-card__cta {
  display: block;
  text-align: center;
  background: var(--text-ink, #1A1A1A);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  padding: 13px 16px;
  border-radius: 999px;
  margin-top: 16px;
  text-transform: uppercase;
}

/* === Phase 9-B: Circle タブ参加/運営切替 UI ============================== */
/* セグメント chip (= mt-mode-chip 類似 / Tiful トンマナ純化) */
.circle-mode-chip {
  display: flex;
  background: #F4F4F4;
  border-radius: 999px;
  padding: 3px;
  margin: 2px 4px 18px;
  -webkit-tap-highlight-color: transparent;
}
.circle-mode-chip__btn {
  flex: 1;
  padding: 9px 18px;
  border: none;
  background: transparent;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.10em;
  color: var(--text-mist, #9B9B9B);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  text-transform: uppercase;
}
.circle-mode-chip__btn.is-active {
  background: #FFFFFF;
  color: var(--text-ink, #1A1A1A);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.circle-mode-chip__btn:focus { outline: none; }

/* mode 切替で cc-card の表示制御 */
#panel-circle[data-circle-mode="joined"] .cc-card[data-circle-role="hosting"] { display: none; }
#panel-circle[data-circle-mode="hosting"] .cc-card[data-circle-role="joined"] { display: none; }

/* JOINED role pill variant (= 既存 HOSTING 白 bg より控えめ) */
.cc-card__role-pill[data-role="joined"] {
  background: rgba(255, 255, 255, 0.78);
  color: #555;
}

/* 空状態 (= 運営 0 件のとき) */
.cc-empty-cta {
  margin: 4px 4px 16px;
  padding: 28px 22px;
  border: 1px dashed var(--border-soft, #F0F0F0);
  border-radius: 14px;
  text-align: center;
  background: var(--bg-porcelain, #FAFAFA);
}
.cc-empty-cta__title {
  font-family: 'Noto Serif JP', serif;
  font-size: 15px;
  color: var(--text-ink, #1A1A1A);
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}
.cc-empty-cta__sub {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  color: var(--text-stone, #6B6B6B);
  line-height: 1.6;
}

/* --- Stub Panel (SNS / Custom) --- */
.stub-panel {
  padding: 60px 20px;
  text-align: center;
}
.stub-panel__icon {
  width: 56px; height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--bg-porcelain, #FAFAFA);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-mist, #9B9B9B);
}
.stub-panel__title {
  font-family: 'Noto Serif JP', serif;
  font-size: 18px;
  color: var(--text-ink, #1A1A1A);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.stub-panel__sub {
  font-size: 12px;
  color: var(--text-mist, #9B9B9B);
  line-height: 1.6;
  letter-spacing: 0.04em;
  font-family: 'Inter', sans-serif;
}

/* --- Custom Tab Panel (Phase 3c) --- */
.ct-header {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-soft, #F0F0F0);
}
.ct-header__title {
  font-family: 'Noto Serif JP', serif;
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--text-ink, #1A1A1A);
  margin: 0 0 4px;
  text-transform: uppercase;
}
.ct-header__sub {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--text-mist, #9B9B9B);
  letter-spacing: 0.1em;
  margin: 0;
}
.ct-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ct-item {
  display: block;
  background: #fff;
  border: 1px solid var(--border-soft, #F0F0F0);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.ct-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}
.ct-item__thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bg-porcelain, #FAFAFA);
}
.ct-item__thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.ct-item__body { padding: 10px 12px 12px; }
.ct-item__pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}
.ct-item__name {
  font-family: 'Noto Serif JP', serif;
  font-size: 13px;
  color: var(--text-ink, #1A1A1A);
  line-height: 1.3;
  margin-bottom: 4px;
  letter-spacing: 0.01em;
}
.ct-item__comment {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  color: var(--text-mist, #9B9B9B);
  line-height: 1.4;
  letter-spacing: 0.02em;
}

/* --- Tab drag visual (free zone only / Phase 3c prototype) --- */
.profile-tab[data-free="true"]:hover {
  cursor: grab;
}
.profile-tab[data-free="true"]:active {
  cursor: grabbing;
  opacity: 0.85;
}

/* --- Add Custom Tab Dialog (Phase 3c) --- */
.add-dialog {
  position: fixed; inset: 0;
  z-index: 100;
  display: flex; align-items: flex-end; justify-content: center;
}
.add-dialog[hidden] { display: none; }
.add-dialog__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.add-dialog__panel {
  position: relative;
  width: 100%;
  max-height: 90vh;
  background: #fff;
  border-radius: 18px 18px 0 0;
  display: flex; flex-direction: column;
  animation: dialogSlideUp 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes dialogSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.add-dialog__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border-soft, #F0F0F0);
  flex-shrink: 0;
}
.add-dialog__title {
  font-family: 'Noto Serif JP', serif;
  font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--text-ink, #1A1A1A);
  margin: 0;
}
.add-dialog__close {
  width: 32px; height: 32px;
  border: none; background: var(--bg-porcelain, #FAFAFA);
  border-radius: 50%;
  font-size: 18px; line-height: 1;
  color: var(--text-mist, #9B9B9B);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.add-dialog__body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}
.add-dialog__field {
  display: block;
  margin-bottom: 22px;
}
.add-dialog__label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--text-ink, #1A1A1A);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.add-dialog__field input[type="text"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-soft, #F0F0F0);
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--text-ink, #1A1A1A);
  background: var(--bg-porcelain, #FAFAFA);
  outline: none;
  transition: border-color 180ms, background 180ms;
  box-sizing: border-box;
}
.add-dialog__field input[type="text"]:focus {
  border-color: var(--text-ink, #1A1A1A);
  background: #fff;
}
.add-dialog__hint {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  color: var(--text-mist, #9B9B9B);
  margin-top: 6px;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.add-dialog__content-list {
  display: flex; flex-direction: column;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px 0;
  margin-top: 10px;
}
.content-pick {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft, #F0F0F0);
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--text-ink, #1A1A1A);
  cursor: pointer;
  transition: background 180ms, border-color 180ms;
}
.content-pick:hover {
  background: var(--bg-porcelain, #FAFAFA);
}
.content-pick input[type="checkbox"] {
  margin: 0;
  accent-color: var(--text-ink, #1A1A1A);
  width: 16px; height: 16px;
  flex-shrink: 0;
}
.content-pick .lu-item__pill { margin: 0 4px 0 0; flex-shrink: 0; }
.content-pick__name { flex: 1; line-height: 1.3; }
.add-dialog__footer {
  display: flex; gap: 10px;
  padding: 14px 20px 22px;
  border-top: 1px solid var(--border-soft, #F0F0F0);
  flex-shrink: 0;
}
.add-dialog__cancel,
.add-dialog__create {
  flex: 1;
  padding: 14px;
  border: none;
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: opacity 180ms;
}
.add-dialog__cancel {
  background: var(--bg-porcelain, #FAFAFA);
  color: var(--text-mist, #9B9B9B);
}
.add-dialog__create {
  background: var(--text-ink, #1A1A1A);
  color: #fff;
}
.add-dialog__create:hover { opacity: 0.85; }

/* --- SNS Tabs (Phase 3b: ShopMy hybrid IG/TT/YT) --- */
.sns-card {
  position: relative;
  display: block;
  overflow: hidden;
  background: #F1ECE6;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sns-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.06); }
.sns-card__thumb {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.sns-card__caption {
  position: absolute;
  inset: auto 14px 64px 14px;
  font-family: 'Noto Serif JP', serif;
  font-style: italic;
  font-size: 11px;
  line-height: 1.5;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0,0,0,0.45);
  opacity: 0.95;
  pointer-events: none;
}
.sns-card__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 30px 12px 11px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.78) 100%);
  color: #fff;
}
.sns-card__title {
  font-family: 'Noto Serif JP', serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: 0.005em;
}
.sns-card__meta {
  margin-top: 4px;
  font-size: 10.5px;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.04em;
  opacity: 0.88;
}

/* IG: 2-col 1:1 */
.sns-grid-ig {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.sns-grid-ig .sns-card { aspect-ratio: 1 / 1; }

/* TT: 2-col 9:16 */
.sns-grid-tt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.sns-grid-tt .sns-card { aspect-ratio: 9 / 16; }

/* YT: 1-col 16:9 + below-thumb meta block */
.sns-list-yt {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.sns-yt-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease;
}
.sns-yt-card:hover { transform: translateY(-2px); }
.sns-yt-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.sns-yt-card__thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.30) 60%, rgba(0,0,0,0.46) 100%);
}
.sns-yt-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  text-align: center;
  color: #fff;
  z-index: 1;
}
.sns-yt-card__overlay-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 22px;
  letter-spacing: 0.05em;
  line-height: 1.2;
  font-weight: 500;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.sns-yt-card__overlay-sub {
  margin-top: 6px;
  font-family: 'Noto Serif JP', serif;
  font-style: italic;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  opacity: 0.96;
  text-shadow: 0 1px 4px rgba(0,0,0,0.45);
}
.sns-yt-card__body {
  padding: 11px 4px 0;
}
.sns-yt-card__title {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.42;
  color: var(--text-ink, #1A1A1A);
  letter-spacing: 0.005em;
}
.sns-yt-card__meta {
  margin-top: 5px;
  font-size: 10.5px;
  color: var(--text-mist, #9B9B9B);
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.05em;
}

/* --- MY PICKS: Tifuler本人が他Tifulerの投稿をPick --- */
.mp-intro {
  padding: 2px 4px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-bottom: 1px solid var(--border-soft, #F0F0F0);
  margin-bottom: 14px;
}
.mp-intro__title {
  font-family: 'Noto Serif JP', serif;
  font-size: 15px;
  color: var(--text-ink, #1A1A1A);
  letter-spacing: 0.02em;
}
.mp-intro__sub {
  font-size: 12px;
  color: var(--text-mist, #9B9B9B);
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.mp-list { display: flex; flex-direction: column; gap: 14px; }
.mp-item {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border-soft, #F0F0F0);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s, box-shadow 0.2s;
}
.mp-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
.mp-item__from {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 6px;
}
.mp-item__from-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 26px;
  background: var(--bg-porcelain, #FAFAFA);
}
.mp-item__from-avatar img {
  width: 100%; height: 100%; object-fit: cover;
}
.mp-item__from-text {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
}
.mp-item__from-prefix {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mist, #9B9B9B);
}
.mp-item__from-name {
  font-family: 'Noto Serif JP', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--text-ink, #1A1A1A);
  letter-spacing: 0.02em;
}
.mp-item__from-date {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--text-mist, #9B9B9B);
  margin-left: auto;
  white-space: nowrap;
  flex: 0 0 auto;
}
.mp-item__body {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  padding: 4px 12px 12px;
}
.mp-item__thumb {
  width: 92px; height: 92px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-porcelain, #FAFAFA);
  position: relative;
}
.mp-item__thumb img {
  width: 100%; height: 100%; object-fit: cover;
}
.mp-item__main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.mp-item__head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.mp-item__name {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-ink, #1A1A1A);
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mp-item__comment {
  font-size: 12px;
  color: var(--text-stone, #6B6B6B);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- MY PICKS sticky-top: filter chip 行のみ (Phase 2 r2 / 案B) --- */
.mp-sticky-top {
  position: sticky;
  top: 46px; /* profile-tabs-wrap height */
  z-index: 4;
  background: #fff;
  border-bottom: 1px solid rgba(31, 35, 46, 0.06);
  margin: 0 -16px 14px;
}
.mp-control-bar {
  display: flex;
  gap: 6px;
  padding: 10px 16px;
  background: #fff;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.mp-control-bar::-webkit-scrollbar { display: none; }
.mp-filter-btn {
  flex-shrink: 0;
  padding: 6px 12px;
  border: 1px solid rgba(31, 35, 46, 0.12);
  border-radius: 999px;
  background: #fff;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: rgba(31, 35, 46, 0.65);
  letter-spacing: 0.06em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.15s ease;
}
.mp-filter-btn:hover { background: #F5F2EE; }
.mp-filter-btn.is-active {
  background: #1F232E;
  color: #fff;
  border-color: #1F232E;
}

/* --- MY PICKS sort toggle (meta row 右 / 案B) --- */
.mp-intro__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}
.mp-sort-toggle { position: relative; flex-shrink: 0; }
.mp-sort-toggle__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  background: transparent;
  border: none;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-stone, #6B6B6B);
  cursor: pointer;
  letter-spacing: 0.02em;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease;
}
.mp-sort-toggle__btn:hover { color: var(--text-ink, #1A1A1A); }
.mp-sort-toggle__caret {
  transition: transform 0.18s ease;
  color: currentColor;
}
.mp-sort-toggle.is-open .mp-sort-toggle__caret { transform: rotate(180deg); }
.mp-sort-popover {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 140px;
  background: #fff;
  border: 1px solid rgba(31, 35, 46, 0.08);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
  padding: 4px;
  z-index: 6;
  display: flex;
  flex-direction: column;
}
.mp-sort-popover[hidden] { display: none; }
.mp-sort-popover__opt {
  padding: 9px 12px;
  border: none;
  background: transparent;
  text-align: left;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--text-stone, #6B6B6B);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease, color 0.12s ease;
}
.mp-sort-popover__opt:hover { background: rgba(31, 35, 46, 0.04); }
.mp-sort-popover__opt.is-active {
  color: var(--text-ink, #1A1A1A);
  font-weight: 500;
}

/* --- MY PICKS card transition (FLIP target) --- */
.mp-item {
  will-change: transform;
}

/* --- ROUTINE step ブロック拡大 + Pick (v3 既存スタイル override) --- */
.profile-panel .routine-card { margin: 14px 0 0; padding: 20px 20px 6px; }
.profile-panel .routine-step {
  gap: 16px;
  padding: 16px 0;
  position: relative;
  align-items: flex-start;
}
.profile-panel .routine-step__num {
  font-size: 12px;
  padding-top: 30px;
  min-width: 22px;
}
.profile-panel .routine-step__image {
  width: 76px;
  height: 76px;
  border-radius: 8px;
}
.profile-panel .routine-step__body { padding-right: 38px; padding-top: 4px; }
.profile-panel .routine-step__name {
  font-size: 15px;
  line-height: 1.35;
}
.profile-panel .routine-step__note {
  font-size: 12.5px;
  line-height: 1.5;
  margin-top: 5px;
}
.profile-panel .routine-step__pick {
  position: absolute;
  top: 18px;
  right: 0;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: var(--bg-porcelain, #FAFAFA);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s, background 0.18s;
  padding: 0;
}
.profile-panel .routine-step__pick:hover { background: #fff; }
.profile-panel .routine-step__pick:active { transform: scale(0.92); }
.profile-panel .routine-step__pick svg {
  width: 16px; height: 16px;
  stroke: var(--text-stone, #6B6B6B);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.profile-panel .routine-step__pick.is-picked { background: #fff; }
.profile-panel .routine-step__pick.is-picked svg {
  fill: #C2748B;
  stroke: #C2748B;
}

/* --- MAINTENANCE/HOMECARE は v3 既存 .rec-ab クラスを style_v2.css から流用 --- */
/* INNERCARE は新設のため上記 .ic-* で定義 */

/* --- Bottom tab-bar Profile dot --- */
.tab-item.is-active-profile .tab-item__avatar {
  outline: 2px solid var(--accent-blush, #E8A5B5);
  outline-offset: 2px;
  border-radius: 50%;
}

/* =====================================================
   Talk Thread (Phase T-1 / 2026-05-06)
   - List ↔ Detail 別画面構造 (業界12社100%採用パターン)
   - sticky top head + scroll messages + sticky suggest + fixed input
   - iPhone Liquid Glass tab-bar と整合 (tab-bar 直上に input fixed)
   ===================================================== */

.tk-thread-top {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: max(env(safe-area-inset-top), 12px) 16px 12px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid #F0F0F0;
}

.tk-thread-top__back {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: #1A1A1A;
  text-decoration: none;
}
.tk-thread-top__back svg { width: 22px; height: 22px; }

.tk-thread-top__avatar {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: #F0F0F0;
}
.tk-thread-top__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tk-thread-top__body { flex: 1; min-width: 0; }

.tk-thread-top__name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}

.tk-thread-top__name {
  font-size: 15px;
  font-weight: 500;
  color: #1A1A1A;
  letter-spacing: -0.01em;
}
.tk-thread-top__handle {
  font-size: 11px;
  color: #9B9B9B;
  font-weight: 300;
  letter-spacing: 0;
}
.tk-thread-top__tifuler {
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #1A1A1A;
  border: 1px solid #1A1A1A;
  padding: 1px 5px;
  border-radius: 2px;
  margin-left: 2px;
  line-height: 1.4;
}
.tk-thread-top__status {
  margin-top: 4px;
  font-size: 11px;
  color: #9B9B9B;
  font-weight: 300;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}

.tk-thread-top__more {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: #1A1A1A;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.tk-thread-top__more svg { width: 18px; height: 18px; }

.tk-thread-main {
  /* tab-bar (60+10+safe) + input-bar (~64) + suggest (~64) + buffer */
  padding: 18px 20px calc(60px + 64px + 64px + env(safe-area-inset-bottom) + 24px);
  min-height: calc(100vh - 60px);
}

.tk-msgs {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tk-msg {
  max-width: 80%;
  padding: 11px 15px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.65;
  letter-spacing: -0.005em;
  word-break: break-word;
  margin-top: 14px;
}

.tk-msg--recv {
  align-self: flex-start;
  background: #fff;
  color: #1A1A1A;
  border: 1px solid #F0F0F0;
}

.tk-msg--sent {
  align-self: flex-end;
  background: #1A1A1A;
  color: #fff;
}

.tk-msg__time {
  font-size: 10px;
  color: #9B9B9B;
  margin-top: 4px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  font-weight: 300;
}
.tk-msg__time--sent { align-self: flex-end; }
.tk-msg__time--recv { align-self: flex-start; }

/* Suggest chips — input-bar の直上に sticky */
.tk-suggest {
  position: fixed;
  left: 0;
  right: 0;
  /* input-bar 上端の上に重ねる */
  bottom: calc(60px + 10px + env(safe-area-inset-bottom) + 8px + 56px);
  padding: 10px 20px 8px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.92) 30%, #fff 100%);
  z-index: 38;
  pointer-events: none;
}
.tk-suggest__label,
.tk-suggest__chips { pointer-events: auto; }

.tk-suggest__label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9B9B9B;
  font-weight: 500;
  margin-bottom: 8px;
}

.tk-suggest__chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tk-suggest__chips::-webkit-scrollbar { display: none; }

.tk-suggest__chip {
  flex: 0 0 auto;
  background: #fff;
  border: 1px solid #E8E8E8;
  color: #1A1A1A;
  font-size: 12px;
  font-family: inherit;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: -0.005em;
  transition: border-color 0.15s ease;
}
.tk-suggest__chip:hover { border-color: #1A1A1A; }
.tk-suggest__chip:active { background: #FAFAFA; }

/* Input bar — tab-bar 直上に fixed */
.tk-input-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(60px + 10px + env(safe-area-inset-bottom) + 8px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid #F0F0F0;
  z-index: 39;
}

.tk-input-bar__field {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 14px;
  border: 1px solid #E8E8E8;
  border-radius: 999px;
  background: #FAFAFA;
  font-family: inherit;
  font-size: 13.5px;
  color: #1A1A1A;
  letter-spacing: -0.005em;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.tk-input-bar__field::placeholder { color: #9B9B9B; }
.tk-input-bar__field:focus { border-color: #1A1A1A; background: #fff; }

.tk-input-bar__send {
  flex: 0 0 auto;
  height: 38px;
  padding: 0 18px;
  background: #1A1A1A;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: opacity 0.15s ease;
}
.tk-input-bar__send:hover { opacity: 0.85; }
.tk-input-bar__send:active { opacity: 0.7; }

/* iPhone 実機モード (≤430px) で tab-bar が Liquid Glass Floating Pill になる場合の整合 */
@media (max-width: 430px) {
  .tk-input-bar {
    /* tab-bar 自体の bottom 位置と margin に合わせ微調整 (style_v2.css line 549-553 と整合) */
    bottom: calc(60px + env(safe-area-inset-bottom) + 16px);
  }
  .tk-suggest {
    bottom: calc(60px + env(safe-area-inset-bottom) + 16px + 56px);
  }
}

/* ============ Phase T-2: 履歴引用 (§8.3) + compose Tifuler picker ============ */

/* Input bar 左の attach button (+ icon) — 業界標準 (iMessage/WhatsApp/Telegram/ChatGPT) */
.tk-input-bar__attach {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FAFAFA;
  border: 1px solid #E8E8E8;
  border-radius: 50%;
  color: #1A1A1A;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.tk-input-bar__attach:hover { border-color: #1A1A1A; }
.tk-input-bar__attach:active { background: #F0F0F0; }
.tk-input-bar__attach svg { width: 18px; height: 18px; }

/* ===== Bottom sheet (共通) ===== */
.tk-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.tk-sheet-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.tk-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 78vh;
  background: #fff;
  border-radius: 20px 20px 0 0;
  z-index: 101;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -8px 28px rgba(0,0,0,0.10);
}
.tk-sheet.is-open { transform: translateY(0); }

.tk-sheet__handle {
  width: 36px;
  height: 4px;
  background: #E0E0E0;
  border-radius: 999px;
  margin: 10px auto 0;
  flex: 0 0 auto;
}

.tk-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 12px;
  border-bottom: 1px solid #F0F0F0;
  flex: 0 0 auto;
}

.tk-sheet__title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #1A1A1A;
}

.tk-sheet__close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #9B9B9B;
  cursor: pointer;
  padding: 0;
}
.tk-sheet__close svg { width: 18px; height: 18px; }
.tk-sheet__close:hover { color: #1A1A1A; }

.tk-sheet__tabs {
  display: flex;
  border-bottom: 1px solid #F0F0F0;
  padding: 0 20px;
  flex: 0 0 auto;
}
.tk-sheet__tab {
  padding: 12px 0;
  margin-right: 24px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9B9B9B;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
  background: transparent;
}
.tk-sheet__tab.is-active {
  color: #1A1A1A;
  border-bottom-color: #1A1A1A;
}

.tk-sheet__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.tk-sheet__pane {
  display: none;
  padding: 6px 20px 16px;
}
.tk-sheet__pane.is-active { display: block; }

/* ===== Attach entry (履歴引用の各エントリ) ===== */
.tk-attach-entry {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #F4F4F4;
  cursor: pointer;
  background: transparent;
  border-left: none;
  border-right: none;
  border-top: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  transition: opacity 0.15s ease;
}
.tk-attach-entry:hover { opacity: 0.7; }
.tk-attach-entry:active { opacity: 0.5; }
.tk-attach-entry:last-child { border-bottom: none; }

.tk-attach-entry__icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FAFAFA;
  border-radius: 8px;
  color: #1A1A1A;
}
.tk-attach-entry__icon svg { width: 18px; height: 18px; }

.tk-attach-entry__body { flex: 1; min-width: 0; }

.tk-attach-entry__title {
  font-size: 13.5px;
  font-weight: 500;
  color: #1A1A1A;
  letter-spacing: -0.005em;
  margin-bottom: 4px;
}

.tk-attach-entry__meta {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 11px;
  color: #9B9B9B;
  font-variant-numeric: tabular-nums;
  font-weight: 300;
  letter-spacing: 0.01em;
}
.tk-attach-entry__meta-sep { color: #D0D0D0; }

.tk-attach-entry__detail {
  font-size: 11px;
  color: #6E6E6E;
  margin-top: 4px;
  letter-spacing: 0.01em;
}

/* ===== Quote card (メッセージとして送信されるカード) ===== */
.tk-quote-card {
  align-self: flex-end;
  max-width: 80%;
  background: #1A1A1A;
  color: #fff;
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 4px;
}

.tk-quote-card__type {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  font-weight: 500;
  margin-bottom: 6px;
}

.tk-quote-card__title {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin-bottom: 5px;
  color: #fff;
}

.tk-quote-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 11px;
  color: rgba(255,255,255,0.65);
  font-variant-numeric: tabular-nums;
  font-weight: 300;
  letter-spacing: 0.01em;
}
.tk-quote-card__meta-sep { color: rgba(255,255,255,0.32); }

.tk-quote-card__detail {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid rgba(255,255,255,0.14);
  font-size: 11px;
  color: rgba(255,255,255,0.72);
  letter-spacing: 0.01em;
  line-height: 1.45;
}

/* ===== Compose sheet (talk_v1.html / 4 Tifuler picker) ===== */
.tk-compose-entry {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #F4F4F4;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.15s ease;
}
.tk-compose-entry:hover { opacity: 0.7; }
.tk-compose-entry:active { opacity: 0.5; }
.tk-compose-entry:last-child { border-bottom: none; }

.tk-compose-entry__avatar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: #F0F0F0;
}
.tk-compose-entry__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tk-compose-entry__body { flex: 1; min-width: 0; }

.tk-compose-entry__name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
  flex-wrap: wrap;
}

.tk-compose-entry__name {
  font-size: 14px;
  font-weight: 500;
  color: #1A1A1A;
  letter-spacing: -0.005em;
}

.tk-compose-entry__handle {
  font-size: 12px;
  color: #9B9B9B;
  letter-spacing: 0.01em;
}

.tk-compose-entry__tifuler {
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1A1A1A;
  background: #F0F0F0;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 600;
}

.tk-compose-entry__status {
  font-size: 11px;
  color: #6E6E6E;
  font-variant-numeric: tabular-nums;
  font-weight: 300;
  letter-spacing: 0.01em;
}

.tk-compose-entry__existing {
  flex: 0 0 auto;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9B9B9B;
  font-weight: 500;
}

/* ============================================================
   DM Gate Components (H2 段階解放) — Spec v1.1 (完全モノトーン化)
   namespace: .pcb-* / .dqc-* / .paywall-modal / .lock-overlay
   依存: --platinum / --platinum-soft tokens (= Tiful+ identity tint のみ)
   T1-T9 トンマナ: 純白 + 黒 + 3 段階グレー / シアーブルー / アンバー = 不使用
   出典: Tiful_v4_DM_Gate_Spec_v1.md §3 / §4 / §5 / §6 / §7 / §8
   ============================================================ */

/* === A. Profile Completion Banner (= G1 / G2 / G2+ 共通 / Spec §3.2 + §8) === */
.profile-completion-banner {
  position: relative;
  margin: 12px 16px 0;
  padding: 14px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
}
.profile-completion-banner[data-state="g2-plus"] {
  background: linear-gradient(180deg, var(--white) 0%, var(--platinum-soft) 100%);
}

.pcb-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font-family: inherit;
}

.pcb-progress-circle {
  flex: 0 0 auto;
  position: relative;
  width: 60px;
  height: 60px;
}
.pcb-progress-circle svg {
  width: 60px;
  height: 60px;
  transform: rotate(-90deg);
}
.pcb-circle-track {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 3;
}
.pcb-circle-fill {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 163.36;
  stroke-dashoffset: calc(163.36 * (1 - var(--pcb-pct, 0.4)));
  transition: stroke-dashoffset 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.profile-completion-banner[data-state="g2-plus"] .pcb-circle-fill {
  stroke: var(--platinum);
}
.pcb-percentage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', 'Noto Serif JP', serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.pcb-text {
  flex: 1;
  min-width: 0;
}
.pcb-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 4px;
  line-height: 1.4;
}
.pcb-subtitle {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--stone);
  opacity: 0.85;
  line-height: 1.45;
  letter-spacing: 0;
}

.pcb-toggle {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mist);
  transition: transform 0.25s ease;
}
.pcb-chevron {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.profile-completion-banner[data-expanded="true"] .pcb-toggle {
  transform: rotate(180deg);
}

.pcb-tasks {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.pcb-task-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
}
.pcb-task {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  flex-wrap: wrap;
}
.pcb-task:last-child { border-bottom: none; }
.pcb-task-check {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--fog);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
}
.pcb-task--done .pcb-task-check {
  background: var(--ink);
  border-color: var(--ink);
}
.pcb-task--done .pcb-task-check::before { content: "✓"; }
.pcb-task-label {
  flex: 1;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.4;
}
.pcb-task--done .pcb-task-label { color: var(--stone); }
.pcb-task-status {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mist);
}
.pcb-task-cta {
  border: 1px solid var(--ink);
  background: var(--white);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease;
}
.pcb-task-cta:hover { background: var(--ink); color: var(--white); }
.pcb-task-sub {
  width: 100%;
  margin-top: 4px;
  padding-left: 28px;
  font-size: 11.5px;
  color: var(--stone);
  line-height: 1.5;
  letter-spacing: 0;
}

/* === B. DM Quota Counter (= G3 / Spec §5.3 + §6.4) === */
.dm-quota-counter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 16px 0;
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--white);
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.dqc-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mist);
  transition: color 0.25s ease;
}
.dqc-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dqc-body { flex: 1; min-width: 0; }
.dqc-count {
  font-size: 13px;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.45;
}
.dqc-count strong {
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.dqc-meta {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--stone);
  letter-spacing: 0;
  line-height: 1.45;
}
.dqc-cta {
  color: var(--ink);
  text-decoration: underline;
  font-weight: 500;
}
.dqc-cta:hover { color: var(--stone); }

/* state バリエーション (Spec v1.1 §6.4 / 視覚状態 4 段階 / 完全モノトーン)
 * 色を使わず BG / border / 数字 strong / メタ文言の 4 軸で state 階段を表現 */
.dm-quota-counter[data-state="default"] .dqc-icon { color: var(--mist); }
.dm-quota-counter[data-state="active"] .dqc-icon { color: var(--stone); }
.dm-quota-counter[data-state="warning"] {
  background: var(--porcelain);
  border-color: var(--ink);
}
.dm-quota-counter[data-state="warning"] .dqc-icon { color: var(--ink); }
.dm-quota-counter[data-state="warning"] .dqc-count strong { color: var(--ink); font-weight: 700; }
.dm-quota-counter[data-state="full"] {
  background: var(--chip);
  border-color: var(--ink);
  border-width: 1.5px;
}
.dm-quota-counter[data-state="full"] .dqc-icon { color: var(--ink); }
.dm-quota-counter[data-state="full"] .dqc-count strong { color: var(--ink); font-weight: 700; }

/* Phase 0 プレビュー (Spec §6.6) */
.dm-quota-counter[data-phase="0"] {
  background: var(--porcelain);
  border-color: var(--border-strong);
}
.dm-quota-counter[data-phase="0"] .dqc-icon { color: var(--mist); }
.dm-quota-counter[data-phase="0"] .dqc-count strong { color: var(--stone); }

/* G3+ 契約 contract banner (Spec §5.4.1) */
.dm-quota-counter[data-mode="contract"] {
  background: linear-gradient(180deg, var(--white) 0%, var(--platinum-soft) 100%);
  border-color: var(--platinum-soft);
}
.dm-quota-counter[data-mode="contract"] .dqc-icon { color: var(--platinum); }
.dm-quota-counter[data-mode="contract"] .dqc-count { color: var(--platinum); font-weight: 500; }

/* talk_thread_v1 (= Detail / 入力欄直上) compact 表示 (Spec §5.3.1) */
.dm-quota-counter--compact {
  margin: 0;
  padding: 8px 14px;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--white);
}
.dm-quota-counter--compact .dqc-icon { width: 20px; height: 20px; }
.dm-quota-counter--compact .dqc-icon svg { width: 14px; height: 14px; }
.dm-quota-counter--compact .dqc-body {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.dm-quota-counter--compact .dqc-count { font-size: 12px; }
.dm-quota-counter--compact .dqc-meta { margin-top: 0; font-size: 11px; }

/* === C. Paywall Modal (= 共通 + 3 パターン / Spec §7) === */
.paywall-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
}
.paywall-modal.is-open { display: block; }

.paywall-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: paywall-fade 0.2s ease-out;
}

.paywall-modal__sheet {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  max-width: calc(100vw - 32px);
  max-height: 80vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  padding: 28px 24px 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.06);
  animation: paywall-pop 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
}

@keyframes paywall-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes paywall-pop {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.paywall-modal__title {
  font-family: 'Cormorant Garamond', 'Noto Serif JP', serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  text-align: center;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-bottom: 6px;
}
.paywall-modal__subtitle {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-align: center;
  letter-spacing: -0.005em;
  margin-bottom: 22px;
  line-height: 1.45;
}

.paywall-modal__benefits {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 0;
  margin: 0 0 22px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.paywall-benefit {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.45;
  letter-spacing: -0.005em;
}
.paywall-benefit__icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--ink);
}
.paywall-benefit__icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.paywall-modal__cta-primary {
  display: block;
  width: 100%;
  background: var(--ink);
  color: var(--white);
  border: none;
  border-radius: 12px;
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.2s ease;
}
.paywall-modal__cta-primary:hover { opacity: 0.86; }

.paywall-modal__sub-cta {
  margin-top: 10px;
  font-size: 12px;
  color: var(--stone);
  text-align: center;
  letter-spacing: 0;
  opacity: 0.85;
}

.paywall-modal__reset {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--mist);
  text-align: center;
  letter-spacing: 0.02em;
}

.paywall-modal__cancel {
  display: block;
  width: 100%;
  margin-top: 14px;
  background: transparent;
  border: none;
  color: var(--stone);
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  padding: 8px;
  font-family: inherit;
  letter-spacing: 0;
}
.paywall-modal__cancel:hover { color: var(--ink); }

/* パターン C 専用要素 (= DM ロック paywall / Spec §7.4) */
.paywall-modal__progress-label {
  font-size: 13px;
  color: var(--ink);
  text-align: center;
  font-weight: 500;
  margin-bottom: 8px;
  letter-spacing: -0.005em;
}
.paywall-modal__progress-bar {
  width: 100%;
  height: 6px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 10px;
}
.paywall-modal__progress-fill {
  height: 100%;
  background: var(--ink);
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.paywall-modal__progress-fill[data-complete="true"] { background: var(--platinum); }

.paywall-modal__remaining {
  font-size: 13px;
  color: var(--stone);
  text-align: center;
  margin-bottom: 18px;
  letter-spacing: -0.005em;
}

.paywall-modal__remaining-task {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--porcelain);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 18px;
}
.paywall-modal__task-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--fog);
  border-radius: 4px;
}
.paywall-modal__task-label {
  flex: 1;
  font-size: 13px;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.4;
}
.paywall-modal__task-cta {
  border: 1px solid var(--ink);
  background: var(--white);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 500;
  padding: 5px 11px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease;
}
.paywall-modal__task-cta:hover { background: var(--ink); color: var(--white); }

.paywall-modal__contract-note {
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--platinum-soft);
  border-radius: 8px;
  font-size: 11.5px;
  color: var(--platinum);
  text-align: center;
  letter-spacing: 0;
  line-height: 1.45;
}

/* === D. Lock Overlay (= IFProfile セクション別ロック / Spec §3.3) === */
.lock-overlay {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  margin: 0 16px;
}
.lock-overlay__blur-content {
  filter: blur(6px);
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
  transform: scale(1.02);
}
.lock-overlay__panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 40px);
  max-width: 280px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 20px 18px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
}
.lock-overlay__icon {
  width: 32px;
  height: 32px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.lock-overlay__icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lock-overlay__message {
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 14px;
  letter-spacing: -0.005em;
  line-height: 1.4;
}
.lock-overlay__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--ink);
  color: var(--white);
  border: none;
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s ease;
}
.lock-overlay__cta:hover { opacity: 0.86; }

/* === E. iPhone 実機 mode (≤430px) 整合 === */
@media (max-width: 430px) {
  .profile-completion-banner,
  .dm-quota-counter {
    margin-left: 12px;
    margin-right: 12px;
  }
  .dm-quota-counter--compact {
    margin-left: 0;
    margin-right: 0;
  }

  .paywall-modal__sheet {
    width: calc(100vw - 24px);
    max-width: 380px;
    padding: 24px 20px 18px;
  }
  .paywall-modal__title { font-size: 20px; }

  .lock-overlay {
    margin-left: 12px;
    margin-right: 12px;
  }
}

/* ==========================================================================
   Notification Center (notifications_v1.html / 2026-05-07 §4.13)
   - top-bar--detail パターン (戻る + "通知" + spacer)
   - 時系列1軸 (Today / Yesterday / This Week / Older)
   - カード = avatar 40px + 本文 1-2行 + 時刻 + 未読 dot
   - localStorage: tiful_notif_unread_v1 / Talk 連動: tiful_talk_unread_v1
   - 4タブベル右上 has-unread (8px FF5A5F simple dot)
   - T1-T9 トンマナ準拠 / 編集要素ゼロ / シンプル × 生活者視点
   ========================================================================== */

.notif-main {
  padding: 4px 0 100px;
  background: var(--white);
  min-height: calc(100vh - var(--top-bar-h));
}

.notif-section { margin-bottom: 0; }

.notif-section__head {
  position: sticky;
  top: var(--top-bar-h);
  z-index: 5;
  background: var(--white);
  padding: 14px 20px 8px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist);
}

.notif-list { list-style: none; padding: 0; margin: 0; }

.notif-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 20px 14px 22px;
  border-bottom: 1px solid var(--border);
  position: relative;
  cursor: pointer;
  transition: background 160ms ease;
  background: var(--white);
}
.notif-card:hover { background: var(--porcelain); }
.notif-card:last-child { border-bottom: none; }

.notif-card__dot {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
  display: none;
}
.notif-card.is-unread .notif-card__dot { display: block; }

.notif-card__avatar {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--chip);
  display: flex;
  align-items: center;
  justify-content: center;
}
.notif-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.notif-card__avatar--squircle { border-radius: 12px; }
.notif-card__avatar--system {
  background: var(--ink);
  color: var(--white);
}
.notif-card__avatar--system svg {
  width: 18px;
  height: 18px;
}

.notif-card__body {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 1px;
}
.notif-card__text {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.005em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.notif-card.is-unread .notif-card__text { font-weight: 500; }

.notif-card__time {
  flex: 0 0 auto;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: var(--mist);
  padding-top: 3px;
  white-space: nowrap;
}

/* 4タブベル右上 未読 dot (icon-btn 共通) */
.icon-btn { position: relative; }
.icon-btn__notif-dot {
  display: none;
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FF5A5F;
  border: 1.5px solid var(--white);
  pointer-events: none;
}
.icon-btn.has-unread .icon-btn__notif-dot { display: block; }

/* iPhone 実機 mode (≤430px) 整合 */
@media (max-width: 430px) {
  .notif-card { padding: 14px 16px 14px 20px; }
  .notif-section__head { padding: 14px 16px 8px; }
}

/* =================================================================
   DM Gate H2 — Phase 9-E B2 v3 C1: Detail DM Trigger (Spec §14.3)
   tifulers_ifprofile_v4.html の Bio Detail 展開時テキストリンク
   Top state では hidden / body.is-detail で visible (= 動線深さ確保)
   既存 .profile-detail__bio + .profile-detail__metrics + .profile-detail__social と整合
   ================================================================= */

.profile-detail__dm-trigger {
  display: none; /* Top state では hidden */
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.18); /* hairline / 既存 .profile-detail__metrics 整合 */
  justify-content: center;
}

body.is-detail .profile-detail__dm-trigger {
  display: flex; /* Detail 展開時のみ visible */
}

.profile-detail__dm-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  text-shadow: 0 1px 8px rgba(0,0,0,0.3); /* 既存 .profile-detail__bio 整合 */
  cursor: pointer;
  padding: 8px 12px;
  min-height: 36px; /* タッチ領域 (HIG/Material) */
  transition: color 200ms ease;
}

.profile-detail__dm-link:hover {
  color: rgba(255,255,255,1.0);
}

.profile-detail__dm-link:hover .profile-detail__dm-arrow {
  transform: translateX(2px);
}

.profile-detail__dm-arrow {
  display: inline-block;
  margin-left: 4px;
  font-size: 14px;
  font-weight: 400;
  transition: transform 200ms ease;
}

@media (max-width: 430px) {
  .profile-detail__dm-trigger { margin-top: 12px; padding-top: 10px; }
  .profile-detail__dm-link { font-size: 13px; padding: 8px 10px; }
}


/* ============================================================================
   Tifulカード Phase 0 (2026-05-08 / Spec v1.1 FIX)
   = my_compass_v1 の進化 = アイデンティティ証明書
   §1.4 / §3.2 / §4 / §5 / §6 / §2.3 整合
   = Q-α=A (HTML/CSS structure 完全保持 + リブランディング)
   = Q-γ=A (Hero card のみ「カード」化 + Tier グラデ完全維持)
   = Q-β=A (Learner 版 別ファイル新規作成)
   ============================================================================ */

/* === A. Hero card 紙質感拡張 (= §3.2 / 全 Tier 共通 / Compass ::before/::after は z-index:-1 で別レイヤー維持) === */
.mc-hero {
  /* 既存 background: rgba(255,255,255,0.16) 維持 + 紙の繊維風 hairline texture overlay */
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.018) 0px,
    rgba(255, 255, 255, 0.018) 1px,
    transparent 1px,
    transparent 3px
  );
  background-blend-mode: screen;
  /* 紙端 sub shadow + hairline highlight (Apple Wallet メタファ) */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 0.5px 0 rgba(120, 120, 140, 0.18),
    0 4px 14px rgba(40, 45, 55, 0.06);
}

/* === B. Tifulカード明示ラベル (= §1.4 / §6.1.3 / Hero 上端 / TIFULカード · ID · 発行日) === */
.mc-card-label {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(40, 45, 55, 0.55);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: -4px 0 -2px;
}
.mc-card-label__sep {
  color: rgba(40, 45, 55, 0.3);
}
.mc-card-label--unissued {
  color: rgba(40, 45, 55, 0.4);
}

/* === C. プロフィール完成度 進捗バー (= §4.2.1 / G1/G2 状態) === */
.mc-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 0 4px;
  border-top: 0.5px solid rgba(40, 45, 55, 0.12);
}
.mc-progress__title {
  font-family: 'Noto Sans JP', 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(20, 25, 35, 0.92);
  letter-spacing: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mc-progress__title-pct {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.mc-progress__bar {
  width: 100%;
  height: 4px;
  background: rgba(239, 232, 221, 0.55);
  border-radius: 999px;
  overflow: hidden;
}
.mc-progress__fill {
  height: 100%;
  background: rgba(42, 46, 54, 0.85);
  border-radius: 999px;
  transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mc-progress__breakdown {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: rgba(40, 45, 55, 0.55);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mc-progress__breakdown-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mc-progress__breakdown-sep {
  color: rgba(40, 45, 55, 0.3);
}
.mc-progress__breakdown-icon {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

/* === D. (削除済 v1.2 / Q-3=A' 再解釈 / カード単体表示 / 旧バッジ関連 CSS 削除) === */

/* === E. サブメトリクス行 (= §6.1.5 / ログ・Pick・エリア / · 区切り) === */
.mc-submetrics {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: rgba(40, 45, 55, 0.7);
  letter-spacing: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 4px;
}
.mc-submetrics__item {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}
.mc-submetrics__num {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(20, 25, 35, 0.92);
}
.mc-submetrics__sep {
  color: rgba(40, 45, 55, 0.3);
}

/* === F. SNS リンク (= §6.1.6 / IG/TT/YT 32px outline icon) === */
.mc-sns-links {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
}
.mc-sns-link {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0.5px solid rgba(40, 45, 55, 0.25);
  background: rgba(255, 255, 255, 0.4);
  color: rgba(40, 45, 55, 0.85);
  text-decoration: none;
  transition: opacity 200ms ease, border-color 200ms ease, background 200ms ease;
}
.mc-sns-link:hover {
  opacity: 0.7;
  background: rgba(255, 255, 255, 0.7);
}
.mc-sns-link svg {
  width: 14px;
  height: 14px;
}
.mc-sns-link--add {
  border-style: dashed;
  color: rgba(40, 45, 55, 0.5);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.06em;
  width: auto;
  padding: 0 12px;
  border-radius: 999px;
  height: 32px;
}

/* === G. Verified Real バッジ (= §6.1.7 / Q-6=A / Tier タグ左横並列) === */
.mc-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 0.5px solid rgba(255, 255, 255, 0.5);
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: rgba(20, 25, 35, 0.92);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mc-verified-badge__icon {
  width: 10px;
  height: 10px;
  color: rgba(20, 25, 35, 0.85);
  flex-shrink: 0;
}

/* Hero __top の右側に Verified + Tier タグを並列配置するための wrapper */
.mc-hero__top-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* === H. Tifulカード即発行モーダル (= §5 / Q-5=A 即時発火 / Apple Wallet メタファ) === */
.mc-tifulcard-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(42, 46, 54, 0.9);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 250ms ease;
}
.mc-tifulcard-modal.is-open {
  display: flex;
  opacity: 1;
}
.mc-tifulcard-modal__inner {
  width: 100%;
  max-width: 360px;
  background: var(--porcelain, #FAFAFA);
  border-radius: 24px;
  padding: 28px 22px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  transform: scale(0.92);
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mc-tifulcard-modal.is-open .mc-tifulcard-modal__inner {
  transform: scale(1);
}
.mc-tifulcard-modal__header {
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: 19px;
  color: rgba(20, 25, 35, 1);
  text-align: center;
  letter-spacing: 0.02em;
  line-height: 1.45;
  margin: 0;
}
.mc-tifulcard-modal__sparkle {
  display: inline-block;
  font-size: 13px;
  vertical-align: 1px;
  color: rgba(40, 45, 55, 0.45);
  margin: 0 6px;
}
.mc-tifulcard-modal__preview {
  width: 100%;
  position: relative;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 16px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 0.5px solid rgba(40, 45, 55, 0.15);
  box-shadow: 0 6px 20px rgba(40, 45, 55, 0.08);
  background-image: repeating-linear-gradient(
    90deg,
    rgba(40, 45, 55, 0.012) 0px,
    rgba(40, 45, 55, 0.012) 1px,
    transparent 1px,
    transparent 3px
  );
  overflow: hidden;
}
.mc-tifulcard-modal__preview::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  animation: mc-tcard-sheen 0.8s ease 0.2s 1;
  pointer-events: none;
}
@keyframes mc-tcard-sheen {
  to { transform: translateX(100%); }
}
.mc-tifulcard-modal__preview-id {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(40, 45, 55, 0.55);
}
.mc-tifulcard-modal__preview-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mc-tifulcard-modal__preview-portrait {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 0.5px solid rgba(40, 45, 55, 0.15);
  background: rgba(40, 45, 55, 0.08);
  flex-shrink: 0;
}
.mc-tifulcard-modal__preview-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.mc-tifulcard-modal__preview-name {
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: 18px;
  color: rgba(20, 25, 35, 1);
  margin: 0;
  line-height: 1.2;
}
.mc-tifulcard-modal__preview-handle {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: rgba(40, 45, 55, 0.55);
}
.mc-tifulcard-modal__preview-tier {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(40, 45, 55, 0.85);
  flex-shrink: 0;
}
.mc-tifulcard-modal__preview-meta {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  color: rgba(40, 45, 55, 0.7);
  letter-spacing: 0;
  margin-top: 2px;
}
.mc-tifulcard-modal__ctas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
}
.mc-tifulcard-modal__cta {
  width: 100%;
  padding: 13px 18px;
  border-radius: 999px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  cursor: pointer;
  transition: opacity 200ms ease, background 200ms ease;
  min-height: 44px;
  border: 0.5px solid transparent;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mc-tifulcard-modal__cta--primary {
  background: rgba(20, 25, 35, 0.95);
  color: rgba(255, 255, 255, 0.95);
}
.mc-tifulcard-modal__cta--primary:hover { opacity: 0.85; }
.mc-tifulcard-modal__cta--secondary {
  background: rgba(255, 255, 255, 0);
  color: rgba(20, 25, 35, 0.85);
  border-color: rgba(40, 45, 55, 0.25);
}
.mc-tifulcard-modal__cta--secondary:hover {
  background: rgba(255, 255, 255, 0.5);
}
.mc-tifulcard-modal__cta--tertiary {
  background: transparent;
  color: rgba(40, 45, 55, 0.55);
  font-size: 13px;
  min-height: 36px;
  padding: 8px;
  border-color: transparent;
}

/* === I. Learner 版 namespace (= §2.3 / Q-β=A / 純白ベース / Tifuler 要素全削除) === */
/* specificity 0,3,0 で .app-frame.mc { background: #1A1A1A } を上書き */
.app-frame.mc.mc-learner {
  background: var(--porcelain, #FAFAFA);
  min-height: 100vh;
}
/* Learner の topbar タイトル (= 純白背景に対して dark text / Tier 系の rgba(255,255,255) 上書き) */
.mc-learner .mc-topbar__tab {
  color: rgba(40, 45, 55, 0.85);
}
/* Learner: Tier 背景グラデ削除 (= 既存 .mc-bg を上書き) */
.mc-learner .mc-bg,
.mc-learner .mc-bg__glow--1,
.mc-learner .mc-bg__glow--2,
.mc-learner .mc-bg__glow--3 {
  display: none;
}
/* Learner Hero: 純白ベース + 紙質感のみ + Tier グラデ完全削除 */
.mc-learner .mc-hero {
  background-color: rgba(255, 255, 255, 0.85);
  background-image: repeating-linear-gradient(
    90deg,
    rgba(40, 45, 55, 0.012) 0px,
    rgba(40, 45, 55, 0.012) 1px,
    transparent 1px,
    transparent 3px
  );
  border: 0.5px solid rgba(40, 45, 55, 0.1);
  color: rgba(20, 25, 35, 0.92);
}
/* Learner: Tier タグ非表示 (= §2.2 マトリクス) */
.mc-learner .mc-hero__tier-tag {
  display: none;
}
/* Learner: Trust 行非表示 */
.mc-learner .mc-hero__trust-row {
  display: none;
}
/* 2026-05-11 FB⑤: .mc-learner-mantra ルール削除 (= Tifuler 側統一感のため / Spec v1.5) */
/* Learner: White Surface (Tifuler の Achievement / 7 Tips / Activity / Tifuler マントラ全削除版) */
.mc-learner__surface {
  position: relative;
  z-index: 2;
  margin: 0 16px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 0 0 18px 18px;
  border: 0.5px solid rgba(40, 45, 55, 0.08);
  border-top: none;
  padding: 0;
  overflow: hidden;
}

/* iPhone 実機 mode (≤430px) 整合 */
@media (max-width: 430px) {
  .mc-tifulcard-modal { padding: 20px 16px; }
  .mc-tifulcard-modal__inner { padding: 24px 18px 18px; }
  .mc-tifulcard-modal__header { font-size: 17px; }
  .mc-tifulcard-modal__preview-name { font-size: 17px; }
  .mc-card-label { font-size: 9px; gap: 6px; }
}

/* === Tifulカードを見る CTA (= journal_v4 系 / Step 6 / 仕様書 §8.1 整合 / Hero ABOUT 押下後 visible) === */
.profile-detail__tifulcard-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(20, 25, 35, 0.85);
  letter-spacing: 0;
  padding: 6px 0;
  margin-top: 12px;
  text-decoration: none;
  border-bottom: 0.5px solid rgba(40, 45, 55, 0.25);
  transition: opacity 200ms ease, border-color 200ms ease;
  align-self: flex-start;
  width: fit-content;
}
.profile-detail__tifulcard-link:hover {
  opacity: 0.72;
  border-color: rgba(40, 45, 55, 0.45);
}
.profile-detail__tifulcard-link:active {
  opacity: 0.55;
}

/* ==========================================================================
   Profile View Counter (= IFProfile Hero 直下 slim banner / Phase 9-E B3 / Spec §4.2.1 + §14.4)
   - mako (Learner) 視点で月 3 名閲覧 quota を Hero 直下に表示
   - G2 (無料) のみ visible / G1/G1+/G2+/G3/G3+ で hidden
   - state 4 段階: default (= 0/3) / active (= 1/3) / warning (= 2/3) / full (= 3/3)
   - Phase 0: porcelain BG + counter 表示 + 4 人目試行 paywall 起動なし (= dm-quota-counter §6.6 完全対称)
   - localStorage: tiful_view_count_v1 (= mako 専用 / 月初 JST リセット / unique tifuler ID 配列)
   ========================================================================== */
.profile-view-counter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 16px 0;
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--white);
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.profile-view-counter[hidden] { display: none; }
.pvc-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mist);
  transition: color 0.25s ease;
}
.pvc-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pvc-body { flex: 1; min-width: 0; }
.pvc-count {
  font-size: 13px;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.45;
}
.pvc-count strong {
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.pvc-meta {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--stone);
  letter-spacing: 0;
  line-height: 1.45;
}
.pvc-cta {
  color: var(--ink);
  text-decoration: underline;
  font-weight: 500;
}
.pvc-cta:hover { color: var(--stone); }

/* state バリエーション (= dm-quota-counter §6.4 と完全対称 / 完全モノトーン / v1.1 トンマナ整合) */
.profile-view-counter[data-state="default"] .pvc-icon { color: var(--mist); }
.profile-view-counter[data-state="active"] .pvc-icon { color: var(--stone); }
.profile-view-counter[data-state="warning"] {
  background: var(--porcelain);
  border-color: var(--ink);
}
.profile-view-counter[data-state="warning"] .pvc-icon { color: var(--ink); }
.profile-view-counter[data-state="warning"] .pvc-count strong { color: var(--ink); font-weight: 700; }
.profile-view-counter[data-state="full"] {
  background: var(--chip);
  border-color: var(--ink);
  border-width: 1.5px;
}
.profile-view-counter[data-state="full"] .pvc-icon { color: var(--ink); }
.profile-view-counter[data-state="full"] .pvc-count strong { color: var(--ink); font-weight: 700; }

/* Phase 0 プレビュー (= dm-quota-counter §6.6 と完全対称) */
.profile-view-counter[data-phase="0"] {
  background: var(--porcelain);
  border-color: var(--border-strong);
}
.profile-view-counter[data-phase="0"] .pvc-icon { color: var(--mist); }
.profile-view-counter[data-phase="0"] .pvc-count strong { color: var(--stone); }

/* iPhone 実機 mode (≤430px) micro-tuning */
@media (max-width: 430px) {
  .profile-view-counter {
    margin-left: 12px;
    margin-right: 12px;
  }
}

/* ============ Phase 9-F-A Layer 1: cc-card inline link (= @ハンドル click → Tifuler Profile 遷移 / Spec §15.5) ============ */
/* 既存 cc-card 全体 link は維持 + 内側 @ハンドル span を inline link 化 / underline + ink color */
.cc-card__inline-link {
  display: inline;
  color: #1A1A1A;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  cursor: pointer;
  font-weight: 500;
  transition: opacity 0.18s ease;
}
.cc-card__inline-link:hover,
.cc-card__inline-link:focus-visible {
  opacity: 0.7;
  outline: none;
}
.cc-card__inline-link:focus-visible {
  outline: 2px solid #1A1A1A;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============ Phase 9-F-A Layer 4: dm-list section header (= TIFULER 同士 / LEARNER からの相談 / Spec §15.8.2) ============ */
.dm-list__section-header {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(26, 26, 26, 0.45);
  padding: 16px 20px 8px;
  margin-top: 4px;
  user-select: none;
}
.dm-list__section-header:first-child {
  margin-top: 0;
}

/* ============ Phase 9-F-B: compose 検索バー + section header (Spec §16) ============ */
.tk-compose-search {
  width: 100%;
  box-sizing: border-box;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #1A1A1A;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0 0 8px;
  outline: none;
  transition: background 160ms ease, border-color 160ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.tk-compose-search::placeholder {
  color: rgba(26, 26, 26, 0.4);
}
.tk-compose-search:focus {
  background: #fff;
  border-color: rgba(26, 26, 26, 0.2);
}
.tk-compose-section-header {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(26, 26, 26, 0.45);
  padding: 14px 4px 6px;
  user-select: none;
}
.tk-compose-section-header:first-child {
  padding-top: 4px;
}

/* === Tifulカード Phase 1 / Section D 招待コード (= ProductSpec §4.7.9 Referral Credit / 仕様書 §6.4 Phase 1 解放) === */

.mc-section-d__sub {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: rgba(26, 26, 26, 0.55);
  margin-top: 4px;
}

.mc-section-d__code-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(248,250,253,0.95) 100%);
  border: 1px solid rgba(26, 30, 40, 0.06);
  border-radius: 14px;
  padding: 14px 16px;
  margin-top: 14px;
  box-shadow: 0 1px 2px rgba(26, 30, 40, 0.03);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mc-section-d__code-id {
  font-family: 'Inter', 'SF Mono', 'Menlo', monospace;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #1A1A1A;
  user-select: all;
}
.mc-section-d__copy-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 11px;
  background: rgba(26, 30, 40, 0.04);
  border: 1px solid rgba(26, 30, 40, 0.08);
  border-radius: 8px;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.75);
  cursor: pointer;
  transition: background 160ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.mc-section-d__copy-btn:hover {
  background: rgba(26, 30, 40, 0.08);
}
.mc-section-d__copy-btn svg {
  width: 13px;
  height: 13px;
}

.mc-section-d__stats {
  text-align: center;
  margin-top: 16px;
  padding: 14px 12px;
  background: rgba(94, 103, 115, 0.04);
  border-radius: 12px;
}
.mc-section-d__stats-line {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #1A1A1A;
  letter-spacing: 0.01em;
}
.mc-section-d__stats-num {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #5E6773;
  margin: 0 2px;
}
.mc-section-d__stats-sub {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: rgba(26, 26, 26, 0.5);
  margin-top: 4px;
}

.mc-section-d__share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 14px;
  padding: 12px 16px;
  background: #1A1A1A;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: opacity 160ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.mc-section-d__share-btn:hover {
  opacity: 0.85;
}
.mc-section-d__share-btn svg {
  width: 14px;
  height: 14px;
}

.mc-section-d__list-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 16px;
  padding: 12px 4px;
  background: transparent;
  border: none;
  border-top: 1px solid rgba(26, 30, 40, 0.08);
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.7);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
}
.mc-section-d__list-toggle-chev {
  width: 14px;
  height: 14px;
  transition: transform 200ms ease;
  flex-shrink: 0;
}
.mc-section-d.is-open .mc-section-d__list-toggle-chev {
  transform: rotate(180deg);
}

.mc-section-d__list {
  display: none;
  margin-top: 4px;
  padding: 4px 0 0;
}
.mc-section-d.is-open .mc-section-d__list {
  display: block;
}
.mc-section-d__list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 4px;
  border-bottom: 1px solid rgba(26, 30, 40, 0.05);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  color: rgba(26, 26, 26, 0.85);
}
.mc-section-d__list-item:last-child {
  border-bottom: none;
}
.mc-section-d__list-handle {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.85);
}
.mc-section-d__list-meta {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.5);
  letter-spacing: 0.01em;
}
.mc-section-d__list-rc {
  margin-left: 4px;
  color: #5E6773;
}

.mc-section-d__how {
  display: inline-block;
  margin-top: 14px;
  padding: 4px 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: rgba(26, 26, 26, 0.45);
  text-decoration: underline;
  text-decoration-color: rgba(26, 26, 26, 0.2);
  text-underline-offset: 2px;
  cursor: pointer;
  background: transparent;
  border: none;
  -webkit-appearance: none;
  appearance: none;
}
.mc-section-d__how:hover {
  color: rgba(26, 26, 26, 0.65);
}

/* Learner locked 表示 */
.mc-section-d--locked {
  text-align: center;
  padding: 24px 16px;
  background: rgba(26, 30, 40, 0.02);
  border-radius: 12px;
  margin-top: 14px;
}
.mc-section-d--locked .mc-section-d__lock-icon {
  width: 28px;
  height: 28px;
  margin: 0 auto 10px;
  display: block;
  color: rgba(26, 26, 26, 0.35);
}
.mc-section-d--locked .mc-section-d__lock-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.6);
  line-height: 1.6;
}
.mc-section-d--locked .mc-section-d__lock-sub {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: rgba(26, 26, 26, 0.4);
  margin-top: 6px;
  line-height: 1.5;
}

/* Copy success toast */
.mc-section-d__toast {
  position: fixed;
  bottom: 88px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(26, 26, 26, 0.92);
  color: #fff;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  padding: 10px 16px;
  border-radius: 10px;
  opacity: 0;
  pointer-events: none;
  z-index: 1000;
  transition: opacity 220ms ease, transform 220ms ease;
  white-space: nowrap;
}
.mc-section-d__toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* How it works modal */
.mc-section-d-how-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: none;
  align-items: flex-end;
  justify-content: center;
  z-index: 1500;
}
.mc-section-d-how-modal.is-open {
  display: flex;
}
.mc-section-d-how-modal__inner {
  width: 100%;
  max-width: 430px;
  background: #fff;
  border-radius: 18px 18px 0 0;
  padding: 24px 22px 32px;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
}
.mc-section-d-how-modal__title {
  font-family: 'Noto Serif JP', serif;
  font-size: 17px;
  font-weight: 500;
  color: #1A1A1A;
  margin: 0 0 14px;
}
.mc-section-d-how-modal__body {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgba(26, 26, 26, 0.75);
  line-height: 1.7;
  margin: 0 0 16px;
}
.mc-section-d-how-modal__table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 14px;
}
.mc-section-d-how-modal__table th,
.mc-section-d-how-modal__table td {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 12.5px;
  padding: 8px 6px;
  border-bottom: 1px solid rgba(26, 30, 40, 0.06);
  text-align: left;
}
.mc-section-d-how-modal__table th {
  font-weight: 500;
  color: rgba(26, 26, 26, 0.5);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 10.5px;
}
.mc-section-d-how-modal__table td:last-child {
  text-align: right;
  font-weight: 600;
  color: #5E6773;
}
.mc-section-d-how-modal__close {
  display: block;
  width: 100%;
  padding: 11px;
  background: rgba(26, 30, 40, 0.04);
  border: 1px solid rgba(26, 30, 40, 0.08);
  border-radius: 10px;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.75);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* ============================================================
   2026-05-11 FB④⑥: 設定モーダル (= bottom sheet / mc-iconbtn[aria-label="settings"] click open)
   4 my_compass 画面共通 / Phase 0 placeholder + アカウント切替実装
   ============================================================ */
.mc-settings-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.mc-settings-modal[hidden] { display: none; }
.mc-settings-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.mc-settings-modal__sheet {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(390px, 100%);
  background: #FFFFFF;
  border-radius: 18px 18px 0 0;
  padding: 12px 0 max(24px, env(safe-area-inset-bottom));
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 85vh;
  overflow-y: auto;
}
.mc-settings-modal__handle {
  width: 36px;
  height: 4px;
  background: rgba(40, 45, 55, 0.18);
  border-radius: 2px;
  margin: 0 auto 12px;
}
.mc-settings-modal__title {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: rgba(40, 45, 55, 0.55);
  text-transform: uppercase;
  padding: 0 24px 12px;
  border-bottom: 0.5px solid rgba(40, 45, 55, 0.08);
}
.mc-settings-modal__item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 16px 24px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  color: rgba(20, 25, 35, 0.92);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}
.mc-settings-modal__item-icon { width: 20px; height: 20px; color: rgba(20, 25, 35, 0.65); flex: 0 0 20px; }
.mc-settings-modal__item-label { flex: 1; }
.mc-settings-modal__chev { width: 14px; height: 14px; color: rgba(20, 25, 35, 0.35); flex: 0 0 14px; }
.mc-settings-modal__placeholder {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: rgba(20, 25, 35, 0.4);
  letter-spacing: 0.02em;
}
.mc-settings-modal__item[disabled] { opacity: 0.6; cursor: not-allowed; }
.mc-settings-modal__item--danger { color: #c64a4a; }
.mc-settings-modal__item--danger .mc-settings-modal__item-icon { color: #c64a4a; }
.mc-settings-modal__group {
  padding: 6px 0 10px;
  border-top: 0.5px solid rgba(40, 45, 55, 0.08);
  border-bottom: 0.5px solid rgba(40, 45, 55, 0.08);
  margin: 4px 0;
}
.mc-settings-modal__group-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: rgba(40, 45, 55, 0.55);
  text-transform: uppercase;
  padding: 12px 24px 8px;
}
.mc-settings-modal__account {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 10px 24px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  color: rgba(20, 25, 35, 0.92);
  text-align: left;
  cursor: pointer;
}
.mc-settings-modal__account img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 32px;
}
.mc-settings-modal__account-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.mc-settings-modal__account-text em {
  font-style: normal;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: rgba(40, 45, 55, 0.5);
  letter-spacing: 0.02em;
}
.mc-settings-modal__account[aria-current="true"] {
  background: rgba(40, 45, 55, 0.04);
}
.mc-settings-modal__account[aria-current="true"] .mc-settings-modal__account-text strong {
  font-weight: 600;
}
.mc-settings-modal__close {
  margin: 12px 24px 4px;
  padding: 12px;
  background: transparent;
  border: 0.5px solid rgba(40, 45, 55, 0.18);
  border-radius: 10px;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(20, 25, 35, 0.92);
  cursor: pointer;
}