/* ==========================================================================
   assets/r3f-premium.css
   brief3f：「KANEGEN 贈答・プレミアム」の棚（index の #r3f-premium 専用）

   決めごと
   - 色は既存トークンのみ。新しい色の値・グラデーション・ぼかした影は使わない
       面   : --night（帯だけ）／--kaki（印だけ）／--card（カードと印の地）
       文字 : --ink／--muted／--night-ink（帯の上だけ）
       罫線 : --line／--line-strong
       ※ --dashi／--dashi-band は使っていない
   - 文字サイズは --r3-h2／--r3-h3／--r3-body／--r3-sub／--r3-note のみ
   - 余白は既存変数からの calc() のみ（字送りと札の内側は em）
     px の直書きは、罫線の 1px・印の内輪（3px／4px）・メディアクエリの幅だけ
   - 書体はすべて明朝 var(--font-head)
   - すべて #r3f-premium 配下に限定（ほかのセクションには効かない）
   - 棚の中に押せる要素は無い（リンク・ボタン・入力欄なし）ので、hover／focus の指定も無い
   ========================================================================== */

/* ---- 棚全体：上下の余白を通常セクション（--r3-sec）より広く取る ---- */
#r3f-premium {
  padding-top: calc(var(--r3-sec) * 1.25);
  padding-bottom: calc(var(--r3-sec) * 1.25);
  color: var(--ink);
}

/* ---- 文字要素をそろえる（既存の見出し・段落・リストの指定を棚に持ち込まない） ---- */
#r3f-premium h2,
#r3f-premium h3,
#r3f-premium h4,
#r3f-premium p,
#r3f-premium ul,
#r3f-premium ol,
#r3f-premium li {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  list-style: none;
  font-family: var(--font-head);
  font-weight: 400;
  color: inherit;
}

/* ---- 帯：アルファベットの KANEGEN を、帯ごと見出しにする ---- */
#r3f-premium .r3f-obi {
  padding: calc(var(--r3-body) * 1.75) var(--r3-body);
  background: var(--night);
  color: var(--night-ink);
}

#r3f-premium .r3f-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--r3-body) * 0.5);
  font-size: var(--r3-h2);
  font-weight: 500;
  line-height: 1.3;
}

#r3f-premium .r3f-wordmark {
  padding-left: 0.4em; /* 字送りで右に余る分を左にも足し、中央に据える */
  letter-spacing: 0.4em;
}

#r3f-premium .r3f-title-ja {
  padding-left: 0.3em;
  font-size: var(--r3-sub);
  letter-spacing: 0.3em;
}

/* ---- 総題：一言はここ1か所だけ ---- */
#r3f-premium .r3f-tagline {
  margin-top: calc(var(--r3-sec) * 0.75);
  font-size: var(--r3-h2);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.14em;
  text-align: center;
}

#r3f-premium .r3f-tagline span {
  display: inline-block; /* 狭い画面では読点の位置で折り返す */
}

/* ---- 準備中の表示：値段や購入ボタンの代わりに、段階を正直に示す ---- */
#r3f-premium .r3f-notice {
  max-width: 38em;
  margin: calc(var(--r3-body) * 2.5) auto 0;
  padding: calc(var(--r3-body) * 1.5) var(--r3-body);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  text-align: center;
}

#r3f-premium .r3f-notice-main {
  font-size: var(--r3-body);
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 0.06em;
}

#r3f-premium .r3f-notice-sub {
  margin-top: calc(var(--r3-body) * 0.5);
  font-size: var(--r3-sub);
  line-height: 1.9;
  color: var(--muted);
}

/* ---- 段階を示す札（押せる見た目にしない：細い罫線と文字だけ） ---- */
#r3f-premium .r3f-state {
  display: inline-block;
  padding: 0.15em 0.8em;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: var(--r3-note);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.14em;
  color: var(--ink);
  vertical-align: 0.1em;
}

#r3f-premium .r3f-notice-main .r3f-state {
  margin-right: 0.9em;
}

/* ---- 品目カード：写真なし・文字主体 ---- */
#r3f-premium .r3f-items {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--r3-body) * 2.75) calc(var(--r3-body) * 2);
  margin-top: calc(var(--r3-sec) * 0.875);
}

#r3f-premium .r3f-item {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: calc(var(--r3-body) * 2.75) calc(var(--r3-body) * 1.75) calc(var(--r3-body) * 1.5);
  background: var(--card);
  border: 1px solid var(--line);
  border-top-color: var(--line-strong);
  border-radius: var(--radius);
}

#r3f-premium .r3f-item-name {
  font-size: var(--r3-h3);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.08em;
}

#r3f-premium .r3f-item-text,
#r3f-premium .r3f-item-kinds {
  margin-top: calc(var(--r3-body) * 0.75);
  font-size: var(--r3-sub);
  line-height: 1.9;
}

#r3f-premium .r3f-item-kinds li + li {
  margin-top: calc(var(--r3-body) * 0.25);
}

#r3f-premium .r3f-item-state {
  margin-top: auto; /* 文字量が違っても、準備中の表示を下端にそろえる */
  font-size: var(--r3-note);
  line-height: 1.6;
  letter-spacing: 0.12em;
  color: var(--muted);
}

#r3f-premium .r3f-item-state::before {
  content: "";
  display: block;
  width: calc(var(--r3-body) * 1.5);
  margin: calc(var(--r3-body) * 1.75) 0 calc(var(--r3-body) * 0.75);
  border-top: 1px solid var(--line-strong);
}

/* ---- 印：封緘風の小さな丸。単色と二重の輪だけで、光沢やぼかしは付けない ---- */
#r3f-premium .r3f-seal {
  position: absolute;
  top: 0;
  right: calc(var(--r3-body) * 1.5);
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--r3-body) * 2.75);
  height: calc(var(--r3-body) * 2.75);
  border: 1px solid var(--kaki);
  border-radius: 50%;
  background: var(--card);
  box-shadow: inset 0 0 0 3px var(--card), inset 0 0 0 4px var(--kaki); /* 内側の輪。ぼかし 0 */
  color: var(--kaki);
  font-family: var(--font-head);
  font-size: var(--r3-h3);
  font-weight: 600;
  line-height: 1;
  transform: translateY(-50%) rotate(-6deg); /* カードの上辺をまたいで貼る */
}

/* ---- 棚の注記 ---- */
#r3f-premium .r3f-notes {
  margin-top: calc(var(--r3-body) * 1.75);
  font-size: var(--r3-note);
  line-height: 1.9;
  color: var(--muted);
}

/* ---- 構想中のしくみ：破線の枠で、まだ形になっていないことを示す ---- */
#r3f-premium .r3f-concept {
  margin-top: var(--r3-sec);
  padding: calc(var(--r3-body) * 2) calc(var(--r3-body) * 1.25);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}

#r3f-premium .r3f-concept-title {
  margin-top: calc(var(--r3-body) * 0.75);
  font-size: var(--r3-h3);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.06em;
}

#r3f-premium .r3f-concept-lead {
  margin-top: calc(var(--r3-body) * 0.5);
  font-size: var(--r3-sub);
  line-height: 1.9;
  color: var(--muted);
}

/* リマインドと組み立てを、ひとつの枠の中で続けて見せる */
#r3f-premium .r3f-concept-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: calc(var(--r3-body) * 1.75);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

#r3f-premium .r3f-concept-part {
  padding: calc(var(--r3-body) * 1.75) 0;
}

#r3f-premium .r3f-concept-part + .r3f-concept-part {
  border-top: 1px solid var(--line);
}

#r3f-premium .r3f-part-title {
  font-size: var(--r3-body);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.08em;
}

#r3f-premium .r3f-part-text {
  margin-top: calc(var(--r3-body) * 0.75);
  font-size: var(--r3-body);
  line-height: 2;
}

#r3f-premium .r3f-steps {
  margin-top: calc(var(--r3-body) * 1.25);
  counter-reset: r3f-step;
}

#r3f-premium .r3f-steps li {
  display: grid;
  grid-template-columns: calc(var(--r3-body) * 2.25) minmax(0, 1fr);
  align-items: baseline;
  padding: calc(var(--r3-body) * 0.875) 0;
  counter-increment: r3f-step;
}

#r3f-premium .r3f-steps li + li {
  border-top: 1px solid var(--line);
}

#r3f-premium .r3f-steps li::before {
  content: counter(r3f-step, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1;
  font-size: var(--r3-note);
  letter-spacing: 0.1em;
  color: var(--muted);
}

#r3f-premium .r3f-step-name {
  grid-column: 2;
  font-size: var(--r3-body);
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 0.06em;
}

#r3f-premium .r3f-step-text {
  grid-column: 2;
  font-size: var(--r3-sub);
  line-height: 1.9;
}

#r3f-premium .r3f-concept-note {
  margin-top: calc(var(--r3-body) * 1.25);
  font-size: var(--r3-note);
  line-height: 1.9;
  color: var(--muted);
}

/* ---- 画面幅：カードは 1 列 → 2 列 → 4 列（3 列+1 枚の並びを作らない） ---- */
@media (min-width: 600px) {
  #r3f-premium .r3f-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  #r3f-premium {
    padding-top: calc(var(--r3-sec) * 1.5);
    padding-bottom: calc(var(--r3-sec) * 1.5);
  }

  #r3f-premium .r3f-items {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #r3f-premium .r3f-concept {
    padding: calc(var(--r3-body) * 3) calc(var(--r3-body) * 3.5);
  }

  #r3f-premium .r3f-concept-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }

  #r3f-premium .r3f-concept-part {
    padding: calc(var(--r3-body) * 2) calc(var(--r3-body) * 2.5) calc(var(--r3-body) * 2) 0;
  }

  #r3f-premium .r3f-concept-part + .r3f-concept-part {
    padding-right: 0;
    padding-left: calc(var(--r3-body) * 2.5);
    border-top: 0;
    border-left: 1px solid var(--line);
  }
}