/* 채피챗 공통 값 (SPEC.md 기준). 랜딩과 앱이 함께 쓴다. 값을 바꾸지 말고 NOTES에 적는다. */
@import url("fonts/brand.css");
:root{
  /* 면 */
  --ground:#F6F1E7; --cell:#FDFBF6; --ever:#0F3D2E; --ever2:#16503C;
  /* 글자 */
  --ink:#17201C; --ink2:#464B44; --ink3:#5C615A;          /* ink3: 자리 글, 출처. 흰 면 4.5:1 이상 */
  --cream:#F7F5EE; --onever:#BFD3C7;                       /* 진한 면 위 글자 */
  /* 선 */
  --line:rgba(23,32,28,.16); --dot:rgba(23,32,28,.30); --lineD:rgba(210,228,218,.20); --dotD:rgba(210,228,218,.30);
  /* 라일락: 뜻은 하나("여기를 물어보세요 / 여기를 누르세요"). 한 화면 두 곳까지 */
  --li:#CBBBFF;        /* 진한 면 위 글자·단추 면 */
  --li-ink:#1E1245;    /* 라일락 면 위 글자 */
  --li-shape:#8E76F0;  /* 밝은 면 위 도형, 24px 이상 굵은 글자만 */
  --li-text:#5B41C8;   /* 밝은 면·옅은 라일락 면 위 작은 글자 */
  --li-soft:#EEE9FF;   /* 형광 표시 면 */
  /* 글자 크기 (데스크톱 / 휴대폰은 clamp로) */
  --fs-h1:clamp(40px,5.8vw,84px); --fs-h2:clamp(30px,3.9vw,56px); --fs-h3:clamp(24px,2.2vw,30px);
  --fs-num:clamp(104px,13.9vw,200px); --fs-lead:clamp(19px,1.8vw,26px); --fs-body:17px; --fs-small:14px;
  --fw-title:700; --ls-title:-.03em; --ls-body:-.02em;
  /* 틀 */
  --wrap:1180px; --pad:40px; --bar:64px; --peek:44px; --r:12px; --r-lg:18px; --tap:44px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--bar) + 12px)}
body{margin:0;font-family:var(--f-body);font-size:var(--fs-body);line-height:1.6;letter-spacing:var(--ls-body);color:var(--ink);background:var(--ground);word-break:keep-all;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased}
/* 숫자 폭 맞추기는 줄을 맞춰야 하는 곳에만: 꼬리표 번호, 큰 숫자, 값, 눈금, 진행 표시 (4라운드) */
.tag b,.tnum{font-variant-numeric:tabular-nums}
h1,h2,h3{margin:0;font-family:var(--f-head);font-weight:var(--fw-title);letter-spacing:var(--ls-title);line-height:1.16;text-wrap:balance}
button,input,textarea{font:inherit;letter-spacing:inherit;color:inherit}
button{touch-action:manipulation;cursor:pointer}
:focus-visible{outline:2px solid var(--ever);outline-offset:2px}
.dark :focus-visible,.dark:focus-visible{outline-color:var(--li)}
/* 한 화면: 다음 구역의 가로선과 꼬리표가 아래에 44px 걸쳐 보인다 */
.screen{position:relative;min-height:calc(100svh - var(--bar) - var(--peek))}
.dark{background:var(--ever);color:var(--cream)}
/* 화면 끝까지 가는 가로선과 그 위 꼬리표 */
.rule{border:0;border-top:1px solid var(--line);margin:0}
.dark .rule{border-color:var(--lineD)}
.tag{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border:1px solid var(--line);border-radius:8px;background:var(--ground);font-size:var(--fs-small);font-weight:700;transform:translateY(-50%)}
.tag b{color:var(--ever2)}
.dark .tag{background:var(--ever);border-color:var(--lineD);color:var(--cream)} .dark .tag b{color:var(--onever)}   /* 꼬리표 번호는 물어볼 곳도 누를 곳도 아니라 라일락을 뺐다(A8, 4라운드) */
/* 단추 */
/* 단추 (btn/SPEC.md 1절): 행동 단추 48px, 앱 안 모서리는 모두 --r(12px), 16px/700. 마우스를 올리면 면이 한 단계 진해지고, 누르면 1px 내려간다 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border:0;border-radius:var(--r);font-weight:700;font-size:16px;line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .15s,border-color .15s,transform .08s}
.btn:active{transform:translateY(1px)}
.btn-li{background:var(--li);color:var(--li-ink)}       /* 진한 면 위 주 단추 */
.btn-li:hover{background:#BBA6FF}
.btn-ev{background:var(--ever);color:var(--cream)}      /* 밝은 면 위 주 단추 */
.btn-ev:hover{background:#0B2E22}
.btn-gh{background:transparent;border:1px solid var(--dot);color:var(--ink)}   /* 보조 단추: 선 */
.btn-gh:hover{background:rgba(23,32,28,.05);border-color:var(--ink3)}
.dark .btn-gh:hover{background:rgba(247,245,238,.08)}
.btn:disabled:not([aria-busy="true"]){background:transparent;border:1px solid var(--dot);color:var(--ink3);cursor:not-allowed}
.mark{background:var(--li-soft);color:var(--ink);border-radius:4px;padding:0 .18em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
@media (max-width:560px){:root{--pad:22px;--bar:56px}}
/* 앱(h/pwa) 판: 움직임 줄이기는 움직이는 요소에만(R1 2). 깜빡임·돌기·밀림을 끄고, 판·알림의 옅어짐은 남긴다 */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}.btn:active{transform:none}.spin,.cc-dot,.cc-chev,.db-chev{animation:none!important;transition:none!important}}