/* =====================================================================
   assets/jimyeon/shop.css — 지면사주 고객 화면 (J3 · 2026-10-17)
   모든 규칙은 .jm- 접두 클래스 안에서만 · 기존 결과지·상품 화면 CSS 무영향
   ===================================================================== */
.jm-head{ padding:28px 0 8px; }
.jm-head .jm-eyebrow{ font-size:.78rem; letter-spacing:.14em; color:var(--ps-purple-500, #7b4fd6); font-weight:700; margin:0 0 6px; }
.jm-head h1{ font-size:1.6rem; line-height:1.3; margin:0 0 6px; text-wrap:balance; }
.jm-head p{ margin:0; color:var(--ps-text-soft, #6b6680); line-height:1.6; }

/* 목록 */
.jm-grid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px; margin:20px 0 40px; }
@media (max-width:900px){ .jm-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; } }
.jm-card{ display:flex; flex-direction:column; border-radius:14px; overflow:hidden; background:#fff; border:1px solid var(--ps-line, #e7e2f3); text-decoration:none; color:inherit; transition:transform .15s, box-shadow .15s; }
.jm-card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(52, 23, 110, .12); }
.jm-card img{ width:100%; aspect-ratio:3 / 4; object-fit:cover; display:block; background:#f3effb; }
.jm-card-b{ padding:12px 14px 14px; display:flex; flex-direction:column; gap:4px; }
.jm-card-b b{ font-size:.98rem; line-height:1.4; word-break:keep-all; }
.jm-chklist{ list-style:none; padding-left:0; }
.jm-chk{ display:flex; gap:10px; align-items:flex-start; }
.jm-box{ flex:none; width:16px; height:16px; margin-top:.3em; border:1.5px solid rgba(107,63,160,.6); border-radius:4px; background:#fff; }
.jm-box.is-on{ background:var(--ps-purple-600, #5b2fb8); border-color:var(--ps-purple-600, #5b2fb8); box-shadow:inset 0 0 0 3px #fff; }
.jm-em{ font-style:normal; color:var(--ps-purple-700, #47228f); font-weight:600; }
.jm-card-b small{ color:var(--ps-text-soft, #6b6680); font-size:.82rem; line-height:1.4; }
.jm-price{ font-weight:800; color:var(--ps-purple-600, #5b2fb8); margin-top:4px; font-variant-numeric:tabular-nums; }
.jm-empty{ padding:40px 20px; text-align:center; color:var(--ps-text-soft, #6b6680); background:#faf8fe; border-radius:14px; margin:20px 0 40px; }

/* 상품 상세 */
.jm-product{ display:grid; grid-template-columns:minmax(0, 380px) minmax(0, 1fr); gap:32px; align-items:start; margin:20px 0 32px; }
@media (max-width:900px){ .jm-product{ grid-template-columns:1fr; gap:18px; } }
.jm-product .jm-thumb{ width:100%; border-radius:16px; display:block; aspect-ratio:3 / 4; object-fit:cover; background:#f3effb; }
.jm-buy{ position:sticky; top:84px; display:flex; flex-direction:column; gap:12px; }
.jm-buy h1{ font-size:1.5rem; line-height:1.35; margin:0; text-wrap:balance; word-break:keep-all; }
.jm-buy .jm-q{ color:var(--ps-text-soft, #6b6680); line-height:1.6; margin:0; }
.jm-buy ul{ margin:0; padding-left:1.1em; line-height:1.7; }
.jm-buy .jm-price{ font-size:1.4rem; }
.jm-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:52px; padding:0 22px; border-radius:12px; border:0; font-weight:800; font-size:1rem; text-decoration:none; cursor:pointer; }
.jm-btn-primary{ background:linear-gradient(135deg, #5b2fb8, #7b4fd6); color:#fff; }
.jm-btn-primary:hover{ filter:brightness(1.07); }
.jm-btn-ghost{ background:#fff; color:var(--ps-purple-600, #5b2fb8); border:1px solid var(--ps-purple-300, #c9b5f0); }
.jm-btn:focus-visible{ outline:2px solid var(--ps-purple-500, #7b4fd6); outline-offset:2px; }
.jm-btn[disabled]{ opacity:.55; cursor:not-allowed; }
.jm-note{ font-size:.85rem; color:var(--ps-text-soft, #6b6680); line-height:1.6; margin:0; }

.jm-detail{ background:#fff; border:1px solid var(--ps-line, #e7e2f3); border-radius:16px; padding:28px 26px; line-height:1.85; margin-bottom:40px; }
@media (max-width:640px){ .jm-detail{ padding:20px 16px; } }
.jm-detail h1, .jm-detail h2{ font-size:1.25rem; margin:1.6em 0 .6em; line-height:1.4; }
.jm-detail h3{ font-size:1.05rem; margin:1.4em 0 .5em; }
.jm-detail h1:first-child, .jm-detail h2:first-child{ margin-top:0; }
.jm-detail p{ margin:0 0 1em; }
.jm-detail ul, .jm-detail ol{ margin:0 0 1em; padding-left:1.2em; }
/* 「재미사주 결과 보러가기」 배너 (대표 제작 이미지 · 보라+골드) — 누르면 주문 화면 */
.jm-cta{ display:flex; flex-direction:column; align-items:center; gap:8px; margin:22px auto; max-width:560px; text-decoration:none; color:var(--ps-text-soft, #6b6680); }
.jm-cta-img{ display:block; width:100%; height:auto; border-radius:999px; box-shadow:0 10px 26px rgba(76, 29, 149, .32); transition:transform .15s ease, box-shadow .15s ease; }
.jm-cta:hover .jm-cta-img, .jm-cta:focus-visible .jm-cta-img{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(76, 29, 149, .42); }
.jm-cta:focus-visible{ outline:3px solid var(--ps-purple-400, #9b7be0); outline-offset:4px; border-radius:999px; }
.jm-cta small{ font-size:.85rem; text-align:center; word-break:keep-all; overflow-wrap:break-word; }
.jm-cta small span{ display:block; }   /* 2026-10-19 : 배너 아래 문장 — 문장마다 한 줄 */   /* 2026-10-19 : 「열람」 처럼 낱말 가운데서 줄바꿈되지 않게 */
.jm-note small{ color:var(--ps-text-soft, #6b6680); font-size:.85rem; }
@media (prefers-reduced-motion: reduce){ .jm-cta-img{ transition:none; } .jm-cta:hover .jm-cta-img{ transform:none; } }
.jm-related{ color:var(--ps-purple-600, #5b2fb8); font-weight:700; }
/* 2026-10-19 「함께 보면 좋은 사주」 별빛 배너 — 조각 3개를 겹치지 않게 나란히(달 | 가운데 띠 | 화살표) + 가운데 위 · 아래 별은 이름표 위에 얹음
   색별 그림 = assets/jimyeon/related/related.css · 상품명이 길면 related.js 가 글자를 조금 줄이고, 그래도 길면 배너를 높이며 달 · 화살표 · 별을 같은 비율로 키웁니다(찌그러짐 · 이음매 0) */
.jm-rel{ position:relative; display:flex; align-items:stretch; width:100%; max-width:600px; margin:10px auto; text-decoration:none; color:inherit; -webkit-tap-highlight-color:transparent; transition:transform .15s ease, filter .15s ease; }
.jm-rel:hover{ transform:translateY(-1px); filter:brightness(1.06); }
.jm-rel:focus-visible{ outline:2px solid #b48cff; outline-offset:3px; border-radius:999px; }
.jm-rel::before{ content:""; flex:none; width:0; padding-top:var(--rh, 20.6%); }   /* 최소 높이 = 너비 × 원본 비율 */
.jm-rel-l, .jm-rel-m, .jm-rel-r, .jm-rel-st, .jm-rel-sb{ display:block; background-size:100% 100%; background-repeat:no-repeat; }
.jm-rel-l{ flex:none; width:var(--lw, var(--lp, 22%)); } .jm-rel-r{ flex:none; width:var(--rw, var(--rp, 18.6%)); }
.jm-rel-l, .jm-rel-r{ position:relative; z-index:1; }
.jm-rel-m{ position:relative; flex:1 1 0; min-width:0; display:grid; }
.jm-rel-m::before{ content:""; position:absolute; left:-1px; right:-1px; top:var(--py0, 13%); bottom:var(--py1, 13%); background-image:inherit; background-repeat:no-repeat; background-size:100% var(--pys, 135%); background-position:0 var(--pyp, 50%); pointer-events:none; }   /* 알약 안쪽만 양옆 1px 더 칠해 소수점 픽셀 틈(흰 줄) 0 · 빛 번짐 쪽은 겹치지 않음 */
.jm-rel-st, .jm-rel-sb{ grid-area:1 / 1; justify-self:center; z-index:2; width:var(--cw, var(--cp, 12%)); pointer-events:none; }
.jm-rel-st{ align-self:start; } .jm-rel-sb{ align-self:end; }
.jm-rel-t{ grid-area:1 / 1; place-self:center; position:relative; z-index:1; display:block; box-sizing:border-box; margin:var(--pt, .9em) 4px var(--pb, .9em); padding:.3em .9em; border-radius:1.1em; border:1px solid var(--tl, rgba(255, 226, 170, .45)); background:var(--tb, rgba(10, 0, 30, .24)); color:var(--tc, #fff8e8); font-weight:800; font-size:var(--fs, clamp(13px, 3.6vw, 16px)); line-height:1.34; letter-spacing:-.01em; text-align:center; word-break:keep-all; overflow-wrap:anywhere; text-shadow:var(--ts, 0 1px 3px rgba(0, 0, 0, .7)); }
@media (max-width:640px){ .jm-detail .jm-rel{ width:calc(100% + 24px); max-width:none; margin-left:-12px; margin-right:-12px; } }


/* 주문 */
.jm-form .card{ margin-bottom:14px; }
.jm-form .field{ margin-bottom:16px; }
.jm-form .field:last-child{ margin-bottom:0; }
.jm-form .field > label{ display:block; margin-bottom:6px; font-weight:700; font-size:.92rem; }
.jm-form input[type=text], .jm-form select, .jm-form textarea{ width:100%; min-height:48px; box-sizing:border-box; }
.jm-form textarea{ min-height:96px; padding:12px; }
.jm-form .row-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.jm-form .row-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.jm-form .jm-time-unknown{ display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-size:.9rem; }
/* 「내 기본정보로 저장」 (2026-10-18) */
.jm-savemine{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:16px; padding-top:14px; border-top:1px dashed var(--ps-line, #e7e2f3); }
.jm-btn-sm{ min-height:40px; padding:0 16px; font-size:.9rem; border-radius:10px; }
.jm-savemine .jm-note{ margin:0; font-size:.85rem; color:var(--ps-text-soft, #6b6680); }
.jm-savemine .jm-note.is-bad{ color:#9b2c2c; }
/* 결제수단 고르기 · 카드 결제 패널 (2026-10-18 · 기존 결제위젯 패널 .pspay-* 와 같은 모양 · 재미사주 화면 전용 이름) */
.jm-methods{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 14px; }
.jm-method{ position:relative; display:flex; flex-direction:column; gap:2px; padding:14px 14px 12px; border:1.5px solid var(--ps-line, #e7e2f3); border-radius:12px; background:#fff; cursor:pointer; min-height:64px; }
.jm-method input{ position:absolute; opacity:0; pointer-events:none; }
.jm-method b{ font-size:.98rem; }
.jm-method small{ font-size:.8rem; color:var(--ps-text-soft, #6b6680); line-height:1.4; word-break:keep-all; }
.jm-method.is-on{ border-color:var(--ps-purple-600, #5b2fb8); box-shadow:0 0 0 3px rgba(91, 47, 184, .14); background:#faf8fe; }
.jm-method.is-off{ opacity:.55; cursor:not-allowed; }
.jm-method:focus-within{ outline:2px solid var(--ps-purple-500, #7b4fd6); outline-offset:2px; }
@media (max-width:420px){ .jm-methods{ grid-template-columns:1fr; } }
.jm-payov{ position:fixed; inset:0; z-index:9990; background:rgba(24, 12, 48, .62); display:flex; align-items:center; justify-content:center; padding:16px; }
.jm-paypanel{ background:#fff; border-radius:18px; width:100%; max-width:520px; max-height:92vh; overflow:auto; padding:20px 20px 18px; box-shadow:0 20px 60px rgba(0, 0, 0, .35); }
.jm-payh{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:1.05rem; color:var(--ps-purple-700, #3b1e6e); }
.jm-payamt{ font-weight:800; font-size:1.15rem; font-variant-numeric:tabular-nums; }
.jm-paysub{ margin:6px 0 12px; font-size:.82rem; color:var(--ps-text-soft, #6b6680); word-break:keep-all; }
.jm-paymethods{ min-height:120px; }
.jm-payagree{ margin-top:4px; }
.jm-payerr{ margin:8px 0 0; font-size:.8rem; color:#9b2c2c; }
/* 2026-10-19 (PC 카드 결제 멈춤 ⑥) : PC 안내 한 줄 · 10초 뒤에도 결제 화면이면 위쪽 안내 띠(토스 결제창 위 · 단추를 가리지 않게 맨 위) */
.jm-payhint{ margin:12px 0 0; padding:10px 12px; border-radius:10px; background:#f6f3fd; color:var(--ps-text-soft, #5d5873); font-size:.78rem; line-height:1.55; word-break:keep-all; }
.jm-paystall{ position:fixed; top:12px; left:50%; transform:translateX(-50%); z-index:2147483647; width:min(560px, calc(100% - 24px)); box-sizing:border-box; display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:12px; background:#fff; border:2px solid var(--ps-purple-600, #5b2fb8); box-shadow:0 10px 30px rgba(0, 0, 0, .35); color:#2a2240; font-size:.84rem; line-height:1.55; word-break:keep-all; }
.jm-paystall div{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.jm-paystall b{ color:var(--ps-purple-700, #3b1e6e); }
.jm-paystall p{ margin:6px 0 0; }
.jm-paystall .jm-btn{ min-height:38px; padding:6px 16px; font-size:.84rem; }
.jm-paystall-x{ flex:none; border:0; background:transparent; font-size:1.3rem; line-height:1; cursor:pointer; color:#6b6680; padding:2px 4px; }
.jm-payactions{ display:flex; gap:10px; justify-content:flex-end; margin-top:14px; }
.jm-payactions .jm-btn-primary{ min-width:180px; }
@media (max-width:480px){ .jm-paypanel{ padding:16px 14px; } .jm-payactions{ flex-direction:column-reverse; } .jm-payactions .jm-btn{ width:100%; } }
.jm-due{ font-weight:700; color:var(--ps-purple-700, #47228f); }
.jm-due.is-over{ color:#9b2c2c; }
.jm-slow{ padding:10px 12px; border-radius:10px; background:#fff8e8; color:#7a5200; text-align:left; }
.jm-refund-notice{ margin-top:14px; padding:12px 14px; border-radius:10px; background:#faf8fe; border:1px solid var(--ps-line, #e7e2f3); display:flex; flex-direction:column; gap:6px; }
.jm-refund-notice .jm-note{ line-height:1.65; word-break:keep-all; }
.jm-linkbtn{ background:none; border:0; padding:0; color:var(--ps-text-soft, #6b6680); text-decoration:underline; cursor:pointer; font-size:.88rem; }
.jm-err{ display:none; margin:0 0 12px; padding:10px 14px; border-radius:10px; background:#fff3f3; color:#9b2c2c; font-size:.9rem; line-height:1.6; }
.jm-err.show{ display:block; }
.jm-summary{ display:flex; gap:14px; align-items:center; }
.jm-summary img{ width:72px; aspect-ratio:3 / 4; object-fit:cover; border-radius:10px; flex:none; }
.jm-summary b{ display:block; line-height:1.4; word-break:keep-all; }

/* 입금 안내 · 상태 */
.jm-bank{ display:grid; grid-template-columns:auto 1fr; gap:6px 16px; padding:16px 18px; border-radius:12px; background:#faf8fe; border:1px solid var(--ps-line, #e7e2f3); font-size:.95rem; }
.jm-bank dt{ color:var(--ps-text-soft, #6b6680); }
.jm-bank dd{ margin:0; font-weight:700; font-variant-numeric:tabular-nums; word-break:break-all; }
.jm-state{ max-width:560px; margin:48px auto; padding:32px 24px; text-align:center; background:#fff; border-radius:18px; border:1px solid var(--ps-line, #e7e2f3); }
.jm-state h2{ margin:0 0 10px; font-size:1.3rem; text-wrap:balance; }
.jm-state p{ margin:0 0 14px; color:var(--ps-text-soft, #6b6680); line-height:1.7; }
.jm-state .jm-bank{ text-align:left; margin:16px 0; }
.jm-state .jm-actions{ display:flex; flex-direction:column; gap:10px; margin-top:16px; }
.jm-spin{ width:34px; height:34px; margin:6px auto 14px; border-radius:50%; border:3px solid #e6dcfa; border-top-color:#7b4fd6; animation:jm-spin 1s linear infinite; }
@keyframes jm-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .jm-spin{ animation:none; } .jm-card{ transition:none; } }
.jm-chip{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:.78rem; font-weight:700; background:#f1ebfd; color:#5b2fb8; }
.jm-chip.is-ready{ background:#e7f6ee; color:#1f7a4a; }
.jm-chip.is-wait{ background:#fff4e0; color:#8a5a00; }

/* 서재 안 지면사주 칸 (my-reports.html) */
.jm-lib{ margin:24px 0 8px; }
.jm-lib h2{ font-size:1.05rem; margin:0 0 10px; }
.jm-lib-list{ display:flex; flex-direction:column; gap:10px; }
.jm-lib-item{ display:flex; gap:12px; align-items:center; padding:12px; border-radius:14px; background:#fff; border:1px solid var(--ps-line, #e7e2f3); text-decoration:none; color:inherit; }
.jm-lib-item img{ width:54px; aspect-ratio:3 / 4; object-fit:cover; border-radius:8px; flex:none; background:#f3effb; }
.jm-lib-item .t{ flex:1; min-width:0; }
.jm-lib-item .t b{ display:block; line-height:1.4; word-break:keep-all; }
.jm-lib-item .t small{ color:var(--ps-text-soft, #6b6680); }

/* 재미사주 결과지 표 — 상자보다 넓은 표만 줄마다 카드로 (jm-report-table.js 가 is-stack 을 붙임 · 2026-10-19)
   결과지 뷰어(report-scroll.css · 보호 파일)는 그대로 두고, 재미사주 화면에서만 덮어씁니다. 글자 · 순서는 그대로입니다. */
.sv-tblwrap:has(> .sv-tbl.is-stack){ overflow:visible; }
.sv-tbl.is-stack{ display:block; min-width:0; width:100%; }
.sv-tbl.is-stack thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.sv-tbl.is-stack tbody{ display:grid; gap:10px; }
.sv-tbl.is-stack tr{ display:grid; border:1px solid var(--rule, #E4DBC9); border-radius:12px; overflow:hidden; background:rgba(255,255,255,.55); }
.sv-tbl.is-stack td{   /* 칸 이름은 위에, 내용은 폭 전체로 (긴 칸 이름 «이성·연애 기운의 움직임»도 한 줄) */
  display:block; padding:9px 14px 10px; border:0; border-top:1px solid var(--rule, #E4DBC9);
  font-size:14.5px; line-height:1.75; white-space:normal; word-break:keep-all; overflow-wrap:anywhere; color:var(--ink, #241B33);
}
.sv-tbl.is-stack td::before{ content:attr(data-label); display:block; margin-bottom:2px; font-size:12.5px; font-weight:600; line-height:1.5; color:var(--gold, #B08D3F); }
.sv-tbl.is-stack td:first-child{
  display:block; border-top:0; padding:10px 13px; font-size:15px; font-weight:700; white-space:normal;
  color:var(--ink, #241B33); background:rgba(176,141,63,.09);
}
.sv-tbl.is-stack td:first-child::before{ content:none; }