/* ─────────────────────────────────────────────────────────────────────
   common-cute.css — 공통 UI "새 옷" 제안 레이어 (아직 어떤 게임에도 연결 안 됨)

   · 목적: 기존 게임들이 함께 쓰는 클래스를 크림 종이 · 파스텔 · 코코아 선 느낌으로 바꿔 보기
   · 규칙: 색 · 그림자 · 테두리 느낌만 바꾸고 크기 · 여백 · 글자 크기 · 배치(구조)는 그대로.
           테두리는 border 대신 inset box-shadow / outline 으로 그려서 요소 크기가 1px도 안 변해요.
   · 적용 방법(나중에, 선생님 확인 후): 이 파일 내용을 core/common.css 맨 끝에 그대로 붙이면 끝.
           @import 가 없어서 파일 중간에 붙여도 안전해요. 글꼴은 common.css 가 이미 불러오는 Jua · Noto Sans KR 만 써요.
   · 대상: .big-btn(.green/.purple) · .ghost-btn · .overlay(.dim) · .title-xl · .sub · .dg-* 진단 카드 · .fb-* 메모
   · 일부러 안 바꾼 것: --ink 같은 기존 변수 (게임마다 다른 곳에서도 써서), .hidden, 각 게임 전용 스타일
   ───────────────────────────────────────────────────────────────────── */

:root {
  --cc-paper: #FFF8EC;
  --cc-card: #FFFDF8;
  --cc-line: #5B4636;
  --cc-ink: #4A3A2C;
  --cc-ink2: #6E5A4A;
  --cc-ink3: #9C8774;
  --cc-track: #F3E7D5;
  --cc-lav: #C9B8F5;
  --cc-mint: #BDE8D3;
  --cc-butter: #FFE7A1;
  --cc-peach: #FFC9D6;
  --cc-sky: #C3E4FF;
  --cc-soft: 0 12px 26px -8px rgba(91, 70, 54, .32);
}

/* ── 큰 버튼: 노랑(기본) · 민트(.green) · 라벤더(.purple) ── */
.big-btn {
  background: linear-gradient(180deg, #FFF0BF 0%, var(--cc-butter) 55%, #FFDD82 100%);
  color: var(--cc-line);
  box-shadow: inset 0 0 0 2px var(--cc-line), inset 0 5px 0 rgba(255, 255, 255, .55), 0 6px 0 var(--cc-line), var(--cc-soft);
  text-shadow: none;
}
.big-btn:active { transform: translateY(4px); box-shadow: inset 0 0 0 2px var(--cc-line), inset 0 5px 0 rgba(255, 255, 255, .45), 0 2px 0 var(--cc-line); }
.big-btn.green {
  background: linear-gradient(180deg, #DDF5E8 0%, var(--cc-mint) 55%, #A6DEC2 100%);
  color: #24533E;
  box-shadow: inset 0 0 0 2px var(--cc-line), inset 0 5px 0 rgba(255, 255, 255, .55), 0 6px 0 var(--cc-line), var(--cc-soft);
}
.big-btn.purple {
  background: linear-gradient(180deg, #E7DEFF 0%, var(--cc-lav) 55%, #B7A1F0 100%);
  color: #45347F;
  box-shadow: inset 0 0 0 2px var(--cc-line), inset 0 5px 0 rgba(255, 255, 255, .5), 0 6px 0 var(--cc-line), var(--cc-soft);
}
.big-btn.green:active, .big-btn.purple:active { box-shadow: inset 0 0 0 2px var(--cc-line), inset 0 5px 0 rgba(255, 255, 255, .45), 0 2px 0 var(--cc-line); }
.big-btn:focus-visible { outline: 3px dashed #A992EC; outline-offset: 5px; }

/* ── 반투명 버튼: 카메라·3D 위에서도 잘 보이게 코코아 유리 + 크림 글자 ── */
.ghost-btn {
  background: rgba(74, 58, 44, .58);
  color: #FFF8EC;
  box-shadow: inset 0 0 0 2px rgba(255, 248, 236, .7), 0 3px 0 rgba(58, 44, 33, .35);
}
.ghost-btn:active { transform: translateY(2px); }

/* ── 오버레이: 어두운 화면은 따뜻한 코코아 막 + 은은한 점무늬 (흰 제목 글씨가 그대로 잘 읽혀요) ── */
.overlay.dim {
  background:
    radial-gradient(rgba(255, 248, 236, .07) 1.4px, transparent 1.7px) 0 0 / 24px 24px,
    rgba(64, 45, 31, .84);
}

/* ── 큰 제목 · 부제 ── */
.title-xl {
  color: #FFFBF3;
  text-shadow: 2px 0 0 var(--cc-line), -2px 0 0 var(--cc-line), 0 -2px 0 var(--cc-line), 0 3px 0 var(--cc-line), 0 6px 0 var(--cc-line), 0 12px 22px rgba(30, 20, 12, .3);
}
.sub { color: #FFEBD2; }

/* ── AI 진단 카드 ── */
.dg-card {
  background:
    radial-gradient(rgba(91, 70, 54, .06) 1.3px, transparent 1.6px) 0 0 / 22px 22px,
    var(--cc-card);
  color: var(--cc-ink);
  box-shadow: inset 0 0 0 2px var(--cc-line), 0 7px 0 rgba(91, 70, 54, .22), 0 22px 44px -12px rgba(30, 20, 12, .45);
}
.dg-head h2 { color: var(--cc-line); }
.dg-ai { background: var(--cc-lav); color: #45347F; box-shadow: inset 0 0 0 1.5px var(--cc-line); }
.dg-type { background: #FFF4CF; outline: 2px dashed rgba(91, 70, 54, .4); outline-offset: -6px; }
.dg-type b { color: var(--cc-line); }
.dg-type p { color: var(--cc-ink2); }
.dg-pts { color: #2F8A62; text-shadow: 0 2px 0 rgba(189, 232, 211, .9); }
.dg-acc { color: var(--cc-ink2); }
.dg-acc b { color: var(--cc-line); }
.dg-msg { background: #E6F3FF; color: #24598A; box-shadow: inset 0 0 0 2px #A8D2F5; }
.dg-grid h3 { color: var(--cc-ink2); }
.dg-subj { color: var(--cc-ink); }
.dg-subj small { color: var(--cc-ink3); }
.dg-bar { background: var(--cc-track); box-shadow: inset 0 0 0 1.5px rgba(91, 70, 54, .28); }
.dg-bar i {
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .38) 0 6px, transparent 6px 12px), linear-gradient(90deg, #A6DEC2, #6CC79C);
  box-shadow: inset 0 0 0 1.5px rgba(91, 70, 54, .45);
}
.dg-rev li { background: #FFEAF0; box-shadow: inset 0 0 0 1.5px #F6B9CA; }
.dg-rev li b { color: var(--cc-line); }
.dg-rev li span { color: #B8436A; }
.dg-rev li p { color: var(--cc-ink2); }
.dg-none { color: var(--cc-ink3); }
.dg-rev li.dg-none { background: #E9F7EF; box-shadow: inset 0 0 0 1.5px #A6DEC2; color: #2F7A57; }

/* ── 테스트 메모 ── */
.fb-btn { background: rgba(74, 58, 44, .62); color: #FFF8EC; box-shadow: inset 0 0 0 1.5px rgba(255, 248, 236, .65); }
.fb-modal { background: rgba(58, 42, 31, .55); }
.fb-box { background: var(--cc-card); color: var(--cc-ink); box-shadow: inset 0 0 0 2px var(--cc-line), 0 20px 40px -10px rgba(30, 20, 12, .45); }
.fb-box h3 { color: var(--cc-line); }
.fb-box h3 small { color: var(--cc-ink3); }
.fb-box textarea { border-color: #E6D6C0; background: #FFFEFB; color: var(--cc-ink); }
.fb-box textarea:focus { outline: none; border-color: #A992EC; }
.fb-save { background: var(--cc-mint); color: #24533E; box-shadow: inset 0 0 0 2px var(--cc-line), 0 3px 0 var(--cc-line); }
.fb-cancel { background: var(--cc-track); color: var(--cc-ink); box-shadow: inset 0 0 0 1.5px rgba(91, 70, 54, .35); }