/* ================================================================
   myq_list.css — MYQ診断履歴一覧（肌データ）
   Design Concept v2.0「THE CLINIC OF SKIN」準拠
   near-monochrome ／ Accent(#743600) は1画面1〜2箇所のみ
   ================================================================ */

:root {
  /* --- 確定カラーパレット v2.0（9色） --- */
  --base:        #FFFFFF;   /* カード・レポート面の純白 */
  --paper:       #F4F2ED;   /* 紙のような無彩ベージュ */
  --paper-warm:  #EAE6DD;   /* 一段沈んだ面・セクション区切り */
  --beige:       #A18C63;   /* 予備彩色 */
  --beige-light: #C5A572;   /* 補助ベージュ */
  --ink:         #1D1D1D;   /* 墨。見出し・本文の主役 */
  --ink-light:   #5E5E5E;   /* 本文セカンダリ */
  --ink-xlight:  #777777;   /* 最も淡い補助テキスト */
  --line:        #9D9D9D;   /* 罫線・区切り */
  --accent:      #743600;   /* 唯一の彩色。深いテラコッタブラウン（読ませたい一点のみ） */

  /* --- フォント3層（serifは使わない） --- */
  --font-body:    'Hiragino Kaku Gothic ProN','Hiragino Sans','Noto Sans JP',sans-serif;
  --font-display: 'Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif;
  --font-num:     'SF Pro Display','SF Pro Text',-apple-system,BlinkMacSystemFont,'Helvetica Neue','Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif;

  /* --- 後方互換エイリアス（既存クラスが参照） --- */
  --myq-black:       var(--ink);
  --myq-black-deep:  #000000;
  --myq-brown:       var(--accent);
  --myq-cream:       var(--base);
  --myq-bg:          var(--paper-warm);
  --myq-page-bg:     rgb(238, 238, 238);
  --myq-line:        var(--paper-warm);  /* 控えめな区切り罫線 */
  --myq-border:      var(--line);        /* カード枠（カルテ罫） */
  --myq-text:        var(--ink);
  --myq-text-sub:    var(--ink-light);
  --myq-text-muted:  var(--ink-xlight);
  --myq-radius:      12px;
  --myq-radius-sm:   8px;
  --myq-radius-lg:   16px;
  --myq-transition:  0.2s ease;
}

/* serif指定は廃止。.serif は DISPLAY 層（Noto Sans JP）にマップ */
.serif { font-family: var(--font-display); }


/* ================================================================
   ページ枠（中央カード）
   ================================================================ */
#page-wrapper { padding: 0 !important; }

.myq-page {
  background: var(--myq-page-bg);
  padding-top: 20px;

}

@media only screen and (min-width: 768px) {
  .myq-page { padding-top: 0px;}
}


.myq-inner {
  position: relative;
  width: 100%;
  max-width: 560px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 0 40px;
  background: var(--base);
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.06);
  color: var(--ink);
  font-family: var(--font-body);
}

/* ================================================================
   上部ナビ
   ================================================================ */
.myq-topbar {
  position: relative;
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 22px;
  border-bottom: 1px solid var(--myq-line);
}

.myq-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--ink-light);
  text-decoration: none;
  letter-spacing: .04em;
  z-index: 1;
  transition: color var(--myq-transition);
}
.myq-back:hover { color: var(--ink); text-decoration: none; }
.myq-back i { font-size: 14px; line-height: 1; }

.myq-topbar-title {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .06em;
  pointer-events: none;
}



/*myqページ*/
/* ================================================================
   あなたのMY QuSome（my_qusome.twig）
   肌データ(list)ページと同一トンマナ：near-monochrome / v2.0 トークン流用
   彩色一点 = 主要CTA（既存 .myq-btn-primary の Accent）。他は無彩で構成。
   既存 .myq-list-* とは独立した .myqp-* 系統（listページに影響なし）
   ================================================================ */
/* 560px白インナー内に直接配置（List同様のガター運用）。box-sizing統一のみ */
.myqp-current *, .myqp-update * { box-sizing: border-box; }

/* --- 現在の製品セクション（素の区画・左右ガター26px） --- */
.myqp-current { padding: 30px 26px 8px; }

/* --- 購入日ラベル（listの年ラベルと同じ細罫の見せ方） --- */
.myqp-head { margin-bottom: 20px; }
.myqp-subtitle {
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--ink-light);
  margin: 0;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--myq-line);
}

/* --- 1カラム縦積み（560px幅に最適化） --- */
.myqp-current-grid {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* 製品ビジュアル面（一段沈んだ無彩面 = paper-warm） */
.myqp-product { min-width: 0; }
/* 製品画像の地色(#FCFCFC)に近い --paper を面に使い、multiply で継ぎ目を消す。
   isolation:isolate で blend の対象をこの面に限定（外側へ影響させない）。 */
.myqp-product-media {
  position: relative;
  isolation: isolate;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 28px 58px;
  background: var(--paper);
  border: 1px solid var(--myq-card-border);
  border-radius: var(--myq-radius);
  overflow: hidden;
}
.myqp-product-media img {
  max-width: 74%;
  max-height: 280px;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.myqp-product-pill {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  padding: 9px 22px;
  background: #fff;
  border: 1px solid var(--myq-card-border);
  border-radius: 24px;
  box-shadow: var(--myq-shadow-sm);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink);
  white-space: nowrap;
}

/* 成分カード群 */
.myqp-ingredients {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.myqp-ing {
  padding: 16px 18px;
  background: var(--base);
  border: 1px solid var(--myq-card-border);
  border-radius: var(--myq-radius);
  box-shadow: var(--myq-shadow-sm);
  transition: box-shadow var(--myq-transition), border-color var(--myq-transition);
}
.myqp-ing:hover {
  box-shadow: var(--myq-shadow-md);
}
.myqp-ing-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
}
/* 成分ラベル：無彩の paper-warm チップ（.myq-tag ベースを角丸小に上書き） */
.myqp-ing-tag {
  flex-shrink: 0;
  background: var(--paper-warm);
  color: var(--ink-light);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
}
.myqp-ing-name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.4;
  color: var(--ink);
}
.myqp-ing-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-light);
}
/* テキストリンク：墨アンダーライン常時→ホバーで消える（v2.0規約） */
.myqp-ing-more {
  align-self: flex-end;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
  transition: border-color var(--myq-transition);
}
.myqp-ing-more:hover { color: var(--ink); border-color: transparent; text-decoration: none; }

/* --- アップデートセクション（paper箱で区別・ガター内） --- */
.myqp-update {
  margin: 22px 26px 4px;
  padding: 26px 22px;
  background: var(--paper);
  border-radius: var(--myq-radius);
}
.myqp-update-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink);
  margin: 0 0 12px;
}
.myqp-update-desc {
  font-size: 13px;
  line-height: 1.9;
  color: var(--ink-light);
  margin: 0 0 22px;
}
.myqp-update-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.myqp-update-actions .myq-btn { width: 100%; }

/* 既存 .myq-btn を流用。ゴースト（白地＋墨枠）を汎用変種として追加 */
.myq-btn-ghost {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
}
.myq-btn-ghost:hover { background: var(--paper); color: var(--ink); text-decoration: none; }

/* --- 極小画面の微調整 --- */
@media (max-width: 420px) {
  .myqp-current { padding: 24px 18px 6px; }
  .myqp-update { margin: 20px 18px 4px; padding: 22px 18px; }
  .myqp-product-media img { max-width: 82%; }
}


/*myq-listページ*/


/* ================================================================
   説明文
   ================================================================ */
.myq-desc {
  font-size: 13px;
  line-height: 2.0;
  color: var(--ink-light);
  letter-spacing: .03em;
  margin: 0;
  padding: 30px 26px 26px;
}

/* ================================================================
   次回の肌分析バナー（墨ソリッド面）
   ================================================================ */
/* 墨ベタは重いため、紙面（paper）＋細罫の軽い面に。
   彩色一点は右のCTA（Accent）に集約する。 */
.myq-next-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 26px;
  padding: 18px 18px 18px 20px;
  background: var(--paper);
  border: 1px solid var(--myq-card-border);
  border-radius: var(--myq-radius-sm);
}

.myq-next-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .02em;
  font-family: var(--font-num);
}

/* ドットは無彩に（彩色はCTAへ温存） */
.myq-next-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line);
  flex-shrink: 0;
}

/* 暗い面上の主要CTA = Accent（このバナーが画面の彩色一点） */
.myq-next-btn {
  margin-left: auto;
  flex-shrink: 0;
  padding: 8px 18px;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: 20px;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--myq-transition), color var(--myq-transition);
}
.myq-next-btn:hover { background: #fff; color: var(--accent); text-decoration: none; }

/* ================================================================
   現在のあなたのケア ショートカット（無彩・カルテ枠）
   ================================================================ */
.myq-active-shortcut {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 22px 26px 0;
  padding: 22px 18px;
  background: var(--paper);
  border: 1px solid var(--myq-border);
  border-radius: var(--myq-radius);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--myq-transition);
}
.myq-active-shortcut:hover {
  box-shadow: 0 4px 14px rgba(29, 29, 29, 0.08);
  text-decoration: none;
  color: inherit;
}

.myq-active-check {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: #fff;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.myq-active-check svg { width: 20px; height: 20px; }

.myq-active-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.myq-active-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--ink-xlight);
  text-transform: uppercase;
  margin-bottom: 3px;
  font-family: var(--font-num);
}
.myq-active-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}
.myq-active-sub {
  font-size: 11px;
  color: var(--ink-xlight);
  margin-top: 2px;
  line-height: 1.4;
  font-family: var(--font-num);
}
.myq-active-arrow {
  flex-shrink: 0;
  color: var(--ink-light);
  font-size: 18px;
  line-height: 1;
}

/* ================================================================
   年ラベル
   ================================================================ */
.myq-year {
  margin: 15px 26px 0px;
  padding: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--ink-xlight);
  border-bottom: 1px solid var(--myq-line);
  font-family: var(--font-num);
}

/* ================================================================
   タイムライン
   ================================================================ */
.myq-timeline-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.myq-timeline-item {
  position: relative;
  border-bottom: 1px solid var(--myq-line);
  transition: background var(--myq-transition);
}
.myq-timeline-item:hover { background: var(--paper); }

/* 現在のあなたのケア（無彩・墨の左バーで強調） */
.myq-timeline-item.is-active {
  background: var(--paper);
}
.myq-timeline-item.is-active::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--ink);
}

.myq-timeline-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 26px;
  text-decoration: none;
  color: inherit;
}
.myq-timeline-link:hover { text-decoration: none; color: inherit; }

/* サムネイル */
.myq-thumb {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: var(--myq-radius-sm);
  background: var(--paper-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-xlight);
}
.myq-thumb svg { width: 23px; height: 23px; opacity: 0.4; }
.myq-thumb-legacy { background: var(--paper); }


.myq-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--myq-radius-sm);
}

.skindata-thumb { width: 60px; text-align: center; }
.skindata-thumb i { font-size: 40px; color: #007aff }

.myq-timeline-body {
  flex: 1;
  min-width: 0;
}
.myq-timeline-date {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  font-family: var(--font-num);
}
.myq-timeline-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

.myq-timeline-arrow {
  flex-shrink: 0;
  color: var(--line);
  font-size: 18px;
  line-height: 1;
}

/* ================================================================
   バッジ / タグ（無彩。彩色しない）
   ================================================================ */
.myq-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.4;
}

/* MYQ肌分析バッジ（中立アウトライン） */
.myq-tag-myq {
  border: 1px solid var(--line);
  color: var(--ink-light);
  background: #fff;
}

/* 現在のあなたのケア（墨ソリッドで強調） */
.myq-tag-current {
  background: var(--ink);
  color: #fff;
}

/* 購入済み（中立アウトライン＋チェック） */
.myq-tag-purchased {
  background: #fff;
  color: var(--accent);
  border: 1px solid var(--accent);
}
.myq-tag-purchased::before {
  content: '\2713';
  font-size: 9px;
  font-weight: bold;
  margin-right: 4px;
  line-height: 1;
}

/* ================================================================
   リニューアル境界線（罫線は彩色しない）
   ================================================================ */
.myq-renewal-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 38px 26px 22px;
  color: var(--ink-xlight);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  white-space: nowrap;
}
.myq-renewal-divider::before,
.myq-renewal-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
  opacity: 0.45;
}

/* ================================================================
   旧スキンケア分析カード（白＋カルテ罫）
   ================================================================ */
.myq-legacy-card {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 26px;
  padding: 20px 16px;
  background: #fff;
  border: 1px solid var(--myq-border);
  border-radius: var(--myq-radius);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--myq-transition);
}
.myq-legacy-card:hover { border-color: var(--ink); text-decoration: none; color: inherit; }

.myq-legacy-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.myq-legacy-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}
.myq-legacy-card-date {
  font-size: 11px;
  color: var(--ink-xlight);
  margin-top: 4px;
  line-height: 1.4;
  font-family: var(--font-num);
}
.myq-legacy-card-summary {
  font-size: 10px;
  color: var(--ink-xlight);
  margin-top: 4px;
  line-height: 1.4;
  font-family: var(--font-num);
}
.myq-legacy-card-summary i { color: var(--ink-xlight); margin-right: 4px; }

.myq-legacy-card-arrow {
  flex-shrink: 0;
  color: var(--line);
  font-size: 18px;
  line-height: 1;
}

/* ================================================================
   フッター注記
   ================================================================ */
.myq-footnote {
  font-size: 11px;
  line-height: 1.8;
  color: var(--ink-xlight);
  text-align: center;
  margin: 20px 26px 0;
}

/* ================================================================
   空状態 / その他パターン（_pattern_a / _pattern_c 用）
   ================================================================ */
.myq-pattern { padding: 0 0; }

.myq-lead {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  margin: 44px 0 10px;
  letter-spacing: .04em;
}
.myq-sublead,
.myq-renewal-note {
  font-size: 13px;
  line-height: 1.9;
  color: var(--ink-light);
  text-align: center;
  margin: 0 0 18px;
}

.myq-cta-wrap { margin: 28px 0; text-align: center; }

/* CTA = 墨ソリッド、ホバーで反転 */
.myq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: 32px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  transition: background var(--myq-transition), color var(--myq-transition);
}
.myq-btn-primary {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
}
.myq-btn-primary:hover { background: #fff; color: var(--accent); text-decoration: none; }
.myq-btn-inline { background: #fff; color: var(--ink); }
.myq-btn-gold { background: var(--accent); color: #fff; border: 1px solid var(--accent); }
.myq-btn-gold:hover { background: #fff; color: var(--accent); }

.myq-info-box {
  background: #fff;
  border: 1px solid var(--myq-border);
  border-radius: var(--myq-radius-lg);
  padding: 24px 20px;
  margin: 32px 0 0;
  text-align: left;
}
.myq-info-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .08em;
  margin: 0 0 12px;
}
.myq-info-list {
  margin: 0;
  padding-left: 1.1em;
  color: var(--ink-light);
  font-size: 12px;
  line-height: 2;
}

.myq-upsell-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--ink);
  color: #fff;
  padding: 16px 18px;
  border-radius: var(--myq-radius-sm);
  margin: 0 0 18px;
}
.myq-upsell-text { margin: 0; font-size: 13px; font-weight: 600; }

.myq-renewal-box {
  background: var(--paper);
  border-radius: var(--myq-radius);
  padding: 24px 20px;
  margin: 12px 0 0;
  text-align: center;
}
.myq-renewal-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.6;
  margin: 0 0 18px;
}

/* ================================================================
   パターン共通の余白調整（list-inner 直下に配置するため左右ガター付与）
   ================================================================ */
.myq-lead { margin-top: 34px; padding-left: 26px; padding-right: 26px; }
.myq-sublead { padding-left: 26px; padding-right: 26px; }

.myq-cta-wrap { margin: 32px 26px; }
.myq-cta-wrap .myq-btn { width: 100%; }

.myq-info-box { margin: 36px 26px 0; }
.myq-info-list { list-style: none; padding-left: 0; }
.myq-info-list li {
  position: relative;
  padding-left: 16px;
}
.myq-info-list li::before {
  content: '';
  position: absolute;
  left: 2px; top: 0.85em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ink-xlight);
}

/* 空状態アイコン（Pattern A） */
.myq-empty-icon {
  width: 88px;
  height: 88px;
  margin: 56px auto 0;
  border-radius: 50%;
  background: var(--paper-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-xlight);
}
.myq-empty-icon svg { width: 34px; height: 34px; opacity: 0.55; }

/* アップセルバナー（Pattern C）— 墨面＋AccentのCTA */
.myq-upsell-banner {
  margin: 0 26px;
  padding: 18px 18px 18px 20px;
  background: var(--ink);
}
.myq-upsell-btn {
  flex-shrink: 0;
  padding: 8px 18px;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: 20px;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--myq-transition), color var(--myq-transition);
}
.myq-upsell-btn:hover { background: #fff; color: var(--accent); text-decoration: none; }

/* C: アップセルの下に間隔 */
.myq-legacy-card { margin-top: 26px; }

/* リニューアル訴求ボックス（Pattern C） */
.myq-renewal-box { margin: 28px 26px 0; padding: 30px 22px; }
.myq-renewal-eyebrow {
  font-size: 11px;
  letter-spacing: .22em;
  font-weight: 600;
  color: var(--ink-xlight);
  text-transform: uppercase;
  margin: 0 0 8px;
  font-family: var(--font-num);
}
.myq-renewal-desc {
  font-size: 12px;
  line-height: 1.9;
  color: var(--ink-light);
  margin: 0 0 18px;
}
.myq-renewal-box .myq-btn { width: 100%; }

/* ================================================================
   スペック表示（PATTERN A / B / C の参考レイアウト）
   ================================================================ */
.myq-spec {
  padding: 56px 0;
}
.myq-spec-head {
  max-width: 560px;
  margin: 0 auto 22px;
  text-align: center;
}
.myq-spec-label {
  font-size: 12px;
  letter-spacing: .22em;
  font-weight: 600;
  color: var(--ink-xlight);
  margin: 0 0 6px;
  font-family: var(--font-num);
}
.myq-spec-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
}
.myq-spec-desc {
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-xlight);
  margin: 0;
}

/* ================================================================
   ▼ VISUAL POLISH — トンマナ（near-monochrome / v2.0）維持のまま質感向上
   （色は増やさず、枠・影・余白・階層・ホバーのみ調整）
   ================================================================ */
:root {
  --myq-card-border: #E7E2D8;                    /* 温かみのある淡い枠 */
  --myq-shadow-sm:  0 1px 3px rgba(29, 29, 29, 0.05);
  --myq-shadow-md:  0 8px 24px rgba(29, 29, 29, 0.09);
}

/* --- カード：淡枠＋やわらかな影、ホバーで静かに浮く --- */
.myq-active-shortcut,
.myq-legacy-card,
.myq-info-box {
  border-color: var(--myq-card-border);
  box-shadow: var(--myq-shadow-sm);
  border-radius: var(--myq-radius);
}
.myq-active-shortcut:hover,
.myq-legacy-card:hover {
  border-color: var(--myq-card-border);
  box-shadow: var(--myq-shadow-md);
}

/* --- サムネイル：枠で締める・プレースホルダは控えめに --- */
.myq-thumb {
  border: 1px solid rgba(29, 29, 29, 0.06);
}
.myq-thumb svg { opacity: 0.3; }

/* --- タイムライン：日付の階層UP・行間ゆったり・矢印は静かに --- */
.myq-timeline-link { padding-top: 22px; padding-bottom: 22px; }
.myq-timeline-date { font-size: 14px; letter-spacing: .01em; }
.myq-timeline-arrow { font-size: 16px; color: var(--line); }
.myq-timeline-item.is-active { background: linear-gradient(90deg, rgba(29,29,29,0.035) 0%, rgba(29,29,29,0) 62%); }

/* --- タグ：視認余白を少し。購入済みは無彩に（Accentは主要CTAへ温存） --- */
.myq-tag { padding: 4px 11px; }
.myq-tag-purchased { color: var(--ink-light); border-color: var(--line); }

/* --- 次回バナー：角丸と可読性を微調整（紙面化に伴い白文字指定は解除） --- */
.myq-next-banner { border-radius: 10px; box-shadow: var(--myq-shadow-sm); }

/* --- 見出し・タイトルの字送りを上品に --- */
.myq-active-title,
.myq-legacy-card-title { letter-spacing: .02em; }

/* --- 区切り線：ラベルを上品に、線は温色の細罫で静かに --- */
.myq-renewal-divider { letter-spacing: .16em; }
.myq-renewal-divider::before,
.myq-renewal-divider::after { background: var(--paper-warm); opacity: 1; }

/* --- 年ラベルの前後に呼吸を --- */
.myq-year { margin-top: 30px; color: var(--ink-light); }

/* --- 主要CTAに控えめな影で押しやすさを（動かしすぎない） --- */
.myq-btn-primary,
.myq-upsell-btn,
.myq-next-btn { box-shadow: 0 2px 8px rgba(116, 54, 0, 0.18); }
.myq-btn-primary:hover,
.myq-upsell-btn:hover,
.myq-next-btn:hover { box-shadow: none; }

/* --- 空状態アイコン：淡枠で締める --- */
.myq-empty-icon { border: 1px solid var(--myq-card-border); }


/*myq-historyページ*/
.myq-memo {padding:15px; }
.myq-memo-inner { border: 1px dashed #ddd; border-radius: var(--myq-radius); padding: 16px 18px; background: var(--paper); padding: 16px 18px; font-size: 13px; line-height: 1.7; color: var(--ink-light); }

.myq-purchase-btn a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 250px);
    min-height: 45px;
    margin: 30px auto 0;
    background: var(--myq-brown);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}