/* ─────────────────────────────────────────────────────────────
 * mobile.css — 2026-08-25(20차 개정27) 신설.
 *
 * 대표님 지시: "사이트를 모바일 버전으로 만들자 / 운명공학 사이트를
 * 벤치마킹해서 인터페이스와 메인페이지 구조를 똑같이".
 *
 * 벤치마크에서 가져온 것은 **구조와 조작감**이다(문구·상품명은 우리 것을
 * 그대로 쓴다):
 *   ① 모바일 앱처럼 아래 고정 탭바로 이동한다
 *   ② 메인이 "인물 히어로 → 오늘 → 띠별 운세 → 상담 과목 타일 → 푸터"로
 *      한 줄기로 흐른다
 *   ③ 상담 과목은 가격 없는 **타일 그리드**로 한눈에 훑게 한다
 *   ④ 띠별 오늘의 운세가 매일 돌아올 이유가 된다
 *
 * 모바일 우선(mobile-first)으로 쓴다 — 기본 규칙이 좁은 화면 기준이고,
 * min-width 미디어쿼리로 넓은 화면을 덧칠한다. 기존 style.css의 다크
 * 팔레트 변수(--ol-dark*)를 그대로 쓰므로 색이 따로 놀지 않는다.
 * ───────────────────────────────────────────────────────────── */

:root {
  --ol-gold: #c9a877;
  --ol-tabbar-h: 3.9rem;
}

/* 하단 탭바가 마지막 내용을 가리지 않도록 — iOS 홈 인디케이터 영역까지 확보.
   이 파일을 부르는 페이지 = 탭바가 있는 페이지라, body에 바로 건다(클래스 불필요). */
@media (max-width: 860px) {
  body { padding-bottom: calc(var(--ol-tabbar-h) + env(safe-area-inset-bottom, 0px)); }
}

/* 모바일에서 가로 스크롤이 절대 생기지 않게 — 긴 표·간지 그리드가 원인이 되기 쉽다. */
html, body { max-width: 100%; overflow-x: hidden; }
img { max-width: 100%; height: auto; }

/* ── 헤더: 모바일에서 좌우 여백을 줄이고 한 줄로 압축 ───────────── */
@media (max-width: 640px) {
  header.site { padding: .7rem .9rem !important; position: sticky; top: 0; z-index: 40;
    backdrop-filter: saturate(140%) blur(8px); background: rgba(20,21,29,.92) !important; }
  header.site .brand { font-size: 1.05rem !important; }
  header.site .brand-sub { font-size: .58rem !important; }
  main.wrap { padding-left: 0 !important; padding-right: 0 !important; }
  .ol-home-in { padding-left: .9rem !important; padding-right: .9rem !important; }
}

/* ── 하단 고정 탭바 (모바일 전용) ───────────────────────────────── */
/* 주의: 항목 클래스는 .ol-tabbar-item 이다. 홈의 카테고리 탭이 이미 .ol-tab 을
   쓰고 있어서(index.php의 .ol-tabs), 같은 이름을 쓰면 그쪽이 같이 망가진다. */
.ol-tabbar { display: none; }
@media (max-width: 860px) {
  .ol-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    height: calc(var(--ol-tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(20,21,29,.97); border-top: 1px solid var(--ol-dark-line);
    backdrop-filter: saturate(140%) blur(10px);
  }
  .ol-tabbar-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .18rem; text-decoration: none; color: var(--ol-dark-muted);
    font-size: .66rem; letter-spacing: -.01em; padding: .35rem 0 .1rem;
    -webkit-tap-highlight-color: transparent;
  }
  .ol-tabbar-ico { font-size: 1.15rem; line-height: 1; }
  .ol-tabbar-item.on { color: var(--ol-gold); }
  .ol-tabbar-item.on .ol-tabbar-ico { transform: translateY(-1px); }
  .ol-tabbar-item:active { background: rgba(255,255,255,.04); }
  /* 탭바의 초상은 원형으로 — 산도깨비 탭 */
  .ol-tabbar-face { width: 1.35rem; height: 1.35rem; border-radius: 50%; object-fit: cover;
    border: 1px solid rgba(201,168,119,.55); }
}

/* ── 히어로: 모바일에서 세로로 세우고 초상을 크게 ───────────────── */
.ol-mhero { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .8rem; padding: 1.6rem 0 1.2rem; }
.ol-mhero-portrait { width: 8.5rem; height: 8.5rem; border-radius: 50%; overflow: hidden; flex: none;
  border: 2px solid rgba(201,168,119,.55); box-shadow: 0 12px 38px rgba(0,0,0,.5);
  background: radial-gradient(circle at 35% 30%, #3a3226, #1c1812); }
.ol-mhero-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ol-mhero-kicker { color: var(--ol-dark-muted); font-size: .74rem; letter-spacing: .14em; margin: 0; }
.ol-mhero-name { font-family: var(--ol-serif); color: var(--ol-dark-ink); font-size: 1.85rem;
  margin: .1rem 0 .2rem; line-height: 1.25; }
.ol-mhero-tag { color: var(--ol-gold); font-size: .84rem; font-weight: 700; margin: 0 0 .3rem; }
.ol-mhero-line { color: var(--ol-dark-ink); font-size: .95rem; line-height: 1.75; margin: 0 0 .5rem; }
/* 히어로 본문은 모바일에서 가로를 꽉 채운다 — 안 그러면 flex 항목이
   shrink-to-fit 되어 '가장 긴 문장' 너비(약 292px)로 좁아지고, 그 안의
   CTA 두 개가 간발의 차로 줄바꿈된다(실측으로 확인). */
.ol-mhero-body { width: 100%; }
.ol-mhero-cta { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; width: 100%; }
.ol-mhero-cta .btn { flex: 1 1 8rem; text-align: center; }

@media (min-width: 861px) {
  .ol-mhero { flex-direction: row; text-align: left; gap: 1.8rem; padding: 2.6rem 0 1.6rem; }
  .ol-mhero-portrait { width: 11rem; height: 11rem; }
  .ol-mhero-body { flex: 1; }
  .ol-mhero-name { font-size: 2.4rem; }
  .ol-mhero-cta { justify-content: flex-start; width: auto; }
  .ol-mhero-cta .btn { flex: 0 0 auto; }
}

/* ── 개정28: 풀블리드 히어로 (대표님이 주신 참고 화면 구조) ──────────
   배경 일러스트를 화면 폭 가득 깔고, 아래로 갈수록 짙어지는 그라데이션 위에
   배지 → 제목 → 부제 → 인용 → 큰 CTA 를 쌓는다. 인물이 가운데 있는 그림이라
   object-fit:cover 로 어느 화면 비율에서도 얼굴이 살아남는다. */
.ol-hero2 { position: relative; margin: 0 -.9rem 1.2rem; overflow: hidden;
  min-height: 30rem; display: flex; align-items: flex-end; }
.ol-hero2-bg { position: absolute; inset: 0; }
.ol-hero2-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
/* 글자가 얹히는 아래쪽을 확실히 눌러 대비를 확보한다(가독성). */
.ol-hero2-bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(20,21,29,.30) 0%, rgba(20,21,29,.10) 28%,
    rgba(20,21,29,.72) 62%, rgba(20,21,29,.96) 88%, var(--ol-dark) 100%); }
.ol-hero2-in { position: relative; z-index: 1; width: 100%; padding: 0 1.1rem 1.4rem; }
.ol-hero2-badges { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 .7rem; }
.ol-hero2-badge { font-size: .72rem; font-weight: 700; padding: .3rem .6rem; border-radius: 999px;
  color: var(--ol-dark-ink); border: 1px solid rgba(255,255,255,.28); background: rgba(20,21,29,.5); }
.ol-hero2-badge.on { color: #2a1e08; border-color: transparent;
  background: linear-gradient(135deg, #e8c274, #c9a877); }
.ol-hero2-title { font-family: var(--ol-serif); color: #fff; font-size: 2.5rem; line-height: 1.1;
  margin: 0 0 .35rem; text-shadow: 0 3px 18px rgba(0,0,0,.6); }
.ol-hero2-sub { color: var(--ol-gold); font-size: .95rem; font-weight: 700; line-height: 1.55; margin: 0 0 .45rem; }
.ol-hero2-quote { color: rgba(255,255,255,.86); font-size: .88rem; line-height: 1.65; margin: 0 0 1rem; }
.ol-hero2-cta { display: block; width: 100%; box-sizing: border-box; text-align: center;
  text-decoration: none; font-size: 1.02rem; font-weight: 800; color: #2a1a04;
  padding: .95rem 1rem; border-radius: .75rem;
  background: linear-gradient(135deg, #f5a524, #e8801f);
  box-shadow: 0 10px 26px rgba(232,128,31,.32); }
.ol-hero2-cta:active { transform: translateY(1px); }

@media (min-width: 861px) {
  .ol-hero2 { margin: 0 0 1.6rem; border-radius: 1rem; min-height: 26rem; }
  .ol-hero2-bg img { object-position: center 20%; }
  .ol-hero2-in { padding: 0 2rem 2rem; max-width: 40rem; }
  .ol-hero2-title { font-size: 3.2rem; }
  .ol-hero2-sub { font-size: 1.08rem; }
  .ol-hero2-quote { font-size: .98rem; }
  .ol-hero2-cta { width: auto; display: inline-block; padding: .95rem 2.2rem; }
}
/* 아주 좁은 기기 — 제목이 두 줄로 넘어가지 않게 한 단계 줄인다. */
@media (max-width: 360px) {
  .ol-hero2 { min-height: 27rem; }
  .ol-hero2-title { font-size: 2.15rem; }
  .ol-hero2-sub { font-size: .88rem; }
  .ol-hero2-quote { font-size: .82rem; }
  .ol-hero2-cta { font-size: .95rem; }
}

/* ── 섹션 제목 (모바일에서 크기를 낮춤) ─────────────────────────── */
.ol-msec { margin: 1.9rem 0 .8rem; display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.ol-msec h2 { font-family: var(--ol-serif); color: var(--ol-dark-ink); font-size: 1.12rem; margin: 0; }
.ol-msec a { color: var(--ol-gold); font-size: .78rem; text-decoration: none; flex: none; }
.ol-msec-sub { color: var(--ol-dark-muted); font-size: .78rem; margin: -.4rem 0 .8rem; line-height: 1.6; }

/* ── 띠별 오늘의 운세 — 가로 스크롤 스트립(메인) ────────────────── */
.ol-zodstrip { display: flex; gap: .55rem; overflow-x: auto; padding: .1rem .1rem .5rem;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.ol-zodstrip::-webkit-scrollbar { height: 0; }
.ol-zodchip { flex: 0 0 auto; scroll-snap-align: start; width: 4.3rem;
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  padding: .6rem .3rem .55rem; border-radius: .8rem; text-decoration: none;
  background: var(--ol-dark-card); border: 1px solid var(--ol-dark-line); }
.ol-zodchip .e { font-size: 1.45rem; line-height: 1; }
.ol-zodchip .n { color: var(--ol-dark-ink); font-size: .72rem; font-weight: 600; }
.ol-zodchip .t { color: var(--ol-dark-muted); font-size: .6rem; text-align: center; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.ol-zodchip.g5 { border-color: rgba(201,168,119,.55); background: linear-gradient(160deg, rgba(201,168,119,.14), var(--ol-dark-card) 60%); }
.ol-zodchip.g1 { border-color: rgba(224,112,79,.42); }

/* ── 띠별 운세 전용 페이지 ──────────────────────────────────────── */
.ol-crumb { color: var(--ol-dark-muted); font-size: .76rem; padding: 1rem 0 .2rem; }
.ol-crumb a { color: var(--ol-dark-muted); text-decoration: none; }
.ol-crumb span { margin: 0 .3rem; opacity: .6; }
.ol-zod-head { padding: .4rem 0 1rem; }
.ol-zod-date { color: var(--ol-gold); font-size: .76rem; margin: 0 0 .3rem; letter-spacing: .04em; }
.ol-zod-h1 { font-family: var(--ol-serif); color: var(--ol-dark-ink); font-size: 1.6rem; margin: 0 0 .5rem; }
.ol-zod-note { color: var(--ol-dark-muted); font-size: .78rem; line-height: 1.7; margin: 0; }
.ol-zod-note b { color: var(--ol-dark-ink); }

.ol-zod-solo { border: 1px solid var(--ol-dark-line); border-radius: 1rem; padding: 1.4rem 1.2rem;
  background: var(--ol-dark-card); text-align: center; margin: .4rem 0 1.4rem; }
.ol-zod-solo.g5 { border-color: rgba(201,168,119,.55);
  background: linear-gradient(160deg, rgba(201,168,119,.13), var(--ol-dark-card) 60%); }
.ol-zod-solo.g1 { border-color: rgba(224,112,79,.45); }
.ol-zod-solo-emoji { font-size: 3.2rem; line-height: 1; margin-bottom: .3rem; }
.ol-zod-solo-rel { color: var(--ol-gold); font-size: .74rem; font-weight: 700; letter-spacing: .04em; margin: 0 0 .25rem; }
.ol-zod-solo-t { font-family: var(--ol-serif); color: var(--ol-dark-ink); font-size: 1.35rem; margin: 0 0 .6rem; }
.ol-zod-solo-b { color: var(--ol-dark-ink); font-size: .93rem; line-height: 1.8; margin: 0 0 .8rem; }
.ol-zod-solo-tags { color: var(--ol-gold); font-size: .76rem; margin: 0 0 .7rem; }
.ol-zod-solo-years { color: var(--ol-dark-muted); font-size: .72rem; line-height: 1.6; margin: 0 0 1rem; }
.ol-zod-cta { width: 100%; }
.ol-zod-other { font-family: var(--ol-serif); color: var(--ol-dark-ink); font-size: 1rem; margin: 1.2rem 0 .7rem; }

.ol-zod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
@media (min-width: 561px) { .ol-zod-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 861px) { .ol-zod-grid { grid-template-columns: repeat(6, 1fr); gap: .7rem; } }
.ol-zod-card { display: flex; flex-direction: column; align-items: center; gap: .22rem;
  padding: .85rem .4rem .8rem; border-radius: .85rem; text-decoration: none;
  background: var(--ol-dark-card); border: 1px solid var(--ol-dark-line); }
.ol-zod-card:active { transform: scale(.97); }
.ol-zod-card.g5 { border-color: rgba(201,168,119,.5); background: linear-gradient(160deg, rgba(201,168,119,.12), var(--ol-dark-card) 60%); }
.ol-zod-card.g1 { border-color: rgba(224,112,79,.4); }
.ol-zod-emoji { font-size: 1.7rem; line-height: 1; }
.ol-zod-name { color: var(--ol-dark-ink); font-size: .78rem; font-weight: 700; }
.ol-zod-title { color: var(--ol-dark-muted); font-size: .64rem; text-align: center; line-height: 1.35; }
.ol-zod-foot { color: var(--ol-dark-muted); font-size: .76rem; line-height: 1.7; margin: 1.6rem 0 .5rem; }
.ol-zod-foot a { color: var(--ol-gold); }

/* ── 상담 과목 타일 그리드 (벤치마크의 서비스 그리드 구조) ───────── */
.ol-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
@media (min-width: 561px) { .ol-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 861px) { .ol-tiles { grid-template-columns: repeat(4, 1fr); gap: .8rem; } }
.ol-tile { position: relative; display: flex; flex-direction: column; gap: .3rem;
  padding: .95rem .85rem 1rem; border-radius: .9rem; text-decoration: none; min-height: 6.2rem;
  background: var(--ol-dark-card); border: 1px solid var(--ol-dark-line); overflow: hidden; }
.ol-tile:active { transform: scale(.985); }
.ol-tile-cat { color: var(--ol-gold); font-size: .64rem; font-weight: 700; letter-spacing: .05em; }
.ol-tile-name { font-family: var(--ol-serif); color: var(--ol-dark-ink); font-size: .98rem; line-height: 1.35; }
.ol-tile-lead { color: var(--ol-dark-muted); font-size: .7rem; line-height: 1.5; margin-top: auto;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ol-tile-flag { position: absolute; top: .55rem; right: .55rem; font-size: .58rem; font-weight: 800;
  padding: .15rem .4rem; border-radius: .3rem; color: #14151d; }
.ol-tile.feature { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: .9rem;
  border-color: rgba(201,168,119,.5);
  background: linear-gradient(140deg, rgba(201,168,119,.14), var(--ol-dark-card) 55%); }
.ol-tile.feature .ol-tile-body { flex: 1; display: flex; flex-direction: column; gap: .25rem; }
.ol-tile.feature .ol-tile-name { font-size: 1.15rem; }
.ol-tile.feature .ol-tile-lead { -webkit-line-clamp: 2; font-size: .76rem; }
.ol-tile-face { width: 3.4rem; height: 3.4rem; border-radius: 50%; object-fit: cover; flex: none;
  border: 1px solid rgba(201,168,119,.5); }

/* ── 오늘의 한마디 (모바일 여백 조정) ──────────────────────────── */
@media (max-width: 640px) {
  .ol-today { padding: .95rem 1rem !important; border-radius: .85rem !important; }
  .ol-today-say { font-size: .95rem !important; line-height: 1.75 !important; }
}

/* ── 보는 법 스트립 ────────────────────────────────────────────── */
.ol-mmethod { display: flex; flex-direction: column; gap: .6rem; border: 1px solid var(--ol-dark-line);
  border-radius: .9rem; padding: 1rem 1.1rem; background: var(--ol-dark-card); margin: 1.4rem 0 .4rem; }
.ol-mmethod h3 { font-family: var(--ol-serif); color: var(--ol-dark-ink); margin: 0; font-size: 1rem; }
.ol-mmethod p { color: var(--ol-dark-muted); font-size: .8rem; margin: 0; line-height: 1.65; }
.ol-mmethod .btn { align-self: flex-start; }

/* ── 개정29: 포스터형 상품 카드 (대표님이 주신 참고 화면 구조) ────────
   큰 세로 이미지가 카드를 채우고, 우상단 뱃지, 이미지 아래 그라데이션 위에
   상품명, 그 밑에 금색 한 줄 소개 + 실제 근거 있는 메타(카테고리·무료).
   담는 그릇은 둘 — .ol-pgrid(줄바꿈 그리드) / .ol-prow(가로 스크롤). */
/* 2026-08-27(개정64): 대표님 지적 — "큰 이미지 카드(그리드)를 골랐는데
   캐러셀과 똑같이 보인다." 버그가 아니라 설계 문제였다. 두 레이아웃의 카드
   크기가 같아서(PC 4열 vs flex-basis 25%) **상품이 4개 이하면 구분이 안 됐다.**
   지금 모든 섹션이 2~4개뿐이라 늘 같아 보였던 것이다.
   → 그리드를 이름값 하게 실제로 크게 만든다. 캐러셀보다 한 단계씩 적은 열 수로.
   그러면 4개짜리 섹션도 캐러셀은 4장 한 줄, 그리드는 3장+1장으로 확실히 갈린다. */
.ol-pgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
@media (min-width: 561px) { .ol-pgrid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }
@media (min-width: 861px) { .ol-pgrid { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } }
/* 카드가 적은 섹션(2개 이하)은 3열 중 한 칸이 비어 허전해진다.
   auto-fit이 아니라 개수에 맞춰 열을 줄여 카드를 더 키운다.
   :has()를 못 쓰는 옛 브라우저에서는 위 3열 규칙이 그대로 적용된다(무해). */
@media (min-width: 861px) {
  .ol-pgrid:has(> :nth-child(2)):not(:has(> :nth-child(3))) { grid-template-columns: repeat(2, 1fr); }
  .ol-pgrid:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 22rem); }
}
/* 개정65: 가로 4:3 카드는 세로 3:4보다 훨씬 넓다. 열 수를 그대로 두면
   카드가 납작하게 눌려 그림이 안 보인다. 한 단계씩 더 줄인다. */
.ol-pgrid:has(.ol-pcard.wide) { grid-template-columns: 1fr; }
@media (min-width: 561px) { .ol-pgrid:has(.ol-pcard.wide) { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 861px) {
  .ol-pgrid:has(.ol-pcard.wide) { grid-template-columns: repeat(2, 1fr); }
  .ol-pgrid:has(.ol-pcard.wide):not(:has(> :nth-child(3))) { grid-template-columns: repeat(2, 1fr); }
}

.ol-prow { display: flex; gap: .7rem; overflow-x: auto; padding: .1rem .1rem .8rem;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ol-prow::-webkit-scrollbar { display: none; }
.ol-prow .ol-pcard { flex: 0 0 calc(50% - .35rem); scroll-snap-align: start; }
@media (min-width: 561px) { .ol-prow .ol-pcard { flex-basis: calc(33.333% - .6rem); } }
@media (min-width: 861px) { .ol-prow .ol-pcard { flex-basis: calc(25% - .75rem); } }

.ol-pcard { display: block; text-decoration: none; color: inherit; }
.ol-pcard.dim { opacity: .55; }
/* 2026-08-27(개정65): 그리드 카드는 가로 4:3 상품설명 이미지를 쓴다.
   세로 썸네일을 가로 틀에 늘리면 인물이 잘리거나 뭉개진다 — 틀에 맞는
   그림을 쓰는 것이 맞다. 캐러셀은 종전대로 세로 3:4 포스터. */
.ol-pcard.wide .ol-pcard-img { aspect-ratio: 4/3; }
.ol-pcard-img { position: relative; aspect-ratio: 3/4; border-radius: .85rem; overflow: hidden;
  background: #23242e; display: flex; align-items: flex-end;
  border: 1px solid var(--ol-dark-line); }
/* 뒤: 같은 그림을 크게·흐리게 깔아 빈 곳을 메운다(자르지 않기 위한 배경).
   앞: 원본을 contain으로 통째로 — 글자가 박힌 가로 배너도 안 잘린다. */
.ol-pcard-blur { position: absolute; inset: -12%; background: center/cover no-repeat;
  filter: blur(16px) saturate(.75) brightness(.5); }
.ol-pcard-photo { position: absolute; inset: 0; background: center/contain no-repeat; }
/* 2026-08-26(개정38): 상품만들기에서 등록한 전용 3:4 썸네일(thumb_image)이 있으면
   원본 크기·비율을 무시하고 포스터 틀 안쪽에 꽉 채운다(cover) — 블러 배경 불필요. */
.ol-pcard-photo.fill { background: center/cover no-repeat; }
/* 제목이 얹히는 아래쪽을 눌러 어떤 그림에서도 글자가 읽히게 한다. */
.ol-pcard-img::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 42%, rgba(0,0,0,.55) 68%, rgba(0,0,0,.88) 100%); }
.ol-pcard-flag { position: absolute; top: .5rem; right: .5rem; z-index: 2;
  font-size: .6rem; font-weight: 800; letter-spacing: .04em; color: #fff;
  padding: .25rem .55rem; border-radius: 999px;
  background: rgba(20,21,29,.82); border: 1px solid rgba(255,255,255,.22); }
.ol-pcard-name { position: relative; z-index: 1; width: 100%; box-sizing: border-box;
  padding: .7rem .7rem .75rem; font-family: var(--ol-serif); font-weight: 700;
  font-size: .95rem; line-height: 1.3; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.75);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ol-pcard-meta { padding: .45rem .15rem 0; }
.ol-pcard-lead { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden; color: var(--ol-gold); font-size: .74rem; font-weight: 600; line-height: 1.45; }
.ol-pcard-tag { display: block; color: var(--ol-dark-muted); font-size: .68rem; margin-top: .2rem; }
.ol-pcard-tag b { color: #7fb98d; font-weight: 800; }
.ol-pcard:active .ol-pcard-img { transform: scale(.985); }

@media (min-width: 861px) {
  .ol-pcard-name { font-size: 1.05rem; padding: .85rem .85rem .9rem; }
  .ol-pcard-lead { font-size: .8rem; }
  .ol-pcard-tag { font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) { .ol-pcard:active .ol-pcard-img { transform: none; } }

/* ── 터치 타깃 최소 크기 보장 (접근성) ─────────────────────────── */
@media (max-width: 860px) {
  .btn, .ol-tabbar-item, .ol-zod-card, .ol-zodchip, .ol-tile, .ol-pcard { min-height: 2.75rem; }
  .btn { padding: .75rem .85rem !important; font-size: .9rem !important; }
  /* 히어로 CTA 두 개는 한 줄에 나란히 서야 한다 — 좌우 여백을 더 줄여
     '산도깨비에게 묻기' 같은 라벨이 두 줄로 접히지 않게 한다. */
  .ol-mhero-cta .btn { padding-left: .6rem !important; padding-right: .6rem !important;
    font-size: .86rem !important; }
}

/* 아주 좁은 기기(iPhone SE 320px 등)에서는 히어로 CTA 글자를 한 단계 줄여
   '산도깨비는 누구인가'가 두 줄로 접히지 않게 한다(320px 실측 기준). */
@media (max-width: 360px) {
  .ol-mhero-cta .btn { font-size: .78rem !important;
    padding-left: .45rem !important; padding-right: .45rem !important; }
}

/* 모션을 줄이겠다고 설정한 사용자에게는 눌림 애니메이션을 끈다. */
@media (prefers-reduced-motion: reduce) {
  .ol-tile:active, .ol-zod-card:active { transform: none; }
}