/* 06 STUDY — 연습 화면 고유 콘텐츠만. 캐릭터/닉네임/타이틀/설정/홈버튼 재정의 금지. */
#study .line{
  border-radius:18px;
  transition:.2s;
  min-height:0;
  overflow:hidden;
}
#study .line.active{
  opacity:1;
  filter:none;
}
#study .line.inactive,
#study .line.done{
  opacity:.62;
  filter:saturate(.72);
}
#study .jp-main{
  font-weight:950;
  letter-spacing:-1.2px;
}
#study .jp-answer{
  font-weight:900;
  letter-spacing:-.6px;
}
#study .translation{
  color:#526986;
  font-weight:700;
  font-size:clamp(14px,3.6vw,18px);
}

.position{
  font-size:10px;
  color:#6e7f98;
  font-weight:900;
  white-space:nowrap;
}

.main .line-label{
  color:#52708f;
}

.pos .line-label{
  color:#19844d;
}

.neg .line-label{
  color:#d04561;
}

.line.inactive .translation,
.line.done .translation{
  display:none;
}

.line.inactive ruby rt{
  color:#8494aa;
}

#study.review-answer-blur #lineMain > :not(#revealBtn):not(.translation),
#study.review-answer-blur #linePos > :not(.translation),
#study.review-answer-blur #lineNeg > :not(.translation){
  filter:blur(6px);
  opacity:.34;
  user-select:none;
  pointer-events:none;
  transition:filter .18s ease,opacity .18s ease;
}

#study.review-answer-blur .line.active .translation{
  filter:none;
  opacity:1;
  user-select:text;
  pointer-events:auto;
}

#study.review-answer-blur #lineMain,
#study.review-answer-blur #linePos,
#study.review-answer-blur #lineNeg{
  cursor:default;
}

#study.review-answer-blur ruby rt{
  filter:none;
  opacity:1;
}

.reveal{
  border:1px solid #bad8f5;
  background:rgba(255,255,255,.9);
  border-radius:12px;
  color:var(--blue2);
  font-weight:900;
  font-size:11px;
  padding:7px 10px;
  margin-top:4px;
}

.flower-item{
  display:flex;
  align-items:center;
  gap:4px;
  font-size:10px;
  font-weight:900;
  color:#60738f;
}

.flower-icon{
  width:22px;
  height:22px;
  display:block;
  filter:grayscale(1);
  opacity:.34;
  transform:scale(.9);
  transition:.22s;
}

.flower-item.current{
  color:var(--blue2);
}

.flower-item.current .flower-icon{
  opacity:.65;
  filter:none;
}

.flower-sep{
  width:20px;
  height:2px;
  background:#cddceb;
  border-radius:9px;
}


.score-track{
  height:5px;
  background:#e1eaf4;
  border-radius:999px;
  margin-top:4px;
  overflow:hidden;
}

.score-track i{
  display:block;
  width:0;
  height:100%;
  background:linear-gradient(90deg,#6fb7ff,#0b72e6);
  transition:.2s;
}

.score-divider{
  width:1px;
  height:42px;
  background:#dce6f0;
}

.nextdue{
  height:13px;
  font-size:9px;
  color:#71819e;
  text-align:center;
  flex:0 0 auto;
}


@media (max-height:780px){
  .position{
    font-size:9px;
  }

  .flower-icon{
    width:17px;
    height:17px;
  }

  .flower-item{
    font-size:9px;
  }

  .flower-sep{
    width:13px;
  }

  .nextdue{
    height:9px;
    font-size:9px;
  }
}

.line-label{
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:950;
  margin-bottom:2px;
  font-size:12px;
}

.lesson-shell.replay-ready .line:active{
  transform:scale(.993);
}

.lesson-shell.replay-ready .line:hover{
  box-shadow:0 0 0 3px rgba(27,128,225,.17) inset;
}

@media (min-height:820px){
  #study.screen{
    padding-left:14px;
    padding-right:14px;
  }
}


.lesson-visual:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(248,253,255,.995) 0%,rgba(248,253,255,.96) 42%,rgba(248,253,255,.44) 66%,rgba(248,253,255,.04) 100%),
    linear-gradient(180deg,rgba(248,253,255,.01) 0%,rgba(248,253,255,.03) 46%,rgba(248,253,255,.70) 70%,rgba(248,253,255,.93) 100%);
}

.rating button:not(:disabled){
  box-shadow:0 7px 16px rgba(52,91,128,.13);
}

.rating button:not(:disabled):active{
  transform:translateY(1px);
}

.mic-btn{
  border-radius:50%;
  color:#fff;
  font-size:33px;
  display:grid;
  place-items:center;
  transition:.15s;
  border:5px solid #fff;
  width:100px;
  height:100px;
  background:linear-gradient(145deg,#2ca9ff,#0b71ea);
  box-shadow:0 0 0 3px #1688f4,0 13px 30px rgba(20,117,224,.34);
}

.mic-btn.recording{
  transform:scale(1.04);
  background:linear-gradient(145deg,#ff6f7d,#dd3347);
  box-shadow:0 0 0 3px #ff5365,0 13px 30px rgba(220,44,64,.36);
}

.mic-label{
  border-radius:999px;
  font-weight:950;
  bottom:-4px;
  font-size:11px;
  position:static;
  background:transparent;
  box-shadow:none;
  padding:0;
}


.rect-audio-btn{
  height:68px;
  width:100%;
  border-radius:20px;
  border:2px solid rgba(54,137,220,.32);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:0 13px;
  font-size:16px;
  font-weight:950;
  transition:.15s ease;
}

.rect-audio-btn:active{
  transform:translateY(1px) scale(.985);
}

.selected-speaker svg{
  width:100%;
  height:100%;
}

.main-mic-wrap{
  height:108px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
}

.selected-mic{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
}

.selected-mic svg{
  width:100%;
  height:100%;
}

.main-mic-wrap .mic-label{
  position:static;
  background:transparent;
  box-shadow:none;
  padding:0;
  font-size:13px;
  color:#126FD4;
  font-weight:950;
}

#flowerNeg .flower-icon{
  color:#F06D9B;
  width:26px;
  height:26px;
  transform:scale(1);
}

#flowerNeg.current .flower-icon{
  color:#F277A0;
  filter:none;
  opacity:.78;
}


.selected-speaker{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  position:relative;
  z-index:1;
  filter:drop-shadow(0 2px 2px rgba(50,90,120,.12));
}

.control-text{
  font-size:16px;
  font-weight:950;
  white-space:nowrap;
  position:relative;
  z-index:1;
}

.flower-item .flower-icon{
  transform:none;
}

#study .card{
  overflow:visible;
}

#revealBtn{
  position:relative;
  z-index:9999;
  isolation:isolate;
  overflow:visible;
  margin-top:6px;
  margin-bottom:8px;
  min-height:44px;
}

.lesson-visual{
  position:absolute;
  inset:0;
  transition:.25s;
  opacity:1;
  filter:saturate(1.05) contrast(1.03);
  background-position:right 12px top 12px;
  background-repeat:no-repeat;
  background-size:min(46%,300px) auto;
}

.flower-item.done .flower-icon{
  color:#f2558d;
  opacity:1;
  transform:scale(1.14);
  width:24px;
  height:24px;
  filter:drop-shadow(0 2px 3px rgba(226,66,126,.20));
}

.flower-item:not(.done) .flower-icon{
  transform:none;
}

#flowerNeg:not(.done) .flower-icon{
  color:inherit;
  width:22px;
  height:22px;
  transform:none;
}

#flowerNeg.done .flower-icon{
  color:#F04F8A;
  opacity:1;
  filter:none;
  width:24px;
  height:24px;
  transform:scale(1.14);
}

.speaker-mini{
  position:absolute;
  right:14px;
  top:56px;
  width:39px;
  height:39px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.82);
  color:var(--blue);
  font-size:20px;
  z-index:3;
  box-shadow:0 5px 16px rgba(38,95,155,.12);
  display:none;
}

.line-speaker{
  margin-top:7px;
  min-height:38px;
  padding:7px 13px;
  border:1px solid rgba(67,148,228,.35);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(232,246,255,.96));
  color:#096fd5;
  font-size:12px;
  font-weight:950;
  box-shadow:0 5px 14px rgba(25,103,181,.12);
  display:none;
}

.lesson-shell.replay-ready .line-speaker{
  align-items:center;
  justify-content:center;
  gap:5px;
  display:none;
}

.word-chip{
  font-size:9px;
  font-weight:900;
  padding:3px 6px;
  border-radius:999px;
  border:1px solid transparent;
}

.word-chip.good{
  background:#e7f7ee;
  color:#23814e;
  border-color:#bce7ce;
}

.word-chip.close{
  background:#fff6d9;
  color:#9a7116;
  border-color:#f2dea0;
}

.word-chip.miss{
  background:#fff0f1;
  color:#b54350;
  border-color:#f0c4c9;
}

#study .line.pos .jp,
#study .line.neg .jp{
  margin-top:2px;
  margin-bottom:2px;
}

#study .line.pos + .line.neg{
  margin-top:0;
}

#study .lesson-shell > img,
#study .lesson-card > img,
#study img[id*="lesson"],
#study img[class*="lesson"]{
  display:none;
}

#study [class*="lesson-image"],
#study [class*="scene-image"],
#study [class*="illustration"]{
  display:none;
}

#study .line.main *,
#study .line.pos *,
#study .line.neg *{
  max-width:100%;
  overflow-wrap:anywhere;
}


.review-sentence-meta .lesson-no{
  min-width:0;
  font-size:8.5px;
  font-weight:900;
  color:#637b94;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#study .line.pos{
  padding-top:14px;
  padding-bottom:14px;
  position:relative;
  max-height:none;
  box-sizing:border-box;
  align-items:stretch;
  flex:0 0 auto;
  overflow:visible;
  margin:0;
  border:1px solid rgba(96,170,120,.34);
  border-radius:16px;
  background:linear-gradient(135deg,#f0fbf3 0%,#e8f8ed 100%);
  box-shadow:0 3px 10px rgba(80,145,96,.10);
  display:flex;
  flex-direction:column;
  justify-content:center;
  height:auto;
  padding:10px 11px;
  min-height:0;
}

#study .line.neg{
  padding-top:14px;
  padding-bottom:14px;
  position:relative;
  max-height:none;
  box-sizing:border-box;
  align-items:stretch;
  flex:0 0 auto;
  overflow:visible;
  margin:0;
  border:1px solid rgba(210,127,137,.30);
  border-radius:16px;
  background:linear-gradient(135deg,#fff1f3 0%,#fce8ec 100%);
  box-shadow:0 3px 10px rgba(180,100,112,.09);
  display:flex;
  flex-direction:column;
  justify-content:center;
  height:auto;
  padding:10px 11px;
  min-height:0;
}

#study .line.main{
  height:auto;
  margin:0;
  padding:12px 14px;
  border:1px solid rgba(71,137,190,.38);
  border-radius:18px;
  background:linear-gradient(135deg,#eef8ff 0%,#e6f3ff 100%);
  box-shadow:0 4px 12px rgba(62,122,168,.12);
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:0;
}

#study .flower-icon{
  width:18px;
  height:18px;
}

#study .flower-item{
  font-size:9px;
  gap:3px;
}

#study .selected-speaker{
  width:34px;
  height:34px;
}

#study.review-practice .line.pos,
#study.review-practice .line.neg{
  opacity:.62;
}

#study.review-practice .rating button{
  font-size:15px;
}

#study #selfVoiceBtn.self-voice-recording{
  border-color:#F2A2B3;
  color:#B52545;
  background:linear-gradient(180deg,#FFF7F9,#FFE1E8);
}

#study #selfVoiceBtn.self-voice-ready{
  border-color:#AFA4EB;
  color:#4F47A5;
  background:linear-gradient(180deg,#FAF8FF,#DDD7FF);
}

#study #selfVoiceBtn.self-voice-playing{
  border-color:#6259C9;
  color:#fff;
  background:linear-gradient(180deg,#8D80EE,#655BCE);
}

#study .line-label #categoryText{
  display:inline-flex;
  align-items:center;
  gap:3px;
}

#study .rating button{
  font-size:14px;
  border-radius:15px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  line-height:1.05;
  transition:.2s;
}

#study .rating .rating-main{
  font-size:1em;
  font-weight:950;
}


#study .rating .hard{
  background:#F2B35B;
  border:2px solid #D88918;
  color:#5F3900;
box-shadow:
    0 12px 0 -8px rgba(185,111,14,.58),
    0 14px 24px rgba(185,111,14,.22),
    0 4px 8px rgba(77,51,14,.12),
    inset 0 2px 0 rgba(255,255,255,.42),
    inset 0 -3px 0 rgba(90,52,0,.14);
}

#study .rating .easy{
  background:#72BDF2;
  border:2px solid #2698EA;
  color:#103F67;
box-shadow:
    0 12px 0 -8px rgba(29,123,192,.56),
    0 14px 24px rgba(29,123,192,.22),
    0 4px 8px rgba(16,63,103,.12),
    inset 0 2px 0 rgba(255,255,255,.42),
    inset 0 -3px 0 rgba(16,63,103,.14);
}

#study .rating .very{
  background:#6FCF97;
  border:2px solid #35A967;
  color:#164E2D;
box-shadow:
    0 12px 0 -8px rgba(36,130,75,.54),
    0 14px 24px rgba(36,130,75,.22),
    0 4px 8px rgba(22,78,45,.12),
    inset 0 2px 0 rgba(255,255,255,.42),
    inset 0 -3px 0 rgba(22,78,45,.14);
}


#study .rating button:disabled{
  opacity:.58;
  filter:saturate(.72);
  box-shadow:none;
  cursor:not-allowed;
  transform:none;
}

#study .rating button:disabled .rating-main{
  color:currentColor;
  opacity:1;
}

#study #lineMain .line-label #categoryText{
  font-size:13.5px;
  line-height:1.1;
  font-weight:950;
  gap:4px;
}

#study #linePos .line-label,
#study #lineNeg .line-label{
  font-size:13px;
  line-height:1.1;
  font-weight:950;
}

#study.screen{
  padding-top:max(2px,env(safe-area-inset-top));
  justify-content:flex-start;
  gap:1px;
  padding-bottom:calc(4px + env(safe-area-inset-bottom));
}

#study .rect-audio-btn{
  border-radius:18px;
  padding:0 9px;
  gap:6px;
  font-size:14px;
  height:54px;
  min-height:54px;
}

#study .main-mic-wrap{
  height:72px;
  min-height:72px;
}

#study .mic-btn{
  width:66px;
  height:66px;
}


@media (max-height:760px){
  .line-label{
    font-size:10px;
  }

  .flower-icon{
    width:18px;
    height:18px;
  }

  .flower-item{
    font-size:9px;
  }

  .mic-btn{
    font-size:29px;
    width:76px;
    height:76px;
  }

  .rect-audio-btn{
    height:54px;
    border-radius:16px;
    padding:0 8px;
    gap:5px;
  }

  .main-mic-wrap{
    height:84px;
  }

  .selected-mic{
    width:43px;
    height:43px;
  }

  #flowerNeg .flower-icon{
    width:21px;
    height:21px;
  }

  #study .rect-audio-btn{
    height:50px;
    min-height:50px;
  }

  #study .main-mic-wrap{
    height:66px;
    min-height:66px;
  }

  #study .mic-btn{
    width:62px;
    height:62px;
  }

  #study .record-progress{
  order:3;
  width:68%;
  height:3px;
  min-height:3px;
  flex:0 0 3px;
  margin:7px auto -5px;
  opacity:0;
  visibility:hidden;
  transition:opacity .16s ease;
  pointer-events:none;
}

#study .record-progress.show{
  opacity:1;
  visibility:visible;
}

#study .record-progress-track{
  width:100%;
  height:3px;
  overflow:hidden;
  border-radius:999px;
  background:color-mix(in srgb,var(--practice-p4,#A9D5F5) 38%,transparent);
}

#study .record-progress-track i{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:var(--practice-p6,#2698EA);
  transition:width .08s linear;
}



  #study .position,
  #study .flower-item,
  #study .nextdue{
    font-size:9px;
  }

  #study .line-label{
    line-height:1.15;
  }
}

#study .flower-row #flowerMain .flower-icon,
#study .flower-row #flowerPos .flower-icon,
#study .flower-row #flowerNeg .flower-icon{
  width:18px;
  height:18px;
  min-width:18px;
  min-height:18px;
  flex:0 0 18px;
}

#study #matchCard{
  order:5;
  display:block;
  flex:0 0 auto;
  margin:clamp(2px,.72vw,3px) 0 0;
  overflow:hidden;
  border:1px solid var(--practice-p4,#cfe5f8);
  border-radius:15px;
  background:var(--practice-p3,#f4faff);
}

#study #matchCard .scorebox{
  min-height:44px;
  padding:6px 10px;
  display:grid;
  grid-template-columns:1fr 1px 76px;
  align-items:center;
  gap:9px;
  background:transparent;
  border:0;
  box-shadow:none;
}

#study #matchCard .score-title{
  font-size:10px;
  font-weight:900;
  color:var(--practice-text,#526986);
}

#study #matchCard .score-title small{
  font-size:8px;
  opacity:.68;
}

#study #matchCard .score-num{
  display:flex;
  align-items:baseline;
  gap:2px;
  font-size:21px;
  font-weight:1000;
  color:var(--practice-p6,#2698ea);
}

#study #matchCard .score-num small{
  font-size:9px;
}

#study #matchCard .repbox{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
}

#study #matchCard .repbox b{
  font-size:13px;
  color:var(--practice-text,#526986);
}

#study #matchCard .repbox span{
  font-size:8px;
  color:#7d8da0;
}

#study #wordFeedback:empty{
  display:none;
}

#study #lineMain{
  z-index:30;
}

#study #revealBtn{
  flex:0 0 auto;
  margin-top:6px;
  margin-bottom:2px;
  isolation:isolate;
  text-align:center;
  justify-content:center;
  position:absolute;
  right:10px;
  top:8px;
  left:auto;
  bottom:auto;
  width:auto;
  min-width:88px;
  max-width:112px;
  min-height:32px;
  margin:0;
  padding:6px 10px;
  align-self:auto;
  z-index:1600;
  line-height:18px;
  font-size:10px;
  box-shadow:0 5px 14px rgba(25,103,181,.14);
}


#study .study-status .status,
#study #statusChip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:flex-end;
  position:relative;
  z-index:3;
  transform:translateY(12px);
  margin:0;
  padding:8px 15px;
  min-height:34px;
  border:2px solid color-mix(in srgb,var(--theme-accent) 36%, #7caed8 64%);
  border-radius:14px;
  background:color-mix(in srgb,var(--theme-soft) 70%, var(--theme-accent) 30%);
  box-shadow:0 3px 7px color-mix(in srgb,var(--theme-accent) 14%,transparent);
  color:var(--theme-text);
  font-size:15px;
  line-height:1;
  font-weight:950;
  white-space:nowrap;
}


#study .study-status .position,
#study #positionText{
  min-height:0;
  align-self:flex-start;
  border-radius:0;
  letter-spacing:-.02em;
  white-space:nowrap;
  display:block;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  color:var(--theme-accent);
  font-size:14px;
  line-height:1;
  font-weight:950;
  transform:none;
}

#study #lineMain .line-label{
  display:flex;
  align-items:center;
  gap:5px;
  min-height:18px;
}


#study .study-status{
  line-height:1;
  font-weight:1000;
  letter-spacing:-0.03em;
  font-size:12px;
  min-height:0;
  align-self:stretch;
  flex-direction:row;
  align-items:flex-end;
  justify-content:flex-end;
  gap:7px;
  border-radius:0;
  white-space:nowrap;
  overflow:visible;
  margin-right:38px;
  position:absolute;
  bottom:-10px;
  margin:0;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
  z-index:88;
  display:block;
  right:-3px;
  transform:translateY(-2px);
}

#study #lineMain .line-label #statusChip{
  position:static;
  transform:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0;
  min-height:16px;
  height:auto;
  border:1px solid #A9D5F5;
  border-radius:7px;
  background:#EAF5FF;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72);
  color:#1F6FAF;
  line-height:1;
  font-weight:900;
  white-space:nowrap;
  font-size:12.5px;
  padding:3px 7px;
}


#study .flower-row{
  align-items:center;
  justify-content:center;
  display:flex;
  flex:0 0 24px;
  gap:8px;
  margin:0;
  order:1;
  height:24px;
  min-height:24px;
  flex-basis:24px;
}

#study .controls.side-controls .mic-btn{
  margin:0 auto;
}

#study .rating{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  flex:0 0 40px;
  margin:clamp(12px,3.65vw,15px) 0 0;
  height:40px;
  min-height:40px;
  flex-basis:40px;
  gap:6px;
  order:4;
}

#study .nextdue{
  height:10px;
  min-height:10px;
  flex:0 0 10px;
  line-height:10px;
  margin:0;
  order:6;
}

#study .footer{
  padding-bottom:0;
  min-height:16px;
  padding-top:0;
  margin-top:0;
  order:7;
}


#study #listenBtn::before,
#study #listenBtn::after{
  display:none;
  content:none;
}

#study #listenBtn:active,
#study #listenBtn:focus,
#study #listenBtn:hover{
  background:transparent;
  background-image:none;
  box-shadow:none;
  filter:none;
  transform:none;
}

#study #speakBtn{
  width:66px;
  height:66px;
  border-radius:50%;
  border:4px solid #fff;
  background:linear-gradient(145deg,#45b5ff,#0874eb);
  box-shadow:0 0 0 2px #1f91ff,0 8px 16px rgba(23,124,232,.22);
  color:#fff;
  transform:none;
}

#study #speakBtn.recording{
  background:linear-gradient(145deg,#ff6b75,#e63749);
  box-shadow:0 0 0 2px #ff7584,0 8px 18px rgba(220,44,64,.28);
  transform:scale(1.03);
}

#study #selfVoiceBtn::before,
#study #selfVoiceBtn::after{
  display:none;
  content:none;
}

#study #selfVoiceBtn:active,
#study #selfVoiceBtn:focus,
#study #selfVoiceBtn:hover{
  background:transparent;
  background-image:none;
  box-shadow:none;
  filter:none;
  transform:none;
}

#study #listenBtn .selected-speaker{
  width:34px;
  height:34px;
  min-width:34px;
  min-height:34px;
}

#study #listenBtn .control-text{
  font-size:11px;
  line-height:1;
  font-weight:950;
  color:#24506F;
}


#study .lesson-inner{
  position:relative;
  z-index:2;
  flex-direction:column;
  justify-content:flex-start;
  margin:0;
  background:transparent;
  background-image:none;
  display:flex;
  overflow:hidden;
  height:auto;
  min-height:0;
  padding:4px;
  gap:4px;
}

#study #lineMain,
#study #linePos,
#study #lineNeg{
  position:relative;
  min-height:0;
  padding:24px 5px 4px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  box-sizing:border-box;
}

#study .lesson-inner > .line.active{
  flex:0 0 auto;
  height:clamp(165px,20dvh,205px);
  min-height:clamp(165px,20dvh,205px);
  border:2px solid var(--practice-p6,#2698EA);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--practice-p6,#2698EA) 18%,transparent) inset;
}

#study .lesson-inner > .line.inactive,
#study .lesson-inner > .line.done{
  flex:0 0 auto;
  height:clamp(62px,7.5dvh,76px);
  min-height:clamp(62px,7.5dvh,76px);
  align-items:flex-start;
}

#study #lineMain > .line-label,
#study #linePos > .line-label,
#study #lineNeg > .line-label{
  position:absolute;
  top:5px;
  left:7px;
  right:7px;
  margin:0;
  z-index:2;
  justify-content:flex-start;
  text-align:left;
}

#study .lesson-inner > .line .jp-main,
#study .lesson-inner > .line .jp-answer,
#study .lesson-inner > .line .translation{
  width:100%;
  text-align:left;
}

#study .lesson-inner > .line.active .jp-main,
#study .lesson-inner > .line.active .jp-answer{
  font-size:27px;
}

#study .lesson-inner > .line.active .jp-main.sentence-mid,
#study .lesson-inner > .line.active .jp-answer.sentence-mid{
  font-size:24px;
  white-space:nowrap;
}

#study .lesson-inner > .line.active .jp-main.sentence-long,
#study .lesson-inner > .line.active .jp-answer.sentence-long{
  font-size:22px;
  white-space:nowrap;
}

#study .lesson-inner > .line.active .jp-main.sentence-wrap,
#study .lesson-inner > .line.active .jp-answer.sentence-wrap{
  font-size:22px;
  white-space:normal;
}

#study .lesson-inner > .line.inactive .jp-main,
#study .lesson-inner > .line.inactive .jp-answer,
#study .lesson-inner > .line.done .jp-main,
#study .lesson-inner > .line.done .jp-answer{
  font-size:19px;
  line-height:1.12;
}

#study .lesson-inner > .line:not(.active) .sentence-mid,
#study .lesson-inner > .line:not(.active) .sentence-long,
#study .lesson-inner > .line:not(.active) .sentence-wrap{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

#study .lesson-inner > .line:not(.active) ruby rt{
  display:none;
}

#study .controls.side-controls{
  flex:0 0 52px;
  order:2;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  margin:10px 0 0;
  transform:none;
  height:52px;
  min-height:52px;
  align-items:center;
}

#study #listenBtn{
  width:100%;
  padding:0 9px;
  border:0;
  border-radius:16px;
  background:transparent;
  background-image:none;
  box-shadow:none;
  filter:none;
  color:#24506F;
  transform:none;
  height:46px;
  min-height:46px;
}

#study #selfVoiceBtn{
  border-color:#CFC6F4;
  width:100%;
  border:0;
  border-radius:16px;
  background:transparent;
  background-image:none;
  box-shadow:none;
  filter:none;
  color:#24506F;
  transform:none;
  height:46px;
  min-height:46px;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 8px;
}

#study #selfVoiceBtn .split-icon{
  width:28px;
  height:28px;
  min-width:28px;
  min-height:28px;
  flex:0 0 28px;
}

#study #selfVoiceBtn .split-label{
  font-size:11px;
  line-height:1;
  font-weight:950;
  color:#24506F;
  display:inline-block;
  width:46px;
  min-width:46px;
  text-align:left;
  white-space:nowrap;
  margin:0;
}

#study .controls.side-controls .main-mic-wrap{
  width:100%;
  height:54px;
  min-height:54px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transform:translateY(0);
}


@media (max-width:390px){
  #study #lineMain .line-label #categoryText{
    font-size:12.5px;
  }

  #study #linePos .line-label,
#study #lineNeg .line-label{
    font-size:12px;
  }

  #study #revealBtn{
    right:8px;
    top:7px;
    min-width:82px;
    padding:5px 8px;
  }

  #study .study-status .status,
#study #statusChip{
    font-size:13px;
    padding:7px 13px;
    min-height:31px;
    transform:translateY(10px);
    padding-left:11px;
    padding-right:11px;
  }

  #study .study-status .position,
#study #positionText{
    font-size:13px;
  }

  #study #lineMain .line-label{
    gap:4px;
    min-height:17px;
  }

  #study .study-status{
    font-size:20px;
    padding:3px 5px;
    margin-right:36px;
    gap:4px;
    bottom:-9px;
    right:-3px;
    transform:translateY(-2px);
  }

  #study #lineMain .line-label #statusChip{
    min-height:15px;
    font-size:12px;
    padding:3px 6px;
  }

  #study .flower-row{
    height:23px;
    min-height:23px;
    flex-basis:23px;
    margin:0;
  }

  #study #speakBtn{
    width:62px;
    height:62px;
  }

  #study #listenBtn .selected-speaker{
    width:30px;
    height:30px;
    min-width:30px;
    min-height:30px;
  }

  #study .controls.side-controls{
    flex:0 0 50px;
    gap:6px;
    height:50px;
    min-height:50px;
  }

  #study #listenBtn,
#study #selfVoiceBtn{
    height:44px;
    min-height:44px;
  }

  #study #selfVoiceBtn .split-icon{
    width:26px;
    height:26px;
    min-width:26px;
    min-height:26px;
    flex-basis:26px;
  }

  #study .controls.side-controls .main-mic-wrap{
    height:50px;
    min-height:50px;
    transform:translateY(0);
  }



  #study .line,
  #study .line > *,
  #study .line-label,
  #study .jp-main,
  #study .jp-answer,
  #study .translation{
    min-width:0;
  }

  #study .jp-main,
  #study .jp-answer,
  #study .translation{
    overflow-wrap:anywhere;
    word-break:keep-all;
  }

  #study .rect-audio-btn,
  #study .rating button{
    min-width:0;
  }

  #study .rect-audio-btn span,
  #study .rating button span{
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

#study .lesson-shell{
  position:relative;
  background-image:none;
  flex:0 0 auto;
  height:auto;
  min-height:0;
  max-height:none;
  margin:5px 0 0;
  margin-bottom:0;
  order:0;
  padding:0;
  border:0;
  outline:0;
  border-radius:23px;
  background:transparent;
  box-shadow:none;
  overflow:hidden;
}

#study .lesson-shell::before{
  content:none;
  display:none;
}

#study .lesson-card{
  position:relative;
  margin:0;
  padding:0;
  background-image:none;
  height:auto;
  min-height:0;
  border:3px solid var(--practice-p6,#2698EA);
  outline:0;
  border-radius:21px;
  background:var(--practice-p2);
  box-shadow:none;
  overflow:hidden;
}

#study .line.pos .jp-answer,
#study .line.neg .jp-answer{
  margin:2px 0;
  flex:0 0 auto;
  min-height:0;
  display:block;
  text-align:left;
  line-height:1.34;
  box-sizing:border-box;
  overflow:visible;
}

#study .line.pos .translation,
#study .line.neg .translation{
  margin-top:2px;
  margin-bottom:2px;
  padding-bottom:2px;
  margin:2px 0 0;
  padding:0 0 2px;
  line-height:1.30;
  overflow:visible;
  flex:0 0 auto;
}

#study .line.pos .line-label,
#study .line.neg .line-label{
  margin:0 0 3px;
  line-height:1.1;
  flex:0 0 auto;
}

#study #matchAnalysis{
  display:block;
  border-top:1px solid var(--practice-p4,#d8e8f7);
  padding:5px 9px 6px;
  text-align:center;
}

#study #speechResult{
  display:block;
  min-height:13px;
  font-size:8.5px;
  line-height:1.35;
  color:#708198;
  text-align:center;
}

#study #wordFeedback{
  display:flex;
  flex-wrap:wrap;
  gap:3px;
  margin-top:4px;
  justify-content:center;
  text-align:center;
}

#study .word-feedback-legend{
  width:100%;
  font-size:7px;
  color:#8796a7;
  margin-top:1px;
  text-align:center;
}

#study{
  gap:1px;
  overscroll-behavior-y:contain;
}

#study .rating .hard,
#study .rating .easy,
#study .rating .very{
  transform:translateY(-2px);
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;
  filter:saturate(1.03);
}


#study .rating .hard:active,
#study .rating .easy:active,
#study .rating .very:active{
  transform:translateY(1px) scale(.995);
  box-shadow:
    0 5px 10px rgba(28,53,84,.12),
    inset 0 1px 1px rgba(255,255,255,.34),
    inset 0 -2px 0 rgba(0,0,0,.10);
}


/* 관리자 레이아웃 미리보기에서 학습 조작만 잠근다. */
#study.admin-layout-preview .lesson-inner,
#study.admin-layout-preview .controls.side-controls,
#study.admin-layout-preview .rating,
#study.admin-layout-preview #revealBtn{
  pointer-events:none;
}


/* v9.11.38 — 일본어 모국어 사용자의 한국어 학습 화면 전용 가독성. */
#study.target-korean-mode .lesson-inner > .line.active .jp-main,
#study.target-korean-mode .lesson-inner > .line.active .jp-answer{
  font-size:29px;
  line-height:1.24;
  letter-spacing:-.45px;
  word-break:keep-all;
}
#study.target-korean-mode .lesson-inner > .line.active .jp-main.sentence-mid,
#study.target-korean-mode .lesson-inner > .line.active .jp-answer.sentence-mid{
  font-size:27px;
}
#study.target-korean-mode .lesson-inner > .line.active .jp-main.sentence-long,
#study.target-korean-mode .lesson-inner > .line.active .jp-answer.sentence-long,
#study.target-korean-mode .lesson-inner > .line.active .jp-main.sentence-wrap,
#study.target-korean-mode .lesson-inner > .line.active .jp-answer.sentence-wrap{
  font-size:23px;
  line-height:1.30;
  white-space:normal;
}
#study.target-korean-mode .translation{
  margin-top:7px;
  color:#4f627b;
  font-size:15px;
  line-height:1.42;
  letter-spacing:-.15px;
  word-break:normal;
  overflow-wrap:anywhere;
}
#study.target-korean-mode .translation.translation-long{
  font-size:14px;
  line-height:1.38;
}
#study.target-korean-mode .translation.translation-xlong{
  font-size:13px;
  line-height:1.34;
}
#study.target-korean-mode.single-response-mode .lesson-inner > .line.active{
  height:clamp(180px,22dvh,218px);
  min-height:clamp(180px,22dvh,218px);
}
#study.target-korean-mode.single-response-mode .lesson-inner > .line.inactive,
#study.target-korean-mode.single-response-mode .lesson-inner > .line.done{
  height:clamp(88px,10.5dvh,108px);
  min-height:clamp(88px,10.5dvh,108px);
}
#study.target-korean-mode.single-response-mode #linePos .line-label{
  color:#25704f;
}
#study.target-korean-mode button.audio-pending{
  cursor:not-allowed;
  opacity:.46;
  filter:grayscale(.22);
}
#study.target-korean-mode #listenBtn.audio-pending{
  opacity:.72;
}
#study.target-korean-mode #listenBtn.audio-pending .control-text{
  color:#6d7f92;
}
#study.target-korean-mode .line-speaker.audio-pending,
#study.target-korean-mode .speaker-mini.audio-pending{
  visibility:hidden;
}
@media (max-height:820px){
  #study.target-korean-mode.single-response-mode .lesson-inner > .line.active{
    height:clamp(164px,20dvh,190px);
    min-height:clamp(164px,20dvh,190px);
  }
  #study.target-korean-mode .lesson-inner > .line.active .jp-main,
  #study.target-korean-mode .lesson-inner > .line.active .jp-answer{
    font-size:25px;
  }
  #study.target-korean-mode .translation{
    font-size:13.5px;
  }
}