/* ========================================
   まほらのカードの選び方・占いのしくみ
======================================== */
.method-page .site-info-panel {
    width: min(100%, 1040px);
}

.method-page .site-info-content {
    width: min(100%, 820px);
}

.method-title-break {
    display: none;
}

.method-content strong {
    color: #3e1f0b;
}

/* カード選出の流れ */
.method-flow {
    display: grid;
    margin: 22px 0 4px !important;
    padding: 0 !important;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    list-style: none;
}

.method-flow li {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 98px;
    margin: 0 !important;
    padding: 14px 8px 12px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #3d2416;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.55;
    text-align: center;
    background: rgba(255, 251, 240, 0.88);
    border: 1px solid rgba(190, 130, 34, 0.5);
    border-radius: 10px;
    box-shadow: 0 3px 9px rgba(72, 48, 20, 0.05);
}

.method-flow li:not(:last-child)::after {
    position: absolute;
    top: 50%;
    right: -11px;
    z-index: 2;
    color: #aa6b19;
    font-size: 1rem;
    content: "›";
    transform: translateY(-50%);
}

.method-flow-number {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    color: #2b1608;
    font-family: Georgia, serif;
    font-size: 0.98rem;
    line-height: 1;
    background: #f2c66e;
    border: 1px solid #9b6119;
    border-radius: 50%;
}

.method-suit-list {
    display: grid;
    margin: 14px 0 16px !important;
    padding: 0 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    list-style: none;
}

.method-suit-list li {
    margin: 0 !important;
    padding: 10px 8px;
    color: #4a260c;
    font-weight: 700;
    text-align: center;
    background: rgba(247, 227, 180, 0.42);
    border: 1px solid rgba(181, 127, 36, 0.35);
    border-radius: 8px;
}

/* 各占いの選出方法 */
.method-spread-grid {
    display: grid;
    margin-top: 22px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.method-spread-card {
    display: flex;
    min-width: 0;
    padding: 20px 18px;
    flex-direction: column;
    background: rgba(255, 251, 240, 0.84);
    border: 1px solid rgba(190, 130, 34, 0.46);
    border-radius: 11px;
    box-shadow: 0 4px 10px rgba(72, 48, 20, 0.05);
}

.method-spread-card--hexagram {
    grid-column: 1 / -1;
}

.method-spread-card h3 {
    margin-top: 0;
}

.method-spread-card p,
.method-spread-card li {
    font-size: 0.94rem;
}

.method-spread-card ol {
    margin-top: 4px;
    margin-bottom: 10px;
}

.method-action-link,
.method-action-link:visited {
    display: inline-flex;
    min-height: 44px;
    margin-top: auto;
    padding: 9px 0 4px;
    align-items: center;
    align-self: flex-start;
    color: #6f390a !important;
    font-weight: 700;
    line-height: 1.55;
    text-decoration: underline !important;
    text-decoration-color: rgba(155, 94, 23, 0.65) !important;
    text-underline-offset: 0.22em;
}

.method-action-link:hover {
    color: #9a520c !important;
}

.method-action-link:focus-visible {
    outline: 3px solid #4b7d9e;
    outline-offset: 3px;
}

.method-position-list {
    display: grid;
    margin: 14px 0 22px !important;
    padding: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    list-style: none;
}

.method-position-list li {
    display: flex;
    margin: 0 !important;
    align-items: center;
    gap: 9px;
}

.method-position-list li > span {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    place-items: center;
    color: #3d1f0b;
    font-family: Georgia, serif;
    font-weight: 700;
    background: rgba(242, 198, 110, 0.72);
    border: 1px solid rgba(155, 97, 25, 0.7);
    border-radius: 50%;
}

/* ヘキサグラム配置図 */
.method-hexagram-figure {
    margin: 20px 0 18px;
}

.method-hexagram-figure figcaption {
    margin-bottom: 12px;
    color: #512a10;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
}

.method-hexagram-map {
    position: relative;
    width: min(100%, 540px);
    height: 430px;
    margin: 0 auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 6 L12 72 H88 Z M50 94 L12 28 H88 Z' fill='none' stroke='%23c99736' stroke-width='1.1'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 78% 86%;
}

.method-hex-node {
    position: absolute;
    display: flex;
    width: 112px;
    min-height: 66px;
    padding: 7px 8px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #3d2416;
    text-align: center;
    background: rgba(255, 253, 247, 0.96);
    border: 1px solid rgba(159, 116, 66, 0.78);
    border-radius: 9px;
    box-shadow: 0 3px 8px rgba(72, 48, 20, 0.08);
    transform: translate(-50%, -50%);
}

.method-hex-node strong {
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    color: #3d1f0b;
    font-family: Georgia, serif;
    font-size: 0.9rem;
    background: rgba(242, 198, 110, 0.72);
    border: 1px solid rgba(155, 97, 25, 0.68);
    border-radius: 50%;
}

.method-hex-node span {
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.35;
}

.method-hex-node--1 { top: 9%; left: 50%; }
.method-hex-node--5 { top: 30%; left: 18%; }
.method-hex-node--6 { top: 30%; left: 82%; }
.method-hex-node--7 { top: 50%; left: 50%; }
.method-hex-node--3 { top: 70%; left: 18%; }
.method-hex-node--2 { top: 70%; left: 82%; }
.method-hex-node--4 { top: 91%; left: 50%; }

@media (max-width: 760px) {
    .method-flow {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .method-flow li:nth-child(3)::after {
        display: none;
    }
}

@media (max-width: 600px) {
    .method-title-separator {
        display: none;
    }

    .method-title-break {
        display: block;
    }

    .method-flow {
        width: min(100%, 320px);
        margin-right: auto !important;
        margin-left: auto !important;
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .method-flow li {
        min-height: 68px;
        padding: 10px 14px;
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
    }

    .method-flow li:not(:last-child)::after,
    .method-flow li:nth-child(3)::after {
        display: block;
        top: auto;
        right: 50%;
        bottom: -18px;
        content: "⌄";
        transform: translateX(50%);
    }

    .method-suit-list,
    .method-spread-grid,
    .method-position-list {
        grid-template-columns: 1fr;
    }

    .method-spread-card--hexagram {
        grid-column: auto;
    }

    .method-hexagram-map {
        height: 390px;
        background-size: 70% 80%;
    }

    .method-hex-node {
        width: 92px;
        min-height: 58px;
        padding: 6px;
    }

    .method-hex-node strong {
        width: 24px;
        height: 24px;
        font-size: 0.82rem;
    }

    .method-hex-node span {
        font-size: 0.7rem;
    }

    .method-hex-node--5,
    .method-hex-node--3 { left: 16%; }

    .method-hex-node--6,
    .method-hex-node--2 { left: 84%; }
}

@media (max-width: 380px) {
    .method-hexagram-map {
        height: 360px;
    }

    .method-hex-node {
        width: 84px;
    }

    .method-hex-node span {
        font-size: 0.66rem;
    }
}


/* ========================================
   2026-08-20 mobile compact refinement
======================================== */
.method-bottom-back {
    margin: 34px 0 0;
}

@media (max-width: 600px) {
    .method-title-break {
        display: block;
    }

    .method-page .site-info-header h1 {
        font-size: 1.42rem;
        line-height: 1.48;
    }

    .method-page .site-info-header {
        margin-bottom: 22px;
    }

    .method-page .site-info-back {
        margin-bottom: 22px;
    }

    .method-content .site-info-section {
        margin-top: 22px;
    }

    .method-content .site-info-section h2 {
        margin-bottom: 12px;
    }

    .method-content .site-info-section p,
    .method-content .site-info-section li {
        line-height: 1.78;
    }

    .method-content .site-info-section p {
        margin-bottom: 9px;
    }

    .method-flow {
        width: 100%;
        margin-top: 14px !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .method-flow li {
        min-height: 72px;
        padding: 9px 8px;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        font-size: 0.82rem;
        line-height: 1.4;
        text-align: center;
    }

    .method-flow li:not(:last-child)::after,
    .method-flow li:nth-child(3)::after {
        display: none;
    }

    .method-flow-number {
        width: 27px;
        height: 27px;
        font-size: 0.9rem;
    }

    .method-suit-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        margin: 10px 0 12px !important;
    }

    .method-suit-list li {
        padding: 8px 6px;
    }

    .method-spread-grid {
        margin-top: 16px;
        gap: 12px;
    }

    .method-spread-card {
        padding: 15px 14px;
        border-radius: 9px;
    }

    .method-spread-card h3 {
        margin: 0 0 7px;
    }

    .method-spread-card p,
    .method-spread-card li {
        font-size: 0.92rem;
        line-height: 1.72;
    }

    .method-spread-card ol {
        margin-top: 3px;
        margin-bottom: 7px;
    }

    .method-action-link,
    .method-action-link:visited {
        margin-top: 4px;
        padding-top: 7px;
    }

    .method-hexagram-figure {
        margin: 14px 0 10px;
    }

    .method-hexagram-map {
        height: 325px;
        background-size: 68% 78%;
    }

    .method-hex-node {
        width: 86px;
        min-height: 54px;
        padding: 5px;
    }

    .method-hex-node strong {
        width: 23px;
        height: 23px;
        font-size: 0.78rem;
    }

    .method-hex-node span {
        font-size: 0.68rem;
        line-height: 1.28;
    }

    .method-bottom-back {
        margin: 26px 0 0 !important;
    }
}

@media (max-width: 380px) {
    .method-page .site-info-header h1 {
        font-size: 1.36rem;
    }

    .method-flow li {
        font-size: 0.79rem;
    }

    .method-hexagram-map {
        height: 305px;
    }

    .method-hex-node {
        width: 80px;
    }

    .method-hex-node span {
        font-size: 0.64rem;
    }
}

/* ========================================
   2026-09-02 カード選出フロー最終補正
   - 共通 li + li の上マージンを完全に打ち消す
   - ①〜⑥の枠条件を統一
   - 丸数字を同一寸法・中央配置
   - ③を強制改行せず1行表示
======================================== */
.method-flow > li {
    box-sizing: border-box;
    margin: 0 !important;
}

.method-flow-number {
    display: inline-flex;
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    padding: 0;
    align-items: center;
    justify-content: center;
    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: 0.98rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.method-flow > li > span:not(.method-flow-number) {
    white-space: nowrap;
}

@media (max-width: 600px) {
    .method-flow-number {
        width: 27px;
        height: 27px;
        flex-basis: 27px;
        font-size: 0.9rem;
    }

    .method-flow > li > span:not(.method-flow-number) {
        white-space: nowrap;
    }
}