@charset "UTF-8";
/* 일주 마을 동무: 도감(palja/companion), 사주 결과 "나의 동무" 카드(palja/me/_companion_card.php), 성향 테스트 한 줄.
   --cp-main / --cp-soft 는 동무 오행 색을 인라인으로 넘겨받는다. */
.cp-img { display: block; width: 96px; height: 96px; max-width: 100%; object-fit: contain; }
.cp-img--xl { width: min(240px, 62vw); height: auto; aspect-ratio: 1 / 1; margin: 0 auto; }
.cp-img--md { width: 88px; height: 88px; }
.cp-img--sm { width: 72px; height: 72px; flex: none; }
.cp-img--xs { width: 48px; height: 48px; flex: none; }

/* 도감 위 */
.cp-top { text-align: center; }
.cp-how-d { margin: 4px auto 0; max-width: 560px; text-align: left; }
.cp-how-d summary { display: flex; align-items: center; justify-content: center; min-height: var(--pm-tap); padding: 0 14px; border-radius: var(--pm-r-pill); background: var(--pm-soft); font-weight: 800; font-size: 14.5px; cursor: pointer; list-style: none; }
.cp-how-d summary::-webkit-details-marker { display: none; }
.cp-how-d summary:focus-visible { outline: 3px solid var(--pm-focus); outline-offset: 2px; }
.cp-how-d[open] summary { margin-bottom: 10px; }
.cp-list { margin: 0 0 6px; padding: 0 0 0 20px; font-size: 15px; line-height: 1.75; }
.cp-list li { margin: 0 0 6px; }

/* 내 동무 / 식구·친구 */
.cp-mine, .cp-others { margin-top: 14px; }
.cp-mine-row { display: flex; align-items: center; gap: 14px; min-height: var(--pm-tap); padding: 10px 12px; border-radius: var(--pm-r-card); background: var(--cp-soft, var(--pm-soft)); color: var(--pm-ink); text-decoration: none; }
.cp-mine-row:focus-visible, .cp-card:focus-visible, .cp-pcard:focus-visible, .cp-ochip:focus-visible { outline: 3px solid var(--pm-focus); outline-offset: 2px; }
.cp-ptxt { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14.5px; line-height: 1.55; }
.cp-ptxt b { font-family: var(--pm-font-head); font-weight: 400; font-size: 20px; overflow-wrap: anywhere; }
.cp-ptxt small { font-size: 13px; color: var(--pm-sub-text); }
.cp-orow { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.cp-ochip { display: flex; align-items: center; gap: 8px; min-height: var(--pm-tap); padding: 6px 14px 6px 8px; border-radius: var(--pm-r-pill); background: var(--cp-soft, var(--pm-soft)); color: var(--pm-ink); text-decoration: none; }
.cp-ochip span { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.cp-ochip b { font-size: 14.5px; overflow-wrap: anywhere; }
.cp-ochip small { font-size: 12.5px; color: var(--pm-sub-text); }

/* 격자 */
.cp-group { margin-top: 22px; }
.cp-gh { display: flex; align-items: center; gap: 8px; margin: 0 2px 10px; font-family: var(--pm-font-head); font-weight: 400; font-size: 24px; color: var(--pm-ink); }
.cp-gh small { font-family: var(--pm-font-body); font-size: 13.5px; color: var(--pm-sub-text); }
.cp-dot { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #43352d; }
.cp-dot--목 { background: #8fcf7e; } .cp-dot--화 { background: #f4846b; } .cp-dot--토 { background: #f2c14e; } .cp-dot--금 { background: #dde2ea; } .cp-dot--수 { background: #7fa3e6; }
.cp-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 560px) { .cp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 820px) { .cp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1100px) { .cp-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.cp-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 44px; padding: 12px 8px 12px; border-radius: var(--pm-r-card); background: linear-gradient(180deg, var(--cp-soft, #fff) 0%, var(--pm-card) 70%); box-shadow: var(--pm-shadow-sm); color: var(--pm-ink); text-align: center; text-decoration: none; transition: transform .15s; }
.cp-card:hover { transform: translateY(-2px); }
.cp-card.is-mine { outline: 3px solid var(--cp-main, var(--pm-fire)); outline-offset: -3px; }
.cp-nm { font-family: var(--pm-font-head); font-weight: 400; font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
.cp-sub { font-size: 12.5px; color: var(--pm-sub-text); line-height: 1.4; }
.cp-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 4px 0 0; padding: 0; }
.cp-tag { display: inline-block; padding: 2px 9px; border-radius: var(--pm-r-pill); background: var(--pm-fire-deep); color: #fff; font-size: 12px; font-weight: 800; line-height: 1.5; overflow-wrap: anywhere; }
.cp-tag--family { background: #6f8fd8; }
.cp-tag--friend { background: #5a9a6a; }

/* 상세 */
.cp-hero { text-align: center; background: linear-gradient(180deg, var(--cp-soft, #fff) 0%, var(--pm-card) 75%); }
.cp-hero-pic { margin: 4px 0 6px; }
.cp-name { margin: 0 0 4px; }
.cp-meta { margin: 0 0 8px; font-size: 14px; color: var(--pm-sub-text); line-height: 1.6; }
.cp-ron { margin: 0 0 8px; font-size: 14.5px; color: var(--pm-sub-text); }
.cp-ron b { color: var(--pm-fire-deep); font-weight: 800; }
.cp-intro { max-width: 520px; margin: 0 auto; font-size: 16px; line-height: 1.8; }
.cp-sec { margin-top: 14px; }
.cp-text { margin: 0 0 8px; font-size: 16px; line-height: 1.8; }
.cp-partners { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 10px; }
@media (min-width: 640px) { .cp-partners { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cp-pcard { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: var(--pm-r-card); background: var(--cp-soft, var(--pm-soft)); color: var(--pm-ink); text-decoration: none; }
.cp-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.cp-rest { text-align: center; }
.cp-rest img { display: block; margin: 8px auto 12px; }

/* 사주 결과 "나의 동무" 카드 */
.cp-card-me { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: center; background: linear-gradient(135deg, var(--cp-soft, #fff) 0%, var(--pm-card) 65%); }
.cp-card-me .cp-img { width: 112px; height: 112px; }
.cp-me-t { min-width: 0; }
.cp-me-name { margin: 0 0 4px; font-family: var(--pm-font-head); font-weight: 400; font-size: 22px; line-height: 1.3; color: var(--pm-fire-deep); overflow-wrap: anywhere; }
.cp-me-intro { margin: 0; font-size: 15px; line-height: 1.7; }
.cp-me-foot { grid-column: 1 / -1; }
.cp-me-note { margin: 8px 0 10px; font-size: 13.5px; line-height: 1.6; color: var(--pm-sub-text); }
.cp-me-acts { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 420px) {
  .cp-card-me { grid-template-columns: 1fr; text-align: center; }
  .cp-card-me .cp-img { margin: 0 auto; }
  .cp-me-acts { justify-content: center; }
}

/* 성향 테스트 결과 교차 한 줄 */
.cp-cross { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; padding: 10px 14px; border-radius: var(--pm-r-card); background: var(--cp-soft, var(--pm-soft)); color: var(--pm-ink); text-decoration: none; min-height: 44px; }
.cp-cross span { font-size: 14.5px; line-height: 1.6; min-width: 0; overflow-wrap: anywhere; }
.cp-cross:focus-visible { outline: 3px solid var(--pm-focus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { .cp-card { transition: none; } .cp-card:hover { transform: none; } }

/* 오늘의 운세 안 동무 한마디(me/_today_view.php) */
.td-cp { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center; background: linear-gradient(135deg, var(--cp-soft, #fff) 0%, var(--pm-card) 70%); }
.td-cp .cp-img { width: 72px; height: 72px; }
.td-cp .pm-reg-h { margin: 0 0 4px; }
.td-cp .pm-reg-h small { font-family: var(--pm-font-body); font-size: 13px; color: var(--pm-sub-text); }
.td-cp-line { margin: 0 0 2px; font-size: 15px; line-height: 1.6; color: var(--pm-ink); overflow-wrap: anywhere; }
.td-cp-a { min-height: 44px; display: inline-flex; align-items: center; padding-left: 0; }