/*
 * TASCサイト全体の暗色化（[[0826画面修正要件メモ]]「サイトの背景・文字色」）。
 *
 * 子テーマ（lightning_cld）はネットワークの他サイトでも使っているため、
 * 見た目の変更はこのプラグイン側に置く。テーマ本体・Bootstrap・WooCommerceが
 * それぞれ地の色を持っているので、構造の器と部品の両方を塗り替える必要がある。
 */

:root {
    --tasc-bg: #1c1d20;
    --tasc-bg-raised: #26282c;
    --tasc-bg-sunken: #141518;
    --tasc-border: #3a3d43;
    --tasc-text: #e8e9ea;
    --tasc-text-muted: #a8abb1;
    --tasc-link: #7fb8f0;
    --tasc-link-hover: #a8d0f7;
    --tasc-accent: #d8322c;
    /*
     * 注意を引く文字色。--tasc-accentは枠線用で、暗い地の上に文字として置くと
     * コントラストが足りない（#d8322c on #1c1d20 で3.4:1）。明度を上げた別の値を持つ。
     */
    --tasc-attention: #ff6f66;

    /*
     * テーマが根に持っている本文色。既定は#464646で、記事タイトルや抜粋など
     * 20か所ほどがこの変数を参照している。個別に追うより、ここを差し替える方が
     * 取りこぼしが出ない。
     */
    --text-color: #e8e9ea;
}

body,
body.woocommerce-page {
    background-color: var(--tasc-bg);
    color: var(--tasc-text);
}

/* テーマの器。地の色が白のまま残ると、暗い本文の周りだけ白く光ってしまう。 */
.siteContent,
.siteContent .container,
.siteHeader,
.siteFooter,
.breadSection,
.page-header,
.mainSection,
.subSection,
.siteFooter .container {
    background-color: transparent;
    color: var(--tasc-text);
}

.siteHeader {
    background-color: var(--tasc-bg-sunken);
    border-bottom: 1px solid var(--tasc-border);
}

.breadSection {
    background-color: var(--tasc-bg-sunken);
}

.siteFooter {
    background-color: var(--tasc-bg-sunken);
    border-top: 1px solid var(--tasc-border);
}

h1, h2, h3, h4, h5, h6,
.mainSection h1, .mainSection h2, .mainSection h3,
.entry-title, .page-header-title {
    color: var(--tasc-text);
}

a {
    color: var(--tasc-link);
}

a:hover,
a:focus {
    color: var(--tasc-link-hover);
}

/* ヘッダー・フッターのメニューは、リンク色ではなく本文色で並べる。 */
.siteHeader a,
.siteFooter a,
.breadSection a {
    color: var(--tasc-text);
}

.siteHeader a:hover,
.siteFooter a:hover,
.breadSection a:hover {
    color: var(--tasc-link-hover);
}

/* --- 表・枠・入力欄 --- */

table,
.woocommerce table.shop_table,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th,
.woocommerce-cart table.cart td,
.woocommerce table.my_account_orders td,
.woocommerce table.my_account_orders th {
    background-color: transparent;
    color: var(--tasc-text);
    border-color: var(--tasc-border);
}

.woocommerce table.shop_table thead th,
table thead th {
    background-color: var(--tasc-bg-raised);
    color: var(--tasc-text);
}

.woocommerce table.shop_table tbody tr:nth-child(even) td {
    background-color: rgba(255, 255, 255, 0.025);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="date"],
select,
textarea,
.form-control,
.select2-container .select2-selection--single {
    background-color: var(--tasc-bg-raised);
    color: var(--tasc-text);
    border-color: var(--tasc-border);
}

input::placeholder,
textarea::placeholder {
    color: var(--tasc-text-muted);
}

/*
 * select2（都道府県・国）の選択中の文字（2026-09-15）。
 *
 * **select2は選んだ文字を内側の`__rendered`に入れ、そこに`color:#444`を直接当てる**
 * （woocommerce/assets/css/select2.css）。外側の`--single`を塗っても効かない。
 * 暗い地（#26282c）の上の#444はコントラスト1.2:1で、ほぼ読めない。
 *
 * **`body`を足して詰め物より強くする。** theme.cssとselect2.cssはどちらも
 * `wp_enqueue_scripts`の優先度10で、どちらが後に出るかは登録順しだい。
 * 同じ詳細度だと読み込み順で勝ち負けが変わるので、順序に依存させない。
 */
body .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--tasc-text);
}

body .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--tasc-text-muted);
}

/* Bootstrapの白地の部品。テーマがカード状の枠に使っている。 */
.card,
.list-group-item,
.panel,
.well,
.dropdown-menu {
    background-color: var(--tasc-bg-raised);
    color: var(--tasc-text);
    border-color: var(--tasc-border);
}

hr {
    border-color: var(--tasc-border);
}

/* --- WooCommerceの通知・メッセージ --- */

.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-notice {
    background-color: var(--tasc-bg-raised);
    color: var(--tasc-text);
    border-top-color: var(--tasc-link);
}

.woocommerce-error {
    border-top-color: var(--tasc-accent);
}

.woocommerce-info::before,
.woocommerce-message::before {
    color: var(--tasc-link);
}

/* --- マイページ --- */

/*
 * セレクタを「ul li a」の形にしているのは、テーマ側の
 * 「.woocommerce-MyAccount-navigation ul li a{color:#333}」と詳細度を並べるため。
 * 「li a」だけでは詳細度が1つ足りず、文字が濃いグレーのままになる。
 * 項目を区切る線（#e5e5e5）も同じ理由で ul li に当てる。
 */
.woocommerce-MyAccount-navigation ul {
    background-color: var(--tasc-bg-raised);
    border: 1px solid var(--tasc-border);
    border-top: 1px solid var(--tasc-border);
}

.woocommerce-MyAccount-navigation ul li {
    border-bottom: 1px solid var(--tasc-border);
}

.woocommerce-MyAccount-navigation ul li:last-child {
    border-bottom: 0;
}

.woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 0.7em 1em;
    color: #ffffff;
    text-decoration: none;
}

.woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-MyAccount-navigation ul li a:focus {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.08);
}

/* 選択中の項目が分かるようにする（メモ「左メニューで選択中の項目が視認できるように」）。 */
.woocommerce-MyAccount-navigation ul li.is-active a {
    background-color: var(--tasc-link);
    color: var(--tasc-bg-sunken);
    font-weight: 700;
}

/* --- 価格・ポイント --- */

.woocommerce .price,
.woocommerce span.amount {
    color: var(--tasc-text);
}

/*
 * マイページと注文完了画面の見出しに、記事の見出し装飾を掛けない（2026-09-16）。
 *
 * テーマのカスタマイザーが`body .entry-body h2`に黄色文字＋グレー地を当てている。
 * **記事本文ではそれが意図した装飾**（FAQも静的ページもこの見た目）だが、
 * 同じ`.entry-body`の中にWooCommerceのマイページが描かれるため、
 * 「注文詳細」「請求先住所」「サブスクリプションの内容」「関連する注文」まで
 * 記事の見出しになってしまう。
 *
 * **記事とWooCommerceの構造見出しは別物。** 後者は画面の部品名であって、
 * 読み物の章題ではない。
 *
 * **カスタマイザー側は`!important`付き**なので、詳細度を上げるだけでは勝てない。
 * こちらも`!important`で上書きする。相手が消えたら、この指定も外せる。
 */
body .entry-body .woocommerce-MyAccount-content h2,
body .entry-body .woocommerce-MyAccount-content h3,
body .entry-body .woocommerce-order h2,
body .entry-body .woocommerce-order h3,
body .entry-body .woocommerce-customer-details h2,
body .entry-body .woocommerce-order-details__title,
body .entry-body .woocommerce-column__title {
    color: var(--tasc-text) !important;
    background: none !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--tasc-border) !important;
    margin: 1.8em 0 0.8em !important;
    font-size: 1.15em;
    line-height: 1.5;
}

/* ===== マイページ：購入済みリザルト・注文 ===== */

/* アカウント詳細：AstroVillageのアカウントが持つ情報（表示のみ） */
.tasc-account-summary {
    width: 100%;
    margin: 0 0 1.2em;
    border-collapse: collapse;
}

.tasc-account-summary th,
.tasc-account-summary td {
    padding: 0.6em 0.2em;
    border-bottom: 1px solid rgba(128, 128, 128, 0.25);
    text-align: left;
    vertical-align: top;
}

.tasc-account-summary th {
    width: 10em;
    font-weight: 700;
    white-space: nowrap;
}

.tasc-note {
    display: block;
    margin-top: 0.2em;
    font-size: 0.85em;
    opacity: 0.8;
}

/*
 * ニックネーム設定のお願い（2026-09-15）。
 * **地の文と同じ見た目にしない。** 案内ではなく、してほしいことの提示。
 */
.tasc-nickname-prompt {
    margin: 0 0 1.6em;
    padding: 0.8em 1em;
    border-left: 3px solid var(--tasc-accent);
    background: rgba(128, 128, 128, 0.08);
    font-size: 0.95em;
}

.tasc-nickname-prompt a {
    margin-left: 0.4em;
    white-space: nowrap;
}

.tasc-account-av-link {
    margin: 0 0 2.4em;
    font-size: 0.95em;
}

.tasc-account-links {
    list-style: none;
    margin: 1.5em 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.4em;
}

.tasc-orders-filter {
    margin-bottom: 1em;
}

.tasc-orders-filter label {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    cursor: pointer;
}

.tasc-purchased-results-table th.tasc-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

/* 並び順が今どうなっているかを見出しに出す。 */
.tasc-purchased-results-table th.tasc-sortable::after {
    content: " ⇅";
    opacity: 0.45;
}

.tasc-purchased-results-table th.tasc-sortable[aria-sort="ascending"]::after {
    content: " ↑";
    opacity: 1;
}

.tasc-purchased-results-table th.tasc-sortable[aria-sort="descending"]::after {
    content: " ↓";
    opacity: 1;
}

.tasc-result-identity {
    white-space: nowrap;
}

.tasc-result-sku {
    display: block;
    font-size: 0.9em;
    margin-bottom: 0.3em;
}

.tasc-result-thumb {
    display: block;
    width: 120px;
    max-width: 100%;
    height: auto;
}

/* 定価のポイント。実際の消費ポイントと並べて差が見えるようにする補足なので、控えめに。 */
.tasc-result-list-points {
    display: inline-block;
    margin-left: 0.4em;
    color: var(--tasc-text-muted);
    font-size: 0.88em;
    white-space: nowrap;
}

/* ===== 暗色化の取りこぼし ===== */

/*
 * フッターメニュー。テーマの「.nav li a{color:#464646}」が
 * こちらの .siteFooter a より詳細度で勝っていた。
 */
.siteFooter .footerMenu li a,
.siteFooter .nav li a {
    color: #ffffff;
}

.siteFooter .footerMenu li a:hover,
.siteFooter .nav li a:hover {
    color: var(--tasc-link-hover);
}

.footerMenu li a,
.footerMenu li:last-child a {
    border-color: var(--tasc-border);
}

.footerMenu {
    border-top-color: var(--tasc-border);
    border-bottom-color: var(--tasc-border);
}

/*
 * ハンバーガーメニューの引き出し。テーマは白地（.vk-mobile-nav{background-color:#fff}）で、
 * 文字だけ暗色化していたため白地に白文字になっていた。
 */
.vk-mobile-nav {
    background-color: var(--tasc-bg-raised);
    border-bottom-color: var(--tasc-border);
}

/*
 * リンクは「.vk-mobile-nav nav ul li a{color:#333;border-bottom:1px solid #ccc}」で
 * 塗られている。同じ形のセレクタで並べないと届かない。
 */
.vk-mobile-nav,
.vk-mobile-nav a,
.vk-mobile-nav .widget_nav_menu ul li a,
.vk-mobile-nav nav ul li a {
    color: #ffffff;
}

.vk-mobile-nav .widget_nav_menu ul li a,
.vk-mobile-nav nav ul li a {
    border-bottom-color: var(--tasc-border);
}

.vk-mobile-nav a:hover {
    color: var(--tasc-link-hover);
}

/*
 * スクロールで上に貼り付くメニュー。
 * lightning.min.js が本文に header_scrolled を付け、
 * 「.header_scrolled .gMenu_outer{position:fixed;background-color:#fff}」で白帯になる。
 */
.header_scrolled .gMenu_outer {
    background-color: var(--tasc-bg-sunken);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.header_scrolled .gMenu_outer a,
.header_scrolled .gMenu > li > a {
    color: #ffffff;
}

.header_scrolled .gMenu > li,
.header_scrolled .gMenu > li:last-child {
    border-color: var(--tasc-border);
}

/* AstroVillageへの登録案内（マイページのログイン画面） */

/* TASCの利用開始（AstroVillage会員だがTASC未登録の方への案内） */
.tasc-join-panel {
    max-width: 40em;
    padding: 1.6em;
    border: 1px solid var(--tasc-border);
    border-radius: 0.3em;
    background-color: var(--tasc-bg-raised);
}

.tasc-join-panel h2 {
    margin-top: 0;
}

.tasc-join-terms label {
    display: flex;
    align-items: center;
    gap: 0.4em;
}

.tasc-join-note {
    color: var(--tasc-text-muted);
    font-size: 0.9em;
}

/* アカウント詳細の先頭に出す会員番号 */
.tasc-account-member-no {
    margin-bottom: 0.3em;
    font-size: 1.15em;
}

.tasc-account-member-no-label {
    margin-right: 0.6em;
    color: var(--tasc-text-muted);
    font-size: 0.8em;
}

.tasc-account-member-no strong {
    letter-spacing: 0.08em;
}

.tasc-account-member-no-note {
    max-width: 40em;
    margin-bottom: 2em;
    color: var(--tasc-text-muted);
    font-size: 0.9em;
    line-height: 1.7;
}

/*
 * 動作確認期間の帯（カート・チェックアウト）。
 *
 * **警告色は使わない。** 異常ではなく、予定どおりの状態を伝えるもの。
 * ただし読み飛ばされると「押したのに進まない」になるので、地の色は変える。
 */
.tasc-prelaunch-notice {
    max-width: 46em;
    margin: 0 0 1.5em;
    padding: 1em 1.2em;
    border-left: 4px solid var(--tasc-link);
    border-radius: 0.2em;
    background-color: var(--tasc-bg-raised);
    color: var(--tasc-text);
    line-height: 1.7;
}

.tasc-prelaunch-notice p {
    margin: 0 0 0.5em;
}

.tasc-prelaunch-notice p:last-child {
    margin-bottom: 0;
}

.tasc-prelaunch-title {
    font-weight: 700;
    font-size: 1.05em;
}

.tasc-prelaunch-staff {
    color: var(--tasc-text-muted);
    font-size: 0.9em;
}

/* TASCの利用解除 */
.tasc-leave-panel {
    max-width: 44em;
}

.tasc-leave-consequences {
    margin: 1em 0;
}

.tasc-leave-link {
    margin-top: 1.5em;
}

.tasc-leave-panel .tasc-danger,
.woocommerce .tasc-leave-panel .button.tasc-danger {
    background-color: #b3261e;
    color: #ffffff;
}

.tasc-leave-form input[type="text"] {
    max-width: 18em;
}

/*
 * 「確認のため◯◯と入力してください」で示す語。
 *
 * **`<code>`は使わない。** テーマ（VK Blocks）が
 * `code, kbd { color: var(--vk-color-text-body) !important }`を当てており、
 * その値は#333。暗い地の上ではほぼ読めず、こちらの指定は`!important`に負ける
 * （[[0905課題メモ]]、2026-09-07）。打ち込む語であってコードではないので、
 * 専用のclassにして争わない。
 */
.tasc-confirm-phrase {
    background-color: var(--tasc-bg-sunken);
    border: 1px solid var(--tasc-border);
    border-radius: 3px;
    color: #f0c419;
    display: inline-block;
    font-weight: 700;
    padding: .15em .5em;
    white-space: nowrap;
}

/*
 * それでもテーマの`code`は他の画面（固定ページ・記事）に出うるので、読める色にする。
 * 相手が`!important`なので、こちらも`!important`でないと届かない。
 */
.woocommerce code,
.woocommerce kbd,
.entry-body code,
.entry-body kbd {
    background-color: var(--tasc-bg-sunken) !important;
    border-color: var(--tasc-border) !important;
    color: var(--tasc-text) !important;
}


/*
 * 変数を使わず#464646を直接書いている箇所。テーマ内で12か所ある。
 * 記事一覧・記事タイトル・投稿者リンクなど、暗い地の上に出るものだけを拾う。
 */
h1.entry-title > a,
.entry-meta_items.published a,
.entry-meta-dataList dd a,
.media .media-body .media-heading a,
.media a.media-body_excerpt,
.media .media-body a.media-body_excerpt,
.postListText_title a,
.page-link dl .post-page-numbers {
    color: var(--tasc-text);
}

h1.entry-title > a:hover,
.media .media-body .media-heading a:hover,
.postListText_title a:hover {
    color: var(--tasc-link-hover);
}

/*
 * カート・注文詳細の商品名。
 * WooCommerceが「.woocommerce table.shop_table .product-name a{color:#333}」で
 * 直接指定しているため、表全体の文字色だけでは届かない。
 *
 * **ボタンは別扱い。** サブスクの「プランを変更する」は商品名の欄の中に置かれる
 * （`woocommerce_order_item_meta_end`で描かれる）ため、この欄の指定に巻き込まれる。
 *
 * 除外するだけでは足りない。テーマの`.product-name a{color:#333}`は詳細度が
 * (0,3,1)で、ボタンの色を決めている`.woocommerce a.button{color:#fff}`の
 * (0,2,1)に勝つ。**こちらの指定を外してもテーマの#333が残る**ので、
 * 同じ詳細度で白を指定し直す（[[0903問題メモ]]）。
 */
.woocommerce table.shop_table .product-name a:not(.button),
.woocommerce table.shop_table td.product-name a:not(.button) {
    color: var(--tasc-link);
}

.woocommerce table.shop_table .product-name a:not(.button):hover {
    color: var(--tasc-link-hover);
}

.woocommerce table.shop_table .product-name a.button,
.woocommerce table.shop_table td.product-name a.button {
    color: #fff;
}

/*
 * サイドバーのウィジェット（記事カテゴリー・アーカイブ・固定ページなど）。
 * テーマは --text-color を使わず、リンク色の既定に任せている箇所がある。
 */
.widget_categories > ul li a,
.widget_categories > div > ul li a,
.widget_archive > ul li a,
.widget_archive > div > ul li a,
.widget_pages > ul li a,
.widget_pages > div > ul li a,
.widget_nav_menu > ul li a,
.widget_nav_menu > div > ul li a,
.widget_postlist > ul li a,
.widget_postlist > div > ul li a,
.widget_link_list > ul li a,
.widget_link_list > div > ul li a,
.localNavi > ul li a,
.localNavi > div > ul li a {
    color: var(--tasc-text);
}

.widget_categories > ul li a:hover,
.widget_archive > ul li a:hover,
.widget_pages > ul li a:hover,
.widget_nav_menu > ul li a:hover,
.widget_postlist > ul li a:hover,
.localNavi > ul li a:hover {
    color: var(--tasc-link-hover);
}

.tasc-buy-points {
    margin: 1em 0 1.6em;
}

/* 差額購入の内訳 */
.tasc-points-note {
    display: block;
    margin-top: 0.2em;
    font-size: 0.82em;
    color: var(--tasc-text-muted);
}

/*
 * 0ptのリザルト。無料であることが伝わるよう、他の行の数字とは別の色にする。
 * テーマがtd要素に色を指定しているため、表の中まで書いて優先度を上げる。
 */
.tasc-points-free,
.tasc-variation-table td .tasc-points-free {
    color: var(--tasc-attention);
    font-weight: 700;
}

/* 選べないバリエーション（購入済み・カート内・上位に含まれる） */
.tasc-variation-table tr.tasc-variation-purchased,
.tasc-variation-table tr.tasc-variation-in_cart,
.tasc-variation-table tr.tasc-variation-covered {
    opacity: 0.62;
}

.tasc-variation-state {
    display: inline-block;
    white-space: nowrap;
    font-size: 0.9em;
    color: var(--tasc-text-muted);
}

.tasc-variation-table tr.tasc-variation-purchased .tasc-variation-state {
    color: #7fd18a;
}

.tasc-variation-state-mark {
    color: var(--tasc-text-muted);
}

/* 契約中のプラン（[[0903問題メモ]]） */
.tasc-current-plan {
    color: #f0c419;
    font-weight: 600;
    white-space: nowrap;
}

.woocommerce-grouped-product-list-item .tasc-current-plan-mark {
    color: #f0c419;
    font-size: 1.2em;
}

.woocommerce ul.products li.product .tasc-current-plan.button.disabled,
.tasc-current-plan.button.disabled {
    background: transparent;
    border: 1px solid currentColor;
    cursor: default;
    opacity: 1;
    pointer-events: none;
}

/*
 * VK Filter Search（サイドバーの記事検索、2026-09-09）。
 *
 * プラグインが入力欄の地を白で決め打ちしている
 * （`.vkfs :is(input[type=text],input[type=number],select){background-color:#fff;color:#495057}`）。
 * 暗い画面の中で1か所だけ白い箱になるので、こちらで塗り直す。
 * 同じ形の指定で優先度を合わせている。
 */
.vkfs :is(input[type="text"], input[type="number"], select) {
    background-color: var(--tasc-bg-raised);
    color: var(--tasc-text);
    border-color: var(--tasc-border);
}

.vkfs input::placeholder {
    color: var(--tasc-text-muted);
    opacity: 1;
}

.vkfs__label-name-inner {
    color: var(--tasc-text);
}

/* 選択欄の三角は白地向けの濃い灰色が埋め込まれている。明るい色に差し替える。 */
.vkfs select {
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23e8e9ea%22%2F%3E%3C%2Fsvg%3E');
}

/*
 * 送信ボタン。プラグインは字間を0.5em空けており、最後の1文字の後ろにも
 * 空きが残るので、文字が左に寄って見える。字間は詰める。
 * 幅はフォームに`vkfs__layout--min`を付けて外している（プラグイン側の逃げ道）。
 */
.vkfs .btn[type="submit"] {
    letter-spacing: normal;
}

/*
 * サイドバーの記事検索では「キーワード」の見出しを出さない。
 * 直上のウィジェット見出し「記事検索」と、入力欄の「キーワードを入力」で
 * 足りており、同じことを3回言っている状態だった。
 *
 * **消すのではなく見えなくする。** 読み上げには残す（WordPress標準の
 * screen-reader-textと同じ手法）。項目が増えるフォームでは見出しが要るので、
 * ウィジェット内のキーワード欄だけに絞る。
 */
.widget .vkfs .vkfs__keyword .vkfs__label-name {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/*
 * 作品公開用クレジット（[[0911TASCクレジット表記]]）。
 *
 * **shop.cssではなくここに置く。** クレジット生成は固定ページ`/createcredit`にあり、
 * shop.cssはショップ系の画面でしか読み込まれない（実際に当たらなかった、2026-09-11）。
 *
 * 文字と地の色を明示する。読めない状態が一度起きているので、
 * 親のテーマがどう塗っても読める形にしておく。
 */
.tasc-credit-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    align-items: center;
    margin-bottom: 1.5em;
}

.tasc-credit-form label {
    flex: none;
}

.tasc-credit-form input[type="text"] {
    flex: 1 1 16em;
    min-width: 0;
}

.tasc-credit-form .button {
    flex: none;
    white-space: nowrap;
}

.tasc-credit-label {
    margin-bottom: 0.4em;
    font-weight: 700;
}

.tasc-credit-output textarea,
.tasc-credit textarea#tasc-credit-text {
    width: 100%;
    font-family: inherit;
    resize: vertical;
    background-color: var(--tasc-bg-raised);
    color: var(--tasc-text);
    border: 1px solid var(--tasc-border);
    -webkit-text-fill-color: var(--tasc-text);
    opacity: 1;
}

.tasc-credit-output .button {
    margin-top: 0.5em;
}

.tasc-credit-note,
.tasc-credit-error {
    font-size: 0.9em;
    color: var(--tasc-text-muted);
}

/*
 * 固有クレジット（撮影環境の提供者が表記を義務づけているもの）。
 *
 * **これは仕様ではなく義務**なので、機材情報と同じ地味さにはしない。
 * ただし警告色までは使わない。買えない理由ではなく、守っていただく条件のため。
 */
.tasc-credit-required-notice {
    margin: 0 0 0.8em;
    padding: 0.6em 0.9em;
    border-left: 3px solid var(--tasc-link);
    border-radius: 0.2em;
    background-color: var(--tasc-bg-raised);
    color: var(--tasc-text);
    font-size: 0.9em;
    line-height: 1.6;
}

.tasc-credit-required-lead {
    margin: 0 0 0.5em;
}

/*
 * クレジットの全文。**折り返しを許す。** URLを含む長い1行で、
 * 横スクロールが出ると写す側が最後まで読めない。
 */
.tasc-credit-required-text {
    margin: 0;
    padding: 0.4em 0.6em;
    border-radius: 0.2em;
    background-color: var(--tasc-bg-sunken);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.95em;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.tasc-credit-required-notice .tasc-credit-inline {
    margin-top: 0.5em;
}

.tasc-credit.tasc-credit-required,
.tasc-credit-note.tasc-credit-required {
    color: var(--tasc-text);
}

/* 購入済みリザルトの行に置くクレジットのボタン。控えめに、行を太らせない。 */
.tasc-credit-inline {
    display: block;
    margin-top: 0.3em;
    padding: 0;
    background: none;
    border: none;
    font-size: 0.85em;
    color: var(--tasc-link);
    cursor: pointer;
    text-decoration: underline;
}

.tasc-credit-inline:hover {
    color: var(--tasc-link-hover);
}

/*
 * 注文の最終確認画面の確認事項（利用規約第9条第4項）。
 * **読み飛ばされない程度に目立たせ、脅かさない。** 枠で囲うだけにする。
 */
.tasc-checkout-notice {
    margin: 1em 0;
    padding: 0.8em 1em;
    border: 1px solid var(--tasc-border);
    border-radius: 0.3em;
    background: var(--tasc-bg-raised);
    font-size: 0.9em;
}

.tasc-checkout-notice-title {
    margin: 0 0 0.4em;
    font-weight: 700;
}

.tasc-checkout-notice ul {
    margin: 0;
    padding-left: 1.2em;
}

.tasc-checkout-notice li + li {
    margin-top: 0.35em;
}