/* ==================================================================
   TARO-BUILD-19 — 홈 가격 섹션 제거 + 가격 전용 페이지
   style.css 는 다른 세션이 만지므로 새 규칙은 이 파일에 둔다.
   index.html 에서 build18.css 다음(마지막)에 링크한다.
   ================================================================== */

/* ---------- 헤더 "프리미엄" 링크 (§3) ---------- */
.topbar-premium{
  font-size:11px;letter-spacing:.02em;
  color:var(--gold-soft);text-decoration:none;
  padding:4px 8px;border-radius:999px;
  border:1px solid rgba(216,184,120,.28);
  white-space:nowrap;flex:0 0 auto;
}
.topbar-premium:hover{color:var(--ink);border-color:rgba(216,184,120,.6);background:rgba(216,184,120,.08)}
.topbar-premium:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px}

/* ---------- 잔량 줄 (가격 아님, 유지) ---------- */
.quota-line{
  margin:0;padding:6px clamp(12px,4vw,22px) 0;
  font-size:11px;line-height:1.4;letter-spacing:.03em;
  color:#8a8378;text-align:center;
}
.quota-line[hidden]{display:none}

/* ---------- 가격 페이지 (§2) ---------- */
#screen-pricing{
  max-width:720px;margin:0 auto;
  padding:clamp(18px,4vw,40px) clamp(16px,4vw,24px) 56px;
}
#screen-pricing .pricing-title{
  font-family:var(--font-title);font-weight:400;
  font-size:clamp(21px,5vw,30px);line-height:1.2;
  margin:0 0 10px;color:var(--ink);
}
#screen-pricing .pricing-sub{
  margin:0 0 26px;font-size:14px;line-height:1.65;color:var(--ink-dim);
}
#screen-pricing .plans{
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;margin:0 0 26px;
}
#screen-pricing .plan{padding:18px 16px;text-align:start}
#screen-pricing .plan .plan-kind{
  display:inline-block;margin-top:10px;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:#6f6a62;font-style:normal;
}
#screen-pricing .pricing-refund,
#screen-pricing .pricing-note{
  margin:0 0 12px;font-size:12.5px;line-height:1.7;color:var(--ink-dim);
}
#screen-pricing .pricing-refund{border-top:1px solid var(--line);padding-top:20px}
#screen-pricing .pricing-back{
  display:inline-block;margin-top:14px;
  font-size:13px;color:var(--gold-soft);text-decoration:none;
  border-bottom:1px solid rgba(216,184,120,.3);padding-bottom:2px;
}
#screen-pricing .pricing-back:hover{color:var(--ink)}

/* ---------- 결제 유도 지점의 가격 한 줄 (§4) ---------- */
.ask-price{
  margin:6px 0 2px;width:100%;
  font-size:12.5px;line-height:1.5;color:var(--gold-soft);
}

/* 360px: 상단바 한 줄 유지 — 프리미엄 링크를 조금 줄인다 */
@media (max-width:400px){
  .topbar-premium{font-size:10.5px;padding:3px 7px}
}

/* ==================================================================
   BUILD-19 후속 (2026-11-14 23:40 대표님 3차 지적)
   "구분선 위아래로 스페이스를 둬라. '이 카드 해설 보기'가 누르기 힘들다."
   BUILD-18 §7-c 가 body.daily-open 의 여백을 10px/6px 로 눌러 두어
   앞서 넣은 비례 여백이 무효화되고 있었다. 여기서 마지막으로 덮는다.
   (이 파일이 index.html 에서 가장 마지막에 로드된다)
   ================================================================== */
body.daily-open .daily-copy{
  gap:var(--g1);
  padding-bottom:34px;   /* 구분선(10px) 위로 24px 여유 */
  margin-bottom:26px;    /* 구분선 아래로 26px 여유 */
}
body.daily-open .hero-title{margin-top:24px}

/* '이 카드 해설 보기' — 손가락으로 누를 수 있는 높이(44px)와 좌우 여백 */
.daily-read{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:10px 14px;margin:10px 0 4px;
  border-radius:10px;border:1px solid rgba(216,184,120,.35);
  background:rgba(216,184,120,.07);
}
.daily-read:hover{background:rgba(216,184,120,.14);text-decoration:none}

/* 낮은 화면(≤700px)만 기존 합격 기준(첫 화면 버튼 노출)을 지키기 위해 덜 벌린다 */
@media (max-height:700px){
  body.daily-open .daily-copy{padding-bottom:20px;margin-bottom:14px}
  body.daily-open .hero-title{margin-top:12px}
  .daily-read{min-height:40px;padding:8px 12px;margin:8px 0 2px}
}

/* ==================================================================
   상단바 여유 (2026-11-14 23:45 대표님 지적)
   "헤더가 단청 테두리와 겹친다. 클릭하기 힘들다."
   BUILD-18 이 상단바 패딩을 6px 로 줄이면서 16px 단청 띠(topbar::after)가
   버튼 아래쪽을 덮고 있었다. 띠 높이만큼 아래 여백을 확보하고,
   컨트롤은 최소 36px 터치 높이를 준다.
   ================================================================== */
.topbar{
  padding-top:10px;
  padding-bottom:26px;   /* 단청 띠 16px + 여유 10px */
  gap:10px;
}
.topbar::after{height:14px;opacity:.5}

.topbar-premium,
.account-btn,
.lang-picker select{
  min-height:36px;
  display:inline-flex;
  align-items:center;
}
.account-btn.subtle{padding-left:8px;padding-right:8px}

/* 낮은 화면(≤700px)은 첫 화면 기준을 지키기 위해 조금만 줄인다 */
@media (max-height:700px){
  .topbar{padding-top:8px;padding-bottom:22px}
  .topbar-premium,.account-btn,.lang-picker select{min-height:32px}
}

/* ==================================================================
   모바일에서 자개 반사가 사라지는 문제 (2026-11-14 23:55)
   BUILD-18 §8 이 .hero-sheen 애니메이션을 "1회 1.5초"로 바꾸고,
   카드 광택 기본값이 --sheen-o:0(포인터 전용)이라 터치 기기에서는
   로딩 직후 반짝임이 끝나면 아무것도 남지 않았다.
   터치 기기에서는 천천히 계속 흐르게 하고, 정지 상태에도 옅게 남긴다.
   ================================================================== */
.hero-card{--sheen-o:.5}

@media (hover:none){
  .hero-card{--sheen-o:.62}
  .hero-sheen{
    opacity:.42;
    animation:heroSheen var(--sheen-d,12s) linear infinite;
  }
}
@media (hover:none) and (prefers-reduced-motion:reduce){
  .hero-sheen{animation:none;opacity:.3}
}