/* 상품 목록(허브)과 상품 상세 페이지 공통.
   한 행에 카드 하나. 폰트는 본문 21px, 제목 30px 아래로 내리지 않는다. */

/* ── 상품 목록(허브) ─────────────────────────────────
   fun-coding.org 구조를 참고했다: 분류 필터 대신 분류마다 제목 붙은 진열대,
   밝은 밴드와 어두운 밴드를 번갈아 놓는다. 단, 폰트와 한 행 한 카드는
   LEARNING.md 기준을 따른다(카드를 나란히 놓으려고 폰트를 줄이지 않는다). */

.ph-body { background: #FFFFFF; }

.ph-container {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 20px;
}

.ph-hero {
    padding: 64px 0 56px;
    background: #011C40;
    color: #F2EED8;
}

.ph-hero h1 {
    margin: 0 0 18px;
    font-size: clamp(40px, 10vw, 58px);
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    word-break: keep-all;
}

.ph-hero-lead {
    margin: 0 0 24px;
    font-size: 23px;
    line-height: 1.6;
    color: #F2EED8;
    word-break: keep-all;
}

.ph-hero-timer {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 13px 18px;
    border-radius: 14px;
    background: #F24822;
    font-size: 20px;
    font-weight: 800;
    color: #FFFFFF;
}

.ph-hero-timer b {
    font-size: 23px;
    color: #FFFFFF;
    font-variant-numeric: tabular-nums;
}

/* 밴드를 번갈아 깔아 진열대 사이의 경계를 만든다. */
.ph-band { padding: 60px 0; background: #FFFFFF; }
.ph-band.is-alt { background: #F2EED8; }
.ph-band.is-dark { background: #011C40; }

.ph-shelf-head { margin-bottom: 26px; }

.ph-shelf-head h2 {
    margin: 0 0 10px;
    font-size: clamp(31px, 7vw, 40px);
    font-weight: 900;
    line-height: 1.28;
    letter-spacing: -0.02em;
    color: #011C40;
    word-break: keep-all;
}

.ph-shelf-head p {
    margin: 0;
    font-size: 22px;
    line-height: 1.6;
    color: #1243A6;
    word-break: keep-all;
}

.is-dark .ph-shelf-head h2 { color: #FFFFFF; }
.is-dark .ph-shelf-head p { color: #F2EED8; }

.ph-why-line {
    margin: 0 0 14px;
    font-size: 23px;
    line-height: 1.64;
    color: #F2EED8;
    word-break: keep-all;
}

/* 한 행에 하나. 카드를 나란히 두려고 폰트를 줄이지 않는다. */
.ph-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
}

.ph-card {
    overflow: hidden;
    border: 2px solid #011C40;
    border-radius: 20px;
    background: #FFFFFF;
    box-shadow: 0 6px 24px rgb(1 28 64 / 12%);
}

/* 묶음은 다른 물건처럼 보여야 한다. 두꺼운 테두리와 크림 바탕. */
.ph-card.is-bundle {
    border-width: 4px;
    background: #F2EED8;
}

/* 원본은 1024x1536 세로 그림이다. 16:9로 자르면 인물이 잘려 빈 배경만 남는다.
   띠처럼 낮게 자르고 인물이 있는 위쪽 3분의 1을 보여준다. */
/* 카드는 웹툰 한 컷이다. 띠처럼 얇게 자르면 그림이 아니라 장식이 된다.
   4:3으로 키우고 얼굴이 들어오는 40% 지점을 기준으로 자른다. */
.ph-card-img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center 40%;
    border-bottom: 2px solid #011C40;
}

/* ── 상품 상세·결과의 웹툰 컷 ───────────────────────────────────── */
.wt-cut {
    margin: 0 0 24px;
    overflow: hidden;
    border: 3px solid #011C40;
    border-radius: 18px;
    background: #011C40;
    box-shadow: 6px 6px 0 #F24822;
}

.wt-cut img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center 40%;
}

/* 부(部) 표지 컷은 조금 낮게 잘라 본문 흐름을 끊지 않는다. */
.wt-cut.is-part img { aspect-ratio: 16 / 9; object-position: center 42%; }
.wt-cut.is-part { margin-bottom: 18px; box-shadow: 4px 4px 0 #1D64F2; }

.pd-hero-cut {
    max-width: 560px;
    margin: 0 auto 26px;
}

.ph-card-body { padding: 24px 22px 26px; }

.ph-card-tag {
    display: inline-block;
    margin: 0 0 12px;
    padding: 6px 12px;
    border-radius: 8px;
    background: #F24822;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 800;
}

.is-bundle .ph-card-tag { background: #011C40; }

.ph-card h3 {
    margin: 0 0 10px;
    font-size: 33px;
    font-weight: 900;
    line-height: 1.26;
    color: #011C40;
    word-break: keep-all;
}

.ph-card-sub {
    margin: 0 0 16px;
    font-size: 22px;
    line-height: 1.58;
    color: #1243A6;
    word-break: keep-all;
}

/* 묶음에 무엇이 들었는지 겹친 썸네일로 한눈에 보여준다. */
.ph-card-stack {
    display: flex;
    align-items: center;
    margin: 0 0 16px;
}

.ph-card-stack img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid #F2EED8;
    object-fit: cover;
    margin-left: -10px;
}

.ph-card-stack img:first-child { margin-left: 0; }

.ph-card-stack span {
    margin-left: 12px;
    font-size: 19px;
    font-weight: 800;
    color: #1D64F2;
}

.ph-card-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 10px;
}

.ph-card-price del {
    font-size: 21px;
    color: #1243A6;
}

.ph-card-price strong {
    font-size: 36px;
    font-weight: 900;
    color: #F24822;
}

.ph-card-price span {
    font-size: 19px;
    font-weight: 700;
    color: #1243A6;
}

.ph-card-note {
    margin: 0 0 20px;
    font-size: 20px;
    line-height: 1.56;
    color: #011C40;
    word-break: keep-all;
}

.ph-card-cta {
    display: block;
    width: 100%;
    padding: 18px 20px;
    border-radius: 14px;
    font-size: 23px;
    font-weight: 900;
    text-align: center;
    text-decoration: none;
}

.ph-steps {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: ph-step;
}

.ph-steps li {
    position: relative;
    display: grid;
    gap: 6px;
    padding: 22px 22px 22px 66px;
    border: 2px solid #011C40;
    border-radius: 18px;
    background: #FFFFFF;
}

.ph-steps li::before {
    counter-increment: ph-step;
    content: counter(ph-step);
    position: absolute;
    left: 22px;
    top: 22px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #011C40;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 900;
}

.ph-steps b {
    font-size: 24px;
    font-weight: 900;
    color: #011C40;
}

.ph-steps span {
    font-size: 21px;
    line-height: 1.6;
    color: #1243A6;
    word-break: keep-all;
}

.ph-status {
    max-width: 720px;
    margin: 16px auto 0;
    font-size: 20px;
}

@media (max-width: 520px) {
    .ph-container { padding: 0 14px; }
    .ph-hero { padding: 48px 0 44px; }
    .ph-band { padding: 46px 0; }
    .ph-card-body { padding: 20px 17px 22px; }
    .ph-card h3 { font-size: 29px; }
    .ph-card-sub { font-size: 21px; }
    .ph-card-price strong { font-size: 32px; }
    .ph-card-cta { font-size: 22px; }
    .ph-steps li { padding: 18px 16px 18px 58px; }
    .ph-steps li::before { left: 16px; top: 18px; }
}

/* ── 상품 상세 페이지 ────────────────────────────────── */

/* 상세 히어로는 어두운 배경이다. 본문 색을 그대로 쓰면 글이 안 보인다. */
.pd-lead {
    margin: 14px 0 0;
    font-size: 23px;
    line-height: 1.56;
    color: #F2EED8;
}

.pd-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    margin: 18px 0 0;
}

.pd-price del {
    font-size: 21px;
    color: #1243A6;
}

.pd-price strong {
    font-size: 38px;
    font-weight: 900;
    color: #F24822;
}

.pd-price span {
    font-size: 19px;
    font-weight: 700;
    color: #F2EED8;
}

/* 상세 페이지 하단 고정 결제 바. 스크롤 어디서든 다음 걸음이 보인다. */
.pd-dock {
    position: fixed;
    left: 50%;
    bottom: calc(8px + env(safe-area-inset-bottom));
    z-index: 900;
    display: grid;
    justify-items: center;
    gap: 8px;
    width: calc(100vw - 20px);
    max-width: 680px;
    padding: 10px 12px 12px;
    border: 2px solid #011C40;
    border-radius: 16px;
    background: rgb(255 255 255 / 97%);
    box-shadow: 5px 5px 0 #F24822;
    box-sizing: border-box;
    transform: translateX(-50%);
}

.pd-dock-timer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    font-size: 15px;
    font-weight: 900;
    color: #011C40;
}

.pd-dock-timer b {
    font-size: 17px;
    color: #F24822;
    font-variant-numeric: tabular-nums;
}

.pd-dock-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 460px);
    min-height: 62px;
    font-size: 23px;
    font-weight: 900;
    text-decoration: none;
}

.pd-dock.is-footer-docked {
    position: absolute;
    top: var(--footer-dock-top);
    bottom: auto;
}

@media (max-width: 520px) {
    .ph-page { padding: 22px 12px 64px; }
    .ph-card { padding: 22px 18px; }
    .ph-card h2 { font-size: 29px; }
    .ph-card-sub { font-size: 21px; }
    .ph-card-price strong { font-size: 31px; }
    .ph-card-cta { font-size: 22px; }
    .ph-steps li { padding: 18px 16px 18px 56px; }
}

/* ── 성향 분석 진입 카드 ────────────────────────────── */

.intro-card h1 {
    margin: 18px 0 14px;
    font-size: clamp(34px, 8vw, 44px);
    font-weight: 900;
    line-height: 1.24;
    color: #011C40;
}

.type-lead {
    margin: 0 0 20px;
    font-size: 22px;
    line-height: 1.62;
    color: #011C40;
}

.type-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 20px;
}

.type-price del {
    font-size: 20px;
    color: #011C40;
}

.type-price strong {
    font-size: 34px;
    font-weight: 900;
    color: #F24822;
}

.type-price span {
    font-size: 18px;
    font-weight: 700;
    color: #011C40;
}

.type-note {
    margin: 14px 0 0;
    font-size: 20px;
    line-height: 1.58;
    color: #011C40;
}

.type-note b { font-weight: 800; color: #011C40; }

.pd-dock-buy {
    /* 손가락이 닿는 높이로 둔다. 글자만 19px이면 눌리는 띠가 30px밖에 안 된다. */
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    font-weight: 800;
    color: #1243A6;
    text-decoration: none;
    text-align: center;
}

.pd-dock-buy:hover { text-decoration: underline; }

/* ── 별 풀이 무료 점등표 ─────────────────────────────── */

.star-free-total {
    margin: 0 0 18px;
    font-size: 26px;
    font-weight: 900;
    line-height: 1.34;
    color: #011C40;
}

.star-free-total b { color: #F24822; }

.star-lamp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin: 0 0 20px;
}

/* 꺼진 칸도 이름을 그대로 보여준다. 가리면 무엇을 사는지 알 수 없다. */
.star-lamp {
    display: grid;
    gap: 4px;
    padding: 14px 12px;
    border: 2px solid #1243A6;
    border-radius: 14px;
    background: #FFFFFF;
    text-align: center;
}

.star-lamp b {
    font-size: 21px;
    font-weight: 900;
    color: #1243A6;
}

.star-lamp span {
    font-size: 17px;
    font-weight: 700;
    color: #1243A6;
}

.star-lamp.is-on {
    border-color: #011C40;
    background: #011C40;
}

.star-lamp.is-on b { color: #FFFFFF; }
.star-lamp.is-on span { color: #F24822; }

.star-free-note {
    margin: 0 0 12px;
    font-size: 22px;
    line-height: 1.62;
    color: #011C40;
    word-break: keep-all;
}

.star-free-locked {
    margin: 0;
    font-size: 20px;
    line-height: 1.58;
    color: #1243A6;
}

.star-free-cta {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 17px 20px;
    border-radius: 14px;
    font-size: 22px;
    font-weight: 900;
    text-align: center;
    text-decoration: none;
}

/* ── 별 풀이 결과 ───────────────────────────────────── */

.star-part { margin: 0 0 44px; }

.star-section {
    margin: 0 0 18px;
    padding: 26px 22px;
    border: 2px solid #011C40;
    border-radius: 20px;
    background: #FFFFFF;
}

.star-section h3 {
    margin: 0 0 14px;
    font-size: 29px;
    font-weight: 900;
    line-height: 1.3;
    color: #011C40;
    word-break: keep-all;
}

.star-section p {
    margin: 0 0 12px;
    font-size: 22px;
    line-height: 1.66;
    color: #011C40;
    word-break: keep-all;
}

.star-section p:last-of-type { margin-bottom: 0; }

.star-chart {
    margin: 0 0 18px;
    padding: 24px 20px;
    border-radius: 20px;
    background: #011C40;
}

.star-chart h3 {
    margin: 0 0 16px;
    font-size: 26px;
    font-weight: 900;
    color: #FFFFFF;
}

.star-chart-note {
    margin: 18px 0 0;
    font-size: 20px;
    line-height: 1.62;
    color: #F2EED8;
    word-break: keep-all;
}

.star-seat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.star-seat-cell {
    display: grid;
    gap: 4px;
    padding: 16px 14px;
    border: 2px solid #1243A6;
    border-radius: 14px;
    background: #1243A6;
}

/* 비어 있다고 보는 자리는 점선으로 표시한다. */
.star-seat-cell.is-vacant {
    border-style: dashed;
    border-color: #F24822;
    background: transparent;
}

.star-seat-cell b { font-size: 21px; font-weight: 900; color: #FFFFFF; }
.star-seat-cell span { font-size: 19px; font-weight: 700; color: #F2EED8; }
.star-seat-cell p { margin: 0; font-size: 19px; line-height: 1.5; color: #F2EED8; }

.star-power-list { display: grid; gap: 10px; }

.star-power-row {
    display: grid;
    grid-template-columns: minmax(84px, auto) 1fr minmax(96px, auto);
    align-items: center;
    gap: 10px;
}

.star-power-row b { font-size: 20px; font-weight: 900; color: #FFFFFF; }
.star-power-row span { font-size: 18px; font-weight: 700; color: #F2EED8; text-align: right; }

.star-power-row i {
    display: block;
    height: 18px;
    border-radius: 9px;
    background: #1243A6;
}

.star-power-row.is-strong i { background: #F24822; }
.star-power-row.is-faint i { background: #1D64F2; }

@media (max-width: 520px) {
    .star-seat-grid { grid-template-columns: minmax(0, 1fr); }
    .star-section { padding: 20px 17px; }
    .star-section h3 { font-size: 26px; }
    .star-power-row { grid-template-columns: minmax(72px, auto) 1fr; }
    .star-power-row span { grid-column: 1 / -1; text-align: left; }
}

/* 고정 결제 바가 마지막 내용을 가리지 않게 아래 여백을 둔다. */
body:has(.pd-dock) main { padding-bottom: 150px; }

@media (max-width: 520px) {
    body:has(.pd-dock) main { padding-bottom: 170px; }
}

/* ── 연운 열두 달 지도 ───────────────────────────────── */

.year-free-total {
    margin: 0 0 14px;
    font-size: 26px;
    font-weight: 900;
    line-height: 1.34;
    color: #011C40;
}

.year-free-total b { color: #F24822; }

.year-free-note {
    margin: 0 0 14px;
    font-size: 21px;
    line-height: 1.62;
    color: #011C40;
    word-break: keep-all;
}

.year-free-locked {
    margin: 0;
    font-size: 20px;
    line-height: 1.58;
    color: #1243A6;
}

.year-map {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 18px;
}

.year-cell {
    display: grid;
    gap: 3px;
    padding: 14px 10px;
    border: 2px solid #1243A6;
    border-radius: 14px;
    background: #FFFFFF;
    text-align: center;
}

.year-cell b { font-size: 20px; font-weight: 900; color: #011C40; }
.year-cell span { font-size: 18px; font-weight: 700; color: #1243A6; }
.year-cell em { font-size: 18px; font-weight: 800; font-style: normal; color: #F24822; }

/* 잠긴 칸은 흐리게 덮지 않는다. 비워 두고 이름만 남긴다. */
.year-cell.is-empty {
    border-style: dashed;
    background: #F2EED8;
}

.year-cell.is-empty b { color: #1243A6; }
.year-cell.is-empty span { font-size: 17px; }

.year-cell.is-now {
    border-width: 3px;
    border-color: #011C40;
    background: #011C40;
}

.year-cell.is-now b,
.year-cell.is-now span { color: #FFFFFF; }

@media (max-width: 520px) {
    .year-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.year-map.is-full {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 0;
}

.year-map.is-full .year-cell {
    border-color: #1D64F2;
    background: #1243A6;
}

.year-map.is-full .year-cell b,
.year-map.is-full .year-cell span { color: #FFFFFF; }
.year-map.is-full .year-cell em { color: #F2EED8; }
.year-map.is-full .year-cell.is-open { background: #F24822; }
.year-map.is-full .year-cell.is-open em { color: #FFFFFF; }
.year-map.is-full .year-cell.is-rest { background: transparent; border-style: dashed; }
.year-map.is-full .year-cell.is-now { border-color: #F2EED8; border-width: 3px; }

.year-balance { display: grid; gap: 8px; }

.year-balance-row {
    display: grid;
    grid-template-columns: minmax(48px, auto) 1fr minmax(56px, auto);
    align-items: center;
    gap: 10px;
}

.year-balance-row b { font-size: 19px; font-weight: 900; color: #FFFFFF; }
.year-balance-row span { font-size: 18px; font-weight: 700; color: #F2EED8; text-align: right; }

.year-balance-row i {
    display: block;
    height: 16px;
    border-radius: 8px;
    background: #1D64F2;
}

.year-balance-row i.is-hot { background: #F24822; }

@media (max-width: 520px) {
    .year-map.is-full { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── 대운 아홉 칸 ────────────────────────────────────── */

.decade-total {
    margin: 0 0 14px;
    font-size: 26px;
    font-weight: 900;
    line-height: 1.34;
    color: #011C40;
}

.decade-total b { color: #F24822; }

.decade-note {
    margin: 0 0 14px;
    font-size: 21px;
    line-height: 1.62;
    color: #011C40;
    word-break: keep-all;
}

.decade-locked {
    margin: 0;
    font-size: 20px;
    line-height: 1.58;
    color: #1243A6;
}

.decade-track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 18px;
}

.decade-cell {
    display: grid;
    gap: 3px;
    padding: 14px 10px;
    border: 2px solid #1243A6;
    border-radius: 14px;
    background: #FFFFFF;
    text-align: center;
}

.decade-cell b { font-size: 19px; font-weight: 900; color: #011C40; }
.decade-cell span { font-size: 18px; font-weight: 700; color: #1243A6; }
.decade-cell em { font-size: 17px; font-weight: 800; font-style: normal; color: #F24822; }

.decade-cell.is-empty { border-style: dashed; background: #F2EED8; }
.decade-cell.is-empty b { color: #1243A6; font-size: 18px; }

.decade-cell.is-now { border-width: 3px; border-color: #011C40; background: #011C40; }
.decade-cell.is-now b,
.decade-cell.is-now span { color: #FFFFFF; }

.decade-track.is-full { margin-bottom: 0; }
.decade-track.is-full .decade-cell { border-color: #1D64F2; background: #1243A6; }
.decade-track.is-full .decade-cell b,
.decade-track.is-full .decade-cell span { color: #FFFFFF; }
.decade-track.is-full .decade-cell em { color: #F2EED8; }
.decade-track.is-full .decade-cell.is-open { background: #F24822; }
.decade-track.is-full .decade-cell.is-open em { color: #FFFFFF; }
.decade-track.is-full .decade-cell.is-quiet { background: transparent; border-style: dashed; }
.decade-track.is-full .decade-cell.is-now { border-color: #F2EED8; border-width: 3px; }

.decade-turns { display: grid; gap: 8px; }

.decade-turn-row {
    display: grid;
    grid-template-columns: minmax(72px, auto) minmax(48px, auto) 1fr;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
}

.decade-turn-row b { font-size: 19px; font-weight: 900; color: #FFFFFF; }
.decade-turn-row span { font-size: 19px; font-weight: 800; color: #F2EED8; }
.decade-turn-row em { font-size: 18px; font-style: normal; color: #F2EED8; }
.decade-turn-row.is-now { background: #F24822; }
.decade-turn-row.is-now em { color: #FFFFFF; }

@media (max-width: 520px) {
    .decade-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 몸의 기후 아홉 칸 ───────────────────────────────── */

.body-total {
    margin: 0 0 16px;
    font-size: 26px;
    font-weight: 900;
    line-height: 1.34;
    color: #011C40;
}

.body-total b { color: #F24822; }

.body-note {
    margin: 0 0 14px;
    font-size: 21px;
    line-height: 1.62;
    color: #011C40;
    word-break: keep-all;
}

.body-locked { margin: 0; font-size: 20px; line-height: 1.58; color: #1243A6; }

.body-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 18px;
}

.body-cell {
    display: grid;
    gap: 2px;
    padding: 16px 8px;
    border: 2px solid #1243A6;
    border-radius: 12px;
    background: #F2EED8;
    text-align: center;
}

.body-cell b { font-size: 19px; font-weight: 800; color: #1243A6; }
.body-cell span { font-size: 17px; font-weight: 700; color: #1243A6; }
.body-cell em { font-size: 17px; font-weight: 900; font-style: normal; color: #FFFFFF; }

.body-cell.is-here {
    border-width: 3px;
    border-color: #011C40;
    background: #011C40;
}

.body-cell.is-here b,
.body-cell.is-here span { color: #FFFFFF; }

.body-bowls { display: grid; gap: 10px; }

.body-bowl-row {
    display: grid;
    grid-template-columns: minmax(36px, auto) 1fr minmax(96px, auto);
    align-items: center;
    gap: 10px;
}

.body-bowl-row b { font-size: 21px; font-weight: 900; color: #FFFFFF; }
.body-bowl-row span { font-size: 18px; font-weight: 700; color: #F2EED8; text-align: right; }

.body-bowl-row i {
    display: block;
    height: 18px;
    border-radius: 9px;
    background: #1D64F2;
}

.body-bowl-row.is-over i { background: #F24822; }
.body-bowl-row.is-empty i,
.body-bowl-row.is-low i { background: #F2EED8; }

.body-seasons {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.body-season-cell {
    display: grid;
    gap: 4px;
    padding: 16px 10px;
    border: 2px solid #1D64F2;
    border-radius: 14px;
    background: #1243A6;
    text-align: center;
}

.body-season-cell b { font-size: 20px; font-weight: 900; color: #FFFFFF; }
.body-season-cell span { font-size: 18px; font-weight: 700; color: #F2EED8; }
.body-season-cell.is-over { background: #F24822; }
.body-season-cell.is-low { background: transparent; border-style: dashed; }

@media (max-width: 520px) {
    .body-seasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 돈이 붙는 자리 격자 ─────────────────────────────── */

.money-total {
    margin: 0 0 16px;
    font-size: 26px;
    font-weight: 900;
    line-height: 1.34;
    color: #011C40;
}

.money-total b { color: #F24822; }

.money-note {
    margin: 0 0 14px;
    font-size: 21px;
    line-height: 1.62;
    color: #011C40;
    word-break: keep-all;
}

.money-locked { margin: 0; font-size: 20px; line-height: 1.58; color: #1243A6; }

.money-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 18px;
}

.money-cell {
    display: grid;
    gap: 4px;
    padding: 16px 12px;
    border: 2px solid #1243A6;
    border-radius: 14px;
    background: #FFFFFF;
    text-align: center;
}

.money-cell b { font-size: 20px; font-weight: 900; color: #011C40; }
.money-cell span { font-size: 18px; font-weight: 700; color: #1243A6; }
.money-cell em { font-size: 17px; font-style: normal; color: #1243A6; }

.money-cell.is-empty { border-style: dashed; background: #F2EED8; }
.money-cell.is-on { border-color: #011C40; background: #011C40; }
.money-cell.is-on b,
.money-cell.is-on span { color: #FFFFFF; }
.money-cell.is-on em { color: #F2EED8; }
.money-cell.is-rooted { background: #F24822; }

.money-grid.is-full { margin-bottom: 0; }
.money-grid.is-full .money-cell.is-empty { background: transparent; }
.money-grid.is-full .money-cell.is-empty b { color: #F2EED8; }
.money-grid.is-full .money-cell.is-empty span { color: #F2EED8; }

.money-scale {
    display: flex;
    height: 26px;
    border-radius: 13px;
    overflow: hidden;
}

.money-scale i { display: block; height: 100%; }
.money-scale i.is-me { background: #1D64F2; }
.money-scale i.is-money { background: #F24822; }

.money-scale-legend {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 19px;
    font-weight: 700;
    color: #F2EED8;
}

@media (max-width: 520px) {
    .money-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── 인연 풀이 ────────────────────────────────────────────────────── */
.star-chart-legend {
    margin: 14px 0 0;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.55;
    color: #F2EED8;
    word-break: keep-all;
}

.love-layers {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
}

.love-layer {
    display: block;
    width: 36px;
    height: 18px;
    border: 2px solid #1243A6;
    border-radius: 9px;
    background: #FFFFFF;
}

.love-layer.is-on { background: #1D64F2; border-color: #011C40; }
.love-layers span { font-size: 19px; font-weight: 800; color: #011C40; }

.love-lamp-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.love-lamp {
    display: grid;
    gap: 4px;
    padding: 14px 8px;
    border: 2px solid #1243A6;
    border-radius: 14px;
    background: transparent;
    text-align: center;
}

.love-lamp b { font-size: 18px; font-weight: 800; color: #F2EED8; }
.love-lamp span { font-size: 17px; font-weight: 700; color: #F2EED8; }
.love-lamp.is-on { border-color: #F24822; background: #F24822; }
.love-lamp.is-on b,
.love-lamp.is-on span { color: #FFFFFF; }

.love-year-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
}

.love-year-bar {
    display: grid;
    grid-template-rows: 90px auto auto;
    gap: 6px;
    align-items: end;
    text-align: center;
}

.love-year-bar i {
    display: block;
    width: 100%;
    min-height: 6px;
    border-radius: 8px 8px 0 0;
    background: #1D64F2;
}

.love-year-bar b { font-size: 18px; font-weight: 800; color: #FFFFFF; }
.love-year-bar span { font-size: 17px; font-weight: 700; color: #F2EED8; }

@media (max-width: 520px) {
    .love-lamp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .love-year-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── 직업·적성 풀이 ──────────────────────────────────────────────── */
.work-root-grid { display: grid; gap: 12px; }

.work-root-row {
    display: grid;
    grid-template-columns: 96px 1fr 72px;
    gap: 10px;
    align-items: center;
}

.work-root-row b { font-size: 18px; font-weight: 800; color: #FFFFFF; }
.work-root-row i {
    display: block;
    min-width: 6px;
    height: 18px;
    border-radius: 9px;
    background: #1D64F2;
}
.work-root-row i.is-empty { background: transparent; border: 2px dashed #F2EED8; }
.work-root-row span { font-size: 17px; font-weight: 700; color: #F2EED8; text-align: right; }

.work-group-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
}

.work-group-bar {
    display: grid;
    grid-template-rows: 88px auto auto;
    gap: 6px;
    align-items: end;
    text-align: center;
}

.work-group-bar i {
    display: block;
    width: 100%;
    min-height: 6px;
    border-radius: 8px 8px 0 0;
    background: #1D64F2;
}

.work-group-bar b { font-size: 18px; font-weight: 800; color: #FFFFFF; }
.work-group-bar span { font-size: 17px; font-weight: 700; color: #F2EED8; }

.work-tier-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.work-tier-cell {
    padding: 12px 4px;
    border: 2px solid #1243A6;
    border-radius: 12px;
    font-size: 17px;
    font-weight: 700;
    color: #F2EED8;
    text-align: center;
    word-break: keep-all;
}

.work-tier-cell.is-on { border-color: #F24822; background: #F24822; color: #FFFFFF; }

@media (max-width: 520px) {
    .work-root-row { grid-template-columns: 84px 1fr 64px; }
    .work-tier-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── 인생 흐름 ───────────────────────────────────────────────────
   네 칸은 나란한 자리다. 높낮이로 그리면 "젊을 때 기운이 없다"로 읽힌다. */
.life-band-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.life-band {
    display: grid;
    gap: 4px;
    padding: 14px 8px;
    border: 2px solid #1243A6;
    border-radius: 14px;
    background: #FFFFFF;
    text-align: center;
}

.life-band b { font-size: 19px; font-weight: 900; color: #011C40; }
.life-band span { font-size: 17px; font-weight: 700; color: #1243A6; }
.life-band em { font-size: 17px; font-style: normal; color: #1243A6; }
.life-band.is-on { border-color: #F24822; background: #F24822; }
.life-band.is-on b,
.life-band.is-on span,
.life-band.is-on em { color: #FFFFFF; }
.life-band.is-empty { border-style: dashed; }

.life-band-list.is-full .life-band { background: transparent; border-color: #F2EED8; }
.life-band-list.is-full .life-band b { color: #FFFFFF; }
.life-band-list.is-full .life-band span,
.life-band-list.is-full .life-band em { color: #F2EED8; }
.life-band-list.is-full .life-band.is-on { border-color: #F24822; background: #F24822; }

.life-chain-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.life-chain-step {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    border: 2px solid #1243A6;
    border-radius: 12px;
}

.life-chain-step b { font-size: 19px; font-weight: 800; color: #FFFFFF; }
.life-chain-step span { font-size: 18px; font-weight: 700; color: #F2EED8; }

@media (max-width: 520px) {
    .life-band-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* 하단 고정 결제 바가 본문 끝을 가린다. 바 높이만큼 아래를 비운다.
   바는 푸터 앞에서 멈추지만, 그 전까지는 마지막 문단 위에 떠 있다. */
.ph-body:has(.pd-dock) main {
    padding-bottom: 180px;
}

@media (max-width: 520px) {
    .ph-body:has(.pd-dock) main {
        padding-bottom: 200px;
    }
}