/* ============================================================
   SYSTEM HUB  /assets/css/pages/system.css
   prefix: sy-
   Accent: Cyan/Blue #4a9eff
   ============================================================ */

:root {
    --sy-blue:      #4a9eff;
    --sy-blue-dim:  rgba(74,158,255,0.14);
    --sy-blue-line: rgba(74,158,255,0.25);
    --sy-bg:        #0c0c0e;
    --sy-card:      #0e1016;
    --sy-card-hov:  #131520;
    --sy-border:    rgba(255,255,255,0.07);
    --sy-text:      #f0ece4;
    --sy-text-sub:  rgba(240,236,228,0.55);
    --sy-text-dim:  rgba(240,236,228,0.28);
    --sy-pad:       clamp(80px,14vw,240px);
}

/* ============================================================
   HERO
   bg: /assets/img/pages/system/hero-bg.jpg
   ============================================================ */
.sy-hero {
    position: relative;
    width: 100%;
    height: 42vh;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #040810;
}
.sy-hero__bg {
    position: absolute;
    inset: 0;
    background-image: url('/assets/img/pages/system/hero-bg.jpg');
    background-size: cover;
    background-position: 50% 40%;
    background-color: #060a1a;
    opacity: .40;
    filter: blur(1px);
    z-index: 1;
}
.sy-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg,
        rgba(74,158,255,.18)  0%,
        rgba(4,8,16,.55)     55%,
        rgba(4,8,16,.92)    100%);
    z-index: 2;
}
.sy-hero__text {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 0 20px;
}
.sy-hero__eyebrow {
    display: block;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .55em;
    color: var(--sy-blue);
    text-transform: uppercase;
    margin-bottom: 14px;
    opacity: .8;
}
.sy-hero__title {
    font-size: clamp(2.8rem,8vw,5.5rem);
    font-weight: 900;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: .12em;
    color: #fff;
    line-height: 1;
    text-transform: uppercase;
    margin: 0 0 16px;
    text-shadow: 0 0 40px rgba(74,158,255,.25);
}
.sy-hero__sub {
    font-size: .95rem;
    color: rgba(255,255,255,.6);
    letter-spacing: .1em;
    margin: 0;
}

/* ============================================================
   DIVIDER
   ============================================================ */
.sy-divider {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 40px;
    height: 52px;
    background: var(--sy-bg);
    border-top:    1px solid var(--sy-border);
    border-bottom: 1px solid var(--sy-border);
    width: 100vw;
    margin-left:  calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    box-sizing: border-box;
}
.sy-divider__line {
    flex: 1;
    height: 1px;
    background: var(--sy-blue-line);
    opacity: .4;
}
.sy-divider__label {
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .5em;
    color: var(--sy-blue);
    text-transform: uppercase;
    white-space: nowrap;
}

/* ============================================================
   PRIMARY — 大カード + 小2枚スタック (非対称レイアウト)
   ============================================================ */
.sy-primary {
    background: var(--sy-bg);
    border-bottom: 1px solid var(--sy-border);
    width: 100vw;
    margin-left:  calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 0 var(--sy-pad);
    box-sizing: border-box;
}

.sy-primary__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--sy-border);
    border: 1px solid var(--sy-border);
    border-top: none;
}

/* カード共通 */
.sy-card {
    position: relative;
    display: flex;
    text-decoration: none;
    overflow: hidden;
    background: var(--sy-card);
    transition: background .3s;
}
.sy-card:hover { background: var(--sy-card-hov); }

.sy-card__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: .12;
    z-index: 0;
    transition: opacity .5s, transform .6s;
}
.sy-card--frames  .sy-card__bg,
.sy-card__bg--frames { background-image: url('/assets/img/pages/system/frames-bg.jpg'); background-color: #060c1a; }
.sy-card__bg--break  { background-image: url('/assets/img/pages/system/break-bg.jpg');  background-color: #1a0614; }
.sy-card__bg--fsd    { background-image: url('/assets/img/pages/system/fsd-bg.jpg');    background-color: #060c10; }
.sy-card:hover .sy-card__bg { opacity: .24; transform: scale(1.04); }

.sy-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(10,12,20,.5) 0%, rgba(10,12,20,.94) 100%);
    z-index: 1;
}

.sy-card__body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    padding: 36px 32px;
    width: 100%;
}

/* 大カード */
.sy-card--large { min-height: 380px; }
.sy-card--large .sy-card__title {
    font-size: clamp(1.5rem,2.5vw,2.1rem);
}

/* 小カード */
.sy-card-stack {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--sy-border);
}
.sy-card--small { min-height: 180px; }
.sy-card--small .sy-card__title {
    font-size: clamp(1rem,1.8vw,1.3rem);
}
.sy-card--small .sy-card__icon { width: 28px; height: 28px; }
.sy-card--small .sy-card__body { padding: 24px 24px; }

/* 共通テキスト部品 */
.sy-card__icon {
    width: 36px;
    height: 36px;
    color: var(--sy-blue);
    opacity: .6;
    margin-bottom: 12px;
    transition: opacity .3s;
}
.sy-card:hover .sy-card__icon { opacity: 1; }

.sy-card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.sy-num {
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .4em;
    color: var(--sy-text-dim);
}
.sy-tag {
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .35em;
    color: var(--sy-blue);
    border: 1px solid var(--sy-blue-line);
    background: var(--sy-blue-dim);
    padding: 3px 10px;
    text-transform: uppercase;
}

.sy-card__title {
    font-weight: 900;
    color: var(--sy-text);
    margin: 0 0 10px;
    line-height: 1.2;
    position: relative;
    padding-bottom: 12px;
}
.sy-card__title::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 24px; height: 2px;
    background: var(--sy-blue);
    transition: width .4s cubic-bezier(.165,.84,.44,1);
}
.sy-card:hover .sy-card__title::after { width: 56px; }

.sy-card__desc {
    font-size: .83rem;
    color: var(--sy-text-sub);
    line-height: 1.75;
    margin: 0 0 auto;
    flex: 1;
}

.sy-card__cta {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .22em;
    color: var(--sy-blue);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--sy-blue-line);
    margin-top: 20px;
    transition: color .25s, border-color .25s;
}
.sy-card:hover .sy-card__cta { color: #fff; border-color: rgba(255,255,255,.3); }

/* ============================================================
   ALL SYSTEMS LIST
   ============================================================ */
.sy-list-section {
    background: var(--sy-bg);
    border-bottom: 1px solid var(--sy-border);
    width: 100vw;
    margin-left:  calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 52px 0 60px;
    box-sizing: border-box;
}

.sy-list__inner {
    padding: 0 var(--sy-pad);
    box-sizing: border-box;
}

.sy-list__lead {
    margin-bottom: 24px;
}
.sy-list__en {
    display: block;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .5em;
    color: var(--sy-blue);
    text-transform: uppercase;
    margin-bottom: 8px;
    opacity: .7;
}
.sy-list__title {
    font-size: clamp(1.2rem,2vw,1.6rem);
    font-weight: 900;
    color: var(--sy-text);
    margin: 0;
    line-height: 1.2;
}

.sy-list__grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 1px;
    background: var(--sy-border);
    border: 1px solid var(--sy-border);
}

.sy-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    background: var(--sy-card);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: background .25s;
}
.sy-item::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 0; height: 2px;
    background: var(--sy-blue);
    transition: width .35s;
}
.sy-item:hover { background: var(--sy-card-hov); }
.sy-item:hover::after { width: 100%; }

.sy-item__num {
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .3em;
    color: var(--sy-blue);
    opacity: .5;
    flex-shrink: 0;
    width: 18px;
    transition: opacity .25s;
}
.sy-item:hover .sy-item__num { opacity: 1; }

.sy-item__body {
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: 14px;
    min-width: 0;
}

.sy-item__name {
    font-size: .95rem;
    font-weight: 700;
    color: var(--sy-text);
    white-space: nowrap;
}

.sy-item__sub {
    font-size: .72rem;
    color: var(--sy-text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sy-item:hover .sy-item__sub { color: var(--sy-text-sub); }

.sy-item__arrow {
    font-size: .8rem;
    color: var(--sy-text-dim);
    flex-shrink: 0;
    transition: color .25s, transform .25s;
}
.sy-item:hover .sy-item__arrow { color: var(--sy-blue); transform: translateX(4px); }

/* ============================================================
   NAVIGATE
   ============================================================ */
.sy-nav-section {
    background: var(--sy-bg);
    border-bottom: 1px solid var(--sy-border);
    width: 100vw;
    margin-left:  calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 0 var(--sy-pad);
    box-sizing: border-box;
}

.sy-nav-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--sy-border);
    border: 1px solid var(--sy-border);
    border-top: none;
}

.sy-navcard {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 26px 24px;
    background: var(--sy-card);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: background .3s;
}
.sy-navcard::before {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 3px; height: 0;
    background: var(--sy-blue);
    transition: height .35s;
}
.sy-navcard:hover { background: var(--sy-card-hov); }
.sy-navcard:hover::before { height: 100%; }

.sy-navcard__body { flex: 1; min-width: 0; }
.sy-navcard__en {
    display: block;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .45em;
    color: var(--sy-blue);
    text-transform: uppercase;
    margin-bottom: 5px;
    opacity: .7;
}
.sy-navcard__title {
    font-size: .95rem;
    font-weight: 800;
    color: var(--sy-text);
    margin: 0 0 4px;
    line-height: 1.3;
}
.sy-navcard__desc {
    font-size: .75rem;
    color: var(--sy-text-sub);
    line-height: 1.6;
    margin: 0;
}
.sy-navcard__arrow {
    font-size: 1rem;
    color: var(--sy-text-dim);
    flex-shrink: 0;
    transition: color .25s, transform .25s;
}
.sy-navcard:hover .sy-navcard__arrow { color: var(--sy-blue); transform: translateX(4px); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    .sy-primary__inner { grid-template-columns: 1fr; }
    .sy-card-stack { flex-direction: row; }
    .sy-card--small { min-height: 220px; }
    .sy-list__grid  { grid-template-columns: 1fr; }
    .sy-nav-grid    { grid-template-columns: 1fr; }
    .sy-primary,
    .sy-list-section,
    .sy-nav-section { padding-left: 24px; padding-right: 24px; }
    .sy-divider { padding: 0 20px; }
}

@media (max-width: 768px) {
    .sy-hero { height: 36vh; min-height: 260px; }
    .sy-card-stack { flex-direction: column; }
    .sy-card__body { padding: 24px 18px; }
    .sy-item__body { flex-direction: column; gap: 2px; }
    .sy-item__sub  { white-space: normal; }
}