/* =========================================
   Reset & Base
========================================= */
*{ box-sizing:border-box }
html,body{
  margin:0; padding:0;
  font-family:system-ui, Segoe UI, Apple SD Gothic Neo, Malgun Gothic, Arial, sans-serif;
  color:#1b1f24;
}
a{ text-decoration:none; color:inherit }
a:hover{ text-decoration:underline }

/* =========================================
   공통 헤더(UNCLEHOME) — pbti와 동일 좌표/크기, 색만 갈색
========================================= */
.site-header{ max-width:980px; margin:18px auto 0; padding:0 20px }
.nav-brand{ font-weight:900; letter-spacing:.08em; color:var(--brand) }
body.playground .nav-brand{ color:#7d5b43; }

/* =========================================
   Playground Theme
========================================= */
:root{
  --pg-brown:#7d5b43;
  --pg-brown-2:#9b7254;
  --pg-muted:#7a6a5f;
  --pg-panel:#ffffff;
  --pg-border:#eadfd6;
  --pg-shadow:0 14px 36px rgba(125,91,67,.12);
  --pg-shadow-strong:0 20px 40px rgba(125,91,67,.18);

  --brand:#00a884; /* PBTI CTA 포인트 */
}

/* 패턴 없는 은은한 배경 */
body.playground{
  background:
    radial-gradient(900px 420px at 50% -200px, #ffffff, transparent 65%),
    linear-gradient(180deg,#fdfaf6 0%, #faf6f0 100%);
  color:#2b2b2b;
}

/* ===== 래퍼 ===== */
.pg-wrap{ max-width:1120px; margin:26px auto 80px; padding:0 18px }

/* ===== 히어로 ===== */
.pg-hero{ position:relative; text-align:center; margin:30px 0 20px }
.pg-title{
  margin:0;
  font-family:"Jua","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  font-weight:900; font-size:clamp(38px, 6.4vw, 72px);
  letter-spacing:.02em; color:var(--pg-brown);
  text-shadow:0 2px 0 rgba(0,0,0,.04); position:relative;
}
.pg-title::after{
  content:""; position:absolute; left:50%; bottom:-10px; transform:translateX(-50%);
  width:min(360px,60%); height:10px; border-radius:999px;
  background:linear-gradient(90deg,#f7eadc,#fff);
  box-shadow:0 8px 18px rgba(125,91,67,.12) inset;
}
.pg-sub{ margin:18px 0 0; color:var(--pg-muted); font-weight:700; font-size:clamp(14px,2.2vw,18px) }

/* 타이틀 장식 (위/아래) */
.pg-deco{
  position:absolute; left:50%; transform:translateX(-50%);
  font-size:clamp(28px,5.2vw,44px); opacity:.35; user-select:none; pointer-events:none;
}
.pg-deco--top{ top:-6px }
.pg-deco--bottom{ bottom:-8px }
@media (max-width:760px){ .pg-deco{ display:none } }

/* 이후(after) — 모바일도 2×2 유지, 초소형만 1열 폴백 */
.card-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:18px; margin-top:22px;
}
@media (max-width:560px){
  .card-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:12px; /* (선택) 모바일 간격 살짝 축소 */
  }
}
/* 아주 작은 화면(≤360px)만 1열 */
@media (max-width:360px){
  .card-grid{ grid-template-columns:1fr; }
}


/* ===== 카드 ===== */
.tool-card{
  position:relative;
  background:linear-gradient(180deg,#ffffff 0%, #fff9f1 100%);
  border:1px solid var(--pg-border); border-radius:20px;
  box-shadow:var(--pg-shadow);
  padding:18px 14px; display:grid; place-items:center; text-align:center;
  aspect-ratio:1/1; overflow:hidden;
  transition:transform .15s ease, box-shadow .2s ease;
}
.tool-card::before{
  content:""; position:absolute; inset:10px; border-radius:16px;
  border:1px solid rgba(125,91,67,.08); pointer-events:none;
}
.tool-card:hover{ transform:translateY(-4px); box-shadow:var(--pg-shadow-strong) }

/* 리본 */
.tool-ribbon{
  position:absolute; top:12px; right:12px;
  background:linear-gradient(180deg,#fff,#f6efe9);
  border:1px solid #ccb39f; color:#664b39;
  border-radius:999px; padding:6px 10px;
  font-weight:900; font-size:12px; letter-spacing:.08em;
  box-shadow:0 6px 16px rgba(142,108,82,.12);
}
.tool-card--ready .tool-ribbon{ display:none }

/* 아이콘 */
.tool-icon{
  display:grid; place-items:center;
  width:clamp(56px,10vw,68px); height:clamp(56px,10vw,68px);
  margin-top:6px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #ffffff 0 40%, #fff3e6 100%);
  border:1px solid rgba(125,91,67,.15);
  box-shadow:0 8px 16px rgba(125,91,67,.08);
  font-size:clamp(26px,5.2vw,32px);
}

/* 텍스트 */
.tool-title{ margin:10px 0 4px; font-weight:900; font-size:clamp(18px,3.4vw,22px); color:var(--pg-brown) }
.tool-desc{ margin:0 0 14px; color:var(--pg-muted); font-size:clamp(12px,2.6vw,14px) }

/* CTA */
.tool-cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 16px; border-radius:999px; font-weight:900; font-size:14px;
  border:1px solid var(--pg-brown-2); background:#fff; color:var(--pg-brown);
  transition:transform .06s ease, filter .12s ease, box-shadow .12s ease;
  text-decoration:none; box-shadow:0 6px 14px rgba(125,91,67,.10);
}
.tool-cta:hover{ filter:brightness(.98); box-shadow:0 10px 18px rgba(125,91,67,.14) }
.tool-cta:active{ transform:translateY(1px) }
/* 활성(PBTI)만 초록 */
.tool-card--ready .tool-cta{ background:var(--brand); border-color:var(--brand); color:#fff }

/* 준비중 카드 톤다운 */
.tool-card--wip .tool-cta{ border-color:#d6c9bf; color:#a6988c; cursor:not-allowed; background:#fff }

/* 스크롤바 공간 예약(헤더 흔들림 방지) */
html{ scrollbar-gutter:stable both-edges }
body{ overflow-y:scroll }


/* 카드 일러스트 (PBTI 전용 이미지) */
.tool-illust{
  width: clamp(120px, 42%, 200px);
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin: 8px 0 6px;
  filter: drop-shadow(0 8px 16px rgba(125,91,67,.10));
  border-radius: 16px; /* 모서리 살짝 둥글게 (이미지 배경 있을 때도 자연스럽게) */
}



/* ---------------------------------------
   PBTI 카드(이미지 버전)만 살짝 키우고 간격 촘촘하게
   - .tool-illust 가 있는 카드에만 적용됩니다.
---------------------------------------- */

/* 캐릭터 이미지 더 크게 */
.tool-card .tool-illust{
  width: clamp(170px, 58%, 260px);  /* 기존보다 확대 */
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin: 6px 0 4px;                /* 이미지-텍스트 간격 ↓ */
  filter: drop-shadow(0 10px 18px rgba(125,91,67,.12));
  border-radius: 18px;
}

/* 이미지 바로 아래 제목 크게 & 간격 축소 */
.tool-illust + .tool-title{
  font-size: clamp(20px, 3.8vw, 48px);  /* 제목 확대 */
  margin: 1px 0 2px;                    /* 간격 촘촘하게 */
  letter-spacing: .01em;
}

/* 설명도 살짝 키우고 간격 정리 */
.tool-illust + .tool-title + .tool-desc{
  font-size: clamp(13px, 3.2vw, 16.5px);
  margin: 0 0 10px;
  line-height: 1.35;
}

/* 시작하기 버튼도 존재감 있게 */
.tool-card--ready .tool-cta{
  padding: 12px 18px;
  font-size: 15px;
  border-radius: 999px;
  box-shadow: 0 8px 16px rgba(0,168,132,.18);
}

/* 카드 안 여백도 살짝 덜어 촘촘한 느낌 */
.tool-card.tool-card--ready{
  padding-top: 14px; /* 기본 18px에서 ↓ */
}

/* 아주 작은 화면에서 이미지 더 확보 */
@media (max-width: 560px){
  .tool-card .tool-illust{
    width: clamp(150px, 64vw, 240px);
    margin-bottom: 2px;
  }
}

/* ===== PBTI 카드 전용 튜닝 ===== */
.tool-card--pbti { 
  padding-top: 10px;               /* 카드 상단 여백 ↓ */
}

/* 이미지 더 크게 + 간격 촘촘 */
.tool-card--pbti .tool-illust{
  width: clamp(220px, 62%, 320px); /* 이미지 확대 */
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin: 2px 0 6px;               /* 이미지-제목 간격 ↓ */
  filter: drop-shadow(0 12px 20px rgba(125,91,67,.12));
  border-radius: 18px;
}

/* 제목: "PBTI TEST" 크게, 살짝 위로 */
.tool-card--pbti .tool-title{
  font-size: clamp(26px, 5vw, 56px);
  margin: 0 0 4px;
  letter-spacing: .02em;
  transform: translateY(-2px);
}

/* 설명: 글씨 살짝 키우고 간격 정리 */
.tool-card--pbti .tool-desc{
  font-size: clamp(14px, 3vw, 18px);
  margin: 0 0 10px;
  line-height: 1.35;
  transform: translateY(-2px);     /* 조금 더 위로 */
}

/* 버튼: 더 큼직하게 + 약간 위로 */
.tool-card--pbti .tool-cta{
  padding: 14px 24px;
  font-size: 16px;
  margin-top: 6px;
  border-radius: 999px;
  box-shadow: 0 10px 18px rgba(0,168,132,.18);
  transform: translateY(-2px);
}

/* 모바일에서 비율 유지하며 살짝 더 크게 */
@media (max-width: 560px){
  .tool-card--pbti .tool-illust{ width: clamp(180px, 64vw, 300px); margin-bottom: 4px; }
  .tool-card--pbti .tool-title{ font-size: clamp(24px, 7vw, 48px); }
  .tool-card--pbti .tool-cta{ padding: 13px 22px; font-size: 15.5px; }
}

/* PBTI 카드: 텍스트(제목/설명/버튼)만 위로 살짝 당기기 */
.tool-card--pbti .tool-title,
.tool-card--pbti .tool-desc,
.tool-card--pbti .tool-cta{
  transform: translateY(-8px);   /* 필요시 -6px ~ -12px로 조절 */
}

/* 모바일에서는 조금만 올림 */
@media (max-width:560px){
  .tool-card--pbti .tool-title,
  .tool-card--pbti .tool-desc,
  .tool-card--pbti .tool-cta{
    transform: translateY(-6px);
  }
}

/*(선택) 글자 간 간격도 살짝 더 촘촘하게 */
.tool-card--pbti .tool-title{ margin-bottom: 2px; }
.tool-card--pbti .tool-desc{  margin-bottom: 8px; }



/* === PBTI 카드 텍스트 간격 타이트하게 & 위로 살짝 끌어올리기 === */

/* 일러스트 아래 여백 줄이기 */
.tool-card--ready .tool-illust{
  margin-bottom: 0;               /* 6px → 0 */
}

/* 제목을 조금 위로 끌어올리고(=음수 마진) 아래 여백도 최소화 */
.tool-card--ready .tool-illust + .tool-title{
  margin-top: -8px;               /* 이미지와 더 붙게 */
  margin-bottom: 0;               /* 제목-설명 사이 간격 축소 */
}

/* 설명도 위아래 간격 축소 */
.tool-card--ready .tool-illust + .tool-title + .tool-desc{
  margin-top: 2px;                /* 제목 바로 아래로 */
  margin-bottom: 6px;             /* 버튼과도 가까이 */
  font-size: clamp(13.5px, 3vw, 17px); /* 살짝 키움(선택) */
}

/* 버튼을 더 위로 끌어올리고(간격 ↓) 버튼 존재감 유지 */
.tool-card--ready .tool-illust + .tool-title + .tool-desc + .tool-cta{
  margin-top: 8px;                /* 기존보다 촘촘하게 */
  padding: 12px 20px;             /* 약간 키움(선택) */
}

/* 화면이 아주 작을 때는 너무 붙지 않도록 미세 완충 */
@media (max-width: 560px){
  .tool-card--ready .tool-illust + .tool-title{ margin-top: -6px; }
  .tool-card--ready .tool-illust + .tool-title + .tool-desc{ margin-bottom: 8px; }
}



/* 1) 준비중 CTA(aria-disabled=true)가 있으면, 원래 초록 버튼은 숨김 */
.tool-card .tool-cta[aria-disabled="true"]{
  display: none !important;
}

/* 2) 준비중 카드(= 비활성) 배경/테두리/톤 다운  ─ :has() 사용 */
.tool-card:has(.tool-cta[aria-disabled="true"]){
  --wip1:#f6f6f7;                /* 은은한 회색 그라데이션 */
  --wip2:#f2f1f0;
  background: linear-gradient(180deg,var(--wip1),var(--wip2));
  border-color:#e8e5e2;
  position: relative;
}
.tool-card:has(.tool-cta[aria-disabled="true"])::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  background: rgba(0,0,0,.035);  /* 살짝 흐림막 */
  pointer-events:none;
}
.tool-card:has(.tool-cta[aria-disabled="true"]) .tool-illust{
  filter: saturate(.85) opacity(.93) drop-shadow(0 8px 14px rgba(0,0,0,.06));
}
.tool-card:has(.tool-cta[aria-disabled="true"]) .tool-title,
.tool-card:has(.tool-cta[aria-disabled="true"]) .tool-desc{
  opacity:.92;
}

/* 3) ‘준비중 입니다.’ 칩을 설명 아래에 자동 생성 (HTML 수정 불필요) */
.tool-card:has(.tool-cta[aria-disabled="true"]) .tool-desc::after{
  content:"준비중 입니다.";
  display:inline-block;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .02em;
  color: rgba(34,34,34,.45);
  background: rgba(0,0,0,.05);
}
@media (max-width:560px){
  .tool-card:has(.tool-cta[aria-disabled="true"]) .tool-desc::after{
    margin-top:8px; font-size:13.5px;
  }
}





/* 전역(데스크톱/태블릿) — 원래대로 유지 */
.tool-card--pbti .tool-illust{
  width: clamp(220px, 62%, 320px);
}

/* 모바일 전용(≤560px) — 여기만 축소/보정 */
@media (max-width:560px){
  .card-grid{ gap:12px; }

  .tool-card .tool-illust{
    width: min(64%, 150px);
    margin: 4px 0 2px;
  }
  .tool-card--pbti .tool-illust{
    width: min(64%, 160px) !important;
  }

  .tool-illust + .tool-title{
    font-size: clamp(18px, 4.6vw, 26px);
    margin-top: 0;
  }
  .tool-illust + .tool-title + .tool-desc{
    font-size: 13.5px;
    margin: 2px 0 6px;
  }
  .tool-card .tool-cta{
    padding: 10px 14px;
    font-size: 14px;
  }


}

  /* 카드 전체 클릭 오버레이 */
.card-hit{
  position:absolute; inset:0; z-index:5;
  border-radius:inherit;
  /* 시각적 요소는 없지만 접근성 위해 aria-label 사용 */
}
.tool-card--wip .card-hit{ display:none; } /* 준비중 카드엔 클릭 막기(안넣으면 자동 무시) */


/* --- 캡처 전용 영역을 뷰포트 제약에서 분리 --- */
#captureRoot{
  position:absolute;           /* 화면에서 보이지 않아도 DOM 안에만 있으면 됨 */
  left:-99999px; top:0;        /* display:none 쓰면 렌더가 안 되므로 금지 */
  visibility:hidden;
}
#captureRoot, #captureCard{
  background:#fff;
  overflow:visible !important; /* 내부가 잘리지 않도록 */
}
#captureCard{
  width:1080px;                /* 저장 결과 해상도 기준 (원하면 조절) */
  /* height:auto;  // 자동 높이 */
  /* transform / filter 같은 게 있으면 캡처가 잘릴 수 있어 미리 제거 */
  transform:none !important;
  filter:none !important;
}



/* 준비중 버튼은 숨김(예: HTML에 span.tool-cta[aria-disabled=true]) */
.tool-card .tool-cta[aria-disabled="true"]{ display:none !important; }

/* 이전에 설명 아래 "준비중 입니다." 칩을 만든 규칙이 있었다면 끄기 */
.tool-card:has(.tool-cta[aria-disabled="true"]) .tool-desc::after{
  content:none !important;
}

/* 준비중 카드: 중앙 오버레이 */
.tool-card:has(.tool-cta[aria-disabled="true"]){
  position:relative;
}

/* 흐림막(살짝 밝은 회색 톤) */
.tool-card:has(.tool-cta[aria-disabled="true"])::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  background:rgba(255,255,255,.78);         /* 밝은 오버레이 */
  backdrop-filter:saturate(.8) blur(.5px);  /* 은은한 톤다운(지원 브라우저) */
  z-index:3;
}

/* 중앙 텍스트 */
.tool-card:has(.tool-cta[aria-disabled="true"])::after{
  content:"준비중입니다";
  position:absolute; left:50%; top:50%;
  transform:translate(-50%, -50%);
  z-index:4;

  font-weight:900;
  letter-spacing:.02em;
  color:#5d5248;                            /* 약간 진한 회색 */
  font-size:clamp(16px, 4.8vw, 26px);       /* 모바일~PC 자동 크기 */
  padding:10px 16px;
  border-radius:12px;
  background:rgba(255,255,255,.92);         /* 가독성용 배경 */
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 8px 18px rgba(0,0,0,.06);
}

/* 준비중 카드 안의 요소들은 살짝 톤다운 */
.tool-card:has(.tool-cta[aria-disabled="true"]) .tool-illust{
  filter:saturate(.75) opacity(.9);
}
.tool-card:has(.tool-cta[aria-disabled="true"]) .tool-title,
.tool-card:has(.tool-cta[aria-disabled="true"]) .tool-desc{
  opacity:.9;
}

/* 모바일에서 텍스트 살짝 더 큼 */
@media (max-width:560px){
  .tool-card:has(.tool-cta[aria-disabled="true"])::after{
    font-size:clamp(18px, 6vw, 24px);
    padding:10px 14px;
  }
}

/* (옵션) 카드 전체 클릭 오버레이를 쓰고 있다면, 준비중 카드에선 비활성화 */
.tool-card:has(.tool-cta[aria-disabled="true"]) .card-hit{
  display:none !important;
}

/* (1) 예전에 자동으로 붙던 칩/버튼/리본 완전 제거 */
.tool-card .tool-desc::after { content:none !important; display:none !important; }
.tool-card.is-wip .tool-cta,
.tool-card.is-wip .tool-ribbon,
.tool-card.is-wip .card-hit { display:none !important; } /* 전체 클릭 오버레이도 차단 */

/* (2) 준비중 카드: 살짝 톤다운만, 클릭 불가 */
.tool-card.is-wip{
  position:relative;
  pointer-events:none;
  filter: saturate(.9) brightness(.98); /* 아주 은은하게만 */
}

/* (3) 이전에 깔던 반투명/흰 배경 오버레이가 있었다면 끄기 */
.tool-card.is-wip::before{ content:none !important; display:none !important; }

/* (4) 중앙 한 줄 라벨 — 배경 없음 */
.tool-card.is-wip::after{
  content:"준비중입니다";
  position:absolute; left:50%; top:50%;
  transform: translate(-50%, -50%);
  z-index:10;
  white-space: nowrap;             /* 한 줄 고정 */
  font-weight:900;
  letter-spacing:.02em;
  font-size: clamp(18px, 2.4vw, 28px); /* PC/모바일 반응형 */
  color: rgba(70,55,45,.88);       /* 진한 갈색 텍스트 */
  text-shadow: 0 2px 4px rgba(255,255,255,.65); /* 배경 위 가독성만 살짝 */
}

@media (max-width: 360px){
  .tool-card.is-wip::after{ font-size: 18px; }
}


/* =========================================================
   WIP 카드(준비중) – 깔끔한 한 줄 오버레이
   (기존 하얀 박스/라벨 규칙을 모두 무효화)
========================================================= */

/* 0) 예전 규칙 무효화(겹치면 안 예쁘게 보여요) */
/* ========== 준비중 카드 공통 ========== */
/* 이전에 만들었던 흰색 칩(네모 상자) 제거 안전장치 */
.tool-card--wip .tool-desc::after { content:none !important; }

/* 초록 CTA 숨김 */
.tool-card--wip .tool-cta { display:none !important; }

/* 준비중 카드는 호버 리프트/클릭 비활성화 */
.tool-card--wip { cursor: default; }
.tool-card--wip:hover { transform:none; box-shadow:var(--pg-shadow); }
/* 혹시 전체 클릭 오버레이(card-hit)를 쓰는 경우, 준비중에는 막기 */
.tool-card--wip .card-hit { display:none !important; }

/* 살짝 디밍(배경만 아주 옅게 어둡게) */
.tool-card--wip::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.05));
  pointer-events:none;
  z-index:1;
}

/* 중앙 텍스트 오버레이 */
.tool-card--wip::after{
  content:"준비중입니다";
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  text-align:center;                 /* ← 중앙 정렬 확실히 */
  padding:0 14px;                    /* ← 양옆 여백으로 잘림 방지 */
  box-sizing:border-box;
  z-index:2;

  white-space:nowrap;                /* ← 한 줄 고정 */
  word-break:keep-all;
  line-height:1.08;
  font-weight:900;
  letter-spacing:-.01em;

  color:rgba(49,38,32,.68);
  text-shadow:0 1px 0 rgba(255,255,255,.58);
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  pointer-events:none;
}

/* 폰트 크기(모바일/데스크톱) */
@media (max-width:560px){
  .tool-card--wip::after{ font-size:clamp(14px, 4.4vw, 18px); }
}
@media (min-width:561px){
  .tool-card--wip::after{ font-size:clamp(18px, 1.8vw, 24px); }
}