/* ============================================================
   TACTICS  /assets/css/pages/tactics.css
   prefix: tc-
   Accent: Teal/Green #3ecf8e
   ============================================================ */

/*
   style.css の body に position:relative と overflow-x:hidden が当たっており
   これが position:fixed の封じ込め原因になる。
   tactics-page クラスで両方を無効化して fixed を解放する。
*/
body.tactics-page {
    position: static !important;
    overflow-x: clip !important; /* clip は fixed を封じ込めない。hidden の代替。 */
}

:root {
    --tc-green:      #3ecf8e;
    --tc-green-dim:  rgba(62,207,142,0.12);
    --tc-green-line: rgba(62,207,142,0.22);
    --tc-bg:         #0c0c0e;
    --tc-card:       #101010;
    --tc-card-hov:   #161614;
    --tc-border:     rgba(255,255,255,0.07);
    --tc-text:       #f0ece4;
    --tc-text-sub:   rgba(240,236,228,0.55);
    --tc-text-dim:   rgba(240,236,228,0.28);
    --tc-pad:        clamp(60px,12vw,200px);

    /* フェーズカラー */
    --tc-neutral:    #3ecf8e;
    --tc-offense:    #e05a5a;
    --tc-defense:    #4a9eff;
    --tc-psychology: #b88aff;

    /* JS からセットされる動的変数 */
    --tc-header-h:      0px;
    --tc-scroll-offset: 52px;
}

/* ============================================================
   HERO
   bg: /assets/img/pages/analysis/theory/tactics-hero-bg.jpg
   ============================================================ */
.tc-hero {
    position: relative;
    width: 100%;
    height: 38vh;
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #04080a;
}
.tc-hero__bg {
    position: absolute;
    inset: 0;
    background-image: url('/assets/img/pages/analysis/theory/tactics-hero-bg.jpg');
    background-size: cover;
    background-position: 50% 40%;
    background-color: #061410;
    opacity: .38;
    filter: blur(1px);
    z-index: 1;
}
.tc-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg,
        rgba(62,207,142,.14)  0%,
        rgba(4,8,10,.55)     55%,
        rgba(4,8,10,.95)    100%);
    z-index: 2;
}
.tc-hero__text {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 0 20px;
}
.tc-hero__eyebrow {
    display: block;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .5em;
    color: var(--tc-green);
    text-transform: uppercase;
    margin-bottom: 14px;
    opacity: .75;
}
.tc-hero__title {
    font-size: clamp(2.4rem,7vw,4.8rem);
    font-weight: 900;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: .1em;
    color: #fff;
    line-height: 1;
    margin: 0 0 14px;
    text-shadow: 0 0 36px rgba(62,207,142,.18);
}
.tc-hero__sub {
    font-size: .9rem;
    color: rgba(255,255,255,.55);
    letter-spacing: .1em;
    margin: 0;
}

/* ============================================================
   PHASE NAV
   body に overflow-x:hidden + position:relative が当たっているため
   fixed は body に封じ込められてしまう。
   sticky に切り替え、スクロールコンテナを body ではなく
   html に持たせることで動作させる。
   top は JS が --tc-header-h をセットして制御。
   ============================================================ */
.tc-phasenav {
    position: sticky;
    top: var(--tc-header-h, 0px);
    left: 0;
    right: 0;
    z-index: 200;
    background: rgba(10,10,12,0.96);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--tc-border);
    box-sizing: border-box;
    /* 常時表示：ヒーロー通過前後どちらでも見える */
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition: top .15s ease;
    width: 100%;
}
/* is-fixed は JS が付け外しするが表示には影響させない */
.tc-phasenav.is-fixed {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* sticky 表示中に下のコンテンツがズレないようにするスペーサー不要
   （sticky はフロー内に残るので高さは自動確保される） */
.tc-phasenav-spacer {
    display: none;
}

.tc-phasenav__inner {
    display: flex;
    padding: 0 var(--tc-pad);
    box-sizing: border-box;
}
.tc-phasenav__btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    background: none;
    border: none;
    color: var(--tc-text-dim);
    cursor: pointer;
    transition: color .25s;
    white-space: nowrap;
}
.tc-phasenav__btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--tc-green);
    transition: width .3s cubic-bezier(.165,.84,.44,1);
}
.tc-phasenav__btn:hover  { color: var(--tc-text-sub); }
.tc-phasenav__btn.is-active { color: var(--tc-text); }
.tc-phasenav__btn.is-active::after { width: 100%; }

/* フェーズ別アクセントカラー */
.tc-phasenav__btn[data-phase="neutral"].is-active::after    { background: var(--tc-neutral); }
.tc-phasenav__btn[data-phase="offense"].is-active::after    { background: var(--tc-offense); }
.tc-phasenav__btn[data-phase="defense"].is-active::after    { background: var(--tc-defense); }
.tc-phasenav__btn[data-phase="psychology"].is-active::after { background: var(--tc-psychology); }

.tc-phasenav__en {
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: .35em;
    opacity: .5;
}
.tc-phasenav__jp {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .05em;
}

/* ============================================================
   BODY — フェーズセクション群
   ============================================================ */
.tc-body {
    background: var(--tc-bg);
    width: 100vw;
    margin-left:  calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    box-sizing: border-box;
    min-height: 60vh;
}

/* ローディングドット */
.tc-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 80px 0;
}
.tc-loading__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tc-green);
    opacity: .3;
    animation: tcDotPulse 1.2s ease-in-out infinite;
}
.tc-loading__dot:nth-child(2) { animation-delay: .2s; }
.tc-loading__dot:nth-child(3) { animation-delay: .4s; }
@keyframes tcDotPulse {
    0%, 100% { opacity: .2; transform: scale(.8); }
    50%      { opacity: 1;  transform: scale(1);  }
}

/* ============================================================
   PHASE SECTION
   ============================================================ */
.tc-phase {
    border-bottom: 1px solid var(--tc-border);
    padding: 0 var(--tc-pad);
    box-sizing: border-box;
    scroll-margin-top: var(--tc-scroll-offset, 52px);
}

/* フェーズヘッダー */
.tc-phase__header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 36px 0 28px;
    border-bottom: 1px solid var(--tc-border);
}
.tc-phase__num {
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: .45em;
    color: var(--tc-text-dim);
    flex-shrink: 0;
}
.tc-phase__badge {
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .35em;
    color: var(--tc-green);
    border: 1px solid var(--tc-green-line);
    background: var(--tc-green-dim);
    padding: 3px 10px;
    text-transform: uppercase;
    flex-shrink: 0;
}
/* フェーズ別バッジカラー */
.tc-phase[data-phase="neutral"]    .tc-phase__badge { color: var(--tc-neutral);    border-color: rgba(62,207,142,.22);  background: rgba(62,207,142,.10); }
.tc-phase[data-phase="offense"]    .tc-phase__badge { color: var(--tc-offense);    border-color: rgba(224,90,90,.22);   background: rgba(224,90,90,.08);  }
.tc-phase[data-phase="defense"]    .tc-phase__badge { color: var(--tc-defense);    border-color: rgba(74,158,255,.22);  background: rgba(74,158,255,.08); }
.tc-phase[data-phase="psychology"] .tc-phase__badge { color: var(--tc-psychology); border-color: rgba(184,138,255,.22); background: rgba(184,138,255,.08);}
.tc-phase__title {
    font-size: clamp(1.1rem,1.8vw,1.45rem);
    font-weight: 900;
    color: var(--tc-text);
    margin: 0;
    line-height: 1.2;
}

/* ============================================================
   TACTIC CARDS グリッド
   アイテム数に応じてレイアウトを変える
   ============================================================ */
.tc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--tc-border);
    border: 1px solid var(--tc-border);
    border-top: none;
}

/* 1枚: 全幅 */
.tc-grid--1 { grid-template-columns: 1fr; }

/* 2枚: 2列均等 */
.tc-grid--2 { grid-template-columns: repeat(2, 1fr); }

/* 3枚: 3列均等（= デフォルト） */
.tc-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* 4枚: 2列×2行 */
.tc-grid--4 { grid-template-columns: repeat(2, 1fr); }

/* 5枚: 上段3 + 下段2（中央寄せ） */
.tc-grid--5 {
    grid-template-columns: repeat(6, 1fr);
}
.tc-grid--5 .tc-card:nth-child(-n+3) { grid-column: span 2; }
.tc-grid--5 .tc-card:nth-child(n+4)  { grid-column: span 3; }

/* 6枚: 3列×2行 */
.tc-grid--6 { grid-template-columns: repeat(3, 1fr); }

/* ============================================================
   TACTIC CARD
   ============================================================ */
.tc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--tc-card);
    cursor: pointer;
    overflow: hidden;
    transition: background .25s;
    min-height: 200px;
}
.tc-card:hover { background: var(--tc-card-hov); }

/* 左アクセントバー */
.tc-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 0;
    transition: height .35s cubic-bezier(.165,.84,.44,1);
    z-index: 2;
}
.tc-card:hover::before { height: 100%; }

/* フェーズ別カラー */
.tc-phase[data-phase="neutral"]    .tc-card::before { background: var(--tc-neutral); }
.tc-phase[data-phase="offense"]    .tc-card::before { background: var(--tc-offense); }
.tc-phase[data-phase="defense"]    .tc-card::before { background: var(--tc-defense); }
.tc-phase[data-phase="psychology"] .tc-card::before { background: var(--tc-psychology); }

/* サムネ */
.tc-card__thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    background: #0a0c0a;
    flex-shrink: 0;
}
.tc-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    opacity: .55;
    transition: opacity .5s, transform .6s;
}
.tc-card:hover .tc-card__thumb img { opacity: .75; transform: scale(1.03); }
.tc-card__thumb-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(10,10,12,.95) 100%);
}

/* no-image フォールバック */
.tc-card__thumb--noimg {
    display: flex;
    align-items: center;
    justify-content: center;
}
.tc-card__thumb--noimg::after {
    content: '';
    display: block;
    width: 32px;
    height: 32px;
    border: 1px solid var(--tc-green-line);
    border-radius: 50%;
    opacity: .2;
}

/* ボディ */
.tc-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 20px 22px;
    flex: 1;
}
.tc-card__title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--tc-text);
    margin: 0;
    line-height: 1.3;
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.tc-card__title-sub {
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .2em;
    color: var(--tc-text-dim);
    text-transform: uppercase;
}
.tc-card__summary {
    font-size: .78rem;
    color: var(--tc-text-sub);
    line-height: 1.7;
    margin: 0;
    /* 3行クランプ — 標準プロパティ優先、非対応ブラウザ向けに webkit を後置 */
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    -webkit-line-clamp: 3;
}
.tc-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 10px;
}
.tc-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.tc-card__tag {
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--tc-text-dim);
    border: 1px solid var(--tc-border);
    padding: 2px 7px;
}
.tc-card__cta {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .2em;
    color: var(--tc-text-dim);
    transition: color .25s;
    flex-shrink: 0;
}
.tc-card:hover .tc-card__cta { color: var(--tc-green); }

/* ============================================================
   MODAL
   ============================================================ */
.tc-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
}
.tc-modal:not([hidden]) {
    pointer-events: auto;
    opacity: 1;
}
/* hidden でも flex を維持してアニメーションを保つ */
.tc-modal[hidden] { display: flex !important; }

.tc-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.75);
    backdrop-filter: blur(5px);
}
.tc-modal__panel {
    position: relative;
    z-index: 1;
    background: #111113;
    border: 1px solid var(--tc-border);
    width: min(620px, calc(100vw - 32px));
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    transform: translateY(20px) scale(.97);
    transition: transform .25s cubic-bezier(.165,.84,.44,1);
    box-shadow: 0 32px 80px rgba(0,0,0,.7);
    overflow: hidden;
}
.tc-modal:not([hidden]) .tc-modal__panel {
    transform: translateY(0) scale(1);
}
.tc-modal__close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 28px;
    height: 28px;
    background: none;
    border: 1px solid var(--tc-border);
    color: var(--tc-text-dim);
    font-size: .9rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .2s, border-color .2s;
    z-index: 2;
}
.tc-modal__close:hover { color: var(--tc-text); border-color: rgba(255,255,255,.3); }

/* モーダルヘッダー */
.tc-modal__head {
    flex-shrink: 0;
}
.tc-modal__img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 5;
    overflow: hidden;
    background: #0a0c0a;
}
.tc-modal__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    opacity: .5;
}
.tc-modal__img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 20%, #111113 100%);
}
.tc-modal__img-wrap.is-hidden { display: none; }

.tc-modal__meta {
    padding: 20px 52px 18px 24px;
    border-bottom: 1px solid var(--tc-border);
}
.tc-modal__breadcrumb {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .4em;
    color: var(--tc-green);
    text-transform: uppercase;
    margin-bottom: 8px;
    opacity: .7;
}
.tc-modal__title {
    font-size: clamp(1.3rem,3vw,1.8rem);
    font-weight: 900;
    color: var(--tc-text);
    margin: 0 0 10px;
    line-height: 1.2;
}
.tc-modal__summary {
    font-size: .82rem;
    color: var(--tc-text-sub);
    line-height: 1.7;
    margin: 0;
}

/* モーダル本文 */
.tc-modal__body {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 24px;
    flex: 1;
}
.tc-modal__body::-webkit-scrollbar { width: 4px; }
.tc-modal__body::-webkit-scrollbar-track { background: transparent; }
.tc-modal__body::-webkit-scrollbar-thumb { background: var(--tc-border); border-radius: 2px; }

.tc-modal__desc {
    font-size: .84rem;
    color: var(--tc-text-sub);
    line-height: 1.85;
    white-space: pre-line;
}
.tc-modal__desc .tc-section-head {
    display: block;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--tc-green);
    margin: 20px 0 6px;
    opacity: .85;
    white-space: normal;
}

/* 関連キーワード */
.tc-modal__related-wrap {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--tc-border);
}
.tc-modal__related-label {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .4em;
    color: var(--tc-text-dim);
    text-transform: uppercase;
    margin: 0 0 10px;
}
.tc-modal__related {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.tc-modal__related-tag {
    font-size: .72rem;
    font-weight: 600;
    color: var(--tc-text-sub);           /* 白ではなくtext-sub */
    border: 1px solid var(--tc-border);
    background: transparent;
    padding: 5px 12px;
    cursor: pointer;
    transition: color .2s, border-color .2s, background .2s;
    letter-spacing: .04em;
}
.tc-modal__related-tag:hover {
    color: var(--tc-green);
    border-color: var(--tc-green-line);
    background: var(--tc-green-dim);
}

/* ============================================================
   NAVIGATE
   ============================================================ */
.tc-nav-section {
    background: var(--tc-bg);
    border-top: 1px solid var(--tc-border);
    border-bottom: 1px solid var(--tc-border);
    width: 100vw;
    margin-left:  calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 0 var(--tc-pad);
    box-sizing: border-box;
}
.tc-nav-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--tc-border);
    border: 1px solid var(--tc-border);
    border-top: none;
}
.tc-navcard {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 26px 24px;
    background: var(--tc-card);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: background .3s;
}
.tc-navcard::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 0;
    background: var(--tc-green);
    transition: height .35s;
}
.tc-navcard:hover { background: var(--tc-card-hov); }
.tc-navcard:hover::before { height: 100%; }
.tc-navcard__body { flex: 1; min-width: 0; }
.tc-navcard__en {
    display: block;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .45em;
    color: var(--tc-green);
    text-transform: uppercase;
    margin-bottom: 5px;
    opacity: .7;
}
.tc-navcard__title {
    font-size: .95rem;
    font-weight: 800;
    color: var(--tc-text);
    margin: 0 0 4px;
    line-height: 1.3;
}
.tc-navcard__desc {
    font-size: .75rem;
    color: var(--tc-text-sub);
    line-height: 1.6;
    margin: 0;
}
.tc-navcard__arrow {
    font-size: 1rem;
    color: var(--tc-text-dim);
    flex-shrink: 0;
    transition: color .25s, transform .25s;
}
.tc-navcard:hover .tc-navcard__arrow { color: var(--tc-green); transform: translateX(4px); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .tc-phasenav__inner { padding-left: 24px; padding-right: 24px; }
    .tc-phase           { padding-left: 24px; padding-right: 24px; }
    .tc-nav-section     { padding-left: 24px; padding-right: 24px; }
    /* 3列・6列は2列に */
    .tc-grid,
    .tc-grid--3,
    .tc-grid--6 { grid-template-columns: repeat(2, 1fr); }
    /* 5枚も2列に統一 */
    .tc-grid--5 { grid-template-columns: repeat(2, 1fr); }
    .tc-grid--5 .tc-card:nth-child(-n+3),
    .tc-grid--5 .tc-card:nth-child(n+4) { grid-column: span 1; }
}
@media (max-width: 768px) {
    .tc-hero       { height: 32vh; min-height: 220px; }
    .tc-hero__title { font-size: clamp(1.8rem,8vw,3rem); }
    .tc-phasenav__btn { padding: 14px 12px; }
    .tc-phasenav__jp  { font-size: .72rem; }
    .tc-phase__header { flex-wrap: wrap; }
    /* モバイルはすべて1列 */
    .tc-grid,
    .tc-grid--2,
    .tc-grid--3,
    .tc-grid--4,
    .tc-grid--5,
    .tc-grid--6 { grid-template-columns: 1fr; }
    .tc-grid--5 .tc-card:nth-child(-n+3),
    .tc-grid--5 .tc-card:nth-child(n+4) { grid-column: span 1; }
    .tc-nav-grid { grid-template-columns: 1fr; }
    .tc-modal__panel { max-height: calc(100svh - 24px); }
}
@media (max-width: 480px) {
    .tc-phasenav__en  { display: none; }
    .tc-phasenav__btn { padding: 14px 10px; }
    .tc-nav-section   { padding-left: 16px; padding-right: 16px; }
}