/* ============================================================
   base.css — ad-prompt.com 공통 스타일
   index.html · portal.html · privacy.html · terms.html 가 공유한다.
   페이지 고유 스타일은 각 파일의 <style> 블록에 둔다.

   [주의] 이 파일을 수정하면 각 HTML의 링크 버전 쿼리
   (/assets/base.css?v=YYYYMMDD-N)를 반드시 함께 올린다.
   Cloudflare가 4시간(max-age=14400) 브라우저 캐시를 지정하므로,
   버전을 올리지 않으면 재방문자가 새 HTML + 옛 CSS 조합을 받아
   레이아웃이 깨진다.

   구성
     1. 디자인 토큰
     2. 리셋
     3. 접근성
     4. 레이아웃
     5. 타이포그래피
     6. 버튼
     7. 헤더
     8. 브랜드 워드마크
     9. 배지
    10. 카카오 채널 문의 버튼
    11. 카드
    12. 푸터
   ============================================================ */

/* ---------- 1. 디자인 토큰 ---------- */
:root{
  --background:oklch(0.99 0.002 240);
  --foreground:oklch(0.15 0.01 240);
  --card:oklch(1 0 0);
  --primary:oklch(0.25 0.02 260);
  --primary-foreground:oklch(0.98 0.005 240);
  --secondary:oklch(0.95 0.01 240);
  --muted-foreground:oklch(0.45 0.01 240);
  --accent:oklch(0.52 0.15 262);
  --accent-foreground:oklch(0.98 0.005 240);
  --destructive:oklch(0.55 0.2 25);
  --border:oklch(0.9 0.005 240);
  --radius-lg:0.75rem;
  --radius-xl:1rem;
  --sans:'Pretendard','Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --shadow-sm:0 1px 2px oklch(0.15 0.01 240 / .05);
  --shadow:0 4px 6px -1px oklch(0.15 0.01 240 / .06), 0 2px 4px -2px oklch(0.15 0.01 240 / .05);
  --shadow-lg:0 10px 30px -10px oklch(0.15 0.01 240 / .18);
  --accent-grad:linear-gradient(135deg, oklch(0.55 0.15 260) 0%, oklch(0.45 0.12 280) 100%);
  --hero-grad:linear-gradient(135deg, oklch(0.98 0.01 260) 0%, oklch(0.96 0.02 240) 50%, oklch(0.97 0.015 280) 100%);
}

/* ---------- 2. 리셋 ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--background);
  color:var(--foreground);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-0.01em;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#fff}

/* ---------- 3. 접근성 ---------- */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}
.skip-link{
  position:absolute;left:12px;top:-48px;z-index:300;
  background:var(--accent);color:#fff;padding:10px 16px;border-radius:8px;
  font-size:14px;font-weight:600;transition:top .2s;
}
.skip-link:focus{top:12px}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* ---------- 4. 레이아웃 ---------- */
.container{max-width:1200px;margin:0 auto;padding:0 24px}
@media(min-width:1024px){.container{padding:0 48px}}

/* ---------- 5. 타이포그래피 ---------- */
h1,h2,h3{font-weight:700;letter-spacing:-0.025em;line-height:1.2}
.eyebrow{
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);font-weight:600;display:block;margin-bottom:14px;
}

/* ---------- 6. 버튼 ----------
   line-height를 normal로 못박는다.
   지정하지 않으면 <button>은 UA 기본(normal), <a>는 body의 1.6을 상속해
   같은 클래스인데도 높이가 달라진다(14px 기준 35px vs 40.4px). */
.btn{
  font-family:var(--sans);
  font-weight:600;
  cursor:pointer;
  border:none;
  border-radius:12px;
  transition:all .2s cubic-bezier(.2,.7,.2,1);
  font-size:15px;
  line-height:normal;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.btn-accent{
  background:var(--accent-grad);color:#fff;padding:13px 26px;
  box-shadow:0 8px 20px -8px oklch(0.55 0.15 260 / .4);
}
.btn-accent:hover{transform:translateY(-2px);box-shadow:0 14px 28px -8px oklch(0.55 0.15 260 / .5)}
.btn-accent:active{transform:scale(.97)}
.btn-outline{
  background:transparent;color:var(--foreground);padding:13px 26px;
  border:1px solid oklch(0.9 0.005 240 / .8);
}
.btn-outline:hover{background:oklch(0.95 0.01 240 / .5)}
.btn-sm{padding:9px 18px;font-size:14px;border-radius:10px}
.link-inline{
  color:var(--accent);cursor:pointer;font-weight:600;
  text-decoration:underline;text-underline-offset:2px;
  background:none;border:none;padding:0;font:inherit;
}

/* ---------- 7. 헤더 ----------
   배경·테두리·바 레이아웃만 공유한다.
   위치 지정(fixed / sticky)은 페이지마다 다르므로 각 페이지에서 정한다. */
.site-header{
  background:oklch(0.99 0.002 240 / .82);
  backdrop-filter:blur(16px);
  border-bottom:1px solid oklch(0.9 0.005 240 / .5);
}
.site-header .bar{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;gap:12px;
}
.site-header .lead{display:flex;align-items:center;gap:10px;min-width:0}
.site-header .actions{display:flex;align-items:center;gap:8px;flex-shrink:0}

/* ---------- 8. 브랜드 워드마크 ----------
   전 페이지가 같은 크기로 표기한다. 페이지별로 다른 값을 쓰지 않는다. */
.brand{
  display:inline-flex;align-items:center;
  font-weight:800;letter-spacing:-.02em;white-space:nowrap;
  font-size:17px;
}
@media(max-width:640px){
  .brand{font-size:14px}
}

/* ---------- 9. 배지 ---------- */
.badge{
  font-size:12px;font-weight:600;color:var(--accent);
  background:oklch(0.55 0.15 260 / .1);
  padding:3px 9px;border-radius:8px;white-space:nowrap;
}

/* ---------- 10. 카카오 채널 문의 버튼 ----------
   Kakao JS SDK를 쓰지 않는다. _headers의 CSP가 script-src 'self' 'unsafe-inline'
   이라 t1.kakaocdn.net SDK 로드가 차단되고, SDK의 Kakao.Channel.chat()도
   결국 같은 채팅 URL을 여는 동작이므로 링크로 충분하다. */
.kakao-fab{
  position:fixed;right:20px;bottom:20px;z-index:200;
  display:inline-flex;align-items:center;gap:8px;
  height:52px;padding:0 20px 0 16px;
  background:#FEE500;color:#191600;
  border-radius:999px;
  font-size:15px;font-weight:700;line-height:normal;
  box-shadow:0 8px 24px -8px rgba(25,22,0,.45), 0 2px 6px rgba(0,0,0,.12);
  transition:transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s;
}
.kakao-fab:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(25,22,0,.5)}
.kakao-fab:active{transform:scale(.97)}
.kakao-fab svg{width:22px;height:22px;flex-shrink:0}
@media(max-width:640px){
  .kakao-fab{right:14px;bottom:14px;height:48px;padding:0 16px 0 13px;font-size:14px}
  .kakao-fab svg{width:20px;height:20px}
}
@media(prefers-reduced-motion:reduce){
  .kakao-fab{transition:none}
  .kakao-fab:hover{transform:none}
}

/* ---------- 11. 카드 ---------- */
.card{
  background:var(--card);
  border:1px solid oklch(0.9 0.005 240 / .5);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-sm);
}

/* ---------- 12. 푸터 ---------- */
footer{background:var(--primary);color:var(--primary-foreground);padding:48px 0}
.foot{display:flex;justify-content:space-between;align-items:flex-start;gap:28px;flex-wrap:wrap}
.foot .logo{font-size:18px;font-weight:800}
.foot .tagl{font-size:13px;opacity:.7;margin-top:6px}
.foot .company{margin-top:18px;font-size:12.5px;line-height:1.85;opacity:.8}
.foot .company .company-name{font-weight:600;opacity:.95;margin-bottom:2px}
.foot .company a{text-decoration:underline;text-underline-offset:2px}
.foot .company .ph{opacity:.72;font-style:italic}
.foot .right{font-size:13px;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.foot-links{display:flex;gap:18px}
.foot-link{opacity:.88;font-weight:500;font-size:13px}
.foot-link:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.foot .copy{opacity:.72}
@media(max-width:768px){
  .foot{flex-direction:column}
  .foot .right{align-items:flex-start;text-align:left}
}