/* =====================================================================
   공부하자 시계보기 — 입체(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:40px; letter-spacing:3px; 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); }

/* 결과 화면에서 버튼끼리 너무 붙지 않게 (두께만큼 여유) */
.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);
}

/* 시계 배우기의 바늘 조절 버튼 — 시(주황) / 분(파랑) 두께를 각각 */
.adj-btn{
  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.h{ box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9), 0 4px 0 #F0C7B4, 0 7px 12px rgba(216,90,48,.14); }
.adj-btn.m{ box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9), 0 4px 0 #BCD8F3, 0 7px 12px rgba(55,138,221,.14); }
.adj-btn:active{ transform:translateY(3px); }
.adj-btn.h:active{ box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9), 0 1px 0 #F0C7B4, 0 2px 6px rgba(216,90,48,.14); }
.adj-btn.m:active{ box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9), 0 1px 0 #BCD8F3, 0 2px 6px rgba(55,138,221,.14); }

/* 캐릭터 뽑기 버튼 */
.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);
}

/* 객관식 보기 */
.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{
  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.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. 시계 · 알람 ───────────────────────────────────────────────── */

/* 시계 그림이 배경 위에 떠 보이게 */
.clock-wrap svg{ filter:drop-shadow(0 6px 10px rgba(60,40,90,.22)); }

/* 알람 끄기: 시계마다 그림자를 줘 "집어서 끄는" 느낌 */
.alarm-clock svg{ filter:drop-shadow(0 4px 6px rgba(60,40,90,.26)); }
.alarm-clock:active{ transform:scale(.93); }
/* 눌린 순간에는 흔들림 애니메이션이 방해되므로 잠시 멈춤 */
.alarm-clock:active:not(.off):not(.wrong){ animation-play-state:paused; }

/* 시간 막대도 살짝 입체 */
.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); }