/* =====================================================================
   공부하자 분수 — 입체(3D 젤리) 디자인
   ---------------------------------------------------------------------
   구구단·시계보기와 같은 "말랑말랑 눌리는" 느낌을 분수에도 입힙니다.

   ★ 이 파일만 빼면 원래(납작한) 디자인으로 바로 돌아갑니다.
     스타일.css 다음에 읽히므로, 여기 있는 규칙이 이깁니다.
     다른 앱 소스는 건드리지 않습니다 — 이 파일은 분수 전용 사본입니다.

   구조
     1. 입체의 기본 공식 (두께 · 눌림)
     2. 버튼   — 메뉴 / 큰 버튼 / 흰 버튼 / 조절 버튼 / 뽑기
     3. 선택   — 세그먼트 / 칩 / 객관식 보기
     4. 카드   — 게임 카드 / 캐릭터 칸 / 상점 칸 / 상단 탭
     5. 작은 것 — 상단바 버튼 / 팝업 버튼
     6. 분수 그림 · 피자 가게
   ===================================================================== */


/* ── 1. 입체의 기본 공식 ────────────────────────────────────────────
   위쪽에 밝은 선(inset)을 넣어 볼록하게,
   아래에 색이 진한 면(0 Npx 0)을 깔아 "두께"를 만들고,
   그 아래 흐린 그림자로 떠 있게 합니다.
   누르면 그 두께만큼 내려앉습니다.                                   */

:root{
  --d-hi: rgba(255,255,255,.42);        /* 윗면 하이라이트 */
  --d-shadow: rgba(60,40,90,.18);       /* 바닥 그림자 */
  --d-ease: transform .08s, box-shadow .08s;
}

/* 색이 있는 버튼의 3단 색 (밝은면 / 바탕 / 두께) */
.m-purple, .b-purple{ --btn-base:#7F77DD; --btn-light:#9C95EA; --btn-dark:#534AB7; }
.m-green,  .b-green { --btn-base:#1D9E75; --btn-light:#34BB8D; --btn-dark:#0F6E56; }
.m-pink,   .b-pink  { --btn-base:#D4537E; --btn-light:#E36E95; --btn-dark:#9E3557; }
.b-amber            { --btn-base:#EF9F27; --btn-light:#F7B750; --btn-dark:#B9740D; }


/* ── 1-2. 홈 로고 리본 배너 ─────────────────────────────────────────
   그림 파일 없이 CSS 로 만듭니다. 글자가 또렷하고 파일도 안 늘어납니다.   */

.logo-card{
  background:linear-gradient(#ffffff, #FFF6E8);
  border:0; border-radius:26px;
  padding:16px 30px 18px; margin:6px 12px 18px;
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.95),
    inset 0 -3px 0 rgba(216,90,48,.10),
    0 7px 0 #F0C88A,
    0 15px 22px rgba(60,40,90,.20);
}
/* 위·아래 무지개 띠 */
.logo-card::before, .logo-card::after{
  content:''; position:absolute; left:14px; right:14px; height:6px; border-radius:6px;
  background:linear-gradient(90deg,#F49BB5,#F7C56B,#8FD8A8,#7FC4EE,#B3A6EE);
  opacity:.95;
}
.logo-card::before{ top:7px; }
.logo-card::after{ bottom:7px; }

.logo-sub{
  font-size:15px; font-weight:800; letter-spacing:4px; color:#5348B0;
  text-shadow:0 1px 0 rgba(255,255,255,.9);
}
.logo-main{ font-size:42px; letter-spacing:4px; line-height:1.15; }
/* 배너 안쪽이 이미 흰색이라 흰 테두리는 글자만 갉아먹습니다.
   테두리를 빼고 아래로 떨어지는 그림자만 줘서 도톰하게 보이게 합니다 */
.logo-main span{
  -webkit-text-stroke:0;
  text-shadow:0 2px 0 rgba(255,255,255,.9), 0 3px 1px rgba(60,40,90,.22), 0 6px 8px rgba(60,40,90,.20);
}
.logo-main .c-orange{ color:#C64A21; }
.logo-main .c-pink{ color:#C2426C; }
.logo-main .c-blue{ color:#2673C6; }
.logo-main .c-purple{ color:#463CA8; }
/* 배너 양옆으로 삐져나온 리본 꼬리 */
.logo-star{
  display:block; color:transparent; width:20px; height:34px; font-size:0;
  background:linear-gradient(#F7A9C0, #E8809E);
  box-shadow:0 4px 0 #C4526F;
  animation:none;
}
.logo-star.s1{ top:auto; bottom:22px; left:-2px; border-radius:8px 0 0 8px;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 9px 50%); }
.logo-star.s2{ top:auto; bottom:22px; right:-2px; left:auto; border-radius:0 8px 8px 0;
  clip-path:polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%); }


/* ── 2. 버튼 ──────────────────────────────────────────────────────── */

/* 홈 메뉴 3개 (분수 배우기 / 문제풀이 / 게임) */
.menu-btn{
  background:linear-gradient(var(--btn-light), var(--btn-base));
  border-radius:22px; padding:19px 18px; font-size:19px; font-weight:800;
  text-shadow:0 2px 2px rgba(0,0,0,.20);
  transition:var(--d-ease);
  position:relative;                    /* ★ 없으면 아래 광택이 버튼을 벗어나 화면 위쪽에 흰 원으로 그려집니다 */
  overflow:hidden;                      /* 광택이 모서리를 넘지 않게 */
  box-shadow:inset 0 3px 0 var(--d-hi),
             inset 0 -4px 0 rgba(0,0,0,.10),
             0 7px 0 var(--btn-dark),
             0 15px 20px var(--d-shadow);
}
/* 윗면 광택 — 젤리처럼 보이게 하는 핵심 */
.menu-btn::before, .big-btn::before, .gacha-btn::before{
  content:''; position:absolute; left:7%; right:7%; top:4px; height:46%;
  border-radius:999px; pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.45) 0%, rgba(255,255,255,.16) 55%, rgba(255,255,255,0) 100%);
}
.menu-btn:active{
  transform:translateY(6px);
  box-shadow:inset 0 3px 0 var(--d-hi), inset 0 -4px 0 rgba(0,0,0,.10),
             0 1px 0 var(--btn-dark), 0 4px 8px var(--d-shadow);
}

/* 큰 버튼 (시작하기 / 확인 / 완성! / 다시 하기) */
.big-btn{
  color:#fff; border-radius:22px; font-weight:800; position:relative; overflow:hidden;
  background:linear-gradient(var(--btn-light), var(--btn-base));
  text-shadow:0 2px 2px rgba(0,0,0,.20);
  transition:var(--d-ease);
  box-shadow:inset 0 3px 0 var(--d-hi),
             inset 0 -4px 0 rgba(0,0,0,.10),
             0 7px 0 var(--btn-dark),
             0 15px 20px var(--d-shadow);
}
.big-btn:active{
  transform:translateY(6px);
  box-shadow:inset 0 3px 0 var(--d-hi), inset 0 -4px 0 rgba(0,0,0,.10),
             0 1px 0 var(--btn-dark), 0 4px 8px var(--d-shadow);
}
/* 노란 버튼은 글씨를 진하게 둬야 읽힙니다 */
.b-amber{ color:#4A2F02; text-shadow:0 1px 1px rgba(255,255,255,.35); }
/* 못 누르는 상태에서는 두께를 빼서 '눌리지 않는' 느낌을 줍니다 */
.big-btn:disabled{ box-shadow:0 2px 6px var(--d-shadow); }
.big-btn:disabled:active{ transform:none; }

/* 결과 화면에서 버튼끼리 너무 붙지 않게 (두께만큼 여유) */
.over-col .big-btn{ margin-top:20px; }
.over-col .big-btn + .big-btn{ margin-top:14px; }

/* 흰 버튼 (상점 · 랭킹 · 내 기록 · 이전/다음) */
.ghost-btn{
  border:0; background:#fff; color:var(--purple);
  border-radius:16px; padding:13px; font-weight:700;
  transition:var(--d-ease);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9),
             0 4px 0 #E3DFF5,
             0 7px 12px rgba(83,74,183,.14);
}
.ghost-btn:active{
  transform:translateY(3px);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9), 0 1px 0 #E3DFF5, 0 2px 6px rgba(83,74,183,.14);
}
.ghost-btn.danger{
  color:#A32D2D; border:0;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9), 0 4px 0 #F1C7C7, 0 7px 12px rgba(163,45,45,.12);
}
.ghost-btn.danger:active{
  transform:translateY(3px);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9), 0 1px 0 #F1C7C7, 0 2px 6px rgba(163,45,45,.12);
}

/* 배우기의 −/+ 조절 버튼 */
.step-btn{
  transition:var(--d-ease);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9), 0 3px 0 #E3DFF5, 0 5px 8px rgba(60,40,90,.12);
}
.step-btn:active{
  transform:translateY(2px);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9), 0 1px 0 #E3DFF5, 0 2px 5px rgba(60,40,90,.12);
}
.adj-btn, .mini-chip{
  border:0; background:#fff; border-radius:14px; font-weight:700;
  transition:var(--d-ease);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9), 0 4px 0 #E5E1D6, 0 7px 12px rgba(60,40,90,.10);
}
.adj-btn:active, .mini-chip:active{
  transform:translateY(3px);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9), 0 1px 0 #E5E1D6, 0 2px 6px rgba(60,40,90,.10);
}

/* 캐릭터 뽑기 버튼 */
.gacha-btn{
  border:0; color:#fff; font-weight:800; position:relative; overflow:hidden;
  background:linear-gradient(#9C95EA, #7F77DD);
  text-shadow:0 1px 1px rgba(0,0,0,.16);
  transition:var(--d-ease);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.38), 0 5px 0 #3C3489, 0 10px 14px rgba(60,40,90,.2);
}
.gacha-btn:active{
  transform:translateY(4px);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.38), 0 1px 0 #3C3489, 0 2px 6px rgba(60,40,90,.2);
}


/* ── 3. 선택 ──────────────────────────────────────────────────────── */

/* 단계 · 방식 · 문제 수 · 랭킹 탭 */
.seg-btn{
  border:0; background:#fff; font-weight:700;
  transition:var(--d-ease);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9), 0 3px 0 #E3DFF5, 0 5px 9px rgba(83,74,183,.10);
}
.seg-btn:active{
  transform:translateY(2px);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9), 0 1px 0 #E3DFF5, 0 2px 5px rgba(83,74,183,.10);
}
.seg-btn.active{
  background:linear-gradient(#6C63CF, var(--purple)); color:#fff; border:0;
  text-shadow:0 1px 1px rgba(0,0,0,.16);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.34), 0 3px 0 #3C3489, 0 6px 11px rgba(60,40,90,.20);
}
.seg-btn.active:active{
  transform:translateY(2px);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.34), 0 1px 0 #3C3489, 0 2px 5px rgba(60,40,90,.20);
}

/* 배우기 단계 칩 */
.chip{
  transition:var(--d-ease);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.8), 0 3px 0 #DAD6CB;
}
.chip:active{ transform:translateY(2px); box-shadow:inset 0 1.5px 0 rgba(255,255,255,.8), 0 1px 0 #DAD6CB; }
.chip.active{
  background:linear-gradient(#6C63CF, var(--purple));
  text-shadow:0 1px 1px rgba(0,0,0,.16);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.34), 0 3px 0 #3C3489, 0 6px 11px rgba(60,40,90,.20);
}

/* 객관식 보기 */
.choice{
  border:0;
  background:linear-gradient(#F5F3FF, var(--purple-bg));
  transition:var(--d-ease);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9), 0 4px 0 #C9C3F0, 0 8px 13px rgba(83,74,183,.14);
}
.choice:active{
  transform:translateY(3px);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9), 0 1px 0 #C9C3F0, 0 2px 6px rgba(83,74,183,.14);
}
/* 정답·오답은 색이 바뀌므로 두께 색도 같이 */
.choice.right{
  background:linear-gradient(#34BB8D, var(--green)); border:0; color:#fff;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.34), 0 4px 0 #0F6E56, 0 8px 13px rgba(29,158,117,.22);
}
.choice.wrong{
  background:linear-gradient(#F0A8A8, #E88585); border:0; color:#fff;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.30), 0 4px 0 #B93A39, 0 8px 13px rgba(226,75,74,.22);
}


/* ── 4. 카드 ──────────────────────────────────────────────────────── */

/* 게임 고르는 카드 */
.game-card{
  border:0; background:rgba(255,255,255,0.97);
  transition:var(--d-ease);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9), 0 5px 0 #E3DFF5, 0 10px 16px rgba(83,74,183,.14);
}
.game-card:active{
  transform:translateY(4px);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9), 0 1px 0 #E3DFF5, 0 3px 7px rgba(83,74,183,.14);
}

/* 캐릭터 칸 · 상점 칸 */
.char-cell, .shop-item{
  transition:var(--d-ease);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9), 0 4px 0 #E3DFF5, 0 8px 13px rgba(83,74,183,.12);
}
.char-cell:active, .shop-item:active{
  transform:translateY(3px);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9), 0 1px 0 #E3DFF5, 0 2px 6px rgba(83,74,183,.12);
}
.shop-item.selected, .char-cell.selected{
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9), 0 4px 0 #E9BC7A, 0 8px 13px rgba(216,90,48,.16);
}
/* 아직 못 가진 것은 두께를 빼서 눌리지 않는 느낌 */
.char-cell.locked, .shop-item.locked{ box-shadow:0 2px 6px rgba(83,74,183,.10); }
.char-cell.locked:active, .shop-item.locked:active{ transform:none; }

/* 상점 상단 탭 */
.shop-tab{
  transition:var(--d-ease);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.7), 0 3px 0 #DAD6CB;
}
.shop-tab:active{ transform:translateY(2px); box-shadow:inset 0 1.5px 0 rgba(255,255,255,.7), 0 1px 0 #DAD6CB; }
.shop-tab.active{
  background:linear-gradient(#E5713F, var(--orange)); color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,.16);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.34), 0 3px 0 #A03F1C, 0 6px 11px rgba(216,90,48,.22);
}
.shop-tab.active:active{
  transform:translateY(2px);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.34), 0 1px 0 #A03F1C, 0 2px 5px rgba(216,90,48,.22);
}

/* 홈 위쪽 작은 카드 · 기록 카드 */
.mini-card{
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9), 0 3px 0 #E3DFF5, 0 6px 11px rgba(83,74,183,.10);
  transition:var(--d-ease);
}
.mini-card:active{
  transform:translateY(2px);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9), 0 1px 0 #E3DFF5, 0 2px 5px rgba(83,74,183,.10);
}
.rec-card{ box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9), 0 3px 0 #E3DFF5, 0 6px 11px rgba(83,74,183,.10); }


/* ── 5. 작은 것 ───────────────────────────────────────────────────── */

.back-btn{
  transition:var(--d-ease);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.30), 0 3px 0 rgba(0,0,0,.16);
}
.back-btn:active{ transform:translateY(2px); box-shadow:inset 0 1.5px 0 rgba(255,255,255,.30), 0 1px 0 rgba(0,0,0,.16); }

.nick-btn, .rank-nick-btn{
  transition:var(--d-ease);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.28), 0 3px 0 rgba(0,0,0,.15);
}
.nick-btn:active, .rank-nick-btn:active{
  transform:translateY(2px);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.28), 0 1px 0 rgba(0,0,0,.15);
}

.sound-btn{ transition:transform .08s; }
.sound-btn:active{ transform:scale(.88); }

/* 팝업 버튼 (취소 / 확인) */
.confirm-btns button{ transition:var(--d-ease); }
.confirm-cancel{ box-shadow:inset 0 1.5px 0 rgba(255,255,255,.8), 0 4px 0 #D8D5CC; }
.confirm-cancel:active{ transform:translateY(3px); box-shadow:inset 0 1.5px 0 rgba(255,255,255,.8), 0 1px 0 #D8D5CC; }
.confirm-ok{
  background:linear-gradient(#6C63CF, var(--purple));
  text-shadow:0 1px 1px rgba(0,0,0,.16);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.34), 0 4px 0 #3C3489, 0 8px 13px rgba(60,40,90,.20);
}
.confirm-ok:active{
  transform:translateY(3px);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.34), 0 1px 0 #3C3489, 0 2px 6px rgba(60,40,90,.20);
}
.gacha-pop .box button{
  background:linear-gradient(#6C63CF, var(--purple));
  text-shadow:0 1px 1px rgba(0,0,0,.16);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.34), 0 4px 0 #3C3489, 0 8px 13px rgba(60,40,90,.20);
  transition:var(--d-ease);
}
.gacha-pop .box button:active{
  transform:translateY(3px);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.34), 0 1px 0 #3C3489, 0 2px 6px rgba(60,40,90,.20);
}

/* 공지 팝업 */
.notice-box{ max-width:340px; text-align:left; }
.notice-head{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.notice-badge{
  background:var(--purple); color:#fff; font-size:11px; font-weight:800;
  padding:3px 9px; border-radius:20px;
}
.notice-title{ font-size:18px; font-weight:800; }
.notice-list{ list-style:none; padding:0; margin:0 0 14px; }
.notice-list li{ font-size:14px; line-height:1.6; padding:7px 0; border-bottom:1px solid var(--line); }
.notice-list li:last-child{ border-bottom:0; }
.notice-hide{
  display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted);
  margin-bottom:14px; cursor:pointer;
}


/* ── 6. 분수 그림 · 피자 가게 ─────────────────────────────────────── */

/* 분수 그림이 배경 위에 떠 보이게 */
.frac-svg{ filter:drop-shadow(0 5px 9px rgba(60,40,90,.22)); }
/* 보기 버튼 안의 작은 그림은 그림자를 줄여 답답해 보이지 않게 */
.choice .frac-svg, .shop-thumb .frac-svg{ filter:drop-shadow(0 2px 4px rgba(60,40,90,.20)); }

/* 조각을 누르면 살짝 들어감 */
.pc{ transition:opacity .12s, transform .08s; transform-origin:50% 50%; }

/* 피자 자르기 버튼 */
.cut-btn{
  border:0;
  transition:var(--d-ease);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9), 0 4px 0 #E5E1D6, 0 7px 12px rgba(60,40,90,.12);
}
.cut-btn:active{
  transform:translateY(3px);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9), 0 1px 0 #E5E1D6, 0 2px 6px rgba(60,40,90,.12);
}
.cut-btn.on{
  background:linear-gradient(#F7B750, var(--amber)); color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,.16);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.34), 0 4px 0 #B9740D, 0 8px 13px rgba(239,159,39,.22);
}

/* 손님 말풍선 */
.guest-bubble{
  box-shadow:inset 0 2px 0 rgba(255,255,255,.9), 0 5px 0 #EDE9DC, 0 10px 16px rgba(60,40,90,.16);
}

/* 담은 양 상자 */
.pizza-taken{
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9), 0 4px 0 #E3DFF5, 0 7px 12px rgba(83,74,183,.12);
}
.pizza-taken.ok{ box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9), 0 4px 0 #7FD3B6, 0 7px 12px rgba(29,158,117,.20); }

/* 막대 · 게이지도 살짝 입체 */
.time-bar{ box-shadow:inset 0 2px 3px rgba(60,40,90,.18); }
.exp-bar, .mbar{ box-shadow:inset 0 1.5px 3px rgba(60,40,90,.16); }