:root {
    --jp-navy: #123453;
    --jp-navy2: #1c4a6d;
    --jp-teal: #16837f;
    --jp-mint: #eaf6f4;
    --jp-orange: #d96d37;
    --jp-ink: #183044;
    --jp-muted: #607487;
    --jp-line: #d8e3e8;
    --jp-bg: #f8fafb;
}

/* ========================= HERO ========================= */
.jwsa-pref-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0e2a44 0%, #123453 55%, #16514f 100%);
    padding: 72px 0 64px;
    color: #fff;
    text-align: center;
}
.jwsa-pref-hero:after {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    right: -180px;
    top: -200px;
    background: radial-gradient(circle, rgba(84, 206, 195, .18), transparent 68%);
}
.jwsa-pref-hero .container { position: relative; z-index: 1; max-width: 760px; }
.jwsa-pref-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 99px;
    padding: 7px 16px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #eaf6f4;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 18px;
    backdrop-filter: blur(6px);
}
.jwsa-pref-hero h1 {
    font-size: clamp(28px, 3.6vw, 42px);
    line-height: 1.4;
    letter-spacing: -.02em;
    margin: 0 0 14px;
    color: #fff !important;
    text-wrap: balance;
}
.jwsa-pref-hero p {
    font-size: 15px;
    line-height: 1.9;
    color: #d9e7ee;
    max-width: 620px;
    margin: 0 auto;
}
.jwsa-pref-breadcrumb {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 22px;
    padding: 8px 16px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    font-size: 12px;
    font-weight: 800;
}
.jwsa-pref-breadcrumb a { color: #cfe3ea; text-decoration: none; }
.jwsa-pref-breadcrumb a:hover { color: #fff; }
.jwsa-pref-breadcrumb span.sep { color: rgba(255, 255, 255, .4); }
.jwsa-pref-breadcrumb span.current { color: #54cec3; }

@media (max-width: 768px) { .jwsa-pref-hero { padding: 52px 0 42px; } }

/* ========================= BODY ========================= */
.jwsa-pref-page { background: var(--jp-bg); padding: 48px 0 70px; }
.jwsa-pref-grid {
    display: grid;
    grid-template-columns: 1.35fr .9fr;
    gap: 20px;
    align-items: stretch;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}
.jwsa-pref-card {
    background: #fff;
    border: 1px solid var(--jp-line);
    border-radius: 20px;
    box-shadow: 0 14px 34px rgba(18, 52, 83, .07);
    padding: 30px;
}
.jwsa-pref-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--jp-teal);
    background: var(--jp-mint);
    border: 1px solid #cfe6e3;
    border-radius: 99px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 16px;
}
.jwsa-pref-title-row { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.jwsa-pref-title-row h2 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 900; margin: 0; color: var(--jp-navy); }
.jwsa-pref-subtitle { color: var(--jp-muted); font-weight: 700; margin: 8px 0 0; line-height: 1.8; }

.jwsa-status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 99px; font-weight: 900; font-size: 12.5px; white-space: nowrap; }
.jwsa-status-free { background: #e8f7ee; color: #2e9b57; border: 1px solid #cdebd8; }
.jwsa-status-paid { background: #fff0e8; color: #a84a1d; border: 1px solid #ffd9c2; }

.jwsa-pref-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 22px 0 18px; }
.jwsa-pref-stat { border: 1px solid var(--jp-line); border-radius: 14px; background: var(--jp-bg); padding: 16px 12px; text-align: center; }
.jwsa-pref-stat strong { display: block; color: var(--jp-navy); font-size: 22px; font-weight: 900; margin-bottom: 4px; }
.jwsa-pref-stat span { color: var(--jp-muted); font-size: 12px; font-weight: 800; }

.jwsa-pref-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.jwsa-pref-info { border: 1px solid var(--jp-line); border-radius: 14px; padding: 16px; background: #fff; min-height: 142px; }
.jwsa-pref-info i {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--jp-mint);
    color: var(--jp-teal);
    border: 1px solid #cfe6e3;
    margin-bottom: 10px;
}
.jwsa-pref-info h5 { font-size: 13.5px; font-weight: 900; margin: 0 0 6px; color: var(--jp-navy); }
.jwsa-pref-info p { color: var(--jp-muted); font-size: 12px; font-weight: 600; line-height: 1.75; margin: 0; }

.jwsa-pref-note { margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: var(--jp-mint); border: 1px solid #cfe6e3; color: #2c5553; font-size: 13px; font-weight: 700; line-height: 1.8; }
.jwsa-pref-note.tokyo-note { background: #e8f7ee; border-color: #cdebd8; color: #215c38; }
.jwsa-pref-note a { color: var(--jp-teal); font-weight: 900; }

/* ========================= ACTION ASIDE ========================= */
.jwsa-pref-action {
    background: linear-gradient(160deg, var(--jp-navy), var(--jp-navy2));
    border-radius: 20px;
    padding: 30px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    box-shadow: 0 14px 34px rgba(18, 52, 83, .18);
}
.jwsa-pref-action .jwsa-pref-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #fff;
    margin: 0 auto 16px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
}
.jwsa-pref-action img { height: 42px; width: 42px; object-fit: contain; }
.jwsa-pref-action h4 { font-size: 18px; font-weight: 900; margin: 0 0 8px; color: #fff !important; }
.jwsa-pref-action p { color: #c8d7e3; font-size: 13px; font-weight: 600; line-height: 1.8; margin-bottom: 20px; }

.jwsa-pref-btn-escape {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 8px 14px;
    border-radius: 12px;
    background: var(--jp-orange);
    color: #fff;
    font-weight: 800;
    font-size: 12.5px;
    line-height: 1.5;
    text-decoration: none;
    margin-bottom: 14px;
    box-shadow: 0 8px 18px rgba(217, 109, 55, .35);
    transition: .2s;
}
.jwsa-pref-btn-escape:hover { background: #c35f2e; color: #fff; transform: translateY(-1px); }
.jwsa-pref-btn-main {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    border-radius: 12px;
    background: #fff;
    color: var(--jp-navy);
    font-weight: 900;
    text-decoration: none;
    transition: .2s;
}
.jwsa-pref-btn-main:hover { background: #eaf6f4; color: var(--jp-navy); transform: translateY(-1px); }
.jwsa-pref-btn-sub { display: inline-flex; justify-content: center; color: #aebdd0; text-decoration: none; font-weight: 800; font-size: 12.5px; margin-top: 16px; }
.jwsa-pref-btn-sub:hover { color: #fff; }

@media (max-width: 991px) {
    .jwsa-pref-grid { grid-template-columns: 1fr; }
    .jwsa-pref-info-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .jwsa-pref-stat-grid { grid-template-columns: 1fr; }
}