/* =========================================================
   uplift.css — 品質向上レイヤー（現構造維持・最後に読み込む）
   J's KOREAN HAIR for WOMEN（3本目・中明度/無彩色/明朝不使用）
   正本 DESIGN_LAWS_DEEP.md 第0/9/17/18章 準拠。
   代表カラーLPの承認済み uplift を「汎用部分だけ」移植。
   ---------------------------------------------------------
   パレット順応の要点（本LP固有規律を尊重）：
   ・見出しは大きくしない（ohora/Dear Dahlia 実測＝写真主役）→ 巨大化しない
   ・差し色を置かない（色を持つのは髪だけ）→ fv__title em に暖色アクセントを入れない
   ・明朝を使わない → var(--ff-mincho) は一切参照しない
   ・写真上スクリムは黒でなく暖色濃色（components.css で対応済）
   ========================================================= */

/* ---- 和文タイポ：pretty で1文字孤立を抑制（非対応は無害） ---- */
h1, h2, h3, .h2, .h3, .lead, .fv__title, .fv__sub, .worry-bridge {
  text-wrap: pretty;
}
@supports (text-autospace: normal) { body { text-autospace: normal; } }

/* ---- MPA ページ間クロスフェード（非対応は通常遷移＝無害） ---- */
@view-transition { navigation: auto; }

/* =========================================================
   1. AIスロップ除去：ALL CAPS 英字ラベルを廃止
      → 小文字英字＋ヘアラインの「章キッカー」（エディトリアル）
   ========================================================= */
.label-en {
  text-transform: none;          /* uppercase 全廃 */
  font-weight: 400;
  letter-spacing: .12em;         /* caps撤去に合わせトラッキングを締める */
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--ink-3);
}
.label-en::before {
  content: "";
  width: 26px; height: 1px;
  background: rgba(26, 26, 25, .30);   /* 直線ヘアライン（本LPに --ink-4 無し） */
  flex: 0 0 auto;
}
.section__head .label-en { display: inline-flex; }   /* block指定を上書きしつつ改行はmargin-bottomで担保 */
.section--ink .label-en { color: rgba(237, 235, 231, .78); }
.section--ink .label-en::before { background: rgba(237, 235, 231, .45); }

/* 小ラベルの ALL CAPS も一掃（欧文メタ・店名サブ・翼タグ・予約見出し・エリア・スタイル英名） */
.fv__meta,
.cta2 .btn span,
.shop__area,
.wing__tag,
.wing__ctas-head,
.style__name em { text-transform: none; letter-spacing: .14em; }

/* =========================================================
   2. タイポの主役化（本LPは"巨大化しない"規律＝比率でなく質で効かせる）
      サイズは据え置き、行間・字間・余白で見出しを主役化する。
   ========================================================= */
.fv__title { line-height: 1.6; letter-spacing: .03em; }
.fv__title em {
  margin-top: 16px;
  letter-spacing: .06em;
  color: var(--ink-2);   /* 差し色を置かない規律：暖色アクセントは入れず淡墨で格差をつける */
}
.fv__sub { margin-top: 18px; line-height: 2.1; }

/* 章見出し(H2)：サイズ据え置き・字間/行間だけ上質側へ */
.h2 { line-height: 1.55; letter-spacing: .04em; }
.section__head .h2 { margin-bottom: 18px; }

/* リード文の行間を最適域へ */
.lead { line-height: 2.1; }

/* =========================================================
   3. モーション格上げ（reduced-motion 尊重）
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* ヒーローのゆるやかな ken-burns（ambient・一度きりで settle） */
  .fv__media img {
    animation: kb 16s var(--ease) both;
    transform-origin: 62% 22%;   /* object-position に合わせ髪を軸に */
  }
  @keyframes kb { from { transform: scale(1.004); } to { transform: scale(1.05); } }

  /* reveal のイージングを上質側へ（main.js の is-in に追従） */
  .reveal { transition-timing-function: var(--ease); }

  /* CTA矢印がホバーで少し流れる */
  .btn__arrow { transition: transform 400ms var(--ease); }
  .btn:hover .btn__arrow { transform: translateY(2px); }
}

/* =========================================================
   4. 余白・リズム（下を厚く＝紙面が据わる）
   ========================================================= */
.section { padding-bottom: clamp(76px, 16vw, 108px); }   /* 下辺を少し厚く */
.section__head { margin-bottom: var(--sp-block); }

/* =========================================================
   5. CTA・ボタンの質感
   ========================================================= */
.btn { letter-spacing: .06em; }        /* 字間で"押せる格"を出す */
.cta2 .btn span { font-size: 10px; }   /* 9px→10px（装飾ローマ字・下限是正） */

/* =========================================================
   6. 「詰まり」の実体是正 ＝ ①10px意味テキスト ②ラベル-値密着 ③罫線不可視
      （行間は十分。まずこの3点を直す）
   ========================================================= */

/* A. スペック：dt=小/字間広/淡色ラベル ／ dd=大/濃色/行間広 に明確化 */
.spec dt {
  font-size: 11px;
  letter-spacing: .14em;
  font-weight: 500;
  color: var(--ink-2);           /* 淡すぎない可読ラベル */
  margin-bottom: 6px;
}
.spec dd {
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink);
}
.spec div {
  padding: 15px 0;                                 /* ラベル-値-罫線の間に呼吸 */
  border-bottom: 1px solid rgba(26, 26, 25, .14);  /* alpha低の罫線を可視化＝4項目が1塊に見える主因を解消 */
}

/* B. 再現性リスト（.repro）も同じ dt/dd 密着・不可視罫線を是正 */
.repro dt {
  font-size: 11px;
  letter-spacing: .14em;
  font-weight: 500;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.repro dd { font-size: 14px; line-height: 1.85; color: var(--ink); }
.repro div { padding: 15px 0; border-bottom: 1px solid rgba(26, 26, 25, .14); }

/* C. 注記・CTA案内の 10px を可読サイズへ（トークンでも11pxだが明示で担保） */
.note { font-size: 11px; line-height: 1.9; }
.cta2-head { font-size: 11.5px; margin-top: 4px; }
.btn-note { font-size: 11px; }
.layer-note { font-size: 11px; line-height: 1.95; }

/* D. 料金・FAQ の余白を少し広げて読みやすく */
.price__item { padding: 24px 0; }
.price__desc { line-height: 2.0; margin-top: 4px; }
.faq__q { padding: 22px 0; }
.faq__a p { padding-bottom: 24px; line-height: 2.05; }

/* =========================================================
   7. PC右翼ナビの黒半透明ボックスを撤去（可読性は影で担保）
   ========================================================= */
@media (min-width: 1100px) {
  .wingnav { background: transparent; padding: 0; }
  .wingnav a { text-shadow: 0 1px 14px rgba(0,0,0,.6), 0 0 2px rgba(0,0,0,.4); }
  .wing__ctas-head { text-shadow: 0 1px 12px rgba(0,0,0,.55); }
}