/* 연애 놀이터(/play) 전용. exam.css 위에 얹는다. 이름은 모두 p- 로 시작해 검사 화면과 겹치지 않게 한다. */

.p-wrap{max-width:720px}
.p-h1{margin-top:14px}
.p-tag{display:inline-block; padding:4px 11px; border-radius:999px; background:#FFF2E8; color:#BD542A; font-size:.74rem; font-weight:800; letter-spacing:.04em}
.p-fun{margin-top:22px; padding:12px 15px; border-radius:12px; background:#FFF8F0; color:#9A6A44; font-size:.84rem; line-height:1.7}

/* 놀이터 첫 화면 카드 */
.p-grid{margin-top:30px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.p-card{display:flex; flex-direction:column; min-height:190px; padding:22px; border:1px solid var(--line); border-radius:18px; background:#fff; color:var(--ink); text-decoration:none; transition:border-color .2s,transform .2s}
.p-card:hover{border-color:#f4b38a; transform:translateY(-2px)}
.p-card:focus-visible{outline:2px solid var(--grad-b); outline-offset:3px}
.p-card .p-ico{font-size:1.9rem; line-height:1}
.p-card h3{margin-top:14px; font-family:var(--serif); font-size:1.2rem; line-height:1.4}
.p-card p{margin-top:8px; color:var(--sub); font-size:.86rem; line-height:1.7}
.p-card .p-time{margin-top:auto; padding-top:14px; font-size:.76rem; font-weight:700; color:#BD542A}
@media (max-width:560px){ .p-grid{grid-template-columns:1fr} .p-card{min-height:0} }

/* 고르기(펼치는 방식·유형 고르기) */
.p-choices{margin-top:26px; display:grid; gap:10px}
.p-opts{margin-top:26px; display:grid; gap:10px}
.p-opts .opt{min-height:56px}

/* 타로 카드 */
.p-cards{margin-top:26px; display:grid; gap:14px}
.p-tcard{display:grid; grid-template-columns:92px 1fr; gap:18px; align-items:start; padding:22px; border:1px solid var(--line); border-radius:18px; background:#fff}
.p-face{position:relative; height:138px; border-radius:12px; background:linear-gradient(160deg,#FFB067,#FE705D); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:8px; box-shadow:0 8px 18px rgba(254,112,93,.2)}
.p-face .p-num{font-family:var(--serif); font-size:1.5rem; font-weight:800}
.p-face .p-en{margin-top:6px; font-size:.62rem; letter-spacing:.06em; opacity:.9}
.p-face.rev{transform:rotate(180deg)}
.p-tcard .p-pos{font-size:.76rem; font-weight:800; color:#B4712A}
.p-tcard h3{margin-top:4px; font-family:var(--serif); font-size:1.3rem}
.p-tcard h3 em{font-style:normal; margin-left:6px; font-size:.78rem; font-weight:600; color:#B3A197; font-family:var(--sans)}
.p-tcard .p-kw{margin-top:2px; font-size:.86rem; font-weight:700; color:#C4553F}
.p-tcard .p-tx{margin-top:10px; font-size:.95rem; line-height:1.8; color:var(--sub)}
.p-tcard .p-adv{margin-top:10px; font-size:.9rem; line-height:1.7; color:var(--ink); font-weight:600}
@media (max-width:480px){ .p-tcard{grid-template-columns:68px 1fr; gap:14px; padding:18px} .p-face{height:104px} .p-face .p-num{font-size:1.2rem} .p-face .p-en{font-size:.55rem} }

/* 유형 결과 */
.p-hero{margin-top:30px; padding:30px 26px; border-radius:20px; background:linear-gradient(140deg,#FFF3E6,#FFE6DC); text-align:center}
.p-hero .p-emoji{font-size:3rem; line-height:1}
.p-hero .p-sub{margin-top:12px; font-size:.86rem; font-weight:700; color:#B4712A}
.p-hero h2{margin-top:6px; font-size:1.9rem}
.p-hero .p-line{margin-top:6px; color:var(--sub); font-size:.98rem}
.p-poles{margin-top:16px; display:flex; flex-wrap:wrap; justify-content:center; gap:6px}
.p-poles span{padding:5px 11px; border-radius:999px; background:#fff; color:#BD542A; font-size:.78rem; font-weight:700}
.p-list{margin:10px 0 0 18px; color:var(--sub); font-size:.94rem; line-height:1.85}
.p-pair{margin-top:14px; display:flex; flex-wrap:wrap; gap:8px}
.p-pair a,.p-pair span{display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--ink); text-decoration:none; font-size:.9rem; font-weight:600}
.p-axis{margin-top:16px; padding-top:16px; border-top:1px solid var(--line)}
.p-axis:first-of-type{border-top:0; padding-top:0}
.p-axis .p-ah{display:flex; justify-content:space-between; gap:10px; font-size:.95rem; font-weight:700}
.p-axis .p-ah span{color:#C4553F; white-space:nowrap}
.p-axis .p-who{margin-top:4px; font-size:.8rem; color:#B3A197}
.p-axis p{margin-top:8px; font-size:.92rem; line-height:1.8; color:var(--sub)}

/* 궁합 링크 */
.p-link{margin-top:14px; display:grid; gap:10px}
.p-link input{width:100%; min-height:48px; padding:0 14px; border:1px solid var(--line); border-radius:12px; font-family:var(--sans); font-size:1rem; color:var(--ink); background:#fff}
.p-link input:focus{outline:2px solid var(--grad-b); outline-offset:1px}
.p-invite{margin-top:26px; padding:18px 20px; border-radius:16px; background:#FFF2E8; font-size:.95rem; line-height:1.7}
.p-invite b{color:#C4553F}

/* 사주 입력 */
.p-form{margin-top:28px; display:grid; gap:16px}
.p-form label{display:grid; gap:7px; font-size:.9rem; font-weight:700; color:var(--sub)}
.p-form input,.p-form select{width:100%; min-height:48px; padding:0 12px; border:1px solid var(--line); border-radius:12px; background:#fff; font-family:var(--sans); font-size:1rem; color:var(--ink)}
.p-form input:focus,.p-form select:focus{outline:2px solid var(--grad-b); outline-offset:1px}
.p-row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.p-check{display:flex !important; grid-template-columns:none; align-items:center; gap:10px; min-height:44px; font-weight:600 !important}
.p-check input{width:20px; min-height:0; height:20px}
.p-pillars{margin-top:18px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; text-align:center}
.p-pillar{padding:12px 4px; border:1px solid var(--line); border-radius:14px; background:#fff}
.p-pillar .p-pl{font-size:.72rem; font-weight:700; color:#B3A197}
.p-pillar .p-hj{margin-top:6px; font-family:var(--serif); font-size:1.5rem; font-weight:800; line-height:1.3}
.p-pillar .p-kr{margin-top:2px; font-size:.8rem; color:var(--sub)}
.p-pillar.me{border-color:#F2B98F; background:#FFF8F0}
.p-pillar.none .p-hj{color:#D6C4B6}

/* 놀이터 → 검사 안내 */
.p-next{margin-top:30px; padding:22px; border:1px dashed #E3CFBF; border-radius:16px; background:#FFFAF5}
.p-next h3{font-family:var(--serif); font-size:1.08rem}
.p-next p{margin-top:6px; font-size:.9rem; color:var(--sub); line-height:1.7}
.p-next a{display:inline-flex; align-items:center; min-height:44px; margin-top:8px; color:#C4553F; font-weight:700; text-decoration:none}

.p-again{margin-top:16px; display:grid; gap:10px}

.card .p-tx{margin-top:10px; font-size:.95rem; line-height:1.8; color:var(--sub)}

/* 놀이터 화면에서는 상단 메뉴의 '연애 놀이터' 를 강조한다(exam.css 는 첫 칸을 강조한다). */
.topnav a:first-child:not([aria-current]){background:none; color:var(--ink)}
.topnav a[aria-current="page"]{background:#FFF2E8; color:#B94B21}

/* 타로 상황별 해석 · 사주 덧붙임 */
.p-tcard .p-sit{margin-top:8px; padding:10px 12px; border-radius:10px; background:#FFF8F0; font-size:.88rem; line-height:1.7; color:var(--sub)}
.p-tcard .p-sit b{color:#B4712A; font-weight:700}
.p-keys{margin-top:12px; display:flex; flex-wrap:wrap; justify-content:center; gap:6px}
.p-keys span{padding:5px 11px; border-radius:999px; background:#fff; color:#BD542A; font-size:.8rem; font-weight:700}
.p-qa{margin-top:14px}
.p-qa dt{font-size:.82rem; font-weight:800; color:#B4712A}
.p-qa dd{margin:4px 0 0; font-size:.94rem; line-height:1.8; color:var(--sub)}
.p-qa dd + dt{margin-top:12px}

/* 타로 카드 그림(2026-10-05) — 뒷면에서 앞면으로 뒤집기, 누르면 확대 */
.p-tcard:has(.p-art){grid-template-columns:200px 1fr; gap:22px}
.p-art{display:block; width:200px; aspect-ratio:2/3; padding:0; border:0; background:none; cursor:zoom-in; perspective:1200px}
.p-art:focus-visible{outline:2px solid var(--grad-b); outline-offset:4px; border-radius:14px}
.p-flip{position:relative; display:block; width:100%; height:100%; transform-style:preserve-3d; transition:transform .8s cubic-bezier(.3,.7,.3,1)}
.p-flip.open{transform:rotateY(180deg)}
.p-flip img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:12px; backface-visibility:hidden; -webkit-backface-visibility:hidden; box-shadow:0 10px 24px rgba(189,87,48,.18)}
.p-flip .p-front{transform:rotateY(180deg)}
.p-flip .p-front.rev{transform:rotateY(180deg) rotate(180deg)}
@media (max-width:560px){
  .p-tcard:has(.p-art){grid-template-columns:1fr; justify-items:center; text-align:left}
  .p-tcard:has(.p-art) > div{width:100%}
  .p-art{width:min(240px,66vw)}
}
.p-deck{margin-top:24px; display:flex; justify-content:center; height:150px}
.p-deck img{width:96px; height:144px; object-fit:cover; border-radius:10px; box-shadow:0 8px 18px rgba(189,87,48,.18)}
.p-deck img:nth-child(1){transform:rotate(-10deg) translateX(28px)}
.p-deck img:nth-child(2){position:relative; z-index:1; transform:translateY(-6px)}
.p-deck img:nth-child(3){transform:rotate(10deg) translateX(-28px)}
.p-zoom{border:0; padding:18px; border-radius:18px; background:var(--bg); max-width:min(92vw,460px); text-align:center}
.p-zoom::backdrop{background:rgba(36,26,21,.6)}
.p-zoom img{display:block; width:100%; height:auto; max-height:72vh; object-fit:contain; border-radius:12px}
.p-zoom img.rev{transform:rotate(180deg)}
.p-zoom p{margin-top:10px; font-size:.92rem; color:var(--sub)}
.p-zoom .btn{margin-top:12px; padding:12px 30px}

/* 날씨·사주 그림 — 결과 머리에 */
.p-hero .p-pic{display:block; width:min(220px,60vw); aspect-ratio:1; margin:0 auto; object-fit:cover; border-radius:50%; box-shadow:0 10px 24px rgba(189,87,48,.18)}
.p-pics{display:flex; justify-content:center; gap:12px}
.p-pics .p-pic{width:min(150px,38vw); margin:0}