/* =========================================================
   Happiness UI 1.0
   ハピネスねっと教材アプリ共通デザイン
   ========================================================= */

.study-app {
  --hp-bg-blue: #eef8ff;
  --hp-bg-pink: #fff1f6;
  --hp-bg-yellow: #fff9df;
  --hp-bg-green: #effcf5;
  --hp-bg-purple: #f7f1ff;

  --hp-blue: #88bfff;
  --hp-blue-deep: #4f8fe8;
  --hp-pink: #ff9fbe;
  --hp-pink-deep: #ea668f;
  --hp-yellow: #ffe58a;
  --hp-yellow-deep: #dfb63c;
  --hp-green: #9fdfc8;
  --hp-green-deep: #49a879;
  --hp-purple: #ceb6f2;
  --hp-purple-deep: #8e6bc8;

  --hp-text: #23324d;
  --hp-muted: #708198;
  --hp-line: #d9e8f7;

  --hp-radius-xl: 28px;
  --hp-radius-lg: 20px;
  --hp-radius-md: 14px;

  --hp-shadow-lg: 0 12px 34px rgba(72,105,145,.14);
  --hp-shadow-md: 0 6px 16px rgba(72,105,145,.12);
  --hp-shadow-btn: 0 4px 0 rgba(49,73,102,.16);

  color: var(--hp-text);
  font-family: "Zen Maru Gothic","M PLUS Rounded 1c","Noto Sans JP",sans-serif;
}

.study-app .hp-app {
  border: 3px solid #dcecff;
  border-radius: var(--hp-radius-xl);
  box-shadow: var(--hp-shadow-lg);
}

.study-app .hp-theme-sky {
  background:
    radial-gradient(circle at 10% 8%,rgba(255,229,138,.46) 0 7px,transparent 8px),
    radial-gradient(circle at 90% 9%,rgba(255,159,190,.44) 0 7px,transparent 8px),
    linear-gradient(180deg,#f8fbff 0%,var(--hp-bg-blue) 100%);
}
.study-app .hp-theme-pink {
  background:
    radial-gradient(circle at 10% 8%,rgba(255,229,138,.42) 0 7px,transparent 8px),
    radial-gradient(circle at 90% 9%,rgba(136,191,255,.34) 0 7px,transparent 8px),
    linear-gradient(180deg,#fffafe 0%,var(--hp-bg-pink) 100%);
}
.study-app .hp-theme-green {
  background: linear-gradient(180deg,#fbfffd 0%,var(--hp-bg-green) 100%);
}
.study-app .hp-theme-yellow {
  background: linear-gradient(180deg,#fffdf5 0%,var(--hp-bg-yellow) 100%);
}

.study-app .hp-card {
  background: rgba(255,255,255,.96);
  border: 2px solid var(--hp-line);
  border-radius: var(--hp-radius-lg);
  box-shadow: var(--hp-shadow-md);
}

.study-app .hp-title-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  padding: .55em 1.1em;
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  box-shadow: var(--hp-shadow-md);
  font-weight: 900;
}

.study-app .hp-btn {
  border-radius: var(--hp-radius-md);
  font-family: inherit;
  font-weight: 800;
  box-shadow: var(--hp-shadow-btn);
  transition: transform .08s ease, box-shadow .08s ease, filter .12s ease;
}
.study-app .hp-btn:hover { filter: brightness(1.025); }
.study-app .hp-btn:active {
  transform: translateY(3px) scale(.985);
  box-shadow: 0 1px 0 rgba(49,73,102,.14);
}

.study-app .hp-btn-number {
  background: linear-gradient(180deg,#fff,#f2f8ff);
  color: var(--hp-text);
  border: 2px solid #d7e7f7;
}
.study-app .hp-btn-pink {
  background: linear-gradient(180deg,#ffd8e5,var(--hp-pink));
  color: #75203e;
  border: 2px solid #ffb3cc;
}
.study-app .hp-btn-green {
  background: linear-gradient(180deg,#c9f0df,var(--hp-green));
  color: #185c42;
  border: 2px solid #7fceb0;
}
.study-app .hp-btn-yellow {
  background: linear-gradient(180deg,#fff7d2,var(--hp-yellow));
  color: #745900;
  border: 2px solid #f3d363;
}
.study-app .hp-btn-soft {
  background: linear-gradient(135deg,#dff3ff,#ffe4ee);
  color: var(--hp-text);
  border: 2px solid #dce9f7;
}

.study-app .hp-badge {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .35em .7em;
  border-radius: 999px;
  font-weight: 800;
  white-space: nowrap;
}
.study-app .hp-badge-mint { background:#e7faf3; color:#277f60; }
.study-app .hp-badge-blue { background:#e9f5ff; color:#3279bd; }
.study-app .hp-badge-purple { background:#f1eaff; color:#7956af; }

.study-app .hp-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(35,50,77,.22);
  backdrop-filter: blur(3px);
}
.study-app .hp-modal-panel {
  width: min(520px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  overflow: auto;
  background: rgba(255,255,255,.98);
  border: 2px solid #dce8f7;
  border-radius: 22px;
  box-shadow: 0 20px 55px rgba(35,50,77,.24);
}

@media (max-width:620px) {
  .study-app { --hp-radius-xl:22px; --hp-radius-lg:17px; }
}