/* Tokens */
:root{
  --whr-bg:#ffffff;            /* 페이지/카드 배경 */
  --whr-surface:#ffffff;
  --whr-text:#111827;          /* 본문 텍스트 */
  --whr-muted:#6b7280;         /* 보조 텍스트 */
  --whr-line:#e5e7eb;          /* 경계선 */
  --whr-brand:#2563eb;         /* 포인트 블루 */
  --whr-gold:#f59e0b;          /* 별 색상 */
  --whr-radius:12px;
  --whr-max:1000px;
  --whr-t:.18s ease;

  /* 헤더 다크톤 */
  --whnav-bg:#0f172a;
  --whnav-text:#ffffff;
  --whnav-text-muted:#e2e8f0;
}

/* Global */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--whr-bg);
  color:var(--whr-text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Apple SD Gothic Neo,Noto Sans KR,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  line-height:1.65; /* 컴팩트하게 */
}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:3px solid rgba(37,99,235,.28); outline-offset:2px; border-radius:8px}
img{display:block;max-width:100%;height:auto}

/* ===== Header (다크 배경 + 흰색 메뉴) ===== */
.whnav-header{background:var(--whnav-bg); border-bottom:1px solid rgba(255,255,255,.08)}
.whnav-inner{max-width:var(--whr-max);margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between}
.whnav-logo img{display:block;height:36px;width:auto;filter:none}
.whnav-nav{display:block}
.whnav-menu{list-style:none;margin:0;padding:0;display:flex;gap:18px;align-items:center}
.whnav-link{
  display:inline-block;padding:8px 10px;border-radius:8px;
  font-weight:700;color:var(--whnav-text)
}
.whnav-link:hover{background:rgba(255,255,255,.10)}
.whnav-link.is-active{background:rgba(255,255,255,.18)}
.whnav-burger{display:none;appearance:none;border:1px solid rgba(255,255,255,.22);background:transparent;border-radius:10px;padding:8px;cursor:pointer}
.whnav-burger-bar{display:block;width:20px;height:2px;background:#fff;margin:3px 0}
.whnav-main{min-height:1px}

/* Mobile drawer */
@media (max-width:860px){
  .whnav-burger{display:inline-block}
  .whnav-nav{
    position:fixed;right:0;top:0;height:100vh;width:75vw;max-width:340px;
    background:var(--whnav-bg);border-left:1px solid rgba(255,255,255,.12);
    transform:translateX(100%);transition:transform .2s ease;z-index:9999;padding:70px 16px 16px 16px;
    box-shadow:-12px 0 24px rgba(0,0,0,.25);
  }
  .whnav-nav.is-open{transform:translateX(0)}
  .whnav-menu{flex-direction:column;align-items:flex-start;gap:12px}
  .whnav-link{width:100%}
  body.whnav-no-scroll{overflow:hidden}
}

/* ===== Container / Titles ===== */
body .contents{
  max-width:var(--whr-max);
  margin:0 auto;
  padding:18px 16px 26px;  /* 세로 여백 축소 */
  background:var(--whr-surface);
}
.whr-h1{font-size:clamp(22px,2.6vw,30px);margin:0 0 6px;font-weight:900;letter-spacing:-.2px}
.whr-sub{color:var(--whr-text);margin:0 0 18px;font-size:14.5px}

/* ===== List / Card ===== */
.whr-list{display:flex;flex-direction:column;gap:12px} /* 카드 간격 축소 */

.whr-item{
  border:1px solid var(--whr-line);
  border-radius:var(--whr-radius);
  background:#fff;
}
.whr-card{
  display:block; border-radius:inherit; position:relative;
  transition:border-color var(--whr-t), box-shadow var(--whr-t), transform var(--whr-t);
  padding:0; /* 내부 그리드에서 제어 */
}
.whr-card:hover{
  transform:translateY(-1px);
  border-color:#dfe3e8;
  box-shadow:0 6px 18px rgba(17,24,39,.06);
}

/* 내부 그리드: [왼쪽 스크린샷] [오른쪽 텍스트] */
.whr-grid{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap:14px;              /* 컴팩트 간격 */
  padding:12px;          /* 카드 내부 패딩 축소 */
  align-items:start;
}

/* 왼쪽: 스크린샷 */
.whr-left{display:block}
.whr-thumb{
  border:1px solid var(--whr-line);
  border-radius:10px; overflow:hidden;
}
.whr-thumb img{
  width:100%;height:100%;object-fit:cover;aspect-ratio:16/10;
}

/* 오른쪽: 제목+별점 → 혜택 → 설명 → 버튼 */
.whr-right{display:grid;grid-template-rows:auto auto 1fr auto;gap:4px}
.whr-head{
  display:flex;align-items:center;justify-content:space-between;gap:5px;
  margin-top:2px;
}
.whr-title{margin:0;font-size:18px;font-weight:900;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 별점 (제목 오른쪽, 조금 크게) */
.whr-stars{
  position:relative; display:inline-block; line-height:1;
  font-size:18px;  /* 가독성 업 */
  letter-spacing:2px;
  flex:0 0 auto;
}
.whr-stars::before{content:"★★★★★"; color:#d1d5db}
.whr-stars>span{
  position:absolute; left:0; top:0; overflow:hidden;
  width:calc(var(--rate)/5 * 100%);
}
.whr-stars>span::before{content:"★★★★★"; color:var(--whr-gold)}

/* 가입 혜택 칩 — 밝은 회색 배경 + 진파랑 텍스트 + 어울리는 테두리 */
.whr-volume{display:flex;gap:4px;flex-wrap:wrap;margin-top:0px}
.whr-volumebox{
  display:inline-flex;align-items:center;
  font-size:12px;font-weight:800;
  color:#0b3a9b;                       /* 진파랑 텍스트 */
  background:#f5f7fb;                  /* 흰색에 가까운 회색 */
  border:1px solid #d9e2f1;            /* 은은한 파랑계열 테두리 */
  padding:5px 9px;border-radius:999px;
}

/* 설명 */
.whr-desc{margin:0;color:var(--whr-text);font-size:14px}

/* 사이트 바로가기 — 좌우로 넓은 버튼 */
.whr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;              /* 카드 전체가 아니라 글자+여백만 */
  max-width: 300px;         /* 최소 가로 길이 */
  padding: 4px 16px;        /* 세로/가로 여백 줄임 */
  border-radius: 8px;
  border: 1px solid #2a4365;   /* 톤 다운된 네이비 테두리 */
  background: #2c5282;         /* 채도 낮춘 진파랑 배경 */
  color: #fff;                 /* 흰색 글씨 */
  font-weight: 700;
  font-size: 14px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.whr-btn::after {
  content: " ↗";
}
.whr-card:hover .whr-btn {
  background: #2a4365;   /* hover 시 조금 더 어두운 파랑 */
  border-color: #2a4365;
  transform: translateY(-1px);
}

/* 본문(가이드/FAQ) — 컴팩트 */
.whr-content{margin-top:26px;color:#111827}
.whr-content h2{margin:20px 0 8px;font-size:19px;font-weight:900}
.whr-content h3{margin:12px 0 6px;font-size:16px;font-weight:800}
.whr-content p{margin:0 0 10px;color:var(--whr-muted)}
.whr-block{background:#fff;border:1px solid var(--whr-line);border-radius:var(--whr-radius);padding:14px;margin:14px 0}
.whr-note{font-size:13px;color:var(--whr-muted);border-left:3px solid var(--whr-brand);padding-left:8px}

/* Footer */
.whnav-footer{background:#fff;border-top:1px solid var(--whr-line);color:#475569;font-size:14px;margin-top:30px}
.whnav-footer-inner{max-width:var(--whr-max);margin:0 auto;padding:18px 16px;text-align:center}
.whnav-footer-links{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:8px}
.whnav-footer-link{color:#0f172a}
.whnav-footer-link:hover{color:var(--whr-brand)}
.whnav-footer-copy{color:#6b7280}

/* Responsive */
@media (max-width:1024px){
  .whr-grid{grid-template-columns:200px 1fr}
}
@media (max-width:860px){
  .whr-grid{grid-template-columns:1fr;gap:10px}
  .whr-btn {max-width: 800px;}
}
@media (max-width:520px){
  .whr-right{grid-template-rows:auto auto auto auto}
  .whr-title{font-size:17px}
  .whr-stars{font-size:17px}
  .whr-btn {max-width: 800px;}
}