/* ============================================================
   WORLD セルフ — 受講者ビュー & 管理画面 共通スタイル（自己完結）
   構成図のトーン（生成りベージュ × 古色のボルドー）に寄せる。
   ============================================================ */
:root {
    --w-bg:      #faf8f4;
    --w-card:    #ffffff;
    --w-line:    #e7e1d6;
    --w-ink:     #2c2622;
    --w-sub:     #8a8074;
    --w-accent:  #7c3a2e;   /* 古色のボルドー */
    --w-accent2: #b25a45;
    --w-teal:    #2f6f63;   /* 習慣化PWA の緑 */
    --w-locked:  #b6ada0;
    --w-radius:  14px;
    --w-shadow:  0 1px 3px rgba(44,38,34,.06), 0 8px 24px rgba(44,38,34,.05);
    /* ロゴ（life-spiral.yorisou.cards のヘッダーロゴに合わせる） */
    --w-gold:      #E6C97E;   /* ✦ マーク */
    --w-navy:      #2E3A56;   /* WORLD（深いネイビー） */
    --w-logo-teal: #8FCFC4;   /* アクセント（ティール） */
    --w-line2:     #E3DACB;   /* ゴールドライン */
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Segoe UI", sans-serif;
    background: var(--w-bg);
    color: var(--w-ink);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--w-accent); }

/* ---- ヘッダー ---- */
.world-head {
    position: sticky; top: 0; z-index: 20;
    background: rgba(250,248,244,.92);
    backdrop-filter: saturate(1.2) blur(8px);
    border-bottom: 1px solid var(--w-line);
}
.world-head__inner {
    max-width: 880px; margin: 0 auto; padding: 14px 18px;
    display: flex; align-items: center; justify-content: space-between;
}
.world-head__brand {
    font-family: 'Cormorant Garamond', 'Noto Serif JP', serif;
    font-weight: 600; letter-spacing: .06em; font-size: 1.2rem; color: var(--w-navy);
}
.world-head__brand em { color: var(--w-logo-teal); font-style: normal; }
.world-head__admin {
    font-size: .82rem; text-decoration: none; color: var(--w-sub);
    border: 1px solid var(--w-line); border-radius: 999px; padding: 5px 14px;
}

/* ---- ヘッダーロゴ（life-spiral と統一：✦ / WORLD / アクセント / ゴールドライン）---- */
.world-hero { position: relative; max-width: 880px; margin: 0 auto; padding: 32px 18px 6px; text-align: center; }
.world-hero__admin {
    position: absolute; top: 20px; right: 18px;
    font-size: .82rem; text-decoration: none; color: var(--w-sub);
    border: 1px solid var(--w-line); border-radius: 999px; padding: 5px 14px; background: var(--w-card);
}
.world-logo__mark { color: var(--w-gold); letter-spacing: .3em; font-size: 16px; line-height: 1; }
.world-logo__title {
    font-family: 'Cormorant Garamond', 'Noto Serif JP', serif;
    font-size: clamp(34px, 6vw, 54px); font-weight: 600; margin: 4px 0 2px;
    color: var(--w-navy); letter-spacing: .04em; line-height: 1.1;
}
.world-logo__accent { display: block; font-size: .34em; letter-spacing: .42em; color: var(--w-logo-teal); margin-top: 8px; font-weight: 600; }
.world-logo__line { height: 1px; background: linear-gradient(90deg, transparent, var(--w-line2), transparent); margin: 18px auto 0; max-width: 460px; }
/* ゲート画面など、やや小さめのロゴ */
.world-logo--sm .world-logo__title { font-size: clamp(28px, 7vw, 40px); }
.world-logo--sm { margin-bottom: 10px; }

/* ---- ボタン ---- */
.world-btn {
    display: inline-block; cursor: pointer; text-decoration: none;
    background: var(--w-accent); color: #fff; border: 0;
    border-radius: 999px; padding: 11px 22px; font-size: .95rem; font-weight: 600;
    transition: background .15s, transform .05s;
}
.world-btn:hover { background: var(--w-accent2); }
.world-btn:active { transform: translateY(1px); }
.world-btn--ghost { background: transparent; color: var(--w-accent); border: 1px solid var(--w-accent); }
.world-btn--ghost:hover { background: rgba(124,58,46,.06); }
.world-btn--sm { padding: 8px 16px; font-size: .85rem; }
.world-btn--danger { background: #fff; color: #a23b2c; border: 1px solid #e3c4bd; }
.world-btn--danger:hover { background: #fbeae6; }

/* ============================================================ 受講者ビュー ============================================================ */
.world-main { max-width: 880px; margin: 0 auto; padding: 22px 18px 80px; }

/* プレイヤー */
.world-player { background: var(--w-card); border: 1px solid var(--w-line); border-radius: var(--w-radius); box-shadow: var(--w-shadow); padding: 16px; margin-bottom: 26px; }
.world-player__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; }
.world-player__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- YouTube を直接クリックさせない自前プレイヤー ----
   YouTube のコントロールは controls=0 で非表示。全面シールドでクリックを横取りし、
   再生/一時停止・シーク・全画面は自前バーで操作する。全画面でも YouTube は触れない。 */
.world-yt { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; }
.world-yt iframe, .world-yt__mount { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.world-yt__shield { position: absolute; left: 0; right: 0; top: 0; bottom: 46px; z-index: 2; cursor: pointer; background: transparent; }
.world-yt__bar {
    position: absolute; left: 0; right: 0; bottom: 0; height: 46px; z-index: 4;
    display: flex; align-items: center; gap: 10px; padding: 0 12px;
    background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.12));
}
.world-yt__btn { background: transparent; border: 0; color: #fff; font-size: 1rem; line-height: 1; cursor: pointer; padding: 6px; }
.world-yt__btn:hover { color: #ffd9cf; }
.world-yt__seek { flex: 1 1 auto; height: 4px; accent-color: var(--w-accent2); cursor: pointer; }
.world-yt__time { color: #fff; font-size: .75rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.world-yt:fullscreen { aspect-ratio: auto; width: 100vw; height: 100vh; border-radius: 0; }
.world-yt:-webkit-full-screen { aspect-ratio: auto; width: 100vw; height: 100vh; }
.world-player__title { font-size: 1.25rem; margin: 16px 4px 6px; }
.world-player__desc { color: var(--w-sub); margin: 0 4px 12px; font-size: .95rem; }
.world-player--empty { text-align: center; color: var(--w-sub); padding: 48px 16px; }
.world-sub { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--w-line); }
.world-sub__title { font-size: 1rem; color: var(--w-accent); margin: 0 4px 10px; }

/* 一覧 */
.world-list__head { font-size: 1rem; margin: 8px 4px 4px; }
.world-list__start { color: var(--w-sub); font-size: .85rem; margin: 0 4px 14px; }
.world-list__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.world-item__body {
    display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit;
    background: var(--w-card); border: 1px solid var(--w-line); border-radius: 12px; padding: 14px 16px;
    transition: border-color .15s, box-shadow .15s;
}
a.world-item__body:hover { border-color: var(--w-accent2); box-shadow: var(--w-shadow); }
.world-item__no {
    flex: none; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center; font-weight: 700; font-size: .9rem;
    background: rgba(124,58,46,.1); color: var(--w-accent);
}
.world-item__main { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.world-item__title { font-weight: 600; }
.world-item__meta { font-size: .8rem; color: var(--w-sub); }
.world-item__cur { flex: none; font-size: .72rem; color: #fff; background: var(--w-accent); border-radius: 999px; padding: 3px 10px; }
.world-item.is-current .world-item__body { border-color: var(--w-accent); }
.world-item.is-watched .world-item__no { background: rgba(47,111,99,.14); color: var(--w-teal); }
.world-item.is-locked .world-item__body { background: #f5f2ec; cursor: default; }
.world-item.is-locked .world-item__no { background: #e7e1d6; color: var(--w-locked); }
.world-item.is-locked .world-item__title { color: var(--w-locked); }
.world-list__adminhint { font-size: .78rem; color: var(--w-sub); margin-top: 14px; }

/* 利用期限バナー（利用中ユーザー向け） */
.world-expiry {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
    background: #f3efe8; border: 1px solid var(--w-line); border-radius: 12px;
    padding: 10px 16px; margin-bottom: 18px; font-size: .85rem; color: var(--w-sub);
}
.world-expiry__date { font-weight: 600; color: var(--w-ink); }
.world-expiry.is-soon { background: #fbeee9; border-color: #f0cabf; color: #9a4636; }
.world-expiry.is-soon .world-expiry__date { color: #8a3526; }
.world-expiry__msg { margin-left: auto; }
.world-expiry__cta { font-size: .82rem; text-decoration: none; color: #fff; background: var(--w-accent); border-radius: 999px; padding: 5px 14px; }
.world-expiry__cta:hover { background: var(--w-accent2); }

/* 利用権限ゲート */
.world-gate { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.world-gate__box { max-width: 460px; text-align: center; background: var(--w-card); border: 1px solid var(--w-line); border-radius: var(--w-radius); box-shadow: var(--w-shadow); padding: 36px 28px; }
.world-gate__box h1 { margin-top: 0; }
.world-gate__lead { font-size: 1.02rem; }
.world-gate__note { font-size: .85rem; color: var(--w-sub); }
.world-gate .world-btn { margin-top: 14px; }

/* サブスク（月額／年間）プラン */
.world-plans { display: flex; gap: 12px; margin: 18px 0 6px; }
.world-plan {
    flex: 1 1 0; display: flex; flex-direction: column; gap: 4px; text-decoration: none;
    border: 1px solid var(--w-line); border-radius: 12px; padding: 16px 12px; color: var(--w-ink);
    background: #fdfcfa; transition: border-color .15s, box-shadow .15s, transform .05s;
}
.world-plan:hover { border-color: var(--w-accent2); box-shadow: var(--w-shadow); }
.world-plan:active { transform: translateY(1px); }
.world-plan--year { border-color: var(--w-accent); background: rgba(124,58,46,.05); }
.world-plan__name { font-weight: 700; color: var(--w-accent); }
.world-plan__sub { font-size: .78rem; color: var(--w-sub); }

/* ============================================================ 管理画面 ============================================================ */
.wa-main { max-width: 920px; margin: 0 auto; padding: 22px 18px 80px; }
.wa-card { background: var(--w-card); border: 1px solid var(--w-line); border-radius: var(--w-radius); box-shadow: var(--w-shadow); padding: 20px; margin-bottom: 22px; }
.wa-card > h2 { margin-top: 0; font-size: 1.05rem; }
.wa-help { font-size: .9rem; color: var(--w-sub); }
.wa-help code { background: #f2ede5; border-radius: 5px; padding: 1px 6px; color: var(--w-accent); }

.wa-flash { border-radius: 10px; padding: 11px 16px; margin-bottom: 18px; font-size: .9rem; }
.wa-flash--ok  { background: #eaf4f1; color: #245a50; border: 1px solid #cfe6df; }
.wa-flash--err { background: #fbeae6; color: #9a3526; border: 1px solid #f0cabf; }

.wa-row { border: 1px solid var(--w-line); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; background: #fdfcfa; }
.wa-row__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.wa-row__id { font-size: .8rem; color: var(--w-sub); font-weight: 700; }
.wa-thumb img { width: 96px; height: 54px; object-fit: cover; border-radius: 6px; border: 1px solid var(--w-line); display: block; }
.wa-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; }
.wa-field { display: flex; flex-direction: column; font-size: .78rem; color: var(--w-sub); gap: 4px; }
.wa-field input[type=text], .wa-field input[type=number], .wa-field textarea {
    font-size: .92rem; color: var(--w-ink); padding: 8px 10px;
    border: 1px solid var(--w-line); border-radius: 8px; background: #fff; font-family: inherit;
}
.wa-field input:focus, .wa-field textarea:focus { outline: 2px solid rgba(124,58,46,.25); border-color: var(--w-accent2); }
.wa-field--sm input { width: 84px; }
.wa-field--grow { flex: 1 1 220px; }
.wa-field--full { width: 100%; }
.wa-field--full textarea { width: 100%; }
.wa-check { flex-direction: row; align-items: center; gap: 6px; color: var(--w-ink); font-size: .85rem; align-self: flex-end; padding-bottom: 8px; }
.wa-row__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.wa-row__hint { font-size: .78rem; color: var(--w-sub); margin-right: auto; }
.wa-inline { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }

/* プレビュー表 */
.wa-preview__who { display: flex; gap: 12px; align-items: baseline; }
.wa-preview__who span { font-size: .82rem; color: var(--w-sub); }
.wa-preview__start { font-size: .9rem; color: var(--w-sub); }
.wa-preview { width: 100%; border-collapse: collapse; font-size: .88rem; }
.wa-preview th, .wa-preview td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--w-line); }
.wa-preview th { font-size: .76rem; color: var(--w-sub); font-weight: 600; }
.wa-preview tr.is-locked td { color: var(--w-locked); }
.wa-badge { display: inline-block; font-size: .72rem; border-radius: 999px; padding: 2px 9px; background: #efe9e0; color: var(--w-sub); }
.wa-badge--ok { background: #e3f1ec; color: #245a50; }
.wa-badge--watched { background: rgba(124,58,46,.1); color: var(--w-accent); }

@media (max-width: 560px) {
    .wa-field--grow, .wa-field { flex: 1 1 100%; }
    .wa-field--sm input { width: 100%; }
}

/* ============ 動画コメント ============ */
.world-comments { margin: 26px 0 8px; border-top: 1px solid var(--w-line); padding-top: 22px; }
.world-comments__head { font-size: 1.02rem; color: var(--w-navy); margin: 0 0 14px; letter-spacing: .04em; }
.world-comments__count { display: inline-block; min-width: 1.4em; text-align: center; font-size: .78rem; color: #fff; background: var(--w-accent); border-radius: 999px; padding: 1px 8px; margin-left: 6px; vertical-align: middle; }
.world-cform { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.world-cform__text { width: 100%; box-sizing: border-box; font: inherit; font-size: .95rem; color: var(--w-ink); background: var(--w-card); border: 1px solid var(--w-line); border-radius: 10px; padding: 11px 13px; line-height: 1.8; resize: vertical; min-height: 70px; outline: none; transition: border-color .15s, box-shadow .15s; }
.world-cform__text:focus { border-color: var(--w-accent); box-shadow: 0 0 0 2px rgba(124,58,46,.08); }
.world-cform__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.world-cform__hint { font-size: .8rem; color: var(--w-sub); }
.world-comments__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.world-comment { position: relative; background: var(--w-card); border: 1px solid var(--w-line); border-radius: 12px; padding: 14px 16px; box-shadow: var(--w-shadow); }
.world-comment__meta { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.world-comment__name { font-weight: 600; font-size: .9rem; color: var(--w-navy); }
.world-comment__time { font-size: .74rem; color: var(--w-sub); }
.world-comment__body { font-size: .94rem; color: var(--w-ink); line-height: 1.85; word-break: break-word; }
.world-comment__del { position: absolute; top: 12px; right: 12px; font-size: .74rem; color: var(--w-sub); background: transparent; border: 1px solid var(--w-line); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.world-comment__del:hover { color: var(--w-accent); border-color: var(--w-accent); }
.world-comments__empty { color: var(--w-sub); font-size: .9rem; padding: 6px 0; }
.world-comments__more { display: inline-block; margin-top: 16px; font-size: .9rem; color: var(--w-accent); text-decoration: none; border-bottom: 1px solid currentColor; }
.world-comments__more:hover { color: var(--w-accent2); }
.world-cpager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 26px 0 0; }
.world-cpager a, .world-cpager span { font-size: .86rem; color: var(--w-sub); text-decoration: none; border: 1px solid var(--w-line); border-radius: 999px; padding: 6px 14px; }
.world-cpager a:hover { color: var(--w-accent); border-color: var(--w-accent); }
.world-cpager .is-disabled { opacity: .4; }