/* lueur-btn.css — 아이 앱 단추 한 벌 (2026-08-06)
   ─────────────────────────────────────────────────────────────
   원장: "모든 버튼 UI 디자인 재검토. 모양이 통일되어있는것도 아니고,
          뒤죽박죽에 색감도 뒤죽박죽에, 통일이 필요함."

   단추는 세 갈래뿐이다. 넷째를 만들지 않는다.
     ① 주 행동  — 세이지를 채운다. 한 화면에 하나.
     ② 보조     — 헤어라인만. 배경 없음.
     ③ 아이콘   — 원(50%) 또는 알약. 글자 없이 모양으로 말한다.

   모양 규칙
     · 라운드는 999(알약) · 18(가로 꽉 찬 블록) · 12(작은 것) · 50%(원). 그 밖은 없다.
     · 손끝은 최소 44px. Apple HIG.
     · 채운 단추의 글자색은 늘 #faf8f3. 흰색(#ffffff)을 쓰지 않는다 — 종이 위에서 튄다.
     · 그림자는 주 행동에만. 보조에는 없다.

   색 규칙 (CLAUDE.md 브랜드색)
     · 행동색은 세이지 --accent:#51654e 하나.
     · 골드 #b08d45 는 별자리·카드·훈장 전용 — 단추에 쓰지 않는다.
     · 네이비 #0e1c2a 는 카드 세계(도감·별자리)의 밤. 단추에 쓰지 않는다.
     · 되돌릴 수 없는 것·오답만 테라코타 #a04e31.

   이 파일은 app.html 에서 **맨 끝에** 실린다 — 앞선 화면별 규칙을 덮기 위해서다.
   화면 스크립트가 실행 중에 넣는 규칙(book.js·forge.js)은 이 파일이 못 이기므로
   그쪽은 원본에서 고쳤다. 여기에 !important 를 늘리지 않는다.
   ───────────────────────────────────────────────────────────── */

:root{
  --lb-fill:#51654e;
  --lb-fill-on:#faf8f3;
  --lb-line:rgba(45,35,22,.18);
  --lb-ink:#6e6558;
  --lb-danger:#a04e31;
  --lb-lift:0 6px 16px -8px rgba(81,101,78,.7);
}

/* 공통 뼈대 — 글꼴·손끝·눌림. 색과 모양은 아래 갈래가 정한다. */
.lb,.lb-pri,.lb-ghost,.lb-icon{
  font-family:'Pretendard Variable',Pretendard,'Noto Sans KR',system-ui,sans-serif;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:44px;border:0;cursor:pointer;line-height:1;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform 200ms cubic-bezier(.22,.61,.36,1),background 200ms,opacity 200ms;
}
.lb:active,.lb-pri:active,.lb-ghost:active,.lb-icon:active{transform:scale(.97)}
.lb[disabled],.lb-pri[disabled],.lb-ghost[disabled]{opacity:.4;cursor:default;transform:none}

/* ① 주 행동 */
.lb-pri{background:var(--lb-fill);color:var(--lb-fill-on);font-size:15px;font-weight:600;
  border-radius:999px;padding:0 22px;box-shadow:var(--lb-lift)}
.lb-pri.block{width:100%;min-height:54px;border-radius:18px;padding:0 18px;
  box-shadow:0 8px 22px -6px rgba(81,101,78,.45)}
.lb-pri.danger{background:var(--lb-danger);box-shadow:0 6px 16px -8px rgba(160,78,49,.7)}

/* ② 보조 */
.lb-ghost{background:none;color:var(--lb-ink);font-size:14px;font-weight:500;
  border:1px solid var(--lb-line);border-radius:999px;padding:0 16px}
.lb-ghost.on{background:var(--lb-fill);border-color:var(--lb-fill);color:var(--lb-fill-on);font-weight:600}
.lb-ghost.sm{min-height:38px;font-size:13px;padding:0 14px}

/* ③ 아이콘 */
.lb-icon{width:46px;height:46px;min-height:46px;padding:0;border-radius:50%;
  background:none;border:1px solid var(--lb-line);color:var(--lb-ink);font-size:16px}
.lb-icon.fill{background:var(--lb-fill);border-color:transparent;color:var(--lb-fill-on);box-shadow:var(--lb-lift)}
.lb-icon.sq{border-radius:12px}

@media(prefers-reduced-motion:reduce){
  .lb:active,.lb-pri:active,.lb-ghost:active,.lb-icon:active{transform:none}
}

/* ── 기존 화면의 단추를 이 한 벌에 맞춘다 ──────────────────────
   이름을 다 갈아 끼우면 호출부 수백 곳을 건드려야 한다 —
   모양만 여기서 맞추고, 이름은 그대로 둔다. */

/* 온보딩 — 다음/이전 (골드빛 갈색이 혼자 튀고 있었다) */
.ob-next{background:var(--lb-fill)!important;color:var(--lb-fill-on)!important;
  border-radius:999px!important;min-height:46px}
.ob-prev{background:none!important;color:var(--lb-ink)!important;
  border:1px solid var(--lb-line)!important;border-radius:999px!important;min-height:46px}

/* 자습 선택 시트 — 두 갈래(혼자·함께)는 고르는 면이지 채운 단추가 아니다 */
.sc-opt{background:#faf8f3;border:1px solid var(--lb-line);border-radius:18px;min-height:56px}
.sc-tg,.ah-flipbtn{border-radius:999px;min-height:44px;border:1px solid var(--lb-line)}
.sc-x{background:none;border:1px solid var(--lb-line);border-radius:999px;min-height:44px;color:var(--lb-ink)}

/* AI 튜터 — 보내기(주 행동)와 사진(보조) */
#sendBtn{border-radius:50%;box-shadow:var(--lb-lift)}
.chat-input .photoBtn{border-radius:50%;border:1px solid var(--lb-line);background:none}

/* 링크형 — 밑줄 대신 세이지 글자 */
.linkbtn{color:var(--lb-fill);text-decoration:none;font-weight:600;min-height:44px}