/* romance.css — グループ「恋愛スタイル」共通CSS。すべて #scope-romance にスコープ。 */
#scope-romance {
    --text: #333333; --heading: #2c3e50; --muted: #7f8c8d;
    --border: #e0e4ea; --bg: #ffffff; --bg-soft: #f7f8fa; --bg-cream: #fbf7e9;
    --callout-border: #d4b94a; --link: #1a3c6e; --link-hover: #2c5594;
    --accent: #3a6048; --accent-dark: #244232; --accent-soft: #eef3ef; --accent-border: #a8c0b0;
    --dual-color: #245674;
    --serif: 'Shippori Mincho', "游明朝", "Yu Mincho", "Hiragino Mincho ProN", serif;
    --sans: 'Noto Sans JP', "Hiragino Kaku Gothic ProN", -apple-system, BlinkMacSystemFont, sans-serif;

    /* サイト大域CSS漏れの打ち消し: 62.5% reset / 既定 section 余白等 */
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.85;
    letter-spacing: 0.02em;
    scroll-behavior: smooth;
}
#scope-romance * { margin: 0; padding: 0; box-sizing: border-box; }
/* サイト大域leak打消し: section { text-align:center } / h2 { text-align:center } / a { color:#fff } 等 */
#scope-romance,
#scope-romance section,
#scope-romance header,
#scope-romance article,
#scope-romance footer,
#scope-romance main,
#scope-romance div,
#scope-romance p,
#scope-romance ul,
#scope-romance ol,
#scope-romance li,
#scope-romance h1, #scope-romance h2, #scope-romance h3, #scope-romance h4, #scope-romance h5, #scope-romance h6 {
    text-align: left;
}
#scope-romance h1, #scope-romance h2, #scope-romance h3, #scope-romance h4, #scope-romance h5, #scope-romance h6 {
    font-weight: inherit;
}
#scope-romance a { color: var(--link); text-decoration: none; }
#scope-romance a:hover { color: var(--link-hover); }
#scope-romance img { max-width: 100%; display: block; }

#scope-romance .subnav { border-bottom: 1px solid var(--border); padding: 18px 0; background: var(--bg); position: sticky; top: 0; z-index: 100; }
#scope-romance .subnav-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; }
#scope-romance .subnav-title { font-family: var(--serif); font-size: 15px; color: var(--heading); font-weight: 500; margin-right: 16px; }
#scope-romance .subnav a, #scope-romance .subnav .tab { padding: 5px 12px; color: var(--text); border-radius: 4px; transition: all 0.2s; font-size: 13px; }
#scope-romance .subnav a:hover { background: var(--bg-soft); }
#scope-romance .subnav .tab.active { background: var(--accent); color: white; font-weight: 500; }
#scope-romance .subnav .sep { color: var(--muted); margin: 0 4px; font-size: 11px; }

#scope-romance .container { max-width: 1100px; margin: 0 auto; padding: 0 32px; }

#scope-romance .hero { padding: 56px 0 32px; text-align: center; }
#scope-romance .hero h1,
#scope-romance .hero h2,
#scope-romance .hero h3,
#scope-romance .hero p,
#scope-romance .hero .hero-eyebrow,
#scope-romance .hero .hero-subtitle { text-align: center; }
#scope-romance .hero-image {
    margin: 0 auto 32px; max-width: 800px; border-radius: 4px; overflow: hidden;
    aspect-ratio: 16 / 9;
    background-position: center; background-size: cover; background-repeat: no-repeat;
    box-shadow: 0 2px 24px rgba(0,0,0,0.08);
}
#scope-romance .hero-eyebrow { font-size: 13px; color: var(--accent); letter-spacing: 0.18em; margin-bottom: 12px; font-weight: 500; }
#scope-romance .hero h1 { font-family: var(--serif); font-weight: 500; font-size: 44px; color: var(--heading); margin-bottom: 8px; letter-spacing: 0.04em; line-height: 1.3; }
#scope-romance .hero h1 .academic { display: block; font-size: 18px; color: var(--muted); font-weight: 400; margin-top: 8px; letter-spacing: 0.05em; }
#scope-romance .hero-subtitle { font-family: var(--serif); font-size: 19px; color: var(--accent-dark); line-height: 1.7; margin-bottom: 24px; font-weight: 500; }
#scope-romance .hero-meta { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; padding: 20px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-top: 24px; }
#scope-romance .hero-meta-item { text-align: center; }
#scope-romance .hero-meta-label { font-size: 11px; color: var(--accent); letter-spacing: 0.15em; font-weight: 600; margin-bottom: 4px; }
#scope-romance .hero-meta-value { font-size: 14px; color: var(--text); font-weight: 500; }

#scope-romance section { padding: 48px 0 40px; }
#scope-romance section h2 { font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--heading); margin-bottom: 24px; letter-spacing: 0.04em; line-height: 1.4; }
#scope-romance section h2 .num { margin-right: 8px; color: var(--heading); }
#scope-romance section h3 { font-family: var(--serif); font-size: 17px; font-weight: 500; color: var(--heading); margin: 24px 0 12px; letter-spacing: 0.03em; line-height: 1.5; }
#scope-romance section h4 { font-family: var(--serif); font-size: 15px; font-weight: 500; color: var(--heading); margin: 18px 0 10px; line-height: 1.5; }
#scope-romance section p { margin-bottom: 18px; line-height: 1.95; }
#scope-romance section p strong { color: var(--heading); font-weight: 700; }
#scope-romance section ul, #scope-romance section ol { margin: 16px 0 20px 24px; }
#scope-romance section li { margin-bottom: 8px; line-height: 1.85; }

#scope-romance .callout { background: var(--bg-cream); border-left: 3px solid var(--callout-border); padding: 16px 24px; margin: 20px 0; line-height: 1.85; }
#scope-romance .callout strong { color: var(--heading); font-weight: 700; }
#scope-romance .note { background: var(--bg-soft); border-left: 3px solid var(--link); padding: 14px 22px; margin: 20px 0; font-size: 14px; line-height: 1.8; color: var(--muted); }
#scope-romance .note strong { color: var(--heading); }
#scope-romance .accent-callout { background: var(--accent-soft); border-left: 3px solid var(--accent); padding: 18px 26px; margin: 22px 0; line-height: 1.85; }
#scope-romance .accent-callout strong { color: var(--accent-dark); font-weight: 700; }

#scope-romance .type-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 24px 0; }
#scope-romance .type-card { background: var(--bg); border: 1px solid var(--accent-border); border-radius: 6px; overflow: hidden; }
#scope-romance .type-card-header { background: var(--accent-soft); padding: 14px 18px; border-bottom: 1px solid var(--accent-border); display: flex; justify-content: space-between; align-items: baseline; }
#scope-romance .type-card-code { font-family: var(--serif); font-size: 18px; color: var(--accent-dark); font-weight: 600; }
#scope-romance .type-card-name { font-family: var(--serif); font-size: 15px; color: var(--heading); font-weight: 500; }
#scope-romance .type-card-quadra { font-size: 11px; color: var(--accent); letter-spacing: 0.1em; font-weight: 600; }
#scope-romance .type-card-body { padding: 14px 18px 18px; font-size: 13px; line-height: 1.8; color: var(--text); }
#scope-romance .type-card-funcs { font-size: 12px; color: var(--muted); margin-bottom: 8px; font-family: 'Courier New', monospace; }

#scope-romance table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14px; }
#scope-romance table th, #scope-romance table td { padding: 12px 16px; text-align: left; border: 1px solid var(--border); vertical-align: top; line-height: 1.7; }
#scope-romance table th { background: var(--bg-soft); font-weight: 500; color: var(--heading); font-size: 13px; }
#scope-romance table td strong { color: var(--heading); }

#scope-romance .phases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 24px 0; }
#scope-romance .phase-card { background: var(--bg-soft); border-top: 2px solid var(--accent); padding: 18px 22px; }
#scope-romance .phase-label { font-family: var(--serif); font-size: 16px; color: var(--accent-dark); margin-bottom: 12px; font-weight: 500; }
#scope-romance .phase-card ul { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.8; }
#scope-romance .phase-card li { margin-bottom: 6px; }

#scope-romance .gender-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 24px 0; }
#scope-romance .gender-card { background: var(--bg); border: 1px solid var(--border); border-top: 3px solid var(--accent); padding: 22px 24px; }
#scope-romance .gender-label { font-size: 11px; color: var(--accent); letter-spacing: 0.2em; font-weight: 600; margin-bottom: 8px; }
#scope-romance .gender-card h4 { font-family: var(--serif); font-size: 17px; color: var(--heading); margin-bottom: 12px; font-weight: 500; }
#scope-romance .gender-card p { font-size: 14px; line-height: 1.9; color: var(--text); }
#scope-romance .gender-card .source { font-size: 11px; color: var(--muted); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }

#scope-romance .dual-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; margin: 24px 0; padding: 28px 24px; background: linear-gradient(135deg, var(--accent-soft) 0%, #e8eef3 100%); border-radius: 6px; border: 1px solid var(--accent-border); }
#scope-romance .dual-side { text-align: center; padding: 0 12px; }
#scope-romance .dual-side .name { font-family: var(--serif); font-size: 20px; font-weight: 600; margin-bottom: 4px; }
#scope-romance .dual-side.left .name { color: var(--accent-dark); }
#scope-romance .dual-side.right .name { color: var(--dual-color); }
#scope-romance .dual-side .academic { font-size: 11px; color: var(--muted); letter-spacing: 0.08em; margin-bottom: 10px; font-weight: 500; }
#scope-romance .dual-side p { font-size: 13px; color: var(--text); line-height: 1.8; text-align: left; }
#scope-romance .dual-arrow { font-size: 32px; color: var(--callout-border); font-weight: 300; }

#scope-romance .compat-pill { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 500; color: white; margin-right: 6px; letter-spacing: 0.05em; }
#scope-romance .compat-dual { background: #4a7a5b; }
#scope-romance .compat-warm { background: #5b8a6b; }
#scope-romance .compat-mid { background: var(--callout-border); color: #5a4220; }
#scope-romance .compat-cold { background: #b04a3c; }

#scope-romance .references { background: var(--bg-soft); padding: 36px 0; margin-top: 40px; border-top: 1px solid var(--border); }
#scope-romance .references h2 { font-family: var(--serif); font-size: 18px; color: var(--heading); margin-bottom: 16px; font-weight: 500; }
#scope-romance .references ul { list-style: none; margin: 0; columns: 2; column-gap: 32px; padding: 0; }
#scope-romance .references li { font-size: 13px; line-height: 1.8; color: var(--muted); padding: 6px 0; border-bottom: 1px solid var(--border); break-inside: avoid; list-style: none; }
#scope-romance .references li strong { color: var(--heading); font-weight: 500; }

#scope-romance .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 20px 0; }
#scope-romance .related-link { background: var(--bg); border: 1px solid var(--border); padding: 16px 20px; border-radius: 4px; transition: all 0.2s; text-decoration: none; display: block; }
#scope-romance .related-link:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
#scope-romance .related-link-label { font-size: 11px; color: var(--accent); letter-spacing: 0.12em; font-weight: 600; margin-bottom: 4px; }
#scope-romance .related-link-name { font-family: var(--serif); font-size: 16px; color: var(--heading); font-weight: 500; margin-bottom: 4px; }
#scope-romance .related-link-tag { font-size: 11px; color: var(--muted); }

@media (max-width: 900px) {
    #scope-romance .container, #scope-romance .subnav-inner { padding: 0 20px; }
    #scope-romance .hero { padding: 40px 0 24px; }
    #scope-romance .hero h1 { font-size: 32px; }
    #scope-romance .hero-subtitle { font-size: 16px; }
    #scope-romance .hero-meta { gap: 18px; }
    #scope-romance .type-cards, #scope-romance .phases, #scope-romance .gender-grid { grid-template-columns: 1fr; }
    #scope-romance .dual-pair { grid-template-columns: 1fr; gap: 16px; padding: 22px 18px; }
    #scope-romance .dual-arrow { transform: rotate(90deg); }
    #scope-romance .related-grid { grid-template-columns: 1fr; }
    #scope-romance .references ul { columns: 1; }
    #scope-romance .subnav-inner { font-size: 12px; }
}

/* dreamer: dual pairs comparison table */
#scope-romance .dual-pairs-table { margin: 16px 0; }

/* === 概論ページ専用 (romance_style index) === */
#scope-romance.is-index {
    --aggressor: #b04a3c;
    --aggressor-dark: #8c3a30;
    --victim: #6b4d8a;
    --victim-dark: #543d6e;
    --caring: #4a7a5b;
    --caring-dark: #3a6048;
    --childlike: #2f6e94;
    --childlike-dark: #245674;
}
#scope-romance .substyle-entry { padding: 32px 0 24px; }
#scope-romance .entry-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
#scope-romance .entry-card { background: var(--bg); border: 1px solid var(--border); border-top: 3px solid var(--card-accent, var(--accent)); border-radius: 4px; overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: all 0.2s; }
#scope-romance .entry-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.08); border-color: var(--card-accent, var(--accent)); }
#scope-romance .entry-card-img { width: 100%; aspect-ratio: 16 / 9; background-size: cover; background-position: center; background-color: var(--bg-soft); }
#scope-romance .entry-card-body { padding: 14px 16px 16px; flex: 1; }
#scope-romance .entry-card-eyebrow { font-size: 10px; color: var(--card-accent, var(--accent)); letter-spacing: 0.1em; font-weight: 600; margin-bottom: 6px; font-family: 'Courier New', monospace; }
#scope-romance .entry-card-name { font-family: var(--serif); font-size: 18px; color: var(--heading); font-weight: 600; margin-bottom: 2px; }
#scope-romance .entry-card-academic { font-size: 11px; color: var(--muted); margin-bottom: 10px; letter-spacing: 0.04em; }
#scope-romance .entry-card-catch { font-family: var(--serif); font-size: 13px; color: var(--text); line-height: 1.65; font-style: italic; }

#scope-romance .style-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 28px 0 16px; }
#scope-romance .style-card { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; }
#scope-romance .card-image { aspect-ratio: 4 / 3; background: var(--card-color, var(--link)); background-image: var(--card-gradient); position: relative; }
#scope-romance .card-image::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.15) 0%, transparent 40%), radial-gradient(circle at 70% 70%, rgba(0,0,0,0.2) 0%, transparent 50%); }
#scope-romance .card-image-mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 56px; color: rgba(255,255,255,0.6); font-weight: 500; letter-spacing: 0.1em; }
#scope-romance .card-banner { background: var(--card-color); color: white; text-align: center; padding: 20px 12px 22px; }
#scope-romance .card-en { font-family: var(--serif); font-size: 17px; line-height: 1.3; margin-bottom: 6px; font-weight: 500; letter-spacing: 0.03em; }
#scope-romance .card-jp { font-size: 13px; opacity: 0.92; letter-spacing: 0.05em; }
#scope-romance .card-info { padding: 18px 18px 22px; text-align: center; }
#scope-romance .card-axes { font-size: 12px; color: var(--muted); letter-spacing: 0.05em; margin-bottom: 10px; }
#scope-romance .card-tagline { font-family: var(--serif); font-size: 15px; color: var(--heading); font-weight: 500; margin-bottom: 8px; line-height: 1.5; }
#scope-romance .card-rhythm { font-size: 12px; color: var(--muted); line-height: 1.6; }

#scope-romance .style-card[data-color="aggressor"] { --card-color: var(--aggressor); }
#scope-romance .style-card[data-color="victim"]    { --card-color: var(--victim); }
#scope-romance .style-card[data-color="caring"]    { --card-color: var(--caring); }
#scope-romance .style-card[data-color="childlike"] { --card-color: var(--childlike); }

#scope-romance .full-distribution { margin: 24px 0; }
#scope-romance .full-distribution table { font-size: 13px; }
#scope-romance .full-distribution td.style-aggressor { background: rgba(176, 74, 60, 0.05); }
#scope-romance .full-distribution td.style-victim    { background: rgba(107, 77, 138, 0.05); }
#scope-romance .full-distribution td.style-caring    { background: rgba(74, 122, 91, 0.05); }
#scope-romance .full-distribution td.style-childlike { background: rgba(47, 110, 148, 0.05); }
#scope-romance .style-pill { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 11px; color: white; font-weight: 500; margin-right: 6px; letter-spacing: 0.05em; }
#scope-romance .pill-aggressor { background: var(--aggressor); }
#scope-romance .pill-victim    { background: var(--victim); }
#scope-romance .pill-caring    { background: var(--caring); }
#scope-romance .pill-childlike { background: var(--childlike); }

#scope-romance .subdiv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 24px 0; }
#scope-romance .subdiv-card { background: var(--bg); border: 1px solid var(--victim); border-radius: 6px; overflow: hidden; }
#scope-romance .subdiv-card-header { background: var(--victim); color: white; padding: 16px 20px; }
#scope-romance .subdiv-card-header h3 { font-family: var(--serif); font-size: 18px; font-weight: 500; margin-bottom: 2px; color: white; }
#scope-romance .subdiv-card-header .en { font-size: 12px; opacity: 0.85; font-family: var(--serif); font-style: italic; }
#scope-romance .subdiv-card-body { padding: 18px 20px 22px; font-size: 14px; line-height: 1.85; }
#scope-romance .subdiv-types { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px dashed var(--border); }
#scope-romance .subdiv-type { background: var(--bg-soft); color: var(--victim); padding: 3px 10px; border-radius: 3px; font-size: 12px; font-weight: 500; }

#scope-romance .perception-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 20px 0; }
#scope-romance .perception-cell { background: var(--bg); border: 1px solid var(--border); padding: 14px 18px; border-radius: 4px; font-size: 13px; line-height: 1.75; }
#scope-romance .perception-cell.dual { border: 1px solid var(--card-color, var(--link)); background: rgba(26, 60, 110, 0.03); }
#scope-romance .perception-cell .target { font-weight: 600; color: var(--heading); font-size: 14px; margin-bottom: 4px; display: block; }

@media (max-width: 900px) {
    #scope-romance .entry-grid { grid-template-columns: repeat(2, 1fr); }
    #scope-romance .style-cards { grid-template-columns: repeat(2, 1fr); }
    #scope-romance .subdiv-grid, #scope-romance .perception-grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
    #scope-romance .entry-grid { grid-template-columns: 1fr; }
    #scope-romance .style-cards { grid-template-columns: 1fr; }
}