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

   デザインの軸
   ・空色と白を基本にした、やさしい教材画面
   ・ぷっくりしたボタンと玉
   ・大きな角丸、細い色枠、やわらかな影
   ・幼児、小学生、発達がゆっくりなお子さんが押しやすいUI

   既存の Happiness UI 1.0 クラスと後方互換
   ========================================================= */

/* ---------------------------------------------------------
   1. デザイントークン
   --------------------------------------------------------- */
.study-app {
  /* 背景 */
  --hp-bg-sky: #e9f8ff;
  --hp-bg-sky-deep: #d7f1ff;
  --hp-bg-pink: #fff0f5;
  --hp-bg-yellow: #fff9df;
  --hp-bg-green: #eefaf4;
  --hp-bg-purple: #f6f0ff;

  /* 基本色 */
  --hp-white: #ffffff;
  --hp-blue: #67c9ef;
  --hp-blue-mid: #2ba5df;
  --hp-blue-deep: #0870b6;

  --hp-pink: #ff9fbe;
  --hp-pink-mid: #ff739f;
  --hp-pink-deep: #e94f82;

  --hp-yellow: #ffe47a;
  --hp-yellow-mid: #ffd84c;
  --hp-yellow-deep: #c99700;

  --hp-green: #a4df62;
  --hp-green-mid: #83cf39;
  --hp-green-deep: #58a91c;

  --hp-purple: #c8a7ed;
  --hp-purple-mid: #a979dc;
  --hp-purple-deep: #7950b3;

  --hp-orange: #ffbd71;
  --hp-orange-deep: #db7626;

  /* 文字 */
  --hp-text: #3c5268;
  --hp-text-strong: #513018;
  --hp-muted: #70879a;
  --hp-placeholder: #9aaaba;

  /* 線 */
  --hp-line: #cfe8f5;
  --hp-line-soft: #e0eef6;
  --hp-line-pink: #ffd0de;
  --hp-line-green: #d3edb9;
  --hp-line-yellow: #f5df87;
  --hp-line-purple: #dfcff3;

  /* 角丸 */
  --hp-radius-app: 26px;
  --hp-radius-xl: 24px;
  --hp-radius-lg: 19px;
  --hp-radius-md: 14px;
  --hp-radius-sm: 10px;
  --hp-radius-round: 999px;

  /* 影 */
  --hp-shadow-app: 0 10px 26px rgba(42, 122, 172, .14);
  --hp-shadow-card: 0 7px 16px rgba(42, 122, 172, .12);
  --hp-shadow-soft: 0 4px 10px rgba(50, 113, 151, .10);
  --hp-shadow-button: 0 4px 0 rgba(50, 91, 118, .22);
  --hp-shadow-button-down: 0 1px 0 rgba(50, 91, 118, .18);
  --hp-shadow-ball: 0 5px 8px rgba(125, 72, 105, .22);

  /* 余白 */
  --hp-space-1: 4px;
  --hp-space-2: 8px;
  --hp-space-3: 12px;
  --hp-space-4: 16px;
  --hp-space-5: 22px;
  --hp-space-6: 30px;

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

.study-app *,
.study-app *::before,
.study-app *::after {
  box-sizing: border-box;
}

/* ---------------------------------------------------------
   2. アプリ土台とテーマ
   --------------------------------------------------------- */
.study-app .hp-app {
  position: relative;
  border: 3px solid var(--hp-line);
  border-radius: var(--hp-radius-app);
  color: var(--hp-text);
  box-shadow: var(--hp-shadow-app);
}

.study-app .hp-theme-sky {
  background:
    radial-gradient(circle at 8% 7%, rgba(255, 228, 122, .38) 0 6px, transparent 7px),
    radial-gradient(circle at 92% 8%, rgba(255, 159, 190, .30) 0 6px, transparent 7px),
    linear-gradient(180deg, #f6fcff 0%, var(--hp-bg-sky) 58%, var(--hp-bg-sky-deep) 100%);
}

.study-app .hp-theme-pink {
  background:
    radial-gradient(circle at 9% 7%, rgba(255, 228, 122, .34) 0 6px, transparent 7px),
    radial-gradient(circle at 91% 8%, rgba(103, 201, 239, .27) 0 6px, transparent 7px),
    linear-gradient(180deg, #fffafd 0%, var(--hp-bg-pink) 100%);
}

.study-app .hp-theme-yellow {
  background:
    radial-gradient(circle at 9% 7%, rgba(103, 201, 239, .23) 0 6px, transparent 7px),
    linear-gradient(180deg, #fffef8 0%, var(--hp-bg-yellow) 100%);
}

.study-app .hp-theme-green {
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 228, 122, .27) 0 6px, transparent 7px),
    linear-gradient(180deg, #fbfffd 0%, var(--hp-bg-green) 100%);
}

.study-app .hp-theme-purple {
  background:
    radial-gradient(circle at 9% 7%, rgba(255, 159, 190, .26) 0 6px, transparent 7px),
    linear-gradient(180deg, #fdfbff 0%, var(--hp-bg-purple) 100%);
}

/* ---------------------------------------------------------
   3. カード、パネル、セクション
   --------------------------------------------------------- */
.study-app .hp-card {
  background: rgba(255, 255, 255, .97);
  border: 2px solid var(--hp-line);
  border-radius: var(--hp-radius-lg);
  box-shadow: var(--hp-shadow-card);
}

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

.study-app .hp-panel {
  padding: var(--hp-space-4);
  background: rgba(255, 255, 255, .96);
  border: 3px solid #fff;
  border-radius: var(--hp-radius-xl);
  box-shadow:
    inset 0 0 0 2px var(--hp-line),
    var(--hp-shadow-card);
}

.study-app .hp-panel-blue {
  background: linear-gradient(180deg, #f7fdff, #e9f8ff);
  box-shadow:
    inset 0 0 0 2px #bce4f6,
    var(--hp-shadow-card);
}

.study-app .hp-panel-pink {
  background: linear-gradient(180deg, #fffafd, #fff0f5);
  box-shadow:
    inset 0 0 0 2px var(--hp-line-pink),
    var(--hp-shadow-card);
}

.study-app .hp-panel-green {
  background: linear-gradient(180deg, #fbfff8, #f1fae8);
  box-shadow:
    inset 0 0 0 2px var(--hp-line-green),
    var(--hp-shadow-card);
}

.study-app .hp-panel-yellow {
  background: linear-gradient(180deg, #fffef7, #fff7d6);
  box-shadow:
    inset 0 0 0 2px var(--hp-line-yellow),
    var(--hp-shadow-card);
}

.study-app .hp-panel-purple {
  background: linear-gradient(180deg, #fefcff, #f5effd);
  box-shadow:
    inset 0 0 0 2px var(--hp-line-purple),
    var(--hp-shadow-card);
}

/* ---------------------------------------------------------
   4. タイトル
   --------------------------------------------------------- */
.study-app .hp-app-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 15px;
  background: rgba(255, 255, 255, .92);
  border: 3px solid #fff;
  border-radius: var(--hp-radius-lg);
  box-shadow: var(--hp-shadow-soft);
}

.study-app .hp-app-header-icon {
  flex: 0 0 auto;
  font-size: 1.75rem;
  line-height: 1;
}

.study-app .hp-app-title {
  margin: 0;
  color: var(--hp-blue-deep);
  font-size: clamp(1.08rem, 2.4vw, 1.5rem);
  font-weight: 1000;
  line-height: 1.3;
}

.study-app .hp-app-subtitle {
  margin: 2px 0 0;
  color: var(--hp-muted);
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.5;
}

.study-app .hp-title-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  padding: .55em 1.1em;
  border: 3px solid #fff;
  border-radius: var(--hp-radius-round);
  background: rgba(255, 255, 255, .96);
  box-shadow:
    inset 0 0 0 2px var(--hp-line),
    var(--hp-shadow-soft);
  font-weight: 1000;
}

/* ---------------------------------------------------------
   5. バッジ、ラベル
   --------------------------------------------------------- */
.study-app .hp-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35em;
  min-height: 30px;
  padding: .35em .75em;
  border-radius: var(--hp-radius-round);
  font-size: .82rem;
  font-weight: 900;
  white-space: nowrap;
}

.study-app .hp-badge-blue {
  color: #256f9f;
  background: #e4f6ff;
  border: 2px solid #bfe7f8;
}

.study-app .hp-badge-pink {
  color: #a83862;
  background: #fff0f5;
  border: 2px solid #ffc6d8;
}

.study-app .hp-badge-mint,
.study-app .hp-badge-green {
  color: #357c43;
  background: #effbe7;
  border: 2px solid #caeaa9;
}

.study-app .hp-badge-yellow {
  color: #806300;
  background: #fff7cf;
  border: 2px solid #f4da70;
}

.study-app .hp-badge-purple {
  color: #7150a5;
  background: #f3edfc;
  border: 2px solid #d9c7ef;
}

.study-app .hp-corner-label {
  position: absolute;
  top: -3px;
  left: -3px;
  padding: 6px 18px;
  border-radius: 15px 0 14px 0;
  color: #fff;
  font-size: .86rem;
  font-weight: 1000;
  background: linear-gradient(180deg, var(--hp-blue), var(--hp-blue-mid));
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .28);
}

.study-app .hp-corner-label-pink {
  background: linear-gradient(180deg, var(--hp-pink), var(--hp-pink-deep));
}

.study-app .hp-corner-label-green {
  background: linear-gradient(180deg, var(--hp-green), var(--hp-green-deep));
}

.study-app .hp-corner-label-yellow {
  color: #6c5200;
  background: linear-gradient(180deg, #fff3a8, var(--hp-yellow-mid));
}

.study-app .hp-corner-label-purple {
  background: linear-gradient(180deg, var(--hp-purple), var(--hp-purple-deep));
}

/* ---------------------------------------------------------
   6. ボタン
   --------------------------------------------------------- */
.study-app .hp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .38em;
  min-height: 44px;
  padding: .65em 1em;
  border: 2px solid transparent;
  border-radius: var(--hp-radius-md);
  color: var(--hp-text);
  font-family: inherit;
  font-size: .92rem;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--hp-shadow-button);
  transition:
    transform .08s ease,
    box-shadow .08s ease,
    filter .12s ease;
  touch-action: manipulation;
}

.study-app .hp-btn:hover {
  filter: brightness(1.025);
}

.study-app .hp-btn:active {
  transform: translateY(3px) scale(.985);
  box-shadow: var(--hp-shadow-button-down);
}

.study-app .hp-btn:disabled,
.study-app .hp-btn[aria-disabled="true"] {
  opacity: .38;
  cursor: default;
  filter: grayscale(.12);
  transform: none;
  box-shadow: none;
}

.study-app .hp-btn-number,
.study-app .hp-btn-white {
  color: var(--hp-text);
  border-color: #d5e7f2;
  background: linear-gradient(180deg, #fff, #edf5f9);
}

.study-app .hp-btn-blue {
  color: #fff;
  border-color: #73cff1;
  background:
    linear-gradient(180deg, #70d3f6, var(--hp-blue-mid));
}

.study-app .hp-btn-pink {
  color: #7b2647;
  border-color: #ffb1c9;
  background:
    linear-gradient(180deg, #ffd9e6, var(--hp-pink));
}

.study-app .hp-btn-green {
  color: #285f21;
  border-color: #8fd04f;
  background:
    linear-gradient(180deg, #dff4b8, var(--hp-green));
}

.study-app .hp-btn-yellow {
  color: #745900;
  border-color: #efcf54;
  background:
    linear-gradient(180deg, #fff5b5, var(--hp-yellow-mid));
}

.study-app .hp-btn-purple {
  color: #553580;
  border-color: #c3a0e8;
  background:
    linear-gradient(180deg, #eadcf9, var(--hp-purple));
}

.study-app .hp-btn-orange {
  color: #754013;
  border-color: #f2a75e;
  background:
    linear-gradient(180deg, #ffe0bb, var(--hp-orange));
}

.study-app .hp-btn-soft {
  color: var(--hp-text);
  border-color: #dce9f7;
  background:
    linear-gradient(135deg, #dff3ff, #ffe4ee);
}

.study-app .hp-btn-round {
  width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border-radius: 50%;
  font-size: 1.35rem;
}

.study-app .hp-btn-lg {
  min-height: 54px;
  padding: .8em 1.35em;
  font-size: 1.03rem;
}

.study-app .hp-btn-sm {
  min-height: 34px;
  padding: .42em .75em;
  border-radius: var(--hp-radius-sm);
  font-size: .76rem;
}

/* ---------------------------------------------------------
   7. ステッパー  − 数 ＋
   --------------------------------------------------------- */
.study-app .hp-stepper {
  padding: 6px 8px 8px;
  border: 3px solid var(--hp-line);
  border-radius: var(--hp-radius-md);
  text-align: center;
  background: #f7fcff;
}

.study-app .hp-stepper-blue {
  border-color: #bee6f8;
  background: #effaff;
}

.study-app .hp-stepper-green {
  border-color: #d3edb9;
  background: #f5fde9;
}

.study-app .hp-stepper-pink {
  border-color: #ffd0de;
  background: #fff3f7;
}

.study-app .hp-stepper-yellow {
  border-color: #f5df87;
  background: #fffbea;
}

.study-app .hp-stepper-purple {
  border-color: #dfcff3;
  background: #f8f3fd;
}

.study-app .hp-stepper-label {
  display: block;
  margin-bottom: 3px;
  color: var(--hp-muted);
  font-size: .78rem;
  font-weight: 1000;
}

.study-app .hp-stepper-row {
  display: grid;
  grid-template-columns: 38px minmax(42px, 1fr) 38px;
  align-items: center;
  gap: 5px;
}

.study-app .hp-stepper-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 35px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: 10px;
  color: #fff;
  font: 1000 1.25rem/1 inherit;
  cursor: pointer;
  background: linear-gradient(180deg, #5bcef5, #229bd9);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .3),
    0 4px 0 rgba(27, 102, 143, .35);
}

.study-app .hp-stepper-green .hp-stepper-btn {
  background: linear-gradient(180deg, #a1dd51, #68bd24);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .3),
    0 4px 0 rgba(59, 126, 15, .35);
}

.study-app .hp-stepper-pink .hp-stepper-btn {
  background: linear-gradient(180deg, #ffadc7, #ed6893);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .3),
    0 4px 0 rgba(157, 48, 87, .33);
}

.study-app .hp-stepper-yellow .hp-stepper-btn {
  color: #725500;
  background: linear-gradient(180deg, #ffef91, #f4c929);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .35),
    0 4px 0 rgba(149, 111, 0, .28);
}

.study-app .hp-stepper-purple .hp-stepper-btn {
  background: linear-gradient(180deg, #caa8ed, #9870cf);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .3),
    0 4px 0 rgba(83, 53, 123, .30);
}

.study-app .hp-stepper-btn:disabled {
  opacity: .34;
  cursor: default;
  box-shadow: none;
}

.study-app .hp-stepper-value {
  display: grid;
  place-items: center;
  min-height: 35px;
  padding: 2px 7px;
  border-radius: 9px;
  color: var(--hp-text-strong);
  font-size: 1.2rem;
  font-weight: 1000;
  background: #fff;
  box-shadow:
    inset 0 2px 5px rgba(93, 108, 118, .12),
    0 2px 0 rgba(166, 185, 196, .4);
}

/* ---------------------------------------------------------
   8. 答えカード、問題カード
   --------------------------------------------------------- */
.study-app .hp-question-card {
  position: relative;
  padding: 18px;
  border: 3px solid #a9daf1;
  border-radius: var(--hp-radius-lg);
  background: linear-gradient(180deg, #fff, #fffdfd);
  box-shadow: inset 0 -4px 8px rgba(139, 198, 228, .08);
}

.study-app .hp-answer-card {
  padding: 8px;
  border: 2px solid var(--hp-line-pink);
  border-radius: var(--hp-radius-md);
  text-align: center;
  background: linear-gradient(180deg, #fff0f5, #ffe0ea);
}

.study-app .hp-answer-label {
  color: var(--hp-pink-deep);
  font-size: .84rem;
  font-weight: 1000;
}

.study-app .hp-answer-value {
  color: var(--hp-pink-deep);
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 1000;
  line-height: 1.05;
}

.study-app .hp-answer-value.is-hidden {
  opacity: .13;
  filter: blur(4px);
  user-select: none;
}

.study-app .hp-answer-reveal {
  width: 100%;
  min-height: 27px;
  margin-top: 3px;
  padding: 3px 7px;
  border: 2px solid #ef5f8d;
  border-radius: var(--hp-radius-round);
  color: #fff;
  font: 900 .7rem/1 inherit;
  cursor: pointer;
  background: linear-gradient(180deg, #ff83a8, #ef4d82);
  box-shadow: 0 3px 0 #ca3b69;
}

/* ---------------------------------------------------------
   9. トグル
   --------------------------------------------------------- */
.study-app .hp-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 6px 9px;
  border: 2px solid var(--hp-line);
  border-radius: var(--hp-radius-md);
  color: var(--hp-text);
  font-size: .76rem;
  font-weight: 900;
  cursor: pointer;
  background: rgba(255, 255, 255, .9);
}

.study-app .hp-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.study-app .hp-toggle-track {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 25px;
  border: 2px solid var(--hp-blue);
  border-radius: var(--hp-radius-round);
  background: #fff;
  transition: .2s ease;
}

.study-app .hp-toggle-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #b7cad4;
  box-shadow: 0 2px 4px rgba(30, 78, 103, .2);
  transition: .2s ease;
}

.study-app .hp-toggle input:checked + .hp-toggle-track {
  background: var(--hp-blue-mid);
}

.study-app .hp-toggle input:checked + .hp-toggle-track::after {
  left: 22px;
  background: #fff;
}

/* ---------------------------------------------------------
   10. セグメントボタン
   --------------------------------------------------------- */
.study-app .hp-segmented {
  display: inline-flex;
  gap: 5px;
  padding: 4px;
  border: 2px solid var(--hp-line-soft);
  border-radius: var(--hp-radius-md);
  background: rgba(255, 255, 255, .76);
}

.study-app .hp-segment {
  min-height: 32px;
  padding: 4px 12px;
  border: 2px solid #cad8e1;
  border-radius: var(--hp-radius-sm);
  color: #56636c;
  font: 900 .72rem/1 inherit;
  cursor: pointer;
  background: linear-gradient(180deg, #fff, #e7edf1);
  box-shadow: 0 2px 0 #b5c0c7;
}

.study-app .hp-segment.is-active,
.study-app .hp-segment[aria-pressed="true"] {
  color: #fff;
  border-color: var(--hp-blue-mid);
  background: linear-gradient(180deg, var(--hp-blue), var(--hp-blue-mid));
  box-shadow: 0 2px 0 var(--hp-blue-deep);
}

.study-app .hp-segment-pink.is-active {
  border-color: var(--hp-pink-mid);
  background: linear-gradient(180deg, var(--hp-pink), var(--hp-pink-deep));
  box-shadow: 0 2px 0 #b83f69;
}

.study-app .hp-segment-green.is-active {
  border-color: var(--hp-green-mid);
  background: linear-gradient(180deg, var(--hp-green), var(--hp-green-deep));
  box-shadow: 0 2px 0 #3e8513;
}

.study-app .hp-segment-yellow.is-active {
  color: #6f5400;
  border-color: var(--hp-yellow-mid);
  background: linear-gradient(180deg, #fff2a5, var(--hp-yellow-mid));
  box-shadow: 0 2px 0 #b68b00;
}

.study-app .hp-segment-purple.is-active {
  border-color: var(--hp-purple-mid);
  background: linear-gradient(180deg, var(--hp-purple), var(--hp-purple-deep));
  box-shadow: 0 2px 0 #5e3b91;
}

/* ---------------------------------------------------------
   11. 入力欄、選択欄
   --------------------------------------------------------- */
.study-app .hp-input,
.study-app .hp-select {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 2px solid var(--hp-line);
  border-radius: var(--hp-radius-md);
  color: var(--hp-text);
  font: 800 .92rem/1.4 inherit;
  background: #fff;
  box-shadow: inset 0 2px 5px rgba(76, 105, 124, .08);
  outline: none;
}

.study-app .hp-input::placeholder {
  color: var(--hp-placeholder);
}

.study-app .hp-input:focus,
.study-app .hp-select:focus {
  border-color: var(--hp-blue);
  box-shadow:
    0 0 0 4px rgba(103, 201, 239, .20),
    inset 0 2px 5px rgba(76, 105, 124, .08);
}

/* ---------------------------------------------------------
   12. 玉、色選択
   --------------------------------------------------------- */
.study-app .hp-ball {
  --hp-ball-light: #ffe3ed;
  --hp-ball-mid: #ff9fbe;
  --hp-ball-dark: #ef5e91;

  display: inline-block;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 29% 23%, #fff 0 9%, transparent 10%),
    radial-gradient(circle at 34% 31%, var(--hp-ball-light) 0 22%, transparent 23%),
    linear-gradient(145deg, var(--hp-ball-mid), var(--hp-ball-dark));
  box-shadow:
    inset 4px 5px 6px rgba(255, 255, 255, .55),
    inset -6px -7px 10px rgba(112, 31, 68, .15),
    var(--hp-shadow-ball);
}

.study-app .hp-ball-pink {
  --hp-ball-light: #ffe3ed;
  --hp-ball-mid: #ff9fbe;
  --hp-ball-dark: #ef5e91;
}

.study-app .hp-ball-yellow {
  --hp-ball-light: #fff6bf;
  --hp-ball-mid: #ffd64f;
  --hp-ball-dark: #f4a900;
}

.study-app .hp-ball-green {
  --hp-ball-light: #e1f8bd;
  --hp-ball-mid: #93d74d;
  --hp-ball-dark: #55ad20;
}

.study-app .hp-ball-blue {
  --hp-ball-light: #d9f5ff;
  --hp-ball-mid: #56c7ef;
  --hp-ball-dark: #168eca;
}

.study-app .hp-ball-purple {
  --hp-ball-light: #eee2ff;
  --hp-ball-mid: #b58ae9;
  --hp-ball-dark: #7d50c4;
}

.study-app .hp-color-picker {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.study-app .hp-color-option {
  width: 31px;
  height: 31px;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  box-shadow:
    inset 3px 4px 4px rgba(255, 255, 255, .65),
    inset -4px -5px 6px rgba(66, 64, 69, .14),
    0 3px 6px rgba(61, 97, 122, .2);
}

.study-app .hp-color-option.is-active,
.study-app .hp-color-option[aria-pressed="true"] {
  outline: 3px solid rgba(255, 204, 54, .95);
  outline-offset: 2px;
  transform: scale(1.08);
}

/* ---------------------------------------------------------
   13. 状態表示、フィードバック
   --------------------------------------------------------- */
.study-app .hp-feedback {
  min-height: 46px;
  padding: 9px 12px;
  border: 2px solid transparent;
  border-radius: var(--hp-radius-md);
  text-align: center;
  font-size: .95rem;
  font-weight: 1000;
}

.study-app .hp-feedback-success {
  color: #2e8252;
  border-color: #a7dfc1;
  background: #eafaf2;
}

.study-app .hp-feedback-error {
  color: #ca4d71;
  border-color: #ffc0d2;
  background: #fff0f4;
}

.study-app .hp-feedback-info {
  color: #3278a7;
  border-color: #bce3f5;
  background: #edf9ff;
}

.study-app .hp-feedback-warning {
  color: #856500;
  border-color: #f1d970;
  background: #fff9da;
}

/* ---------------------------------------------------------
   14. ツールバー、ボタングループ
   --------------------------------------------------------- */
.study-app .hp-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.study-app .hp-actions {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
}

.study-app .hp-settings-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 7px 10px;
  border: 2px solid var(--hp-line-soft);
  border-radius: var(--hp-radius-md);
  background: rgba(255, 255, 255, .75);
}

.study-app .hp-setting-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.study-app .hp-setting-label {
  color: var(--hp-muted);
  font-size: .73rem;
  font-weight: 1000;
}

/* ---------------------------------------------------------
   15. モーダル
   --------------------------------------------------------- */
.study-app .hp-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(35, 50, 77, .24);
  backdrop-filter: blur(3px);
}

.study-app .hp-modal-panel {
  width: min(520px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  overflow: auto;
  padding: var(--hp-space-4);
  background: rgba(255, 255, 255, .98);
  border: 3px solid #fff;
  border-radius: var(--hp-radius-xl);
  box-shadow:
    inset 0 0 0 2px var(--hp-line),
    0 20px 55px rgba(35, 50, 77, .24);
}

/* ---------------------------------------------------------
   16. アクセシビリティ
   --------------------------------------------------------- */
.study-app .hp-btn:focus-visible,
.study-app .hp-stepper-btn:focus-visible,
.study-app .hp-segment:focus-visible,
.study-app .hp-color-option:focus-visible,
.study-app .hp-answer-reveal:focus-visible,
.study-app .hp-input:focus-visible,
.study-app .hp-select:focus-visible {
  outline: 4px solid rgba(255, 204, 54, .9);
  outline-offset: 3px;
}

.study-app .hp-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------------------------------------------------------
   17. レスポンシブ
   --------------------------------------------------------- */
@media (max-width: 700px) {
  .study-app {
    --hp-radius-app: 21px;
    --hp-radius-xl: 19px;
    --hp-radius-lg: 16px;
    --hp-radius-md: 12px;
  }

  .study-app .hp-app-header {
    padding: 7px 10px;
  }

  .study-app .hp-app-header-icon {
    font-size: 1.35rem;
  }

  .study-app .hp-app-title {
    font-size: .98rem;
  }

  .study-app .hp-app-subtitle {
    display: none;
  }

  .study-app .hp-btn {
    min-height: 42px;
    padding: .58em .78em;
    font-size: .82rem;
  }

  .study-app .hp-btn-round {
    width: 43px;
    height: 43px;
    min-height: 43px;
  }

  .study-app .hp-stepper-row {
    grid-template-columns: 32px minmax(38px, 1fr) 32px;
  }

  .study-app .hp-stepper-btn {
    width: 32px;
    height: 31px;
    font-size: 1.05rem;
  }

  .study-app .hp-stepper-value {
    min-height: 31px;
    font-size: 1rem;
  }

  .study-app .hp-panel {
    padding: var(--hp-space-3);
  }
}

@media (max-width: 420px) {
  .study-app .hp-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .study-app .hp-actions > .hp-btn {
    width: 100%;
  }

  .study-app .hp-settings-row {
    gap: 7px 12px;
    padding: 6px;
  }
}

/* ---------------------------------------------------------
   18. 動きを減らす設定
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .study-app *,
  .study-app *::before,
  .study-app *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}