/* 연 살아있는 영어교과서 — 영어 7기둥 + 결제 게이트 전용 스타일 (yeon-textbook.css 위에 얹음) */
/* 색 토큰은 yeon-textbook.css :root 재사용 (--sea, --reed, --gold, --hanji 등) */

/* ── 공통: 발음 듣기/말하기 버튼 ── */
.en-audio{display:inline-flex;align-items:center;gap:6px;}
.en-spk{display:inline-flex;align-items:center;justify-content:center;gap:5px;background:var(--sea);color:#fff;border:none;border-radius:999px;
  padding:5px 12px;font-size:13px;font-weight:700;font-family:var(--myeong);cursor:pointer;line-height:1;min-height:32px;}
.en-spk.slow{background:#fff;color:var(--sea);border:1.5px solid var(--sea);}
.en-spk:disabled{opacity:.45;cursor:not-allowed;}
.en-spk svg{width:15px;height:15px;}
.en-spk.playing{background:var(--reed);}
.en-spk.soon{background:var(--hanji-dk);color:var(--ink-soft);border:1px dashed #c9bfae;}

/* ── 핵심 표현·단어 카드 그리드 ── */
.en-words{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:14px 0;}
.en-wcard{background:var(--hanji-lt);border:1px solid var(--hanji-dk);border-radius:14px;padding:14px;text-align:center;position:relative;}
.en-wcard .pic{font-size:34px;line-height:1;margin-bottom:6px;}
.en-wcard .pic svg{width:48px;height:48px;}
.en-wcard .w{font-family:var(--play);font-style:italic;font-size:19px;color:var(--ink);}
.en-wcard .ipa{font-size:12px;color:#8a8174;margin:2px 0 4px;}
.en-wcard .k{font-size:13px;color:var(--ink-soft);}
.en-wcard .actions{display:flex;gap:5px;justify-content:center;margin-top:8px;flex-wrap:wrap;}
.en-wcard .mini{width:30px;height:30px;border-radius:50%;border:1px solid var(--hanji-dk);background:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--sea);}
.en-wcard .mini svg{width:15px;height:15px;}
.en-wcard .mini.save.on{background:var(--gold);color:#fff;border-color:var(--gold);}

/* ── 읽기 지문 + 단어 탭 ── */
.en-reading{background:#fff;border:1px solid var(--hanji-dk);border-radius:14px;padding:18px 20px;margin:14px 0;font-size:calc(16.5px*var(--rs,1));line-height:2;}
.en-reading .rtitle{font-family:var(--myeong);font-weight:800;font-size:18px;color:var(--sea);margin-bottom:4px;}
.en-reading .rbar{display:flex;gap:8px;align-items:center;margin:6px 0 12px;flex-wrap:wrap;}
.en-reading .hint{font-size:12px;color:#8a8174;}
.en-w{cursor:pointer;border-bottom:1.5px dotted var(--sea);padding-bottom:1px;}
.en-w:hover,.en-w:focus{background:var(--sea-pale);border-radius:3px;outline:none;}
.en-reading .sent{display:inline;}
.en-reading .sent.read{background:#fff6dd;border-radius:4px;}
/* 문장 단위 클릭 읽기 */
.en-reading .rd-sent{cursor:pointer;border-radius:5px;transition:background .12s;padding:1px 2px;}
.en-reading .rd-sent:hover{background:#eef4ee;}
.en-reading .rd-sent.playing{background:#dcebe0;box-shadow:inset 0 0 0 1px #9cc3a8;}
/* 재생 중 버튼 표시 — 다시 누르면 정지 */
.en-spk.playing{filter:brightness(.92);box-shadow:inset 0 0 0 2px rgba(0,0,0,.08);}
/* 눈에 보이는 정지 버튼 */
.en-reading .en-stop{background:#fbe9e6;color:#b3402b;border:1px solid #ecc6bd;}
.en-reading .en-stop:hover{background:#f6dcd6;}

/* ── 우측 단어 패널 ── */
#enPanelOverlay{position:fixed;inset:0;background:rgba(29,29,27,.35);opacity:0;visibility:hidden;transition:.25s;z-index:90;}
#enPanelOverlay.show{opacity:1;visibility:visible;}
#enPanel{position:fixed;top:0;right:0;height:100%;width:min(380px,88vw);background:var(--hanji-lt);box-shadow:-8px 0 30px rgba(0,0,0,.18);
  transform:translateX(100%);transition:transform .28s cubic-bezier(.3,.7,.3,1);z-index:91;padding:22px 20px;overflow-y:auto;}
#enPanel.show{transform:translateX(0);}
#enPanel .pclose{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:1px solid var(--hanji-dk);background:#fff;cursor:pointer;font-size:16px;color:var(--ink-soft);}
#enPanel .plabel{font-family:var(--play);font-style:italic;color:var(--sea);font-size:13px;}
#enPanel .pword{font-family:var(--myeong);font-weight:800;font-size:30px;margin:2px 0;}
#enPanel .pipa{color:#8a8174;font-size:14px;margin-bottom:10px;}
#enPanel .pko{font-size:17px;color:var(--ink);margin:6px 0;}
#enPanel .pex{background:#fff;border:1px solid var(--hanji-dk);border-radius:10px;padding:11px 14px;margin:10px 0;font-size:14px;color:var(--ink-soft);}
#enPanel .pex .en{font-family:var(--play);font-style:italic;color:var(--ink);}
#enPanel .prow{display:flex;gap:8px;margin:12px 0;flex-wrap:wrap;}

/* ── 발음 교정 (말하기) ── */
.en-pron{background:linear-gradient(135deg,#eef4f6,#f7efe2);border:1px solid var(--hanji-dk);border-radius:14px;padding:16px 18px;margin:14px 0;}
.en-pron h3{font-family:var(--myeong);font-size:16.5px;color:var(--sea);display:flex;align-items:center;gap:7px;margin-bottom:8px;}
.en-pron h3 svg{width:18px;height:18px;}
.en-pron .target{font-family:var(--play);font-style:italic;font-size:19px;color:var(--ink);margin:4px 0;}
.en-pron .mic{display:inline-flex;align-items:center;gap:7px;background:var(--dawn);color:#fff;border:none;border-radius:999px;padding:9px 18px;font-size:14px;font-weight:700;font-family:var(--myeong);cursor:pointer;margin-top:8px;}
.en-pron .mic.rec{background:#a32e1e;animation:enpulse 1s infinite;}
@keyframes enpulse{0%,100%{box-shadow:0 0 0 0 rgba(201,64,43,.5);}50%{box-shadow:0 0 0 8px rgba(201,64,43,0);}}
.en-pron .mic svg{width:16px;height:16px;}
.en-pron .result{margin-top:10px;font-size:14px;display:none;}
.en-pron .result.show{display:block;}
.en-pron .heard{background:#fff;border:1px solid var(--hanji-dk);border-radius:8px;padding:8px 12px;margin:6px 0;font-size:14px;}
.en-pron .score{font-weight:800;font-family:var(--myeong);font-size:16px;}
.en-pron .score.good{color:var(--reed);}.en-pron .score.mid{color:var(--gold);}.en-pron .score.low{color:var(--dawn);}
.en-pron .cheer{color:var(--sea);font-weight:700;margin-top:4px;}
.en-pron .nosupport{font-size:13px;color:var(--dawn);background:#fdf0ec;border-radius:8px;padding:8px 12px;}
.en-pron .wlist{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;}
.en-pron .wtok{padding:2px 9px;border-radius:999px;font-size:13px;}
.en-pron .wtok.hit{background:#eaf3ee;color:#3a6b4e;}
.en-pron .wtok.miss{background:#fdece9;color:var(--dawn);text-decoration:line-through;}

/* ── 문법 무한 드릴 ── */
.en-drill{background:#fff;border:1px solid var(--hanji-dk);border-radius:14px;padding:16px 18px;margin:14px 0;}
.en-drill h3{font-family:var(--myeong);font-size:16.5px;color:var(--sea);margin-bottom:8px;}
.en-drill .q{font-size:calc(16px*var(--rs,1));margin:10px 0;line-height:1.7;}
.en-drill .blank{display:inline-block;min-width:64px;border-bottom:2px solid var(--sea);text-align:center;font-family:var(--play);font-style:italic;color:var(--sea);}
.en-drill .opts{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0;}
.en-drill .opt{background:var(--hanji-lt);border:1px solid var(--hanji-dk);border-radius:8px;padding:7px 16px;cursor:pointer;font-family:var(--play);font-style:italic;font-size:15px;}
.en-drill .opt.correct{background:#eaf3ee;border-color:var(--reed);color:#3a6b4e;}
.en-drill .opt.wrong{background:#fdece9;border-color:var(--dawn);color:var(--dawn);}
.en-drill .fb{font-size:14px;margin-top:6px;min-height:20px;}
.en-drill .nextbtn{margin-top:10px;background:var(--sea);color:#fff;border:none;border-radius:8px;padding:8px 16px;font-size:13px;font-weight:700;font-family:var(--myeong);cursor:pointer;}

/* ── 멤버십 게이트 ── */
.prm-lock{display:inline-flex;align-items:center;gap:4px;font-size:11px;background:var(--gold-pale);color:#8a6d35;border-radius:999px;padding:1px 9px;font-weight:700;}
.prm-lock svg{width:12px;height:12px;}
#enGateOverlay{position:fixed;inset:0;background:rgba(29,29,27,.45);display:none;align-items:center;justify-content:center;z-index:95;padding:18px;}
#enGateOverlay.show{display:flex;}
#enGate{background:var(--hanji-lt);border-radius:18px;max-width:420px;width:100%;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,.3);}
#enGate h3{font-family:var(--myeong);font-weight:800;font-size:20px;color:var(--sea);margin-bottom:6px;}
#enGate p{font-size:14px;color:var(--ink-soft);line-height:1.7;}
#enGate .tiers{margin:14px 0;border:1px solid var(--hanji-dk);border-radius:12px;overflow:hidden;}
#enGate .tier{display:flex;justify-content:space-between;padding:9px 14px;font-size:13.5px;border-bottom:1px solid var(--hanji-dk);}
#enGate .tier:last-child{border-bottom:none;}
#enGate .tier.rec{background:var(--sea-pale);font-weight:700;}
#enGate .tier .nm{color:var(--ink);}
#enGate .tier .pr{color:var(--sea);font-weight:700;font-family:var(--myeong);}
#enGate .note{font-size:12px;color:#8a8174;background:#fff;border-radius:8px;padding:9px 12px;margin-top:8px;}
#enGate .gbtns{display:flex;gap:8px;margin-top:14px;}
#enGate .gbtns button{flex:1;border-radius:10px;padding:11px;font-size:14px;font-weight:700;font-family:var(--myeong);cursor:pointer;border:none;}
#enGate .gbtns .ok{background:var(--sea);color:#fff;}
#enGate .gbtns .cancel{background:#fff;border:1px solid var(--hanji-dk);color:var(--ink-soft);}

/* ── AI 회화 챗봇 FAB ── */
#enChatFab{position:fixed;right:18px;bottom:18px;width:58px;height:58px;border-radius:50%;background:var(--sea);color:#fff;border:none;
  box-shadow:0 8px 24px rgba(58,110,126,.4);cursor:pointer;z-index:80;display:flex;align-items:center;justify-content:center;}
#enChatFab svg{width:26px;height:26px;}
#enChatSheet{position:fixed;right:18px;bottom:84px;width:min(360px,92vw);height:min(520px,72vh);background:var(--hanji-lt);
  border-radius:18px;box-shadow:0 16px 50px rgba(0,0,0,.28);z-index:81;display:none;flex-direction:column;overflow:hidden;}
#enChatSheet.show{display:flex;}
#enChatSheet .chead{background:var(--sea);color:#fff;padding:12px 16px;font-family:var(--myeong);font-weight:700;display:flex;justify-content:space-between;align-items:center;}
#enChatSheet .chead .x{background:none;border:none;color:#fff;font-size:18px;cursor:pointer;}
#enChatSheet .cbody{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:9px;}
#enChatSheet .msg{max-width:82%;padding:9px 13px;border-radius:14px;font-size:14px;line-height:1.55;}
#enChatSheet .msg.bot{background:#fff;border:1px solid var(--hanji-dk);align-self:flex-start;border-bottom-left-radius:4px;}
#enChatSheet .msg.me{background:var(--sea);color:#fff;align-self:flex-end;border-bottom-right-radius:4px;}
#enChatSheet .msg .en{font-family:var(--play);font-style:italic;}
#enChatSheet .cfoot{display:flex;gap:6px;padding:10px;border-top:1px solid var(--hanji-dk);}
#enChatSheet .cfoot input{flex:1;border:1px solid var(--hanji-dk);border-radius:999px;padding:9px 14px;font-size:14px;font-family:var(--serif);}
#enChatSheet .cfoot button{background:var(--sea);color:#fff;border:none;border-radius:50%;width:40px;height:40px;cursor:pointer;flex-shrink:0;}
#enChatSheet .quota{font-size:11px;color:#8a8174;text-align:center;padding:4px;}

/* ── 듣기(받아쓰기·고르기) ── */
.en-listen{background:linear-gradient(135deg,#eef4f6,#f6efe2);border:1px solid var(--hanji-dk);border-radius:14px;padding:16px 18px;margin:14px 0;}
.en-listen h3{font-family:var(--myeong);font-size:16.5px;color:var(--sea);display:flex;align-items:center;gap:7px;margin-bottom:8px;}
.en-listen h3 svg{width:18px;height:18px;flex-shrink:0;}
/* 안전망: 영어 컴포넌트 제목/바 속 인라인 SVG는 항상 작게(크기 누락 시 폭발 방지) */
.en-pron h3 svg,.en-reading .rbar svg,.en-words h3 svg,.en-drill h3 svg,.en-listen .en-spk svg{width:18px;height:18px;flex-shrink:0;}
.en-listen .lopts{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;}
.en-listen .lopt{background:#fff;border:1px solid var(--hanji-dk);border-radius:10px;padding:8px 16px;cursor:pointer;font-family:var(--play);font-style:italic;}
.en-listen .lopt.correct{background:#eaf3ee;border-color:var(--reed);}
.en-listen .lopt.wrong{background:#fdece9;border-color:var(--dawn);}

/* ── 드래그 문장 빌더 (내 문장 만들기) ── */
.mo-tray{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;}
.mo-block{border-radius:10px;padding:8px 16px;font-family:var(--play);font-style:italic;font-size:16px;cursor:grab;user-select:none;border:1px solid var(--hanji-dk);background:var(--hanji-lt);color:var(--ink);transition:transform .08s;}
.mo-block:active{cursor:grabbing;transform:scale(.96);}
.mo-block.sub{border-color:#3A6E7E;color:#2c5663;background:#E1ECEF;}
.mo-block.mod{border-color:#B8955A;color:#8a6d35;background:#F1E6D0;}
.mo-block.verb{border-color:#7A9E8A;color:#3a6b4e;background:#eef4f0;}
.mo-block.dot{border-color:#C9402B;color:#C9402B;background:#fdece9;font-weight:700;}
.mo-line{min-height:58px;border:2px dashed var(--sea);border-radius:12px;padding:11px 12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#fff;margin:6px 0;}
.mo-line.over{background:var(--sea-pale);border-color:var(--gold);}
.mo-line .mo-block{cursor:pointer;}
.mo-line .mo-block:hover{filter:brightness(.96);}
.mo-hint{color:#9a8f7e;font-size:13.5px;}
.mo-fb{font-size:14px;margin-top:8px;min-height:20px;}
.mo-fb.ok{color:#3a6b4e;font-weight:700;}
.mo-fb.tip{color:#8a6d35;}

/* ── 오늘 학습에서 배운 것 (배움 일기) ── */
.todaynote{background:linear-gradient(135deg,#f6efe2,#eef4f6);border:1px solid var(--hanji-dk);border-left:5px solid var(--reed);border-radius:14px;padding:16px 18px;margin:14px 0;}
.todaynote .lead{font-size:14px;color:var(--ink-soft);margin-bottom:10px;}
.todaynote .tn-date{float:right;font-size:12px;color:var(--sea);font-weight:700;font-family:var(--myeong);}
.todaynote textarea{width:100%;border:1px solid var(--hanji-dk);border-radius:10px;padding:10px;font-size:15px;font-family:var(--serif);line-height:1.6;margin-bottom:8px;}
.todaynote #tnText{min-height:56px;} .todaynote #tnEn{min-height:40px;}
.tn-item{background:#fff;border:1px solid var(--hanji-dk);border-radius:8px;padding:8px 12px;margin:6px 0;font-size:13.5px;color:var(--ink-soft);}
.tn-item .tn-d{color:var(--sea);font-weight:700;font-family:var(--myeong);margin-right:6px;}
.tn-item .tn-en{font-family:var(--play);font-style:italic;color:var(--ink);}

/* ── 모든 영어 탭→발음 ── */
.en-tap{cursor:pointer;border-bottom:1px dotted rgba(58,110,126,.32);transition:background .15s;}
.en-tap:hover{background:var(--sea-pale);border-radius:3px;}
.en-tap-on{background:#fff6dd;border-radius:3px;}

/* 모바일 */
@media (max-width:520px){
  .en-words{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));}
  #enChatFab{width:52px;height:52px;}
}
/* 인쇄: 인터랙티브 숨김 */
@media print{
  #enChatFab,#enChatSheet,#enPanel,#enPanelOverlay,#enGateOverlay,.en-pron .mic,.en-spk,.en-drill .nextbtn{display:none!important;}
  .en-reading,.en-words,.en-drill{break-inside:avoid;}
}