/* Scoped OPIc styles reuse JINI's existing palette, typography and card shapes. */
.opic-section[hidden]{display:none!important}
.opic-section{max-width:1060px;padding:30px 0 40px;line-height:1.8;overflow-wrap:anywhere}
.opic-section .page-title{margin:8px 0}
.op-top,.op-card-heading,.op-progress,.op-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.op-top p{margin:8px 0 16px}
.op-level{display:flex;flex-direction:column;gap:6px;min-width:150px;font-weight:700}
.op-level select{font:inherit;padding:10px 12px;min-height:46px;border:1px solid #dcd9ee;border-radius:10px;background:var(--card);color:var(--ink)}
.op-progress{font-size:13px;color:#666580;margin-top:16px}
.opic-section progress{appearance:none;display:block;width:100%;height:8px;margin:10px 0 24px;border:0;border-radius:20px;overflow:hidden;background:var(--purple-soft)}
.opic-section progress::-webkit-progress-bar{background:var(--purple-soft)}
.opic-section progress::-webkit-progress-value{background:var(--purple);border-radius:20px}
.opic-section progress::-moz-progress-bar{background:var(--purple);border-radius:20px}
.op-card{padding:24px;margin-bottom:18px;background:var(--card);border:1px solid var(--line);border-radius:18px}
.op-card h2{margin:0 0 14px;font-size:18px;line-height:1.6}
.op-card-heading h2{margin:0}
.op-card-heading{margin-bottom:12px}
.op-card h3{font-size:14px;margin:18px 0 8px}
.op-card p{margin:10px 0}
.op-card ul{padding-left:22px}
.op-question{font-size:clamp(21px,3vw,29px);font-weight:800;line-height:1.5;color:var(--ink)}
.op-actions,.op-bank,.op-selected{display:flex;gap:10px;flex-wrap:wrap}
.op-actions{margin:14px 0 0}
.op-btn,.op-chunk{font:inherit;min-height:46px;padding:10px 15px;border:1px solid #d9d5fc;border-radius:10px;background:#faf9ff;color:#5848c8;cursor:pointer;font-weight:700;line-height:1.6;max-width:100%}
.op-btn:hover:not(:disabled),.op-chunk:hover:not(:disabled){background:var(--purple-soft);border-color:var(--purple)}
.op-btn.op-primary{background:var(--purple);color:#fff;border-color:var(--purple)}
.op-btn.op-primary:hover:not(:disabled){background:#5443d7}
.op-btn:disabled,.op-chunk:disabled{opacity:.45;cursor:default}
.opic-section button:focus-visible,.opic-section select:focus-visible,.opic-section textarea:focus-visible,.op-question:focus-visible{outline:3px solid #9a92f5;outline-offset:3px}
.opic-section [hidden]{display:none!important}
.op-card .op-note,.op-note{font-size:12px;line-height:1.8;color:#6e7088}
.op-selected{min-height:80px;padding:14px;border:1px dashed #b4aaee;background:#faf9ff;border-radius:12px;align-items:center;margin:16px 0}
.op-bank{margin-bottom:18px}
.op-chunk{background:var(--card);color:var(--ink);font-weight:500}
.op-picked{background:var(--purple-soft);border-color:#aca1f0}
.op-correct{padding:12px;border-radius:10px;background:#ebf9f1;color:#256845}
.op-retry{padding:12px;border-radius:10px;background:#fff5e7;color:#865316}
.opic-section textarea{display:block;resize:vertical;min-height:160px;width:100%;margin-top:12px;padding:14px;font:inherit;font-size:16px;line-height:1.8;border:1px solid #dcd9ee;border-radius:12px;background:var(--card);color:var(--ink)}
.op-model{font-size:17px;line-height:1.95;white-space:pre-line}
.op-bottom{margin:24px 0 12px;padding:18px 0;border-top:1px solid var(--line)}
.op-bottom .op-actions{margin:0}
.op-topic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.op-topic{display:flex;flex-direction:column;gap:8px;text-align:left;padding:20px;min-height:156px;border:1px solid var(--line);border-radius:16px;background:var(--card);font:inherit;color:var(--ink);cursor:pointer}
.op-topic:hover{border-color:#aaa0f4}
.op-topic span,.op-topic small{color:#6556c9;font-size:12px}
.op-topic strong{font-size:16px;line-height:1.65}
.op-topic small{margin-top:auto}
.opic-menu-group{margin:8px 0 0}
.opic-menu-header{display:flex;align-items:center}
.opic-menu-header>.nav-item{flex:1;min-width:0}
.opic-menu-toggle{display:none}
.opic-menu-children{display:grid;gap:3px}
.opic-menu-child{padding-left:18px;font-size:12px}
@media(min-width:761px){
  .sidebar{overflow-y:auto}
  .sidebar>.brand,.sidebar>nav,.sidebar>.menu-label,.sidebar>.sidebar-note,.sidebar>.sidebar-foot{flex-shrink:0}
}
@media(max-width:760px){
  .opic-section{padding:18px 0 24px}
  .op-top{align-items:flex-start;gap:8px}
  .op-level{width:100%;margin-bottom:8px}
  .op-card{padding:17px}
  .op-card h2{font-size:16px}
  .op-card-heading{align-items:flex-start}
  .op-topic-grid{grid-template-columns:1fr}
  .op-bottom>.op-btn,.op-bottom>.op-actions{width:100%}
  .op-bottom .op-actions>.op-btn{flex:1;min-width:0}
  .op-actions{gap:8px}
  .op-actions>.op-btn{flex:1 1 140px}
  .op-chunk{padding:10px 12px}
  .opic-menu-group{display:flex;align-items:center;flex:0 0 auto;margin:0 0 0 4px;border-left:1px solid var(--line);padding-left:4px}
  .opic-menu-header{display:flex;flex:0 0 auto;align-items:center;white-space:nowrap}
  #english-study-menu .opic-menu-header>.nav-item{min-height:44px;min-width:75px;flex:0 0 auto;padding-right:2px}
  .opic-menu-toggle{display:flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:30px;min-height:44px;padding:0 3px;border:0;border-radius:8px;background:transparent;color:var(--purple);font:inherit;font-size:16px;cursor:pointer}
  .opic-menu-toggle[aria-expanded="true"]{background:var(--purple-soft)}
  .opic-menu-toggle[aria-expanded="true"] span{transform:rotate(180deg)}
  .opic-menu-children{display:none;position:fixed;bottom:calc(61px + env(safe-area-inset-bottom));left:12px;right:12px;z-index:10;grid-template-columns:1fr;gap:5px;padding:12px;border:1px solid #e8e4fa;border-radius:14px 14px 0 0;background:#fff;box-shadow:0 -10px 28px #2a235124}
  .opic-menu-group.is-open .opic-menu-children{display:grid}
  #english-study-menu .opic-menu-children .opic-menu-child{display:flex;flex-direction:row;justify-content:flex-start;width:100%;min-height:48px;padding:12px 16px;font-size:13px;text-align:left}
  .opic-menu-children .opic-menu-child .nav-icon{font-size:15px;width:18px}
  .opic-menu-children .nav-count{display:inline;margin-left:auto}
}


/* Speaking hub and 3-step answer flow */
.op-hub-hero{display:flex;gap:28px;align-items:center;justify-content:space-between;border-radius:20px;padding:30px;margin:22px 0 22px;background:linear-gradient(115deg,#edeaff,#f9f8ff 70%,#eef5ff);border:1px solid #e7e2ff}
.op-hub-hero h2{font-size:clamp(21px,2.7vw,30px);line-height:1.4;margin:10px 0;color:var(--ink);letter-spacing:-.7px}
.op-hub-hero p{font-size:14px;color:#66677f;line-height:1.8;max-width:640px;margin:0 0 14px}
.op-hub-availability{display:inline-block;font-size:12px;color:#6056a7;font-weight:700}
.op-hub-meter{flex:0 0 168px;padding:19px;border:1px solid #e4dfff;border-radius:16px;background:white;display:flex;flex-direction:column;align-items:flex-start}
.op-hub-meter strong{font-size:32px;line-height:1.2;color:var(--purple)}
.op-hub-meter small{font-size:15px;color:#9390aa}
.op-hub-meter span{color:#66677f;font-size:12px;margin:4px 0 8px}
.op-hub-meter progress{margin:0}
.op-hub-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin:0 0 17px}
.op-hub-card{display:flex;flex-direction:column;align-items:flex-start;min-height:206px;padding:23px;background:var(--card);border:1px solid var(--line);border-radius:18px}
.op-hub-card h3{font-size:17px;margin:7px 0 4px;line-height:1.45}
.op-hub-card p{color:#77788d;line-height:1.7;margin:0 0 20px}
.op-hub-card .op-btn,.op-hub-upcoming{margin-top:auto}
.op-hub-number{font-size:12px;letter-spacing:1px;font-weight:800;color:var(--purple)}
.op-hub-coming{background:#fafafe}
.op-hub-upcoming{display:inline-block;padding:6px 11px;border-radius:20px;background:#edecf3;font-weight:700;color:#85869a;font-size:12px}
.op-stepper{margin:12px 0 19px;padding:18px 20px 15px;border:1px solid #e4e0fc;background:#f8f7ff;border-radius:17px}
.op-stepper-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.op-stepper-head strong{font-size:15px}
.op-stepper-head span{color:#87869b;font-size:12px}
.op-step-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.op-step-tabs button{border:1px solid #ddd9f4;border-radius:12px;background:#fff;padding:14px 8px;min-height:54px;font:inherit;font-weight:700;font-size:13px;cursor:pointer}
.op-step-tabs button span{color:#8d7ff0;margin-right:5px}
.op-step-tabs button.is-selected{background:var(--purple);border-color:var(--purple);color:white;box-shadow:0 5px 14px #6958e82a}
.op-step-tabs button.is-selected span{color:#e3dcff}
.op-step-guide{margin:13px 0 0;color:#636477;font-size:13px;line-height:1.7}
.op-stage-tag{display:inline-block;margin-bottom:10px;color:#6555cd;font-size:12px;font-weight:800;letter-spacing:.4px}
.op-answer-example{padding:15px 17px;margin-top:13px;border:1px solid #eeeaff;background:#fafaff;border-radius:12px}
.op-answer-example p{font-size:16px;line-height:1.8;color:var(--ink);margin:8px 0 0}
.op-answer-example .op-card-heading{align-items:center;margin-bottom:3px}
.op-answer-example .op-btn{min-height:36px;padding:5px 10px;font-size:12px}
.op-stage-hint{padding:16px 17px;margin-top:15px;border-radius:12px;background:#f1efff}
.op-stage-hint p{font-size:13px;line-height:1.85;margin:9px 0 0}
.op-checkbar{margin-top:12px;display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.op-checkbar .op-note{flex:1;min-width:180px}
.op-draft-feedback{margin:12px 0;padding:14px 16px;border:1px solid #e0dcfd;border-radius:11px;background:#f8f7ff;line-height:1.85}
.op-stage-navigation{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap;margin:16px 0 8px}
.op-stage-navigation .op-btn{min-width:153px}
.op-stage-navigation [hidden]{display:none!important}
@media(max-width:760px){
 .op-hub-hero{flex-direction:column;align-items:stretch;padding:21px;gap:16px}
 .op-hub-meter{flex-basis:auto;width:100%}
 .op-hub-grid{grid-template-columns:1fr;gap:11px}
 .op-hub-card{min-height:158px;padding:18px}
 .op-stepper{padding:13px 12px}
 .op-stepper-head span{display:none}
 .op-step-tabs{gap:5px}
 .op-step-tabs button{padding:10px 3px;font-size:11px;min-height:50px}
 .op-step-tabs button span{display:block;margin:0 0 3px}
 .op-answer-example{padding:12px}
 .op-stage-navigation{display:grid;grid-template-columns:1fr 1fr;gap:8px}
 .op-stage-navigation .op-btn{min-width:0;padding:10px 5px;font-size:12px}
 .opic-menu-group{flex-direction:row;align-items:center;flex:0 0 auto;margin:0 0 0 4px;padding:0 0 0 4px;border-left:1px solid var(--line);width:auto}
 #english-study-menu .opic-menu-header>.nav-item{min-height:44px}
 #english-study-menu .opic-menu-children .opic-menu-child{min-height:48px;padding-left:16px}
}


/* Example-first: see and hear a real short answer before building your own. */
.op-example-card{border-color:#ded8ff}
.op-example-card>.op-card-heading{align-items:flex-start}
.op-example-card>.op-card-heading h2{margin:0;flex:1}
.op-first-example{padding:21px 23px;margin:13px 0 12px;background:#f8f7ff;border:1px solid #e1ddff;border-radius:15px}
.op-sample-text{font-size:clamp(18px,2.2vw,23px);line-height:1.7;font-weight:700;color:#37306f;margin:0 0 12px!important;overflow-wrap:anywhere}
.op-sample-translation{font-size:14px!important;line-height:1.85!important;color:#66647c!important;margin:10px 0 0!important}
.op-first-example .op-sample-translation{border-top:1px solid #e7e3fa;padding-top:12px}
.op-example-hint{margin-top:17px;padding-top:13px;border-top:1px solid #f0eef6}
.op-example-hint .op-card-heading{margin:0}
.op-answer-example .op-sample-translation{font-size:13px!important;border-top:1px solid #edeafd;padding-top:8px}
@media(max-width:760px){
 .op-first-example{padding:16px 15px}
 .op-example-card>.op-card-heading{flex-direction:column;align-items:stretch;gap:10px}
 .op-example-card>.op-card-heading>.op-btn{width:100%}
 .op-sample-text{font-size:18px}
}


/* IL / IH goal selector on the speaking home */
.op-hub-target{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:22px 0 0;padding:16px 20px;border-radius:15px;border:1px solid #e4dfff;background:#fff}
.op-hub-target label{font-size:14px;font-weight:800;color:var(--ink)}
.op-hub-target select{min-height:43px;min-width:126px;padding:8px 12px;font:inherit;font-weight:700;border-radius:10px;border:1px solid #c8c0fb;background:#faf9ff;color:#5240b9;cursor:pointer}
.op-hub-target p{flex:1;min-width:185px;margin:0;font-size:12px;color:#72738c;line-height:1.6}
.op-hub-target+.op-hub-hero{margin-top:12px}
@media(max-width:760px){.op-hub-target{padding:14px;gap:10px}.op-hub-target p{flex-basis:100%}}

/* Type-specific English and Korean practice game menus. */
.practice-menu-group{margin:8px 0 0}
.practice-menu-header{display:flex;align-items:center}
.practice-menu-header>.nav-item{flex:1;min-width:0}
.practice-menu-toggle{display:none}
.practice-menu-children{display:grid;gap:3px}
.practice-menu-child{padding-left:18px;font-size:12px}
@media(max-width:760px){
 .practice-menu-group{display:flex;align-items:center;flex:0 0 auto;margin:0 0 0 4px;padding-left:4px;border-left:1px solid var(--line)}
 .practice-menu-header{display:flex;align-items:center;flex:0 0 auto;white-space:nowrap}
 #english-study-menu .practice-menu-header>.nav-item,
 #korean-study-menu .practice-menu-header>.nav-item{display:flex;flex-direction:row;min-height:44px;min-width:75px;flex:0 0 auto;gap:4px;padding:6px 2px 6px 6px;font-size:10px}
 .practice-menu-toggle{display:flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:30px;min-height:44px;padding:0 3px;border:0;border-radius:8px;background:transparent;color:var(--purple);font:inherit;font-size:16px;cursor:pointer}
 .practice-menu-toggle[aria-expanded="true"]{background:var(--purple-soft)}
 .practice-menu-toggle[aria-expanded="true"] span{transform:rotate(180deg)}
 .practice-menu-children{display:none;position:fixed;bottom:calc(61px + env(safe-area-inset-bottom));left:12px;right:12px;z-index:11;grid-template-columns:1fr;gap:5px;padding:12px;border:1px solid #e8e4fa;border-radius:14px 14px 0 0;background:#fff;box-shadow:0 -10px 28px #2a235124;max-height:min(65vh,460px);overflow-y:auto}
 .practice-menu-group.is-open .practice-menu-children{display:grid}
 #english-study-menu .practice-menu-children .practice-menu-child,
 .sidebar[data-study="korean"] #korean-study-menu .practice-menu-children .practice-menu-child{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;width:100%;min-height:48px;gap:10px;padding:12px 16px;font-size:13px;text-align:left}
 .practice-menu-children .practice-menu-child .nav-icon{font-size:15px;width:18px}
}

/* Keep Korean practice game labels horizontal inside the mobile tab bar. */
@media(max-width:760px){
 .sidebar[data-study="korean"] #korean-study-menu .practice-menu-header>.nav-item{
  flex-direction:row;gap:4px;min-height:44px;min-width:75px;padding:6px 2px 6px 6px;font-size:10px
 }
}