@charset "UTF-8";
/* ================================================================
 * 商品詳細ページ タグ表示ブロック（PC/SP共用）
 * 対象: src/Template/Products/productdetail.ctp
 *       plugins/Mobile/src/Template/Products/productdetail.ctp
 * 課題: SHARE_CLO-528（塗りつぶしグレーが濃く目立つ／全件表示で縦に伸びる）
 *
 * 設計上の約束:
 *  - 全セレクタを .pdp-tags / .pdp-tag 配下に閉じる（他ページ・他ブロックへ漏らさない）
 *  - タグセレクタ（a{} div{} button{}）は書かない。要素は必ずクラスで指す
 *  - var(--*) を参照せず具体色で書く（color.css の配布順に依存させない）
 *  - Tailwindの任意値クラス（text-[12px] 等）は現行 dist に無いため使わず、寸法はここに手書きする
 *  - 色は正本パレット（.claude/rules/design-system.md）内のみ
 *      罫 #ababab（グレー2）／文字 #252525（黒メイン）／ボタン #161135（ink）
 *
 * 折りたたみ:
 *  - タグはテキストではなく flex チップの集合のため -webkit-line-clamp は使えない。
 *    4行相当の max-height でクランプし、溢れている時だけ「続きを読む」を出す
 *    （溢れの有無は pdp-tags.js が測る＝brand-intro と同じ方式）。
 *  - display:none は使わずDOMは常に全件（クロール時に全タグが読める）。
 *  - JSが動かない場合は下のフォールバック max-height で4行に留まり、ボタンが出るだけ。
 * ================================================================ */

.pdp-tags {
    text-align: left;
}

/* タグ間の余白は各タグの margin ではなく親の gap で作る（福さん指定） */
.pdp-tags .pdp-tags__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 8px;
    overflow: hidden;
    /* JS未実行時のフォールバック（PC: 1行28px＋gap8px の4行分） */
    max-height: 136px;
    /* 最終行を下へ向かって薄くし「まだ続きがある」ことを示す（brand-intro と同じマスク方式）。
     * 不透明域は4行目の「文字の下端」まで届かせ、その下（チップ下辺の罫まわり十数px）だけを薄くする。
     * 72% だと4行目の文字が丸ごとフェード帯に入り、最も濃い箇所でも白地に対し約3.1:1・
     * 下端は約1.7:1 まで落ちて「押せるのに読めない」状態だった（designer実測）。
     * クランプ高さ＝4行目のチップ下端なので、文字の下端は全高の約94%の位置にある。
     * 92%（実測: 4行目の文字は 15.3:1〜4.9:1 ＝本文4.5:1を満たし、フェードは主にチップ下辺に掛かる）。
     * PC/SPとも寸法が2倍関係で相似のため、割合指定ひとつで両方に効く。
     * mask未対応の古いブラウザでは4行で切れるだけでデグレしない。 */
    -webkit-mask-image: linear-gradient(to bottom, #000 92%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, #000 92%, rgba(0, 0, 0, 0) 100%);
}
.pdp-tags.is-open .pdp-tags__list {
    max-height: none;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
}
/* 4行に収まりきっている＝隠れている続きが無い場合（JSが判定して付与） */
.pdp-tags.is-untruncated .pdp-tags__list {
    max-height: none;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
}
.pdp-tags.is-untruncated .pdp-tags__toggle {
    display: none;
}

/* タグ1個。塗りつぶしをやめて枠線チップにする（SHARE_CLO-528） */
.pdp-tags .pdp-tag {
    display: inline-block;
    margin: 0;
    padding: 4px 15px;
    border: 1px solid #ababab;
    border-radius: 4px;
    background: transparent;
    color: #252525;
    font-size: 12px;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
    /* 保険: 1行に収まらないほど長いタグ名が登録されても横スクロールを出さない。
     * flexアイテムは overflow:hidden により最小サイズが0になるので、行幅を超える1個だけが
     * 行幅まで縮んで末尾を省略する（通常の短いタグは縮まないので見た目は変わらない）。 */
    max-width: 100%;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

/* 開閉ボタン（brand-intro の「続きを読む」と同じ見た目・右寄せ） */
.pdp-tags .pdp-tags__toggle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    width: 100%;
    /* タップ領域は44px以上（design-system）。文字だけだと実高16px弱しかなかったため
     * 上下paddingと min-height で確保する。box-sizing は dist(preflight)に依存させず自分で指定。
     * 余白ぶんフェード帯とボタンの間合いも取れる。 */
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-height: 44px;
    margin: 0;
    padding: 8px 0;
    border: 0;
    background: transparent;
    color: #161135;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: .04em;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.pdp-tags .pdp-tags__toggle-label {
    font-size: 12px;
}
.pdp-tags .pdp-tags__toggle::after {
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    margin: -3px 0 0 6px;
    border-right: 1px solid #161135;
    border-bottom: 1px solid #161135;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.pdp-tags.is-open .pdp-tags__toggle::after {
    margin: 2px 0 0 6px;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

/* ================================================================
 * SP（plugins/Mobile の商品詳細）
 * このページの viewport は width=750＝実機幅へ約0.52倍で縮む2倍スケール。
 * PCと同じ見えにするため寸法・罫を等倍で2倍にする（SP商品一覧の width=375 とは別物）。
 * メディアクエリではなくテンプレート側のモディファイアで切る
 * （750pxのSPと狭いPCウィンドウを幅で見分けられないため）。
 * ================================================================ */
.pdp-tags--sp .pdp-tags__list {
    gap: 16px;
    /* JS未実行時のフォールバック（SP: 1行56px＋gap16px の4行分） */
    max-height: 272px;
}
.pdp-tags--sp .pdp-tag {
    padding: 8px 30px;
    /* 罫は2px。viewport 750 が実機幅へ約0.52倍で縮むため1pxだと痩せる
     * （同ページの2着試着バッジが border-2 なのと同じ理由） */
    border-width: 2px;
    border-radius: 8px;
    font-size: 24px;
}
.pdp-tags--sp .pdp-tags__toggle {
    /* 等倍2倍スケール。88px は実機幅へ約0.52倍で縮んで約46px＝44px以上を満たす */
    min-height: 88px;
    margin-top: 0;
    padding: 16px 0;
    font-size: 24px;
}
.pdp-tags--sp .pdp-tags__toggle-label {
    font-size: 24px;
}
.pdp-tags--sp .pdp-tags__toggle::after {
    width: 10px;
    height: 10px;
    margin: -6px 0 0 12px;
    border-right-width: 2px;
    border-bottom-width: 2px;
}
.pdp-tags--sp.is-open .pdp-tags__toggle::after {
    margin: 4px 0 0 12px;
}