/* ============================================================
   본초링고 - 통합 스타일시트
   (C 코스 작업으로 boncho-quiz.html 에서 외부화됨)
   원본: boncho-quiz.html <style> 블록 (line 10~1335)
   ============================================================ */

:root{
  --green:#58CC02;--green-dark:#58A700;--green-light:#D7FFB8;
  --red:#FF4B4B;--red-dark:#CC3333;--red-light:#FFD7D7;
  --gold:#FFC800;--blue:#1CB0F6;--purple:#CE82FF;--orange:#FF9600;
  --ink:#3C3C3C;--ink-light:#777;--ink-x:#AFAFAF;
  --bg:#FFFCF5;--card:#FFFFFF;--line:#E5E5E5;--line-dark:#C8C8C8;
  --radius:16px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Pretendard','Pretendard Variable','Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic','맑은 고딕',-apple-system,BlinkMacSystemFont,system-ui,Roboto,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden;font-feature-settings:"tnum","kern"}
button{font-family:inherit;cursor:pointer;border:none;background:none}
.han{font-family:inherit;font-weight:700}
.app{max-width:1120px;min-height:100vh;margin:0 auto;display:flex;flex-direction:row;gap:32px;padding:16px 16px 32px;background:var(--bg);position:relative;align-items:flex-start}
.main-panel{flex:0 0 560px;min-width:0;display:flex;flex-direction:column;background:var(--bg);position:relative}

/* 우측 마스코트 패널 — PC 전용 */
.mascot-panel{flex:1;min-width:340px;position:sticky;top:16px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:28px 20px;background:linear-gradient(160deg,#FAFFEF 0%,#EAF8D8 100%);border:2px solid var(--green-light);border-radius:24px;box-shadow:0 4px 16px rgba(88,167,0,.08);min-height:540px;overflow:hidden}
.mascot-panel-title{font-size:13px;font-weight:800;color:var(--green-dark);letter-spacing:1px;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:6px}
.mascot-stage{position:relative;width:280px;height:280px;display:grid;place-items:center;margin-bottom:8px}
.mascot-glow{position:absolute;inset:-30px;border-radius:50%;background:radial-gradient(circle,rgba(255,200,0,.25),transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none}
.mascot-stage[data-state="happy"] .mascot-glow{opacity:.7}
.mascot-stage[data-state="excited"] .mascot-glow{opacity:1}
.mascot-stage[data-state="perfect"] .mascot-glow{opacity:1;background:radial-gradient(circle,rgba(255,200,0,.6),rgba(255,150,0,.25) 50%,transparent 75%);animation:mPanelGlow 1.5s ease-in-out infinite}
@keyframes mPanelGlow{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}
.mascot-effects{position:absolute;inset:-30px;pointer-events:none;z-index:2}
.mascot-big{width:240px;height:240px;position:relative;z-index:1;animation:mPanelIdle 4s ease-in-out infinite;transition:filter .3s}
@keyframes mPanelIdle{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
.mascot-big.state-happy{animation:mPanelHappy .9s ease}
@keyframes mPanelHappy{0%{transform:translateY(0) scale(1)}20%{transform:translateY(-40px) scale(1.12)}40%{transform:translateY(-12px) scale(1.05)}60%{transform:translateY(-30px) scale(1.08)}100%{transform:translateY(0) scale(1)}}
.mascot-big.state-excited{animation:mPanelExcited .8s ease infinite}
@keyframes mPanelExcited{0%,100%{transform:translateY(0) scale(1.05)}50%{transform:translateY(-50px) scale(1.18) rotate(5deg)}}
.mascot-big.state-sad{animation:mPanelSad .6s;filter:saturate(.6)}
@keyframes mPanelSad{0%,100%{transform:translateX(0) translateY(8px)}25%{transform:translateX(-15px) translateY(8px) rotate(-7deg)}75%{transform:translateX(15px) translateY(8px) rotate(7deg)}}
.mascot-big.state-surprised{animation:mPanelSurprised .5s}
@keyframes mPanelSurprised{0%,100%{transform:scale(1)}50%{transform:scale(1.18) translateY(-15px)}}
.mascot-big.state-thinking{animation:mPanelThinking 2s ease-in-out infinite}
@keyframes mPanelThinking{0%,100%{transform:rotate(0)}50%{transform:rotate(8deg) translateY(-3px)}}
.mascot-big.state-perfect{animation:mPanelPerfect 1.2s ease infinite}
@keyframes mPanelPerfect{0%,100%{transform:scale(1.1) rotate(0)}25%{transform:scale(1.2) rotate(-5deg) translateY(-30px)}75%{transform:scale(1.2) rotate(5deg) translateY(-30px)}}
.mascot-big.state-greeting{animation:mPanelGreeting 1s ease}
@keyframes mPanelGreeting{0%{transform:scale(.6) rotate(-180deg);opacity:0}60%{transform:scale(1.1) rotate(10deg);opacity:1}100%{transform:scale(1) rotate(0)}}

/* 말풍선 */
.mascot-speech-bubble{margin-top:14px;background:#fff;border:2.5px solid var(--green);border-radius:18px;padding:14px 18px;font-size:15px;font-weight:600;color:var(--ink);line-height:1.45;text-align:center;max-width:340px;width:90%;position:relative;box-shadow:0 4px 12px rgba(0,0,0,.06);transition:transform .3s,border-color .3s}
.mascot-speech-bubble::before{content:"";position:absolute;top:-12px;left:50%;transform:translateX(-50%);border:11px solid transparent;border-bottom-color:var(--green)}
.mascot-speech-bubble::after{content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%);border:10px solid transparent;border-bottom-color:#fff}
.mascot-speech-bubble.state-sad{border-color:var(--red)}
.mascot-speech-bubble.state-sad::before{border-bottom-color:var(--red)}
.mascot-speech-bubble.state-excited{border-color:var(--orange)}
.mascot-speech-bubble.state-excited::before{border-bottom-color:var(--orange)}
.mascot-speech-bubble.state-perfect{border-color:var(--gold);animation:mPanelBubblePulse 1s ease-in-out infinite}
.mascot-speech-bubble.state-perfect::before{border-bottom-color:var(--gold)}
@keyframes mPanelBubblePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}

/* 마스코트 메타(스트릭/콤보 표시) */
.mascot-meta{margin-top:14px;display:flex;flex-direction:column;gap:8px;align-items:center;width:100%}
.mascot-meta-row{display:flex;align-items:center;gap:8px;background:#fff;padding:8px 14px;border-radius:99px;border:1.5px solid var(--line);font-size:13px;font-weight:700}
.mascot-meta-row .ico{font-size:16px}
.mascot-meta-row.streak{color:var(--orange);border-color:#FFD180}
.mascot-meta-row.combo{color:#E65100;border-color:#FFD180;background:#FFF8E1}

/* 효과 파티클 */
.mascot-spark{position:absolute;top:50%;left:50%;font-size:24px;animation:mPanelSparkFly 1.3s ease-out forwards;pointer-events:none;text-shadow:0 0 6px rgba(255,255,255,.8)}
@keyframes mPanelSparkFly{0%{transform:translate(-50%,-50%) scale(0);opacity:1}50%{opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1);opacity:0}}

/* 모바일·태블릿 — 단일 컬럼 fallback */
@media (max-width:1000px){
  .app{flex-direction:column;max-width:560px;gap:0;padding:0;align-items:stretch;padding-bottom:64px}
  .main-panel{flex:1 1 auto;width:100%;max-width:560px;margin:0 auto}
  .mascot-panel{display:none}
}
@media (min-width:1001px){
  .bottom-nav{display:none}
}
.screen{display:none;flex:1;flex-direction:column;padding:16px 20px 24px;animation:fadeIn .25s ease}
.screen.active{display:flex}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ===== 상단 바 ===== */
.topbar{display:flex;align-items:center;gap:12px;padding:8px 0 16px}
.icon-btn{width:36px;height:36px;border-radius:50%;color:var(--ink-light);font-size:20px;display:grid;place-items:center}
.icon-btn:hover{background:#F0F0F0}
.timer{flex:0 0 auto;display:flex;align-items:center;gap:4px;font-weight:800;color:var(--orange);font-size:14px;background:#FFF3E0;padding:4px 10px;border-radius:99px}
.timer.danger{background:#FFE0E0;color:var(--red-dark);animation:pulse .8s infinite}
@keyframes pulse{50%{transform:scale(1.06)}}
.progress{flex:1;height:14px;background:#E5E5E5;border-radius:99px;overflow:hidden}
.progress-fill{height:100%;background:var(--green);border-radius:99px;width:0%;transition:width .35s cubic-bezier(.5,0,.2,1)}
.stat{display:flex;align-items:center;gap:4px;font-weight:700;font-size:15px}
.stat .ico{font-size:18px}
.stat.heart{color:var(--red)}

/* ===== 홈 화면 ===== */
#home{padding:20px}
.home-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.brand{font-size:26px;font-weight:900;color:var(--green-dark);letter-spacing:-1px}
.brand .leaf{display:inline-block;animation:floaty 3s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-4px) rotate(4deg)}}
.btn-icon{padding:11px 17px;border-radius:14px;background:var(--card);border:2px solid var(--line);font-weight:700;font-size:18px;color:var(--ink-light);display:flex;align-items:center;gap:8px}
.btn-icon:hover{background:#F7F7F7}

/* 출석 / 스트릭 카드 */
.streak-card{background:linear-gradient(135deg,#FFF3E0,#FFE0B2);border:2px solid #FFD180;border-radius:var(--radius);padding:16px;margin-bottom:14px;display:flex;align-items:center;gap:14px}
.streak-fire{font-size:48px;line-height:1}
.streak-info{flex:1}
.streak-num{font-size:28px;font-weight:900;color:#E65100;line-height:1}
.streak-lbl{font-size:13px;color:#BF360C;font-weight:600;margin-top:2px}
.attendance-week{display:flex;gap:6px;margin-top:10px}
.day-dot{flex:1;text-align:center;padding:4px 0;border-radius:8px;background:#fff;border:1.5px solid #FFD180;font-size:11px;font-weight:700;color:#BF360C}
.day-dot.done{background:var(--green);border-color:var(--green-dark);color:#fff}
.day-dot.today{outline:2px solid var(--orange);outline-offset:2px}
.day-dot.frozen{background:#B3E0FF;border-color:#1CB0F6;color:#0F6FA8}

/* 스트릭 프리즈 행 */
.freeze-row{display:flex;align-items:center;justify-content:space-between;margin-top:8px;
  background:rgba(255,255,255,.5);padding:6px 10px;border-radius:10px;
  border:1.5px dashed #FFD180}
.freeze-info{font-size:12px;color:#BF360C;font-weight:700;display:flex;align-items:center;gap:4px}
.freeze-info .icon{font-size:16px}
.freeze-shop-btn{background:#fff;border:1.5px solid #FFD180;color:#E65100;
  padding:4px 12px;border-radius:99px;font-size:11px;font-weight:800;cursor:pointer;
  transition:transform .08s}
.freeze-shop-btn:hover{background:#FFF3E0}
.freeze-shop-btn:active{transform:translateY(1px)}
.freeze-shop-btn.disabled{background:#F0F0F0;color:#999;border-color:#DDD;cursor:not-allowed}

/* 점수 카드 */
.scores{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.score-card{background:var(--card);border:2px solid var(--line);border-radius:var(--radius);padding:12px;text-align:center}
.score-card .num{font-size:22px;font-weight:900;color:var(--ink)}
.score-card .lbl{font-size:11px;color:var(--ink-light);font-weight:700;margin-top:2px;letter-spacing:.5px}
.score-card.xp .num{color:var(--green-dark)}
.score-card.elephant .num{color:var(--purple)}

/* 시작 버튼 */
.start-block{background:var(--card);border:2px solid var(--green);border-bottom-width:4px;border-radius:var(--radius);padding:18px;margin-bottom:14px}
.start-title{font-size:18px;font-weight:900;color:var(--ink);margin-bottom:4px}
.start-desc{font-size:13px;color:var(--ink-light);margin-bottom:14px}
.start-meta{display:flex;gap:10px;font-size:12px;color:var(--ink-light);margin-bottom:12px}
.start-meta span{background:#F4F4F4;padding:4px 8px;border-radius:6px;font-weight:600}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 20px;border-radius:14px;font-weight:800;font-size:15px;letter-spacing:.5px;transition:transform .08s,filter .15s;user-select:none;width:100%}
.btn:active{transform:translateY(2px)}
.btn-primary{background:var(--green);color:#fff;box-shadow:0 4px 0 var(--green-dark)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-secondary{background:var(--card);color:var(--ink);border:2px solid var(--line);box-shadow:0 2px 0 var(--line)}
.btn-secondary:hover{background:#F7F7F7}
.btn-disabled{background:#E5E5E5!important;color:#AFAFAF!important;box-shadow:0 2px 0 #C8C8C8!important;cursor:not-allowed;pointer-events:none}
.btn-purple{background:var(--purple);color:#fff;box-shadow:0 4px 0 #9A4FCC}
.btn-orange{background:var(--orange);color:#fff;box-shadow:0 4px 0 #CC7700}

/* 카테고리 칩 */
.section-title{font-size:13px;font-weight:800;color:var(--ink-light);letter-spacing:1px;margin:18px 0 8px;text-transform:uppercase}
.cats{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.cat-chip{flex:0 0 auto;padding:8px 14px;border-radius:99px;background:var(--card);border:2px solid var(--line);font-weight:700;font-size:13px;color:var(--ink);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.cat-chip.active{background:var(--green-light);border-color:var(--green);color:var(--green-dark)}
.cat-chip .cnt{font-size:11px;color:var(--ink-light);font-weight:600;background:#F2F2F2;padding:1px 6px;border-radius:99px}
.type-cats .cat-chip{padding:10px 14px;border-bottom-width:3px;font-size:14px}
.type-cats .cat-chip[data-tk="clinical"]{border-color:#FFD8D8;background:#FFF7F7}
.type-cats .cat-chip[data-tk="comparison"]{border-color:#E0D7FF;background:#FAF7FF}
.type-cats .cat-chip[data-tk="ox"]{border-color:#D7FFB8;background:#F4FFE8}
.type-cats .cat-chip[data-tk="tagMerid"]{border-color:#D7EEFF;background:#F0F8FF}
.type-cats .cat-chip[data-tk="effectsToHerb"]{border-color:#FFE8B8;background:#FFFBF0}
.type-cats .cat-chip[data-tk="herbId"]{border-color:#A0E0E0;background:#F0FCFC}
.type-cats .cat-chip[data-tk="imgDescRight"]{border-color:#B4E5C9;background:#F2FBF6}
.type-cats .cat-chip[data-tk="imgDescWrong"]{border-color:#F4C7C7;background:#FEF5F5}

/* 복습 알림 */
.review-card{background:#FFF1F1;border:2px solid var(--red-light);border-radius:var(--radius);padding:14px;margin-bottom:12px;display:flex;align-items:center;gap:12px}
.review-card .ico{font-size:32px}
.review-card .info{flex:1}
.review-card .t{font-weight:800;font-size:15px;color:var(--red-dark)}
.review-card .s{font-size:12px;color:var(--ink-light);margin-top:2px}
.review-card .btn-small{padding:8px 12px;font-size:13px;background:var(--red);color:#fff;border-radius:10px;font-weight:800;box-shadow:0 2px 0 var(--red-dark);border:none;cursor:pointer}

/* 틀린 문제 즉시 복습 카드 */
.wrong-card{background:#FFF8E1;border:2px solid #FFE082;border-radius:var(--radius);padding:14px;margin-bottom:12px;display:flex;align-items:center;gap:12px}
.wrong-card .ico{font-size:32px}
.wrong-card .info{flex:1}
.wrong-card .t{font-weight:800;font-size:15px;color:#E65100}
.wrong-card .s{font-size:12px;color:var(--ink-light);margin-top:2px}
.wrong-card .btn-small{padding:8px 12px;font-size:13px;background:var(--orange);color:#fff;border-radius:10px;font-weight:800;box-shadow:0 2px 0 #CC7700;border:none;cursor:pointer}
.wrong-card .type-bd{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.wrong-card .type-bd span{font-size:10px;font-weight:700;background:#fff;color:#E65100;padding:1px 6px;border-radius:99px;border:1px solid #FFE082}

/* ===== 퀴즈 화면 ===== */
.quiz-body{flex:1;display:flex;flex-direction:column;padding:8px 0 24px}
.qtype{font-size:12px;font-weight:800;color:var(--ink-light);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.qtitle{font-size:20px;font-weight:800;line-height:1.5;margin-bottom:18px}
.qcard{background:var(--card);border:2px solid var(--line);border-radius:var(--radius);padding:20px;text-align:center;margin-bottom:18px}
.qcard .img-slot{font-size:64px;margin-bottom:6px;display:block}
.qcard .img-slot img{max-width:140px;max-height:140px;border-radius:12px}
.qcard .herb-han{font-size:34px;color:var(--ink);line-height:1;margin-bottom:4px}
.qcard .herb-kr{font-size:18px;color:var(--ink-light);font-weight:500}
.qcard .effect-list{font-size:17px;font-weight:700;color:var(--green-dark);line-height:1.5}
.qcard .scenario{font-size:15px;color:var(--ink);line-height:1.6;text-align:left}
.qcard .scenario .tag{display:inline-block;background:#F0F8FF;color:var(--blue);padding:2px 8px;border-radius:6px;font-size:12px;font-weight:700;margin:2px 2px 2px 0}

/* 약재 식별 힌트 카드 */
.qcard .hint-list{text-align:left;background:#FAFAFA;border-radius:10px;padding:10px 12px;border:1px dashed var(--line)}
.qcard .hint-row{display:flex;gap:10px;padding:6px 0;border-bottom:1px solid #ECECEC;font-size:13px;line-height:1.5}
.qcard .hint-row:last-child{border-bottom:none}
.qcard .hint-lbl{flex:0 0 64px;font-size:11px;font-weight:800;letter-spacing:.5px;color:var(--ink-light);text-transform:uppercase;padding-top:1px}
.qcard .hint-val{flex:1;color:var(--ink);font-weight:600}
.qcard .hint-val i{font-style:italic;color:var(--green-dark)}
.qcard .hint-val b{color:var(--ink)}

.options{display:grid;gap:10px;grid-template-columns:1fr}
.option{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--card);border:2px solid var(--line);border-bottom-width:4px;border-radius:14px;text-align:left;font-size:15px;font-weight:600;color:var(--ink);transition:transform .08s}
.option:hover{background:#F7F7F7}
.option:active{transform:translateY(1px)}
.option .key{flex:0 0 26px;height:26px;border:2px solid var(--line-dark);border-radius:8px;display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--ink-light)}
.option.selected{border-color:var(--blue);background:#DDF4FF}
.option.selected .key{border-color:var(--blue);color:var(--blue)}
.option.correct{border-color:var(--green);background:var(--green-light);color:var(--green-dark)}
.option.correct .key{border-color:var(--green);color:var(--green-dark);background:#fff}
.option.wrong{border-color:var(--red);background:var(--red-light);color:var(--red-dark)}
.option.wrong .key{border-color:var(--red);color:var(--red-dark);background:#fff}
.option:disabled{cursor:default}

/* OX */
.ox-options{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ox-btn{aspect-ratio:1.3/1;background:var(--card);border:2px solid var(--line);border-bottom-width:4px;border-radius:18px;font-size:60px;font-weight:900;transition:transform .08s}
.ox-btn.O{color:var(--green)}
.ox-btn.X{color:var(--red)}
.ox-btn:hover{background:#F7F7F7}
.ox-btn:active{transform:translateY(1px)}
.ox-btn.selected{border-color:var(--blue);background:#DDF4FF}
.ox-btn.correct{border-color:var(--green);background:var(--green-light)}
.ox-btn.wrong{border-color:var(--red);background:var(--red-light)}

/* 푸터 피드백 */
.footer{margin-top:auto;padding-top:14px}
.footer.feedback-correct{background:var(--green-light);margin:0 -20px;padding:14px 20px 20px}
.footer.feedback-wrong{background:var(--red-light);margin:0 -20px;padding:14px 20px 20px}
.feedback{display:none;margin-bottom:12px}
.feedback.show{display:block;animation:slideUp .25s}
@keyframes slideUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.feedback-title{display:flex;align-items:center;gap:6px;font-size:18px;font-weight:900;margin-bottom:6px}
.feedback-correct .feedback-title{color:var(--green-dark)}
.feedback-wrong .feedback-title{color:var(--red-dark)}
.feedback-text{font-size:13px;line-height:1.55;color:var(--ink)}
.feedback-text b{color:#000}
.feedback-tags{margin-top:8px;display:flex;flex-wrap:wrap;gap:4px}
.fb-tag{font-size:11px;font-weight:700;background:#fff;border:1.5px solid var(--line);padding:2px 8px;border-radius:6px;color:var(--ink-light)}

/* ===== 결과 화면 ===== */
#result{align-items:center;text-align:center;padding-top:24px}
.result-emoji{font-size:84px;margin-bottom:6px}
.result-title{font-size:30px;font-weight:900;margin-bottom:6px}
.result-sub{color:var(--ink-light);margin-bottom:20px;font-size:14px}
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:380px;margin-bottom:18px}
.r-card{background:var(--card);border:2px solid var(--line);border-radius:var(--radius);padding:0 8px 12px;overflow:hidden}
.r-card .lbl{font-size:11px;font-weight:800;letter-spacing:1px;color:#fff;padding:5px 0;margin:0 -8px 10px}
.r-card.score .lbl{background:var(--gold)}
.r-card.xp .lbl{background:var(--green)}
.r-card.eleph .lbl{background:var(--purple)}
.r-card.time .lbl{background:var(--blue)}
.r-card .val{font-size:22px;font-weight:900}
.delta-up{display:inline-block;font-size:12px;color:var(--green);font-weight:800;margin-left:4px;animation:slideUp .4s}
.profile-deltas{width:100%;max-width:380px;background:var(--card);border:2px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:14px;text-align:left}
.profile-deltas h4{font-size:13px;font-weight:800;color:var(--ink-light);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.delta-row{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:14px}
.delta-row .name{flex:1;font-weight:700}
.delta-row .pct{font-weight:800}
.delta-row .arrow{font-size:12px;font-weight:800}
.delta-row.up .arrow{color:var(--green)}
.delta-row.down .arrow{color:var(--red)}
.result-actions{width:100%;max-width:380px;display:flex;flex-direction:column;gap:8px}

/* ===== 프로필 화면 ===== */
#profile{padding:16px 20px 24px}
.profile-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.profile-avatar{width:54px;height:54px;border-radius:50%;background:var(--green-light);display:grid;place-items:center;font-size:30px}
.profile-name{font-size:18px;font-weight:900}
.profile-meta{font-size:12px;color:var(--ink-light)}
.tabs{display:flex;gap:6px;margin-bottom:14px;border-bottom:2px solid var(--line)}
.tab{padding:10px 14px;font-weight:700;color:var(--ink-light);font-size:14px;border-bottom:3px solid transparent;margin-bottom:-2px}
.tab.active{color:var(--green-dark);border-bottom-color:var(--green)}
.tab-pane{display:none}
.tab-pane.active{display:block}

/* 효능별 이해도 */
.eff-row{padding:10px 0;border-bottom:1px solid var(--line)}
.eff-row:last-child{border-bottom:none}
.eff-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.eff-name{font-weight:700;font-size:15px}
.eff-pct{font-weight:900;font-size:16px}
.eff-bar{height:10px;background:#F0F0F0;border-radius:99px;overflow:hidden}
.eff-bar-fill{height:100%;border-radius:99px;transition:width .6s cubic-bezier(.5,0,.2,1)}
.eff-meta{font-size:11px;color:var(--ink-light);margin-top:4px}
.lvl-master{color:var(--green-dark)}
.lvl-good{color:var(--blue)}
.lvl-mid{color:var(--orange)}
.lvl-low{color:var(--red-dark)}

/* 본초 도감 */
.pokedex-progress{background:var(--card);border:2px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:14px}
.pdx-row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.pdx-num{font-size:24px;font-weight:900;color:var(--green-dark);line-height:1}
.pdx-pct{font-size:18px;font-weight:900;color:var(--green-dark)}
.pdx-bar{height:10px;background:#F0F0F0;border-radius:99px;overflow:hidden;margin-bottom:8px}
.pdx-bar-fill{height:100%;background:linear-gradient(90deg,var(--green) 0%,var(--gold) 100%);border-radius:99px;transition:width .6s}
.pdx-grades{display:flex;gap:10px;flex-wrap:wrap;font-size:11px;font-weight:700;color:var(--ink-light)}
.pdx-grades span{background:#F4F4F4;padding:3px 8px;border-radius:99px}

.pdx-cat-h{font-size:13px;font-weight:800;color:var(--ink);margin:14px 0 8px;padding:5px 10px;background:#F7F7F7;border-radius:8px;display:inline-block}
.pokedex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:6px;margin-bottom:8px}
.pokedex-card{
  background:var(--card);border:2px solid var(--line);border-bottom-width:3px;
  border-radius:10px;padding:8px 4px 6px;text-align:center;
  cursor:pointer;transition:transform .08s,box-shadow .15s;
  position:relative;overflow:hidden;
}
.pokedex-card:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.08)}
.pokedex-card:active{transform:translateY(1px)}
.pokedex-card.locked{background:#FAFAFA;border-color:#E0E0E0;color:#BBB;cursor:default}
.pokedex-card.locked:hover{transform:none;box-shadow:none}
.pokedex-card.grade-1{border-color:#C8E6C9}
.pokedex-card.grade-2{border-color:#1CB0F6;background:linear-gradient(180deg,#fff,#F0F8FF)}
.pokedex-card.grade-3{border-color:var(--gold);background:linear-gradient(180deg,#FFFBF0,#FFF3CC);box-shadow:0 0 0 2px rgba(255,200,0,.15)}
.pokedex-card.grade-3::before{
  content:"";position:absolute;top:-20px;right:-20px;width:40px;height:40px;
  background:radial-gradient(circle,rgba(255,200,0,.35),transparent 70%);
}
.pdx-emoji{font-size:24px;line-height:1;margin-bottom:2px}
.pdx-emoji img{max-width:32px;max-height:32px;object-fit:cover;border-radius:4px}
.pdx-han{font-size:13px;font-weight:800;color:var(--ink);line-height:1.2}
.pdx-name{font-size:10px;color:var(--ink-light);font-weight:600;margin-top:1px}
.pdx-stars{font-size:9px;letter-spacing:-1px;line-height:1;margin-top:2px;height:11px}
.pdx-stat{font-size:9px;color:var(--ink-light);font-weight:700;margin-top:1px}

/* 본초 상세 모달 */
.herb-modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:200;padding:16px}
.herb-modal-bg.show{display:flex}
.herb-modal{background:#fff;border-radius:20px;padding:0;max-width:420px;width:100%;max-height:88vh;overflow-y:auto}
.herb-modal-head{padding:20px 20px 12px;text-align:center;border-bottom:1px solid var(--line);position:relative}
.herb-modal-head .closeBtn{position:absolute;top:10px;right:12px;font-size:22px;color:var(--ink-light);background:transparent;border:none;cursor:pointer;width:32px;height:32px;border-radius:50%}
.herb-modal-head .closeBtn:hover{background:#F0F0F0}
.herb-modal .img-slot{width:96px;height:96px;margin:0 auto 8px;display:grid;place-items:center;background:#FAFAFA;border-radius:14px;overflow:hidden}
.herb-modal .img-slot img{max-width:100%;max-height:100%;object-fit:cover}
.herb-modal .img-slot span{font-size:64px}
.herb-modal h2{font-size:30px;font-weight:900;color:var(--ink);line-height:1;margin-bottom:4px}
.herb-modal h2 .sub{display:block;font-size:14px;color:var(--ink-light);font-weight:600;margin-top:4px}
.herb-modal .h-stars{font-size:14px;letter-spacing:-1px;color:var(--gold);margin-top:6px}
.herb-modal-body{padding:14px 20px 20px}
.herb-modal-body .row{padding:8px 0;border-bottom:1px solid #F4F4F4;display:flex;gap:10px;font-size:13px;line-height:1.5}
.herb-modal-body .row:last-child{border-bottom:none}
.herb-modal-body .row .lbl{flex:0 0 56px;font-weight:800;color:var(--ink-light);font-size:11px;letter-spacing:.5px;text-transform:uppercase}
.herb-modal-body .row .val{flex:1;color:var(--ink);font-weight:600}
.herb-modal-body .row .val b{color:var(--green-dark)}
.herb-modal .progress-line{margin-top:14px;padding:10px 12px;background:#F7F7F7;border-radius:10px;font-size:12px;color:var(--ink-light)}
.herb-modal .progress-line b{color:var(--ink)}

/* 약재 통계 (기존, 안 쓰지만 호환) */
.herb-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.herb-row:last-child{border-bottom:none}
.herb-emoji{font-size:24px;width:36px;text-align:center}
.herb-info{flex:1}
.herb-name{font-weight:700;font-size:14px}
.herb-cat{font-size:11px;color:var(--ink-light)}
.herb-stat{font-weight:800;font-size:13px}

/* 빈 상태 */
.empty{text-align:center;padding:40px 20px;color:var(--ink-light)}
.empty .ico{font-size:60px;margin-bottom:8px;opacity:.6}
.empty .t{font-weight:700;font-size:15px;color:var(--ink)}

/* 설정 패널 */
.settings-block{padding:8px 0}
.setting-row{margin:14px 0}
.setting-row label{display:block;font-size:13px;font-weight:800;margin-bottom:6px;color:var(--ink)}
.setting-row input[type="text"],.setting-row input[type="url"],.setting-row select,.setting-row textarea{
  width:100%;padding:10px 12px;font-size:14px;
  border:2px solid var(--line);border-radius:10px;
  font-family:inherit;background:#fff;color:var(--ink);
}
.setting-row input:focus,.setting-row select:focus,.setting-row textarea:focus{outline:none;border-color:var(--blue)}
.setting-row textarea{resize:vertical;min-height:80px;font-family:monospace;font-size:12px}
.setting-row small{display:block;margin-top:4px;font-size:11px;color:var(--ink-light);line-height:1.5}
.toggle-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;background:#F7F7F7;border-radius:12px;margin-bottom:14px;
  font-weight:700;font-size:14px;
}
/* 토글 스위치 */
.switch{position:relative;display:inline-block;width:48px;height:26px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;inset:0;background:#CCC;transition:.2s;border-radius:26px}
.slider:before{position:absolute;content:"";height:20px;width:20px;left:3px;top:3px;background:white;transition:.2s;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2)}
input:checked+.slider{background:var(--green)}
input:checked+.slider:before{transform:translateX(22px)}
.preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin-top:8px}
.preview-cell{text-align:center;padding:10px;background:#fafafa;border-radius:10px;border:1px solid var(--line)}
.preview-cell .img-slot{width:80px;height:80px;margin:0 auto 6px;display:grid;place-items:center;background:#fff;border-radius:8px;overflow:hidden}
.preview-cell .img-slot img{max-width:100%;max-height:100%;object-fit:cover}
.preview-cell .name{font-weight:700;font-size:13px}
.preview-cell .url{font-size:9px;color:var(--ink-light);word-break:break-all;margin-top:2px;line-height:1.3}
.section-h4{font-size:13px;font-weight:800;color:var(--ink-light);text-transform:uppercase;letter-spacing:1px;margin:18px 0 8px}

/* 유형별 인사이트 카드 */
.insight-grid{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:16px}
.insight-card{display:flex;align-items:center;gap:10px;padding:12px;background:var(--card);border:2px solid var(--line);border-radius:12px}
.insight-card .ico{font-size:28px;line-height:1;flex:0 0 auto}
.insight-card .body{flex:1}
.insight-card .lbl{font-size:11px;font-weight:800;letter-spacing:.5px;color:var(--ink-light);margin-bottom:2px;text-transform:uppercase}
.insight-card .val{font-size:14px;font-weight:800;color:var(--ink);line-height:1.3}
.insight-card .meta{font-size:11px;color:var(--ink-light);margin-top:2px}
.insight-card.strong{border-color:#B8E5A0;background:#F4FFE8}
.insight-card.weak{border-color:#FFC8C8;background:#FFF7F7}
.insight-card.fast{border-color:#B8DDFF;background:#F0F8FF}
.insight-card.slow{border-color:#FFD5A0;background:#FFFAF0}
.type-quick{display:inline-block;padding:2px 8px;background:#F4F4F4;border-radius:99px;font-size:11px;font-weight:700;color:var(--ink);margin-left:4px}

/* 컨페티 */
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:1000}
.confetti span{position:absolute;width:10px;height:14px;top:-20px;border-radius:2px;opacity:0;animation:confetti 3s ease-in forwards}
@keyframes confetti{0%{opacity:0;transform:translateY(0) rotate(0)}10%{opacity:1}100%{opacity:0;transform:translateY(110vh) rotate(720deg)}}

/* 마스코트 버디 (퀴즈 중 반응) */
.mascot-buddy{
  position:fixed;bottom:80px;right:14px;
  width:56px;height:56px;
  display:grid;place-items:center;
  background:#fff;border:3px solid var(--green);border-radius:50%;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  z-index:55;font-size:32px;line-height:1;
  transition:transform .25s,border-color .25s,box-shadow .25s;
  user-select:none;pointer-events:none;
}
.mascot-buddy[data-state="happy"]{border-color:var(--green);animation:mascotBounce .6s ease}
.mascot-buddy[data-state="sad"]{border-color:var(--red);animation:mascotShake .5s}
.mascot-buddy[data-state="excited"]{border-color:var(--gold);box-shadow:0 0 24px rgba(255,200,0,.7);animation:mascotJump .7s ease}
.mascot-buddy[data-state="superCombo"]{border-color:var(--orange);box-shadow:0 0 32px rgba(255,150,0,.85);animation:mascotJump .5s ease infinite}
.mascot-buddy[data-state="surprised"]{border-color:var(--blue);animation:mascotWiggle .5s}
@keyframes mascotBounce{0%,100%{transform:translateY(0) scale(1)}30%{transform:translateY(-12px) scale(1.1)}60%{transform:translateY(-4px) scale(1.05)}}
@keyframes mascotShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px) rotate(-5deg)}75%{transform:translateX(6px) rotate(5deg)}}
@keyframes mascotJump{0%{transform:translateY(0)}40%{transform:translateY(-18px) scale(1.15)}70%{transform:translateY(-4px)}100%{transform:translateY(0)}}
@keyframes mascotWiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-15deg) scale(1.1)}75%{transform:rotate(15deg) scale(1.1)}}

/* 콤보 배지 (3연속 정답 이상) */
.combo-badge{
  position:fixed;left:50%;top:30%;
  transform:translate(-50%,-50%) scale(0);
  font-family:inherit;font-size:48px;font-weight:900;
  letter-spacing:-1px;
  color:var(--orange);
  text-shadow:0 4px 16px rgba(255,150,0,.4),0 2px 0 #fff;
  pointer-events:none;z-index:120;
  -webkit-text-stroke:2px #fff;
  white-space:nowrap;
}
.combo-badge .multi{font-size:64px;color:var(--gold)}
.combo-badge.show{animation:comboPop 1.2s ease-out forwards}
@keyframes comboPop{
  0%{transform:translate(-50%,-50%) scale(0) rotate(-12deg);opacity:0}
  20%{transform:translate(-50%,-50%) scale(1.3) rotate(0);opacity:1}
  40%{transform:translate(-50%,-50%) scale(1) rotate(0)}
  80%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}
  100%{transform:translate(-50%,calc(-50% - 80px)) scale(.8);opacity:0}
}

/* 플로팅 XP 표시 */
.float-xp{
  position:fixed;left:50%;top:42%;
  transform:translate(-50%,-50%);
  font-family:inherit;font-size:32px;font-weight:900;
  color:var(--green-dark);
  text-shadow:0 2px 0 #fff,0 4px 12px rgba(88,167,0,.4);
  pointer-events:none;z-index:115;
  -webkit-text-stroke:1px #fff;
  animation:floatXp 1.1s ease-out forwards;
}
@keyframes floatXp{
  0%{transform:translate(-50%,-50%) scale(0);opacity:0}
  20%{transform:translate(-50%,-50%) scale(1.2);opacity:1}
  100%{transform:translate(-50%,calc(-50% - 70px)) scale(.9);opacity:0}
}

/* 타이머 강화: 5초 이하 빨간 펄스 + 흔들림 */
.timer.urgent{background:#FFCCCC;color:var(--red-dark);animation:urgentPulse .5s infinite}
@keyframes urgentPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}

/* 콤보 카운터 — 헤더에 표시 */
.combo-mini{display:none;align-items:center;gap:3px;background:#FFF3E0;color:var(--orange);
  padding:3px 8px;border-radius:99px;font-size:13px;font-weight:800;
  box-shadow:0 2px 0 #FFD180;animation:comboMiniPop .25s ease}
.combo-mini.active{display:inline-flex}
.combo-mini .ico{font-size:14px;line-height:1}
@keyframes comboMiniPop{0%{transform:scale(.6)}60%{transform:scale(1.2)}100%{transform:scale(1)}}

/* 흔들기 */
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.shake{animation:shake .4s}
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.25)}100%{transform:scale(1)}}
.pop{animation:pop .35s}

/* 모달 */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal-bg.show{display:flex}
.modal{background:#fff;border-radius:20px;padding:24px;max-width:380px;width:100%;text-align:center}
.modal h3{font-size:20px;margin-bottom:6px}
.modal p{color:var(--ink-light);font-size:13px;line-height:1.55;margin-bottom:18px}

/* 하단 네비 (홈/프로필) */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:2px solid var(--line);display:flex;z-index:50}
.bottom-nav-inner{max-width:560px;width:100%;margin:0 auto;display:flex}
.nav-btn{flex:1;padding:10px 0;text-align:center;color:var(--ink-light);font-weight:700;font-size:11px}
.nav-btn .ico{display:block;font-size:22px;margin-bottom:2px}
.nav-btn.active{color:var(--green-dark)}

@media(max-width:380px){
  .qtitle{font-size:18px}
  .ox-btn{font-size:50px}
  .qcard .herb-han{font-size:30px}
}


/* ============================================================
   v5 통합 디자인 (PC 전용)
   ============================================================ */
:root{
  --v5-main:#2E7D4E; --v5-sub:#6FBF7B; --v5-light:#E8F5E9;
  --v5-yellow:#FFC94D; --v5-beige:#FFF4E1; --v5-cream:#FDF9F1;
  --v5-brown:#8B5E34; --v5-pink:#FFE0E6; --v5-red:#FF6B6B;
  --v5-ink:#2B2B2B; --v5-gray:#6B7280; --v5-border:#EFE6CF;
  --v5-card:#FFFDF6; --v5-purple:#E8E2FF; --v5-purple-d:#7C6BC8;
}
*{box-sizing:border-box}
html,body{background:var(--v5-cream)!important;color:var(--v5-ink);font-family:"Pretendard","Apple SD Gothic Neo",-apple-system,sans-serif}
body{margin:0;padding:0}
.app{display:block!important;max-width:1480px;margin:0 auto;padding:18px 24px 24px!important;background:transparent!important;box-shadow:none!important;min-height:100vh}
.main-panel{flex:none!important;width:auto!important;max-width:none!important;background:transparent!important;padding:0!important;box-shadow:none!important}
.mascot-panel,#mascotPanel{display:none!important}
.bottom-nav{display:none!important}
#home > .home-head,#home > .streak-card,#home > .scores,#home > .wrong-card,#home > .review-card,#home > .start-block,#home > .section-title,#home > .cats{display:none!important}
#home.screen{padding:0!important;background:transparent!important}
.v5-shell{display:none}
#home.active .v5-shell{display:block}

/* 헤더 */
.v5-topbar{display:flex;align-items:center;gap:28px;flex-wrap:nowrap;background:var(--v5-card);border:2px solid var(--v5-border);border-radius:20px;padding:14px 26px;margin-bottom:16px}
.v5-logo{display:flex;align-items:center;gap:10px}
.v5-logo-mark{width:46px;height:46px;display:grid;place-items:center;font-size:34px}
.v5-logo-tx{display:flex;flex-direction:column;line-height:1}
.v5-logo-tag{font-size:13px;font-weight:700;color:var(--v5-sub);letter-spacing:.5px;margin-bottom:2px}
.v5-logo-ko{font-size:26px;font-weight:900;color:var(--v5-main);letter-spacing:-1px}
.v5-logo-en{font-size:10px;font-weight:700;color:var(--v5-sub);letter-spacing:2.5px;margin-top:3px}
.v5-lv{display:flex;align-items:center;gap:14px}
.v5-lv-num{font-size:22px;font-weight:900;white-space:nowrap}
.v5-lv-title{display:flex;align-items:center;gap:5px;font-size:15px;font-weight:800;color:var(--v5-main);white-space:nowrap}
.v5-xp{flex:0 0 auto;min-width:240px;max-width:300px}
.v5-xp-bar{height:12px;background:#E8E2D0;border-radius:99px;overflow:hidden}
.v5-xp-fill{height:100%;background:linear-gradient(90deg,var(--v5-sub),var(--v5-main));border-radius:99px;transition:width .3s}
.v5-xp-tx{font-size:11px;color:var(--v5-gray);font-weight:700;margin-top:3px;text-align:right}
.v5-streak{display:flex;align-items:center;gap:7px;font-size:15px;font-weight:900;white-space:nowrap}
.v5-streak .fire{font-size:22px}
.v5-coin{display:flex;align-items:center;gap:10px;margin-left:auto;white-space:nowrap}
.v5-coin-art{width:42px;height:42px;display:grid;place-items:center;font-size:30px}
.v5-coin-info{display:flex;flex-direction:column;line-height:1.1}
.v5-coin-lb{font-size:11px;color:var(--v5-gray);font-weight:700}
.v5-coin-v{font-size:22px;font-weight:900}
.v5-icons{display:flex;gap:8px}
.v5-ibtn{position:relative;width:42px;height:42px;border-radius:50%;background:var(--v5-card);border:2px solid var(--v5-border);display:grid;place-items:center;cursor:pointer;font-size:17px;color:var(--v5-gray);transition:all .12s}
.v5-ibtn:hover{border-color:var(--v5-sub);color:var(--v5-main)}
.v5-ibadge{position:absolute;top:-3px;right:-3px;background:var(--v5-red);color:#fff;font-size:10px;font-weight:900;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;border:2px solid #fff}

/* 그리드 */
.v5-grid{display:grid;grid-template-columns:minmax(0,1fr) 660px;gap:18px;align-items:start;min-width:0}
.v5-main{display:flex;flex-direction:column;gap:14px}
.app.sasang-mode #home.active .v5-shell,.app.cal-mode #home.active .v5-shell,.app.dex-mode #home.active .v5-shell,.app.bookdex-mode #home.active .v5-shell{display:none!important}

/* 오늘의 메인 퀘스트 */
/* ========== 메인 CTA: 오늘의 본초 5문제 — 강화판 ========== */
.v5-quest{
  background:linear-gradient(135deg,#FFFCF5 0%,#FBF5E3 100%);
  border:3px solid #E8D58F;                      /* 더 도드라진 베이지-골드 보더 */
  border-radius:22px;
  padding:20px 22px;
  box-shadow:
    0 12px 36px rgba(46,138,87,.13),             /* 초록 톤 메인 그림자 — CTA 강조 */
    0 4px 10px rgba(0,0,0,.05),
    inset 0 1px 0 rgba(255,255,255,.7);          /* 상단 미세 하이라이트 */
  position:relative;
  overflow:hidden;
}
.v5-quest-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:8px}
.v5-quest-headbtns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.v5-quest-htitle{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:900}
.v5-quest-htitle .leaf{color:var(--v5-sub)}
.v5-quest-statbtn{display:flex;align-items:center;gap:5px;background:#fff;border:2px solid var(--v5-border);border-radius:12px;padding:7px 14px;font-size:12px;font-weight:800;color:var(--v5-gray);cursor:pointer;font-family:inherit}
.v5-quest-statbtn:hover{border-color:var(--v5-sub);color:var(--v5-main)}
/* 내부 메인 영역 — 더 밝고 따뜻한 베이지 그라데이션 */
.v5-quest-main{
  display:grid;grid-template-columns:160px 1fr auto;gap:18px;
  background:linear-gradient(135deg,#FFF8E9 0%,#F9EDCA 100%);
  border:2px solid #ECD9A0;border-radius:16px;
  padding:8px 22px;align-items:center;
}
.v5-quest-plant{width:160px;height:160px;display:grid;place-items:center;align-self:center;margin:-6px 0}
.v5-quest-plant svg{width:100%;height:100%}
.v5-quest-plant img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;filter:drop-shadow(0 5px 10px rgba(0,0,0,.12))}
/* 제목 — 26 → 32, 더 굵게 */
.v5-quest-title{
  font-size:32px;font-weight:900;
  margin-bottom:8px;line-height:1.15;
  letter-spacing:-0.5px;
  color:#1F2A20;
}
.v5-quest-title .accent{
  color:var(--v5-main);
  background:linear-gradient(120deg,var(--v5-main) 0%,#3FA866 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.v5-quest-sub{font-size:13px;color:var(--v5-gray);margin-bottom:14px}
.v5-quest-xp{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;flex-wrap:wrap}
.v5-quest-xp .star{font-size:20px;color:var(--v5-yellow)}
.v5-quest-xp .lb{color:var(--v5-gray)}
.v5-quest-xp .num{color:var(--v5-main);font-weight:900;font-size:18px;margin-left:4px}
/* 보상 칩 — 코끼리포인트(골드) / XP(그린) */
.v5-quest-reward-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 12px;border-radius:999px;
  font-size:14px;font-weight:900;
  position:relative;overflow:hidden;
  border:1.5px solid;
}
.v5-quest-reward-chip.coin{
  background:linear-gradient(135deg,#FFF5C0 0%,#FFE99B 100%);
  border-color:#E0BE3A;color:#6B4F00;
  box-shadow:0 2px 6px rgba(224,190,58,.25);
}
.v5-quest-reward-chip.xp{
  background:linear-gradient(135deg,#DFF5E0 0%,#B7E8C2 100%);
  border-color:#5BB07A;color:#1F5A36;
  box-shadow:0 2px 6px rgba(91,176,122,.25);
}
.v5-quest-reward-chip .ico{font-size:14px}
.v5-quest-reward-chip .val{font-size:15px;letter-spacing:-0.3px}
/* 은은한 반짝임 — 4초 주기 우상향 sweep */
.v5-quest-reward-chip::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  transform:translateX(-100%);
  animation:questSweep 4s ease-in-out infinite;
  pointer-events:none;
}
.v5-quest-reward-chip.xp::after{animation-delay:1.2s}
@keyframes questSweep{
  0%, 60% { transform:translateX(-100%); }
  100%    { transform:translateX(100%); }
}
/* 시작 버튼 — 더 크고, 초록 발광 glow + 숨쉬는 pulse */
.v5-quest-start{
  display:flex;align-items:center;justify-content:center;gap:12px;
  background:linear-gradient(180deg,#3FA866 0%,#2E8A57 100%);
  color:#fff;border:none;border-radius:16px;
  padding:18px 32px;                              /* 14·26 → 18·32 */
  font-size:17px;font-weight:900;                 /* 15 → 17 */
  cursor:pointer;font-family:inherit;
  box-shadow:
    0 4px 0 #1F5A36,
    0 10px 28px rgba(46,138,87,.5);               /* 초록 glow */
  transition:transform .18s ease, box-shadow .18s ease;
  position:relative;
  animation:questPulse 2.4s ease-in-out infinite;
  letter-spacing:-0.3px;
}
.v5-quest-start:hover{
  transform:translateY(-2px) scale(1.04);          /* 1.04배 확대 */
  box-shadow:
    0 6px 0 #1F5A36,
    0 16px 36px rgba(46,138,87,.65);              /* 그림자 강조 */
}
.v5-quest-start:active{
  transform:translateY(1px) scale(1.02);
  box-shadow:
    0 1px 0 #1F5A36,
    0 4px 12px rgba(46,138,87,.4);
  animation:none;
}
.v5-quest-start .arr{
  width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.25);
  display:grid;place-items:center;font-size:12px;
}
/* 숨쉬는 듯한 pulse — glow 강약만 부드럽게 (크기 변화 없음 → 안정적) */
@keyframes questPulse{
  0%, 100% {
    box-shadow:
      0 4px 0 #1F5A36,
      0 10px 28px rgba(46,138,87,.5);
  }
  50% {
    box-shadow:
      0 4px 0 #1F5A36,
      0 14px 36px rgba(46,138,87,.75);
  }
}
/* 접근성 — 모션 줄이기 옵션 존중 */
@media (prefers-reduced-motion: reduce){
  .v5-quest-start{ animation:none; }
  .v5-quest-reward-chip::after{ animation:none; display:none; }
}

/* 미니카드 */
.v5-minis{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.v5-mini{position:relative;border:2px solid;border-radius:16px;padding:0 14px 14px;overflow:hidden;min-height:auto;display:flex;flex-direction:column;align-items:center;text-align:center}
.v5-mini.pink{background:var(--v5-pink);border-color:#F5BCC8}
.v5-mini.yellow{background:#FFF1D5;border-color:#F0D67A}
.v5-mini.purple{background:var(--v5-purple);border-color:#C5B8F0}
.v5-mini-t{display:flex;align-items:center;justify-content:center;gap:6px;font-size:20px;font-weight:900;margin:0 0 3px}
.v5-mini.pink .v5-mini-t{color:#C0405A} .v5-mini.yellow .v5-mini-t{color:#B5860B} .v5-mini.purple .v5-mini-t{color:#5A4AA8}
.v5-mini-s{font-size:14px;color:var(--v5-gray);margin-bottom:0;line-height:1.3;text-align:center}
.v5-mini-c{font-size:31px;font-weight:900;margin:-2px 0 10px;line-height:1.05;text-align:center}
.v5-mini-c span{font-size:16px;color:var(--v5-gray);font-weight:700;margin-left:3px}
.v5-mini.pink .v5-mini-c{color:var(--v5-red)} .v5-mini.yellow .v5-mini-c{color:var(--v5-yellow)} .v5-mini.purple .v5-mini-c{color:var(--v5-purple-d)}
/* ========== 미니 카드 버튼 — 메인 CTA와 동일한 강화 효과 (색상 자동 매칭) ========== */
.v5-mini-btn{
  display:inline-flex;align-items:center;gap:8px;
  border:none;border-radius:14px;
  padding:14px 28px;                            /* 10·22 → 14·28 (메인 CTA와 동급) */
  font-size:17px;font-weight:900;
  cursor:pointer;font-family:inherit;color:#fff;
  align-self:center;margin-top:auto;
  transition:transform .18s ease, box-shadow .18s ease;
  position:relative;
  letter-spacing:-0.3px;
}

/* 분홍 (틀린 문제 — 바로 복습하기) */
.v5-mini.pink .v5-mini-btn{
  background:linear-gradient(180deg,#FFA1B5 0%,#FF8FA3 100%);
  box-shadow:0 4px 0 #D9748B, 0 10px 28px rgba(255,143,163,.5);
  animation:miniPulsePink 2.4s ease-in-out infinite;
}
.v5-mini.pink .v5-mini-btn:hover{
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 6px 0 #D9748B, 0 16px 36px rgba(255,143,163,.7);
}
.v5-mini.pink .v5-mini-btn:active{
  transform:translateY(1px) scale(1.02);
  box-shadow:0 1px 0 #D9748B, 0 4px 12px rgba(255,143,163,.4);
  animation:none;
}
@keyframes miniPulsePink{
  0%, 100% { box-shadow:0 4px 0 #D9748B, 0 10px 28px rgba(255,143,163,.5); }
  50%      { box-shadow:0 4px 0 #D9748B, 0 14px 36px rgba(255,143,163,.78); }
}

/* 노랑 (복습 대기 — 복습 시작하기) */
.v5-mini.yellow .v5-mini-btn{
  background:linear-gradient(180deg,#FFD566 0%,#F5C249 100%);
  color:#7C5400;
  box-shadow:0 4px 0 #D9A93C, 0 10px 28px rgba(245,194,73,.55);
  animation:miniPulseYellow 2.4s ease-in-out infinite;
  animation-delay:.8s;                         /* 스태거 — 세 버튼이 동시 펄스 안 하도록 */
}
.v5-mini.yellow .v5-mini-btn:hover{
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 6px 0 #D9A93C, 0 16px 36px rgba(245,194,73,.75);
}
.v5-mini.yellow .v5-mini-btn:active{
  transform:translateY(1px) scale(1.02);
  box-shadow:0 1px 0 #D9A93C, 0 4px 12px rgba(245,194,73,.4);
  animation:none;
}
@keyframes miniPulseYellow{
  0%, 100% { box-shadow:0 4px 0 #D9A93C, 0 10px 28px rgba(245,194,73,.55); }
  50%      { box-shadow:0 4px 0 #D9A93C, 0 14px 36px rgba(245,194,73,.85); }
}

/* 보라 (도전 타임어택 — 도전하기) */
.v5-mini.purple .v5-mini-btn{
  background:linear-gradient(180deg,#7B6BCF 0%,#6B5BBE 100%);
  box-shadow:0 4px 0 #5A4AA8, 0 10px 28px rgba(123,107,207,.55);
  animation:miniPulsePurple 2.4s ease-in-out infinite;
  animation-delay:1.6s;                        /* 스태거 — 마지막 버튼이 가장 늦게 */
}
.v5-mini.purple .v5-mini-btn:hover{
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 6px 0 #5A4AA8, 0 16px 36px rgba(123,107,207,.75);
}
.v5-mini.purple .v5-mini-btn:active{
  transform:translateY(1px) scale(1.02);
  box-shadow:0 1px 0 #5A4AA8, 0 4px 12px rgba(123,107,207,.4);
  animation:none;
}
@keyframes miniPulsePurple{
  0%, 100% { box-shadow:0 4px 0 #5A4AA8, 0 10px 28px rgba(123,107,207,.55); }
  50%      { box-shadow:0 4px 0 #5A4AA8, 0 14px 36px rgba(123,107,207,.85); }
}

/* 접근성 — 모션 줄이기 옵션 존중 */
@media (prefers-reduced-motion: reduce){
  .v5-mini-btn{ animation:none; }
}

/* ========== 공통 유틸 클래스 — 인라인 style 정리 ========== */
/* 경고/주의 텍스트 톤 (예: "1일 1회만 지급") */
.tone-warn{color:#C0405A;font-weight:800}
/* 초기 숨김 유틸 — JS toggle 시에도 일관성 유지 */
.is-hidden{display:none !important}

/* ========== v5 본초 카드 — 인라인 템플릿 중복 제거 (3곳에서 재사용) ========== */
.v5q-herb-card{background:transparent;border:none;padding:0;display:flex;flex-direction:column;gap:6px;align-items:center}
.v5q-herb-img-slot{display:grid;place-items:center;background:#fff;border-radius:14px;overflow:hidden;border:1px solid #EEE3C8}
/* 슬롯 안 본초 사진 — 슬롯에 꽉 차게, 비율 유지, 화질 보존 */
.v5q-herb-img-slot img{width:100%;height:100%;object-fit:cover;display:block;image-rendering:auto}
.v5q-herb-img-slot span{font-size:64px}
.v5q-herb-han{font-size:30px;font-weight:900;color:#2A2A2A;margin-top:4px;letter-spacing:1px}
.v5q-herb-kr{font-size:16px;color:#666;font-weight:600}

.v5-mini-art{position:relative;right:auto;bottom:auto;width:auto;max-width:100%;margin:-28px auto -28px;line-height:0;pointer-events:none;order:-1}
.v5-mini-art img{display:block;width:auto;max-width:100%;height:240px;object-fit:contain;object-position:center;filter:drop-shadow(0 5px 10px rgba(0,0,0,.12))}

/* 연속 출석 보상 — 마스코트 카드 바로 아래 별도 카드 */
.v5-streak-below{background:var(--v5-card);border:2px solid var(--v5-border);border-bottom-width:3px;border-radius:16px;padding:4px 16px 4px;display:flex;flex-direction:column;gap:4px;box-shadow:0 4px 10px -4px rgba(0,0,0,.06)}
.v5-strk-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.v5-strk-title{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:900;color:#3B2A12}
.v5-strk-title .leaf{font-size:14px}
.v5-strk-stat{font-size:11px;font-weight:800;color:var(--v5-main);background:rgba(46,125,78,.1);padding:3px 10px;border-radius:99px;white-space:nowrap;margin-left:auto}
.v5-strk-stat b{font-size:13px;color:#E65100;margin-right:1px}
.v5-strk-tl{display:grid;grid-template-columns:repeat(7,1fr);position:relative;padding:0 4px}
.v5-strk-tl::before{content:"";position:absolute;left:18px;right:18px;top:11px;height:3px;background:#E8E2D2;border-radius:99px;z-index:0}
.v5-strk-tl::after{content:"";position:absolute;left:18px;top:11px;height:3px;background:linear-gradient(to right,var(--v5-sub),var(--v5-main));border-radius:99px;z-index:1;width:var(--v5-prog,0px);transition:width .4s}
.v5-strk-step{display:flex;flex-direction:column;align-items:center;gap:3px;position:relative;z-index:2}
.v5-strk-cir{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:900;background:#fff;border:2px solid var(--v5-border);color:var(--v5-gray);transition:all .2s}
.v5-strk-cir.done{background:var(--v5-main);border-color:var(--v5-main);color:#fff;box-shadow:0 2px 6px rgba(46,125,78,.25)}
.v5-strk-cir.today{background:var(--v5-yellow);border-color:#E6A828;color:#7C5400;animation:v5StrkPulse 1.5s ease-in-out infinite;transform:scale(1.15)}
@keyframes v5StrkPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,201,77,.6)}50%{box-shadow:0 0 0 6px rgba(255,201,77,0)}}
.v5-strk-d{font-size:9px;color:var(--v5-gray);font-weight:700}
.v5-strk-rw{display:flex;align-items:center;gap:9px;background:linear-gradient(135deg,#FFF8DC,#FFEDB8);border:1.5px solid #F0D67A;border-radius:10px;padding:6px 11px}
.v5-strk-rw-ico{width:28px;height:28px;display:grid;place-items:center;font-size:18px;background:#fff;border-radius:7px;flex-shrink:0}
.v5-strk-rw-info{display:flex;flex-direction:column;line-height:1.05;flex:1}
.v5-strk-rw-lb{font-size:9px;color:#B5860B;font-weight:800;letter-spacing:.3px}
.v5-strk-rw-v{font-size:15px;font-weight:900;color:#7C5400}
.v5-strk-rw-d{font-size:10px;color:#8C6A24;font-weight:800;background:rgba(255,255,255,.7);padding:3px 8px;border-radius:99px;white-space:nowrap}

/* 연습 칩 (가로 스크롤) */
.v5-practice{background:var(--v5-card);border:2px solid var(--v5-border);border-radius:18px;padding:6px 18px;position:relative}
.v5-practice-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
.v5-practice-title{font-size:14px;font-weight:900}
.v5-practice-sub{font-size:11px;color:var(--v5-gray);font-weight:700;margin-left:4px}
.v5-practice-arrows{display:flex;gap:4px}
.v5-practice-arrow{width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid var(--v5-border);font-size:12px;font-weight:900;cursor:pointer;color:var(--v5-gray);display:grid;place-items:center}
.v5-chips-wrap{position:relative}
.v5-chips{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;padding:2px 2px;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--v5-sub) var(--v5-light)}
.v5-chips::-webkit-scrollbar{height:8px}
.v5-chips::-webkit-scrollbar-track{background:var(--v5-light);border-radius:99px}
.v5-chips::-webkit-scrollbar-thumb{background:var(--v5-sub);border-radius:99px}
.v5-chips .cat-chip{flex:0 0 auto;padding:8px 14px;border-radius:99px;background:#fff;border:2px solid var(--v5-border);font-weight:700;font-size:12px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-family:inherit}
.v5-chips .cat-chip.active{background:var(--v5-light);border-color:var(--v5-main);color:var(--v5-main)}
.v5-chips .cat-chip .cnt{font-size:10px;color:var(--v5-gray);font-weight:700;background:#F2F2F2;padding:1px 6px;border-radius:99px}
.v5-chips.type-cats .cat-chip[data-tk="clinical"]{border-color:#FFC7C7;background:#FFF5F5}
.v5-chips.type-cats .cat-chip[data-tk="comparison"]{border-color:#D5C8FF;background:#F8F4FF}
.v5-chips.type-cats .cat-chip[data-tk="ox"]{border-color:#C8F0A0;background:#F2FCE5}
.v5-chips.type-cats .cat-chip[data-tk="tagMerid"]{border-color:#B5DFFF;background:#EEF7FF}
.v5-chips.type-cats .cat-chip[data-tk="effectsToHerb"]{border-color:#FFDC95;background:#FFF8E5}

/* 우측 마스코트 (홈) */
.v5-right{display:flex;flex-direction:column;gap:14px;min-width:600px;width:660px}
.v5-mascot-card{position:relative;width:100%;height:680px;background:linear-gradient(180deg,#9FCBE8 0%,#C5E5A8 55%,#D5BC8E 100%);border:3px solid var(--v5-border);border-radius:22px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.v5-mascot-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;z-index:1}
.v5-mascot-bg.has-image + .v5-mascot-bg-svg{display:none}
.v5-mascot-bg-svg{position:absolute;inset:0;z-index:1}
.v5-mascot-bg-svg svg{width:100%;height:100%;display:block}
.v5-mascot-slot{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:300px;height:300px;display:grid;place-items:center;z-index:3;animation:v5MFloat 4s ease-in-out infinite}
@keyframes v5MFloat{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 12px))}}
.v5-mascot-img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 8px 16px rgba(0,0,0,.2))}
.v5-mascot-slot svg{width:100%;height:100%;filter:drop-shadow(0 8px 16px rgba(0,0,0,.2))}
.v5-region{position:absolute;top:16px;right:16px;background:rgba(46,125,78,.92);color:#fff;border-radius:12px;padding:10px 14px;backdrop-filter:blur(4px);display:flex;flex-direction:column;gap:2px;z-index:4}
.v5-region .lb{font-size:11px;opacity:.85;font-weight:700}
.v5-region .nm{font-size:14px;font-weight:900;display:flex;align-items:center;gap:6px}
.v5-region-time{position:absolute;right:12px;top:14px;font-size:20px}
.v5-signpost{position:absolute;bottom:50px;right:30px;background:#A07A4E;color:#FFF4DD;border:3px solid #6E512F;border-radius:8px;padding:10px 14px;font-weight:900;font-size:13px;transform:rotate(3deg);box-shadow:0 6px 0 #6E512F;z-index:4;text-align:center;line-height:1.4}
.v5-signpost::before{content:"";position:absolute;left:50%;bottom:-32px;transform:translateX(-50%);width:6px;height:32px;background:#6E512F}
.v5-music{position:absolute;left:62%;top:32%;font-size:22px;animation:v5Note 2.5s ease-in-out infinite;opacity:.85;z-index:4}
@keyframes v5Note{0%,100%{transform:translateY(0) rotate(-10deg);opacity:.6}50%{transform:translateY(-10px) rotate(12deg);opacity:1}}

/* 하단 네비 */
.v5-bottom{margin-top:16px;background:var(--v5-card);border:2px solid var(--v5-border);border-radius:20px;padding:10px;display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.v5-tab{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 6px;border:none;background:transparent;border-radius:14px;font-family:inherit;font-size:13px;font-weight:800;color:var(--v5-gray);cursor:pointer;transition:all .15s}
.v5-tab:hover,.v5-tab.active{background:var(--v5-light);color:var(--v5-main)}
.v5-tab .ico{font-size:24px;line-height:1}
.v5-tab .lbl{font-size:13px}

/* 페이지 공통 (사상/캘린더/채집) */
#sasang,#calendar,#dex{padding:8px 0!important;background:transparent}
.vk-page{display:flex;flex-direction:column;gap:16px;padding:8px 24px 24px}
.vk-page-head{display:flex;align-items:center;gap:12px;background:var(--v5-card);border:2px solid var(--v5-border);border-radius:16px;padding:14px 18px}
.vk-page-head h2{flex:1;text-align:center;font-size:22px;font-weight:900;margin:0}
.vk-back{font-size:18px;width:40px;height:40px;border-radius:50%;border:2px solid var(--v5-border);background:#fff;cursor:pointer;font-weight:900;color:var(--v5-gray)}
.vk-page-head.detail{background:linear-gradient(135deg,var(--cc),var(--cd));color:#fff;border-color:transparent}
.vk-page-head.detail h2{color:#fff}
.vk-page-head.detail .vk-back{background:rgba(255,255,255,.25);border:0;color:#fff}
.vk-empty{text-align:center;color:var(--v5-gray);font-size:13px;padding:30px}

/* 사상 (v6.5 - 큰 마스코트 카드, 세로 트레이딩카드 스타일) */
.vk-sasang-intro{background:linear-gradient(135deg,#FFFBEB,#FFF8DC);border:2px solid #F0E2BD;border-radius:18px;padding:16px 22px;display:flex;align-items:center;gap:16px}
.vk-sasang-intro .ico{font-size:32px;line-height:1;filter:drop-shadow(0 3px 6px rgba(0,0,0,.1))}
.vk-sasang-intro .tx{display:flex;flex-direction:column;gap:3px}
.vk-sasang-intro .tx .t{font-size:15px;font-weight:900;color:#3B2A12}
.vk-sasang-intro .tx .s{font-size:12px;color:#7A6A4A;line-height:1.5}

.vk-sasang-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:1100px){.vk-sasang-grid{grid-template-columns:1fr 1fr}}
.vk-sasang-slot{display:flex;flex-direction:column;gap:12px}
.vk-sasang-quizbtn{background:linear-gradient(135deg,var(--cc),var(--cd));color:#fff;border:0;border-radius:14px;padding:14px 14px;font-size:14px;font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 6px 14px -4px color-mix(in srgb,var(--cc) 55%,transparent);transition:transform .15s ease,box-shadow .2s ease;font-family:inherit;position:relative;overflow:hidden}
.vk-sasang-quizbtn:hover{transform:translateY(-2px);box-shadow:0 10px 20px -4px color-mix(in srgb,var(--cc) 75%,transparent)}
.vk-sasang-quizbtn:active{transform:translateY(0)}
.vk-sasang-quizbtn::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 50%);pointer-events:none}
.vk-sasang-quizbtn .ico{font-size:18px;line-height:1}
.vk-sasang-quizbtn .tx{flex:1;text-align:center;letter-spacing:-.3px}
.vk-sasang-quizbtn .cnt{background:rgba(255,255,255,.28);padding:3px 9px;border-radius:99px;font-size:11px;font-weight:800;flex-shrink:0}

.vk-sasang-card{position:relative;background:linear-gradient(180deg,#FFFFFF 0%,color-mix(in srgb,var(--cc) 6%,#FFFFFF) 60%,color-mix(in srgb,var(--cc) 15%,#FFFFFF) 100%);border:3px solid var(--cc);border-radius:22px;padding:0;cursor:pointer;display:flex;flex-direction:column;font-family:inherit;text-align:left;overflow:hidden;transition:transform .18s ease,box-shadow .25s ease}
.vk-sasang-card:hover{transform:translateY(-6px);box-shadow:0 22px 40px -16px color-mix(in srgb,var(--cc) 65%,transparent)}
.vk-sasang-card::before{content:attr(data-hanja);position:absolute;top:10px;right:14px;font-size:54px;font-weight:900;color:var(--cc);opacity:.22;letter-spacing:-3px;pointer-events:none;line-height:1;z-index:5}

.vk-sasang-art{position:relative;width:100%;aspect-ratio:1/1;display:flex;align-items:flex-end;justify-content:center;background:radial-gradient(ellipse at 50% 55%,color-mix(in srgb,var(--cc) 22%,transparent),transparent 65%),linear-gradient(180deg,color-mix(in srgb,var(--cc) 8%,#fff),color-mix(in srgb,var(--cc) 3%,#fff));overflow:hidden;padding:8px 8px 0}
.vk-sasang-art img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;filter:drop-shadow(0 8px 14px rgba(0,0,0,.22));transform-origin:50% 100%}
.vk-sasang-card[data-k="소양인"] .vk-sasang-art img{transform:scale(1.15);transform-origin:50% 40.7%}
.vk-sasang-card[data-k="소음인"] .vk-sasang-art img{transform:scale(1.15);transform-origin:50% 50.6%}
.vk-sasang-art .emoji-fb{font-size:96px;line-height:1;filter:drop-shadow(0 8px 14px rgba(0,0,0,.15));padding-bottom:24px}

.vk-sasang-info{position:relative;display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px;background:#fff;border-top:2px dashed color-mix(in srgb,var(--cc) 40%,#fff);z-index:2}
.vk-sasang-row{display:flex;justify-content:space-between;align-items:flex-end;gap:8px}
.vk-sasang-name{font-size:22px;font-weight:900;color:var(--cd);display:flex;flex-direction:column;line-height:1.1}
.vk-sasang-han{font-size:11px;color:var(--cc);font-weight:800;margin-top:3px;letter-spacing:1px}
.vk-sasang-count{font-size:26px;font-weight:900;line-height:1;color:var(--cd);text-align:right}
.vk-sasang-count span{font-size:11px;color:var(--v5-gray);margin-left:3px;font-weight:700}
.vk-sasang-desc{font-size:12px;color:#555;line-height:1.5}
.vk-sasang-kw{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.vk-sasang-kw span{font-size:10px;font-weight:700;color:var(--cd);background:#fff;border:1.5px solid var(--cc);border-radius:99px;padding:3px 8px}

.vk-detail-title{flex:1;display:flex;align-items:center;gap:14px}
.vk-detail-title .av{width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.25);display:grid;place-items:center;overflow:hidden;flex-shrink:0;border:2px solid rgba(255,255,255,.4)}
.vk-detail-title .av img{width:100%;height:100%;object-fit:contain}
.vk-detail-title .av .emoji-fb{font-size:32px}
.vk-detail-title .nm{font-size:22px;font-weight:900}
.vk-actions{display:flex;gap:10px}
.vk-act{flex:1;display:flex;align-items:center;gap:10px;padding:14px;border-radius:12px;background:#fff;border:2px solid var(--v5-border);font-family:inherit;text-align:left}
.vk-act.vk-act-quiz{border-color:var(--cc);background:linear-gradient(135deg,var(--cc),var(--cd));color:#fff;cursor:pointer}
.vk-act .ico{font-size:22px}
.vk-act .t{font-size:14px;font-weight:900}
.vk-act .s{font-size:11px;opacity:.85}
.vk-filter{display:flex;flex-wrap:wrap;gap:5px}
.vk-chip{font-size:11px;font-weight:700;color:var(--v5-gray);background:#fff;border:2px solid var(--v5-border);border-radius:99px;padding:5px 10px;cursor:pointer;font-family:inherit}
.vk-chip.on{background:var(--cc);color:#fff;border-color:var(--cc)}
.vk-herb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.vk-herb{background:#fff;border:2px solid var(--v5-border);border-bottom-width:3px;border-radius:12px;padding:12px 10px;cursor:pointer;font-family:inherit;text-align:left}
.vk-herb-name{font-size:14px;font-weight:900;margin-bottom:2px}
.vk-herb-cat{display:inline-block;font-size:10px;font-weight:800;color:var(--cd);background:rgba(0,0,0,.04);border-radius:99px;padding:2px 7px;margin-bottom:5px}
.vk-herb-eff{font-size:11px;color:#777;line-height:1.4}
.vk-herb-meta{font-size:10px;color:var(--v5-gray);font-weight:600}

/* 캘린더 */
.vk-cal-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.vk-cal-stat{background:var(--v5-card);border:2px solid var(--v5-border);border-radius:12px;padding:12px}
.vk-cal-stat .lb{font-size:11px;color:var(--v5-gray);font-weight:700;margin-bottom:3px}
.vk-cal-stat .v{font-size:22px;font-weight:900}
.vk-cal-stat .v span{font-size:12px;color:var(--v5-gray);margin-left:3px;font-weight:700}
.vk-cal-card{background:var(--v5-card);border:2px solid var(--v5-border);border-radius:14px;padding:16px}
.vk-cal-tabs{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.vk-cal-tab{font-size:11px;font-weight:700;padding:5px 12px;border-radius:99px;border:2px solid var(--v5-border);background:#fff;color:var(--v5-gray);cursor:pointer;font-family:inherit;margin-left:4px}
.vk-cal-tab.on{background:var(--v5-main);color:#fff;border-color:var(--v5-main)}
.vk-cal-wrap{overflow-x:auto}
.vk-cal-months{display:flex;padding-left:28px;font-size:10px;color:var(--v5-gray);font-weight:700;margin-bottom:4px;height:14px}
.vk-cal-mc{width:13px;flex-shrink:0;white-space:nowrap}
.vk-cal-row{display:flex;align-items:flex-start}
.vk-cal-dow{display:flex;flex-direction:column;gap:2px;margin-right:8px;font-size:10px;color:var(--v5-gray);width:20px;text-align:right;line-height:11px}
.vk-cal-dow div{height:11px}
.vk-cal-grid{display:flex;gap:2px}
.vk-cal-col{display:flex;flex-direction:column;gap:2px;flex-shrink:0}
.vk-cal-cell{width:11px;height:11px;border-radius:2px;cursor:pointer}
.vk-cal-legend{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:11px;color:var(--v5-gray)}
.vk-cal-legend .cl{width:11px;height:11px;border-radius:2px;display:inline-block}

/* 채집본초 */
.vk-dex-progress{background:linear-gradient(135deg,#FFF8DC,#FFFDF0);border:2px solid #F0D67A;border-radius:14px;padding:14px}
.vk-dex-num{font-size:18px;font-weight:900;margin-bottom:6px;display:flex;align-items:baseline;gap:4px}
.vk-dex-num b{font-size:26px;color:#B5860B}
.vk-dex-bar{height:8px;background:#FAEFC8;border-radius:99px;overflow:hidden;margin-bottom:10px}
.vk-dex-bar .f{height:100%;background:linear-gradient(90deg,#F0D67A,#B5860B)}
.vk-dex-filters{display:flex;flex-direction:column;gap:6px}
.vk-dex-frow{display:flex;align-items:center;gap:8px}
.vk-dex-frow .lb{font-size:10px;font-weight:800;color:var(--v5-gray);width:32px}
.vk-dex-frow .ch{display:flex;flex-wrap:wrap;gap:5px;flex:1}
.vk-dex-chip,.vk-dex-srt{font-size:11px;font-weight:700;padding:5px 10px;border-radius:99px;border:2px solid var(--v5-border);background:#fff;color:var(--v5-gray);cursor:pointer;font-family:inherit}
.vk-dex-chip.on,.vk-dex-srt.on{background:var(--v5-main);color:#fff;border-color:var(--v5-main)}
.vk-dex-sh{display:flex;justify-content:space-between;padding:0 4px 6px;border-bottom:2px solid var(--v5-border);margin-bottom:8px}
.vk-dex-sh h3{font-size:13px;font-weight:900;margin:0}
.vk-dex-sh span{font-size:11px;color:var(--v5-gray);font-weight:700}
.vk-dex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.vk-dex-card{position:relative;background:#fff;border:2px solid var(--v5-border);border-bottom-width:3px;border-radius:12px;padding:12px 8px;text-align:center;cursor:pointer;font-family:inherit}
.vk-dex-card.locked{background:#F4F4F4;border-style:dashed;cursor:not-allowed;opacity:.7}
.vk-dex-card .emo{font-size:28px;line-height:1;margin-bottom:4px}
.vk-dex-card .nm{font-size:11px;color:var(--v5-gray);font-weight:700}
.vk-dex-card .sil{font-size:30px;font-weight:900;color:#CCC}

/* 본초도감 (Dictionary) */
#bookdex{padding:8px 0!important;background:transparent}
.vk-bd-toolbar{background:var(--v5-card);border:2px solid var(--v5-border);border-radius:14px;padding:12px 16px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.vk-bd-search{flex:1;min-width:200px;display:flex;align-items:center;gap:8px;background:#fff;border:2px solid var(--v5-border);border-radius:10px;padding:6px 12px}
.vk-bd-search input{flex:1;border:0;outline:0;font-size:13px;font-family:inherit;background:transparent}
.vk-bd-search .ico{font-size:14px;color:var(--v5-gray)}
.vk-bd-stat{font-size:12px;color:var(--v5-gray);font-weight:700}
.vk-bd-stat b{color:var(--v5-main);font-size:14px}
.vk-bd-cats{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 4px}
.vk-bd-cchip{font-size:11px;font-weight:800;padding:5px 12px;border-radius:99px;border:2px solid var(--v5-border);background:#fff;color:var(--v5-gray);cursor:pointer;font-family:inherit;white-space:nowrap}
.vk-bd-cchip.on{background:var(--v5-main);color:#fff;border-color:var(--v5-main)}
.vk-bd-section{margin-top:14px}
.vk-bd-sectitle{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:900;color:#3B2A12;margin:18px 0 10px;padding:0 2px}
.vk-bd-sectitle .bar{flex:0 0 4px;height:18px;border-radius:2px;background:var(--cc,var(--v5-main))}
.vk-bd-sectitle .cnt{font-size:11px;color:var(--v5-gray);font-weight:700;background:#fff;border:1.5px solid var(--v5-border);padding:2px 8px;border-radius:99px}
.vk-bd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.vk-bd-card{background:#fff;border:2px solid var(--v5-border);border-bottom-width:3px;border-radius:14px;padding:0;cursor:pointer;font-family:inherit;text-align:left;transition:transform .12s ease,box-shadow .15s ease,border-color .15s ease;display:flex;flex-direction:column;overflow:hidden;min-height:280px}
.vk-bd-card:hover{transform:translateY(-2px);border-color:var(--cc,var(--v5-sub));box-shadow:0 8px 18px -6px rgba(0,0,0,.12)}
/* 사진 슬롯 — 4:3 비율, 이미지 없으면 이모지 폴백 */
.vk-bd-card .photo{position:relative;aspect-ratio:4/3;background:linear-gradient(135deg,#f8f3e0 0%,#e8dfc4 100%);display:flex;align-items:center;justify-content:center;overflow:hidden;border-bottom:2px solid var(--v5-border)}
.vk-bd-card .photo img{width:100%;height:100%;object-fit:cover;display:block}
.vk-bd-card .photo .emoji{font-size:54px;line-height:1;opacity:.65;filter:drop-shadow(0 2px 3px rgba(0,0,0,.08))}
.vk-bd-card .photo .cat-pill{position:absolute;top:8px;left:8px;font-size:10px;font-weight:800;color:#fff;background:var(--cc,#8AA46B);border-radius:99px;padding:3px 10px;box-shadow:0 2px 4px rgba(0,0,0,.15)}
.vk-bd-card .photo .sub-pill{position:absolute;top:8px;right:8px;font-size:9px;font-weight:800;color:#444;background:rgba(255,255,255,.92);border-radius:99px;padding:3px 8px}
/* 본문 */
.vk-bd-card .body{padding:10px 13px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
.vk-bd-card .nm{font-size:15px;font-weight:900;line-height:1.2;color:#1f1f1f;display:flex;align-items:baseline;gap:5px;flex-wrap:wrap}
.vk-bd-card .nm .han{font-size:11px;color:#999;font-weight:800}
.vk-bd-card .eff{font-size:11.5px;color:#3a3a3a;line-height:1.45;font-weight:600;min-height:32px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vk-bd-card .use{font-size:10.5px;color:#777;line-height:1.4;margin-top:1px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vk-bd-card .meta{font-size:10.5px;color:var(--v5-gray);line-height:1.5;margin-top:auto;border-top:1px dashed var(--v5-border);padding-top:6px}
.vk-bd-card .meta b{color:#444;font-weight:800}
.vk-bd-card .meta-row{display:flex;justify-content:space-between;gap:6px}
.vk-bd-card .meta-row span:first-child{color:var(--v5-gray)}
.vk-bd-card .meta-row span:last-child{color:#333;font-weight:700;text-align:right;flex:1}

/* 사상 알약 (모달용) */
.v5-sasang-pill{display:inline-block;font-size:11px;font-weight:900;color:#fff;border-radius:99px;padding:3px 10px;margin-right:6px}
.v5-sasang-태음인{background:linear-gradient(135deg,#6366F1,#4338CA)}
.v5-sasang-소양인{background:linear-gradient(135deg,#EF4444,#B91C1C)}
.v5-sasang-소음인{background:linear-gradient(135deg,#06B6D4,#0891B2)}
.v5-sasang-태양인{background:linear-gradient(135deg,#F59E0B,#D97706)}

/* ============================================================
   v5 퀴즈 화면
   ============================================================ */
#quiz.screen{padding:0!important;background:transparent!important}
#quiz.active > .topbar,#quiz.active > .quiz-body,#quiz.active > .footer{display:none!important}
#quiz.active{padding:18px 24px 24px!important}
.v5q-shell{display:none}
#quiz.active .v5q-shell{display:block}
.v5q-grid{display:grid;grid-template-columns:minmax(0,1fr) 660px;gap:18px;align-items:start}
.v5q-main{display:flex;flex-direction:column;gap:14px;min-width:0}
.v5q-titlerow{display:flex;justify-content:space-between;align-items:center;padding:0 4px}
.v5q-title{font-size:20px;font-weight:900;display:flex;align-items:center;gap:8px}
.v5q-title .leaf{color:var(--v5-sub)}
.v5q-timer{display:flex;align-items:center;gap:10px;background:var(--v5-beige);border:2px solid #F0E2BD;border-radius:14px;padding:8px 16px;font-weight:900}
.v5q-timer .ico{font-size:22px}
.v5q-timer .lb{font-size:11px;color:var(--v5-gray);font-weight:700;line-height:1.1}
.v5q-timer .v{font-size:20px}
.v5q-card{background:var(--v5-card);border:2px solid var(--v5-border);border-radius:20px;padding:24px 28px;display:flex;flex-direction:column;gap:16px}
.v5q-progress{display:inline-flex;background:#F4F0E0;border-radius:99px;padding:5px 14px;font-size:12px;font-weight:800;color:var(--v5-gray);align-self:flex-start}
.v5q-question{font-size:22px;font-weight:900;line-height:1.3}
.v5q-hint{display:inline-flex;align-items:flex-start;gap:8px;background:var(--v5-light);border-left:4px solid var(--v5-main);border-radius:10px;padding:10px 14px;font-size:13px;align-self:flex-start}
.v5q-hint .tag{background:var(--v5-main);color:#fff;font-size:11px;font-weight:900;border-radius:6px;padding:2px 8px;flex-shrink:0}
.v5q-image{background:var(--v5-beige);border:2px solid #F0E2BD;border-radius:16px;padding:18px;text-align:center;font-size:64px;min-height:140px;display:grid;place-items:center}
.v5q-image .img-slot img{max-width:100%;max-height:100%;object-fit:contain;border-radius:12px;display:block}
.v5q-image .img-slot span{font-size:96px}
.v5q-image .hint-list{text-align:left;background:#FFFCF2;border:1px dashed #E0D2A0;border-radius:10px;padding:10px 14px;font-size:14px;line-height:1.6}
.v5q-image .hint-row{display:flex;gap:10px;padding:6px 0;border-bottom:1px solid #F0E6CC}
.v5q-image .hint-row:last-child{border-bottom:none}
/* 식별형(herbId): 이미지(좌) + 설명(우) 가로 배치 — 세로 길이 절약 */
.qcard .herb-id-layout{display:flex;gap:18px;align-items:stretch;width:100%;text-align:left}
.qcard .herb-id-layout > .img-slot{flex:0 0 220px;height:220px;display:grid;place-items:center;background:#fff;border:2px solid #F0E2BD;border-radius:14px;overflow:hidden;margin:0}
.qcard .herb-id-layout > .img-slot img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.qcard .herb-id-layout > .img-slot span{font-size:80px}
.qcard .herb-id-layout > .hint-list{flex:1;min-width:0;margin:0}
@media (max-width:720px){
  .qcard .herb-id-layout{flex-direction:column}
  .qcard .herb-id-layout > .img-slot{width:100%;flex:0 0 auto;height:180px}
}
.v5q-image .scenario{font-size:15px;color:#2A2A2A;line-height:1.7;text-align:left}
.v5q-image .scenario .tag{display:inline-block;background:#F0F8FF;color:#1F6FB5;padding:2px 8px;border-radius:6px;font-size:12px;font-weight:700;margin:2px 2px 2px 0}
.v5q-opts{display:flex;flex-direction:column;gap:10px}
.v5q-opts.ox-mode{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.v5q-opt{display:flex;align-items:center;gap:14px;background:#fff;border:2px solid var(--v5-border);border-radius:14px;padding:14px 18px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;text-align:left;width:100%}
.v5q-opt .num{width:28px;height:28px;border-radius:50%;border:2px solid var(--v5-border);display:grid;place-items:center;font-size:13px;font-weight:900;color:var(--v5-gray);flex-shrink:0}
.v5q-opt:hover{border-color:var(--v5-sub);background:#FAFCF7}
.v5q-opt.selected{border-color:var(--v5-main);background:var(--v5-light);box-shadow:0 0 0 3px rgba(46,125,78,.12)}
.v5q-opt.selected .num{background:var(--v5-main);border-color:var(--v5-main);color:#fff}
.v5q-opt.correct{border-color:var(--v5-main);background:#E5F4DC}
.v5q-opt.wrong{border-color:var(--v5-red);background:#FFF0F0}
.v5q-ox{aspect-ratio:1.3/1;background:#fff;border:2px solid var(--v5-border);border-bottom-width:4px;border-radius:20px;font-size:80px;font-weight:900;cursor:pointer;font-family:inherit;display:grid;place-items:center;line-height:1}
.v5q-ox.O{color:var(--v5-main)}
.v5q-ox.X{color:var(--v5-red)}
.v5q-ox.selected{border-color:var(--v5-main);background:var(--v5-light);box-shadow:0 0 0 3px rgba(46,125,78,.15)}
.v5q-ox.correct{background:#E5F4DC}
.v5q-ox.wrong{background:#FFF0F0;border-color:var(--v5-red)}
.v5q-submit{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--v5-main);color:#fff;border:none;border-radius:14px;padding:14px;font-size:15px;font-weight:900;cursor:pointer;font-family:inherit;box-shadow:0 3px 0 #1F5A36}
.v5q-submit:disabled{opacity:.5;cursor:not-allowed;background:#BDBDBD;box-shadow:0 3px 0 #999}
.v5q-feedback{display:none;background:#F7F7F7;border-radius:12px;padding:14px 16px;font-size:13px;line-height:1.5}
.v5q-feedback.show{display:block}
.v5q-feedback.correct{background:#E5F4DC;border-left:4px solid var(--v5-main)}
.v5q-feedback.wrong{background:#FFE6E6;border-left:4px solid var(--v5-red)}
/* === 틀린 문제 텍스트 복습 (wrongReview) === */
.wrev-wrap{max-width:880px;margin:0 auto;padding:24px 24px 48px}
.wrev-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}
.wrev-back{background:#fff;border:2px solid var(--v5-border);border-radius:14px;padding:14px 22px;font-size:18px;font-weight:800;color:var(--v5-gray);cursor:pointer;font-family:inherit;white-space:nowrap}
.wrev-back:hover{border-color:var(--v5-sub);color:var(--v5-main)}
.wrev-title-wrap{flex:1}
.wrev-title{font-size:26px;font-weight:900;margin:0 0 6px;color:#C0405A}
.wrev-sub{font-size:13px;color:var(--v5-gray);line-height:1.5}
.wrev-sub b{color:#C0405A;font-weight:800}
.wrev-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;font-size:13px;color:var(--v5-gray)}
.wrev-meta .pill{background:#FFF1F4;border:1px solid #F5BCC8;color:#C0405A;padding:5px 12px;border-radius:99px;font-weight:800}
.wrev-list{display:flex;flex-direction:column;gap:14px}
.wrev-card{background:#fff;border:2px solid var(--v5-border);border-radius:16px;padding:18px 20px;box-shadow:0 2px 0 #EAE3CF}
.wrev-card .wrev-no{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;color:var(--v5-gray);margin-bottom:8px}
.wrev-card .wrev-no .badge{background:#F5E6EA;color:#C0405A;padding:3px 10px;border-radius:99px;font-size:11px}
.wrev-card .wrev-no .cat{background:#FFF1D5;color:#B5860B;padding:3px 10px;border-radius:99px;font-size:11px}
.wrev-card .wrev-scenario{background:#FFF8EC;border-left:4px solid var(--v5-yellow);padding:10px 14px;border-radius:8px;font-size:14px;line-height:1.6;color:#5C4A1E;margin-bottom:10px}
.wrev-card .wrev-q{font-size:16px;font-weight:800;line-height:1.5;margin:0 0 12px;color:#2A2A2A}
.wrev-card .wrev-opts{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.wrev-card .wrev-opt{display:flex;align-items:flex-start;gap:10px;padding:9px 12px;border:1.5px solid var(--v5-border);border-radius:10px;font-size:14px;line-height:1.4;background:#FAFAF6}
.wrev-card .wrev-opt .k{font-weight:900;color:var(--v5-gray);min-width:18px}
.wrev-card .wrev-opt.correct{border-color:var(--v5-main);background:#E5F4DC;color:#2D6A04}
.wrev-card .wrev-opt.correct .k{color:var(--v5-main)}
.wrev-card .wrev-opt.picked{border-color:var(--v5-red);background:#FFE6E6;color:#9B2030;text-decoration:line-through;text-decoration-color:rgba(155,32,48,.45)}
.wrev-card .wrev-opt.picked .k{color:var(--v5-red)}
.wrev-card .wrev-answer{background:#E5F4DC;border:1.5px solid #58A700;border-radius:10px;padding:10px 14px;margin-bottom:10px}
.wrev-card .wrev-answer .lbl{font-size:11px;font-weight:900;color:#2D6A04;letter-spacing:.04em;margin-bottom:4px}
.wrev-card .wrev-answer .ans{font-size:15px;font-weight:800;color:#2D6A04;line-height:1.4}
.wrev-card .wrev-expl{background:#F2F7FF;border:1.5px solid #C6DBF8;border-radius:10px;padding:10px 14px;font-size:13px;line-height:1.7;color:#1F3A66}
.wrev-card .wrev-expl .lbl{font-size:11px;font-weight:900;color:#1F3A66;letter-spacing:.04em;margin-bottom:4px}
.wrev-card .wrev-expl b{color:#0B2447}
.wrev-card .wrev-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.wrev-card .wrev-tags span{font-size:11px;font-weight:700;background:#F0EBDE;color:var(--v5-gray);padding:3px 9px;border-radius:99px}
.wrev-empty{background:#fff;border:2px dashed var(--v5-border);border-radius:16px;padding:40px 20px;text-align:center}
.wrev-empty .ico{font-size:48px;margin-bottom:8px}
.wrev-empty .t{font-size:18px;font-weight:900;color:var(--v5-main);margin-bottom:4px}
.wrev-empty .s{font-size:13px;color:var(--v5-gray);line-height:1.5}
.wrev-foot{margin-top:24px;text-align:center;font-size:12px;color:var(--v5-gray);line-height:1.5}
.v5q-feedback .ft{font-weight:900;margin-bottom:4px}
.v5q-bottom{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center}
.v5q-streak-bar{background:var(--v5-card);border:2px solid var(--v5-border);border-radius:14px;padding:14px 18px;display:flex;align-items:center;gap:14px}
.v5q-streak-lb{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:900;white-space:nowrap}
.v5q-streak-lb .x{color:var(--v5-red);margin-left:4px}
.v5q-streak-tl{flex:1;height:10px;background:#F0EBDE;border-radius:99px;position:relative}
.v5q-streak-tl::after{content:"";position:absolute;left:0;top:0;height:100%;background:linear-gradient(to right,var(--v5-sub),var(--v5-yellow));border-radius:99px;width:var(--v5q-prog,0%);transition:width .4s}
.v5q-quit-btn{display:flex;align-items:center;gap:6px;background:#fff;border:2px solid var(--v5-border);border-radius:12px;padding:10px 16px;font-size:12px;font-weight:800;color:var(--v5-gray);cursor:pointer;font-family:inherit}
.v5q-quit-help{font-size:10px;color:var(--v5-gray);max-width:160px;line-height:1.4}
.v5q-quit{display:flex;align-items:center;gap:10px}

/* 우측 퀴즈 마스코트 */
.v5q-right{display:flex;flex-direction:column}
/* 일반 퀴즈: 좌측 질문 박스 상단과 우측 마스코트 카드 상단을 정렬 — titlerow(약 56px) + main gap(14px) = 70px 만큼 우측을 아래로 */
#quiz.active .v5q-shell:not(.ta-shell) .v5q-right{padding-top:70px}
.v5q-mascot-card{position:relative;width:100%;height:700px;background:linear-gradient(180deg,#9FCBE8 0%,#C5E5A8 55%,#D5BC8E 100%);border:3px solid var(--v5-border);border-radius:22px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.v5q-mascot-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;z-index:1}
.v5q-mascot-bg.has-image + .v5q-mascot-bg-svg{display:none}
.v5q-mascot-bg-svg{position:absolute;inset:0;z-index:1}
.v5q-mascot-bg-svg svg{width:100%;height:100%;display:block}
.v5q-mascot-slot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:320px;height:320px;display:grid;place-items:center;z-index:3;animation:v5qIdle 4s ease-in-out infinite}
@keyframes v5qIdle{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 14px))}}
.v5q-mascot-img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(0,0,0,.2))}
.v5q-mascot-slot svg{width:100%;height:100%;filter:drop-shadow(0 10px 18px rgba(0,0,0,.2))}
/* 노굥이 걷기 스프라이트 — '오늘의 본초 5문제' 우측 마스코트 (36프레임 steps 애니메이션) */
.v5q-nogyeong{width:328px;height:440px;background-image:url("../assets/mascots/nogyeong-walk.png");background-repeat:no-repeat;background-size:11808px 440px;image-rendering:auto;transform:translateY(50px) scale(.8);transform-origin:center center;animation:v5qNogyeongWalk 1.4s steps(36) infinite;filter:drop-shadow(0 12px 16px rgba(0,0,0,.22))}
@keyframes v5qNogyeongWalk{from{background-position:0 0}to{background-position:-11808px 0}}
/* 노굥이 달리기 스프라이트 — '도전! 타임어택' 우측 마스코트 (36프레임 steps 애니메이션) */
.ta-nogyeong{width:341px;height:440px;background-image:url("../assets/mascots/nogyeong-run.png");background-repeat:no-repeat;background-size:12276px 440px;image-rendering:auto;transform:translateY(50px) scale(.64);transform-origin:center center;animation:taNogyeongRun 1s steps(36) infinite;filter:drop-shadow(0 12px 16px rgba(0,0,0,.22))}
@keyframes taNogyeongRun{from{background-position:0 0}to{background-position:-12276px 0}}
/* 노굥이 '시간에 쫓김' 스프라이트 — 타임어택 잔여 10초일 때 우측 카드 좌측 상단 (원본 50%) */
.ta-rush{position:absolute;top:14px;left:14px;width:215px;height:157px;background-image:url("../assets/mascots/nogyeong-rush.png");background-repeat:no-repeat;background-size:7740px 157px;image-rendering:auto;z-index:5;display:none;pointer-events:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.28))}
.ta-rush.show{display:block;animation:taRush .9s steps(36) infinite}
@keyframes taRush{from{background-position:0 0}to{background-position:-7740px 0}}
/* 본초링고 새싹 브랜드 이미지 (🌱 이모지 대체) — 로고·탭·성장아이콘·결과화면 */
.boncho-sprout{display:inline-block;width:auto;object-fit:contain;vertical-align:middle}
.boncho-sprout--logo{height:53px}
.boncho-sprout--tab{height:35px;vertical-align:-5px}
.boncho-sprout--stage{height:1.35em;vertical-align:-0.4em}
.boncho-sprout--result{height:66px}
.boncho-result{height:255px;width:auto;object-fit:contain;display:inline-block}
.boncho-result-clinical{height:273px;max-width:100%;width:auto;object-fit:contain;display:inline-block}
.boncho-exp{height:1.1em;width:auto;vertical-align:-0.18em;display:inline-block;object-fit:contain}
/* 하단 탭 아이콘 이미지 (이모지 대체) */
.v5-tab .ico{position:relative;display:inline-flex;align-items:center;justify-content:center}
.v5-tab .ico .v5-tab-img{width:54px;height:54px;object-fit:contain;display:block}
.v5-tab-badge{position:absolute;top:-7px;right:-10px;min-width:20px;height:20px;padding:0 5px;box-sizing:border-box;background:#E0533D;color:#fff;border-radius:11px;font-size:13px;font-weight:900;line-height:20px;text-align:center}
/* 코끼리 포인트 이미지 (🐘 대체) — em 기준으로 주변 글자에 맞춤 */
.boncho-eleph{height:1.1em;width:auto;vertical-align:-0.18em;display:inline-block;object-fit:contain}
.boncho-leaf{height:1.1em;width:auto;vertical-align:-0.18em;display:inline-block;object-fit:contain}
.boncho-fire{height:2.2em;width:auto;vertical-align:-0.7em;display:inline-block;object-fit:contain}
.v5-streak .boncho-fire{height:1.76em;vertical-align:-0.5em}
.boncho-gem{width:22px;height:22px;object-fit:contain;display:block}
.boncho-info{width:22px;height:22px;object-fit:contain;display:block}
.v5-info-btn{padding:6px 8px}
/* 정보 팝업 */
.binfo-overlay{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;background:rgba(20,15,5,.55);padding:20px}
.binfo-overlay.show{display:flex}
.binfo-box{position:relative;max-width:92vw;max-height:90vh}
.binfo-img{display:block;width:auto;max-width:min(1075px,92vw);max-height:86vh;height:auto;border-radius:16px;box-shadow:0 16px 50px rgba(0,0,0,.4)}
.binfo-close{position:absolute;top:-14px;right:-14px;width:38px;height:38px;border-radius:50%;border:none;background:#fff;color:#5B4218;font-size:18px;font-weight:900;line-height:1;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.binfo-close:hover{background:#FBEFD2}
.boncho-notebook{height:1.1em;width:auto;vertical-align:-0.18em;display:inline-block;object-fit:contain}
.v5-mini-t .boncho-notebook{height:1.43em;vertical-align:-0.3em}
.boncho-steth{height:1.1em;width:auto;vertical-align:-0.18em;display:inline-block;object-fit:contain}
.v5-mini-t .boncho-steth{height:1.43em;vertical-align:-0.3em}
.boncho-time{height:1.1em;width:auto;vertical-align:-0.18em;display:inline-block;object-fit:contain}
.v5-mini-t .boncho-time{height:1.43em;vertical-align:-0.3em}
.boncho-bell{height:1.875em;width:auto;vertical-align:-0.45em;display:inline-block;object-fit:contain}
.boncho-mail{height:1.875em;width:auto;vertical-align:-0.45em;display:inline-block;object-fit:contain}
.boncho-settings{height:1.875em;width:auto;vertical-align:-0.45em;display:inline-block;object-fit:contain}
.boncho-resolution{height:1.875em;width:auto;vertical-align:-0.45em;display:inline-block;object-fit:contain}
/* 우측 상단 코인 표시의 코끼리 — 30% 확대 + 3px 아래로 */
.v5-coin-art .boncho-eleph{height:1.43em;transform:translateY(3px)}
.v5q-combo-badge{position:absolute;top:18px;right:18px;background:rgba(46,125,78,.92);color:#fff;border-radius:14px;padding:10px 14px;backdrop-filter:blur(4px);display:flex;flex-direction:column;gap:3px;z-index:4;text-align:center}
.v5q-combo-badge .lb{font-size:11px;opacity:.85;font-weight:700}
.v5q-combo-badge .v{font-size:18px;font-weight:900;display:flex;align-items:center;justify-content:center;gap:4px}
.v5q-combo-badge .v .x{color:#FFC94D}
/* 배경 이미지가 적용된 상태에선 SVG 위로 올라옴 */
.v5q-mascot-bg.has-image{z-index:2!important}
.v5q-mascot-bg.has-image ~ .v5q-mascot-bg-svg{display:none!important}


/* 기본 퀴즈 배경 (인라인 — JS 차단돼도 보임) */

#v5qMascotBg + #v5qMascotBgSvg{display:none}

/* ===================== TIME ATTACK (도전!타임어택) ===================== */
/* 전체 화면 */
#timeattack{padding:0;background:transparent}
#timeattack.active{display:block}
/* v5q-shell 재사용 — 퀴즈 화면과 동일한 2단 그리드를 타임어택에도 표시 */
#timeattack.active .v5q-shell{display:block;padding:14px}
.ta-shell{min-height:100vh}
.ta-shell .v5q-main{position:relative;display:flex;flex-direction:column;gap:14px;min-width:0;padding-bottom:80px}
/* 마스코트 카드 하단 메시지 */
.ta-mascot-msg{position:absolute;left:18px;right:18px;bottom:18px;background:rgba(20,12,40,.7);color:#fff;border-radius:12px;padding:10px 14px;font-weight:800;text-align:center;font-size:14px;z-index:4;backdrop-filter:blur(4px)}

/* 상단 HUD — 콤보 · 시간 · 포인트 */
.ta-hud{position:sticky;top:0;z-index:50;background:linear-gradient(135deg,#5A4AA8 0%,#7B5DC7 100%);
  color:#fff;border-radius:16px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;
  box-shadow:0 6px 18px rgba(90,74,168,.35);border:3px solid #9F86E0}
.ta-hud-item{display:flex;align-items:center;gap:6px;font-weight:900;min-width:120px}
.ta-hud-ico{font-size:24px}
.ta-hud-item b{font-size:32px;line-height:1;letter-spacing:.5px;font-variant-numeric:tabular-nums}
.ta-hud-lbl{font-size:14px;opacity:.85;margin-left:4px}
.ta-combo-box{justify-content:flex-start}
.ta-time-box{justify-content:center;flex:1}
.ta-pts-box{justify-content:flex-end}
.ta-hud .ta-combo-box b.pop{animation:taComboPop .35s ease-out}
@keyframes taComboPop{
  0%{transform:scale(1);color:#fff}
  35%{transform:scale(1.7);color:#FFD86B;text-shadow:0 0 16px #FFD86B}
  100%{transform:scale(1);color:#fff}
}
/* 시간 5초 이하 시 깜빡 */
.ta-time-box.urgent b{color:#FFD86B;animation:taTimeBlink .5s ease-in-out infinite alternate}
@keyframes taTimeBlink{from{opacity:1}to{opacity:.4}}

/* 무대 — 문제 영역 */
.ta-stage{flex:1;background:#FFFCF2;border:3px solid #F4E0B0;border-radius:20px;padding:24px;
  box-shadow:0 4px 14px rgba(0,0,0,.06);position:relative;overflow:hidden}
.ta-q-area{display:flex;flex-direction:column;gap:14px}
.ta-q{font-size:20px;font-weight:800;color:#2A2A2A;line-height:1.55;text-align:center;
  padding:8px 0 14px;border-bottom:2px dashed #E8D89C}
.ta-scenario{background:#F4FAFF;border:2px solid #BCDBEF;border-radius:12px;padding:12px 14px;font-size:15px;line-height:1.7;color:#26425F}
.ta-tag{display:inline-block;background:#E9F1FE;color:#1F6FB5;padding:2px 8px;border-radius:6px;font-size:12px;font-weight:700;margin:2px 2px 2px 0}
.ta-card{background:#FFFCF2;border:2px solid #F0E2BD;border-radius:14px;padding:14px 18px;font-size:18px;font-weight:900;text-align:center;color:#7A5A1A}
.ta-herbcard{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px}
.ta-herbcard .img-slot{width:160px;height:160px;background:#fff;border-radius:14px;border:2px solid #F0E2BD;display:grid;place-items:center;overflow:hidden}
.ta-herbcard .img-slot img{max-width:100%;max-height:100%;object-fit:contain}
.ta-herbcard .img-slot span{font-size:72px}
.ta-herbcard .herb-han{font-size:24px;font-weight:900;color:#3F2E14;letter-spacing:1px}
.ta-herbcard .herb-kr{font-size:16px;font-weight:700;color:#7A5A1A}
.ta-herbcard .hint-list{align-self:stretch;background:#FFFCF2;border:1px dashed #E0D2A0;border-radius:10px;padding:10px 14px;font-size:14px;line-height:1.6;width:100%;max-width:560px;margin:0 auto}
.ta-herbcard .hint-row{display:flex;gap:10px;padding:5px 0;border-bottom:1px solid #F0E6CC}
.ta-herbcard .hint-row:last-child{border-bottom:none}
.ta-herbcard .hint-lbl{font-weight:800;min-width:70px;color:#666}
.ta-herbcard .hint-val{color:#2A2A2A;flex:1}

/* 보기 옵션 */
.ta-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.ta-opt{position:relative;background:#fff;border:2px solid #E8D89C;border-radius:14px;padding:14px 18px;
  font-size:16px;font-weight:700;color:#2A2A2A;cursor:pointer;text-align:left;display:flex;align-items:center;gap:10px;
  transition:transform .08s ease, background .15s ease;line-height:1.5;min-height:60px}
.ta-opt:hover{background:#FFF8E0;transform:translateY(-1px)}
.ta-opt .key{display:inline-grid;place-items:center;width:28px;height:28px;background:#FFEAA5;border-radius:8px;font-weight:900;color:#7A5A1A;flex-shrink:0}
.ta-opt.flash-correct{background:#D7F8C8;border-color:#5BC93A;animation:taFlashOK .35s ease-out}
.ta-opt.flash-wrong{background:#FBD0CC;border-color:#E04A3A;animation:taFlashNO .35s ease-out}
@keyframes taFlashOK{
  0%{background:#fff;border-color:#E8D89C}
  30%{background:#A8F08C;border-color:#39B821;box-shadow:0 0 20px rgba(80,200,40,.6)}
  100%{background:#D7F8C8;border-color:#5BC93A}
}
@keyframes taFlashNO{
  0%{background:#fff;border-color:#E8D89C}
  30%{background:#F5928C;border-color:#C92A1A;box-shadow:0 0 20px rgba(220,60,40,.6)}
  100%{background:#FBD0CC;border-color:#E04A3A}
}
/* OX 옵션 */
.ta-ox{justify-content:center;font-size:48px;font-weight:900;min-height:120px;text-align:center}
.ta-ox.O{color:#2D8C3A}
.ta-ox.X{color:#C9402E}
.ta-opts.ox{grid-template-columns:1fr 1fr}

/* 떠오르는 +20P / -10P 텍스트 */
.ta-float{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);font-size:42px;font-weight:900;
  pointer-events:none;animation:taFloat 1.1s ease-out forwards;z-index:100;text-shadow:0 2px 6px rgba(0,0,0,.25)}
.ta-float.ok{color:#2D8C3A}
.ta-float.no{color:#C9402E}
.ta-float.big{font-size:54px;text-shadow:0 0 14px currentColor}
@keyframes taFloat{
  0%{opacity:0;transform:translate(-50%,-30%) scale(.7)}
  20%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}
  80%{opacity:1;transform:translate(-50%,-90%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-130%) scale(.95)}
}
/* MISS 텍스트 */
.ta-miss{position:absolute;right:14px;top:8px;background:#C9402E;color:#fff;padding:3px 10px;border-radius:6px;font-weight:900;font-size:13px;animation:taFloat .6s ease-out forwards}

/* 중도 포기 — 메인 컬럼 하단 중앙 */
.ta-quit-btn{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);background:#fff;border:2px solid #E0D2A0;
  border-radius:24px;padding:10px 22px;font-weight:700;color:#7A5A1A;cursor:pointer;font-size:14px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.ta-quit-btn:hover{background:#FFEFC8}

/* 결과 화면 */
.ta-result{padding:32px 24px;max-width:480px;margin:32px auto;background:#FFFCF2;border:3px solid #F4E0B0;border-radius:20px;box-shadow:0 8px 24px rgba(122,90,26,.18);text-align:center}
.ta-result-title{font-size:24px;font-weight:900;color:#7A5A1A;margin-bottom:24px;letter-spacing:1px}
.ta-result-rows{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.ta-result-row{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#fff;border:1px solid #F0E2BD;border-radius:10px;font-weight:700}
.ta-result-row span{color:#7A5A1A}
.ta-result-row b{font-size:18px;color:#2A2A2A}
.ta-result-row.coin{background:linear-gradient(135deg,#FFD86B 0%,#FFA94C 100%);border:none;color:#fff}
.ta-result-row.coin span{color:#fff}
.ta-result-row.coin b{color:#fff;font-size:22px}
.ta-result-note{font-size:13px;color:#888;margin-bottom:14px;font-weight:600}
.ta-result-btn{background:linear-gradient(135deg,#5A4AA8 0%,#7B5DC7 100%);color:#fff;border:none;border-radius:14px;padding:14px 32px;font-weight:900;font-size:16px;cursor:pointer;width:100%;box-shadow:0 4px 12px rgba(90,74,168,.3)}
.ta-result-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(90,74,168,.4)}

/* 시작 팝업 (전역 오버레이) */
.ta-overlay{position:fixed;inset:0;background:rgba(20,12,40,.65);backdrop-filter:blur(4px);z-index:9000;display:flex;align-items:center;justify-content:center;padding:20px}
.ta-modal{background:#FFFCF2;border-radius:20px;max-width:480px;width:100%;padding:24px 22px;box-shadow:0 16px 48px rgba(0,0,0,.4);max-height:90vh;overflow-y:auto;border:3px solid #FFD86B}
.ta-modal-title{font-size:24px;font-weight:900;color:#5A4AA8;text-align:center;margin-bottom:16px;letter-spacing:.5px}
.ta-modal-rules{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.ta-rule{background:#fff;border:1px solid #F0E2BD;border-radius:10px;padding:10px 12px;display:flex;justify-content:space-between;align-items:center}
.ta-rule span{color:#7A5A1A;font-weight:700;font-size:13px}
.ta-rule b{font-size:16px;color:#2A2A2A}
.ta-rule b.ok{color:#2D8C3A}
.ta-rule b.no{color:#C9402E}
.ta-modal-section-title{font-size:15px;font-weight:900;color:#7A5A1A;margin:14px 0 8px}
.ta-modal-combos{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.ta-combo-row{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#FFFAEB;border-radius:8px;border:1px solid #FFE9B5;font-size:14px}
.ta-combo-row span{font-weight:700;color:#7A5A1A}
.ta-combo-row b{font-weight:800;color:#C97A1A}
.ta-combo-row.hot{background:linear-gradient(90deg,#FFE0B5 0%,#FFC97A 100%);border-color:#FFB45E}
.ta-combo-row.hot b{color:#7A3A0A}
.ta-modal-fee{background:#FFEAEA;border:2px solid #FFB5B5;border-radius:12px;padding:12px 14px;margin-bottom:16px}
.ta-fee-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.ta-fee-row span{font-weight:800;color:#7A1A1A}
.ta-fee-row b{font-size:20px}
.ta-fee-note{font-size:12px;color:#7A1A1A;font-weight:600;margin-top:2px}
.ta-modal-btnrow{display:grid;grid-template-columns:1fr 2fr;gap:10px}
.ta-modal-btn{border:none;border-radius:12px;padding:14px;font-weight:900;font-size:16px;cursor:pointer}
.ta-modal-btn.cancel{background:#EEE;color:#666}
.ta-modal-btn.cancel:hover{background:#DDD}
.ta-modal-btn.start{background:linear-gradient(135deg,#FF6E4C 0%,#FFA94C 100%);color:#fff;box-shadow:0 4px 14px rgba(255,110,76,.4)}
.ta-modal-btn.start:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(255,110,76,.55)}

/* 좁은 화면 */
@media (max-width: 640px){
  .ta-opts{grid-template-columns:1fr}
  .ta-modal-rules{grid-template-columns:1fr}
  .ta-hud{flex-direction:column;align-items:stretch;gap:6px;padding:10px 14px}
  .ta-hud-item{justify-content:space-between;min-width:0}
}


/* ============================================================
   출석 EXP 팝업 — daily 첫 완료 후 홈 진입 시 표시
   ============================================================ */
.att-xp-overlay{position:fixed;inset:0;background:rgba(20,15,35,.6);backdrop-filter:blur(4px);z-index:9500;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .25s ease;pointer-events:none}
.att-xp-overlay.show{opacity:1;pointer-events:auto}
.att-xp-modal{background:var(--v5-card,#FFFDF6);border:3px solid var(--v5-yellow,#FFC94D);border-radius:24px;padding:28px 32px 22px;max-width:340px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.3);transform:scale(.85);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.att-xp-overlay.show .att-xp-modal{transform:scale(1)}
.att-xp-icon{font-size:64px;line-height:1;margin-bottom:8px;animation:attXpBounce .8s ease infinite alternate}
@keyframes attXpBounce{0%{transform:translateY(0)}100%{transform:translateY(-8px)}}
.att-xp-title{font-size:22px;font-weight:900;color:var(--v5-main,#2E7D4E);margin-bottom:6px;letter-spacing:-.5px}
.att-xp-stage{font-size:14px;font-weight:700;color:var(--v5-brown,#8B5E34);margin-bottom:18px}
.att-xp-stage .han{font-size:11px;color:#999;font-weight:600}
.att-xp-stats{display:flex;flex-direction:column;gap:8px;background:rgba(255,200,77,.13);border:1px solid rgba(255,200,77,.4);border-radius:14px;padding:14px 16px;margin-bottom:18px}
.att-xp-row{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:700;color:#444}
.att-xp-row.hl{border-top:1px dashed rgba(139,94,52,.3);padding-top:10px;margin-top:2px}
.att-xp-row .lb{color:#777;font-weight:700}
.att-xp-row .vl b{font-size:18px;color:var(--v5-main,#2E7D4E);font-weight:900}
.att-xp-row.hl .vl b{color:#E65100;font-size:24px}
.att-xp-btn{background:linear-gradient(180deg,var(--v5-sub,#6FBF7B),var(--v5-main,#2E7D4E));color:#fff;border:0;border-radius:14px;padding:12px 24px;font-size:15px;font-weight:800;font-family:inherit;cursor:pointer;box-shadow:0 3px 0 rgba(0,0,0,.18);width:100%;letter-spacing:.5px;transition:transform .12s ease, box-shadow .12s ease}
.att-xp-btn:hover{transform:translateY(-1px);box-shadow:0 4px 0 rgba(0,0,0,.18)}
.att-xp-btn:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(0,0,0,.18)}

/* ============================================================
   임상퀴즈 (Clinical Quiz) — v5q-shell 패턴 재사용 + 조선시대 의원 테마
   ============================================================ */
#clinicalQuiz.screen{padding:0!important;background:transparent!important}
#clinicalQuiz.active{padding:18px 24px 24px!important;display:block}
#clinicalQuiz.active .v5q-shell{display:block}
#clinicalQuiz.active .v5q-shell .v5q-grid{grid-template-columns:minmax(0,1fr) 660px}

/* 임상퀴즈 전용 카드 색감 — 한지 베이지 */
.cq-card{background:linear-gradient(180deg, #FBF4DC 0%, #F5E5BC 100%)!important;border-color:#D9B870!important;box-shadow:0 4px 14px rgba(139,90,43,.12)!important}
.cq-card .v5q-progress{background:#FFE9B3;color:#5E3A1F;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cq-card .v5q-progress #cqProgress{font-weight:900;font-size:13px}
.cq-hud-chip{display:inline-flex;align-items:center;gap:4px;background:rgba(94,58,31,.12);padding:2px 10px;border-radius:99px;font-size:12px;color:#5E3A1F;font-weight:800}
.cq-hud-chip .ic{font-size:13px}
.cq-hud-chip b{color:#3B2410;font-weight:900;font-size:13px}

/* 증례 박스 */
.cq-case{background:rgba(255,250,235,.7);border:2px solid #C9A55A;border-radius:14px;padding:14px 16px;position:relative}
.cq-case-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;padding-bottom:8px;border-bottom:2px dashed rgba(139,90,43,.4)}
.cq-case-tag{font-size:13px;font-weight:900;color:#5E3A1F;letter-spacing:.5px}
.cq-case-stamp{font-family:'Noto Serif KR','Batang',serif;font-size:16px;font-weight:900;color:#C44A2E;border:2.5px solid #C44A2E;padding:2px 10px;border-radius:6px;transform:rotate(-3deg);background:rgba(255,250,235,.5)}
.cq-case-patient{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:15px;font-weight:800;color:#3B2410;margin-bottom:10px}
.cq-case-chief{font-size:12px;font-weight:700;color:#8B5A2B;background:rgba(201,165,90,.22);padding:3px 10px;border-radius:99px;border:1px solid rgba(139,90,43,.3)}
.cq-symptoms{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}
.cq-symptoms li{font-size:13.5px;color:#3B2410;padding:5px 12px 5px 22px;background:rgba(250,240,220,.7);border-left:3px solid #C9A55A;border-radius:0 6px 6px 0;position:relative;line-height:1.45}
.cq-symptoms li::before{content:"·";position:absolute;left:8px;top:4px;color:#8B5A2B;font-size:18px;font-weight:900}

/* 질문 강조 */
.cq-question{background:linear-gradient(135deg, #FFE9B3 0%, #FFD380 100%);border:2px solid #C9A55A;border-radius:10px;padding:10px 14px;font-size:16px;font-weight:900;color:#5E3A1F;text-align:center;letter-spacing:.3px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}

/* 4지선다 — 목재 버튼 */
.cq-opts{display:grid!important;grid-template-columns:1fr 1fr;gap:10px}
.cq-opts .v5q-opt,.cq-opts .cq-opt{display:flex;align-items:center;gap:10px;background:linear-gradient(180deg, #FAF1D9 0%, #E8D5A8 100%);border:2.5px solid #8B5A2B;border-radius:11px;padding:12px 14px;font-size:14.5px;font-weight:800;color:#3B2410;cursor:pointer;font-family:inherit;text-align:left;width:100%;box-shadow:0 3px 0 #5E3A1F;transition:transform .15s ease, box-shadow .15s ease, background .2s}
.cq-opts .cq-opt:hover{transform:translateY(-2px);box-shadow:0 5px 0 #5E3A1F;background:linear-gradient(180deg, #FFF6E0 0%, #F0DFB0 100%)}
.cq-opts .cq-opt:active{transform:translateY(2px);box-shadow:0 1px 0 #5E3A1F}
.cq-opts .cq-opt .cq-opt-key{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#5E3A1F;color:#FFE9B3;font-weight:900;font-size:14px;flex:0 0 26px}
.cq-opts .cq-opt.correct{background:linear-gradient(180deg, #C8F0B8 0%, #8FD068 100%);border-color:#3F8F30;color:#1F4F18;box-shadow:0 4px 0 #2F6F22, 0 0 24px rgba(140,220,90,.55)}
.cq-opts .cq-opt.wrong  {background:linear-gradient(180deg, #FFC8B8 0%, #F08868 100%);border-color:#A03020;color:#5F1808;box-shadow:0 4px 0 #6F1808}
.cq-opts .cq-opt.dim{opacity:.55;cursor:not-allowed;pointer-events:none}
.cq-opts .cq-opt.correct .cq-opt-key{background:#1F4F18;color:#C8F0B8}
.cq-opts .cq-opt.wrong   .cq-opt-key{background:#5F1808;color:#FFC8B8}

/* 피드백 패널 */
.cq-feedback{display:none;background:linear-gradient(180deg, #FAF1D9 0%, #F2E0B5 100%);border:2px solid #8B5A2B;border-radius:12px;padding:14px 16px;margin-top:6px}
.cq-feedback.show{display:block;animation:cqFbIn .35s ease}
@keyframes cqFbIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.cq-fb-title{font-size:20px;font-weight:900;letter-spacing:-.5px;margin-bottom:6px}
.cq-fb-title.correct{color:#2F6F22}
.cq-fb-title.wrong{color:#A03020}
.cq-fb-diagnosis{display:inline-block;font-size:13px;font-weight:800;color:#5E3A1F;background:rgba(201,165,90,.22);padding:4px 10px;border-radius:6px;border-left:3px solid #C9A55A;margin-bottom:8px}
.cq-fb-explanation{font-size:13.5px;line-height:1.55;color:#3B2410;margin-bottom:12px}
.cq-next-btn{display:block;margin-left:auto;background:linear-gradient(180deg,#8B5A2B 0%,#5E3A1F 100%);color:#FFE9B3;border:2px solid #C9A55A;border-radius:10px;padding:10px 22px;font-size:14.5px;font-weight:900;cursor:pointer;font-family:inherit;box-shadow:0 4px 0 #2A1808}
.cq-next-btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 #2A1808}
.cq-next-btn:active{transform:translateY(2px);box-shadow:0 2px 0 #2A1808}

/* 콤보 트랙 */
.cq-combo-bar{display:flex;align-items:center;gap:10px;background:linear-gradient(180deg,#FFF7E0,#FFE9B3);border:2px solid #D9B870;border-radius:12px;padding:8px 14px}
.cq-combo-lb{font-size:13px;font-weight:900;color:#5E3A1F;white-space:nowrap}
.cq-combo-track{display:flex;gap:5px;flex:1}
.cq-combo-track .dot{flex:1;height:8px;border-radius:99px;background:rgba(94,58,31,.18);transition:background .2s}
.cq-combo-track .dot.on{background:linear-gradient(90deg,#FFC800,#FF6B35);box-shadow:0 0 8px rgba(255,128,0,.6)}
.cq-combo-msg{font-size:12px;font-weight:800;color:#C44A2E;min-width:120px;text-align:right}

/* 우측 마스코트 카드 — 한방의원 분위기 배경 */
.cq-mascot-card{background:radial-gradient(ellipse at 40% 30%, rgba(255,220,150,.45) 0%, transparent 55%),
                 linear-gradient(180deg, #F4E8CC 0%, #E0C898 50%, #C9A878 100%)!important;
                 border-color:#8B5A2B!important;
                 position:relative}
.cq-mascot-card::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(120,80,40,.04) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(0deg,  rgba(120,80,40,.03) 0 2px, transparent 2px 10px);
  z-index:1}
.cq-mascot-slot{position:absolute;left:50%;top:calc(50% + 50px);transform:translate(-50%,-50%);width:78%;height:auto;z-index:3;display:grid;place-items:center;animation:cqIdle 4s ease-in-out infinite}
@keyframes cqIdle{0%,100%{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-8px)}}
.cq-mascot-glow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:340px;height:340px;border-radius:50%;background:radial-gradient(circle, rgba(255,200,80,.5) 0%, transparent 65%);filter:blur(8px);z-index:2;animation:cqGlowP 3s ease-in-out infinite;pointer-events:none}
@keyframes cqGlowP{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)}50%{opacity:.85;transform:translate(-50%,-50%) scale(1.1)}}
.cq-mascot-card[data-state="correct"] .cq-mascot-glow{background:radial-gradient(circle, rgba(140,255,120,.7) 0%, transparent 65%);animation:cqGlowCorrect 1s ease-out}
.cq-mascot-card[data-state="wrong"]   .cq-mascot-glow{background:radial-gradient(circle, rgba(60,60,100,.5) 0%, transparent 65%)}
@keyframes cqGlowCorrect{0%{transform:translate(-50%,-50%) scale(.8);opacity:0}30%{transform:translate(-50%,-50%) scale(1.3);opacity:1}100%{transform:translate(-50%,-50%) scale(1.5);opacity:0}}
.cq-mascot-card[data-state="correct"] .cq-mascot-slot{animation:cqHappy .8s ease}
@keyframes cqHappy{0%{transform:translate(-50%,-50%) scale(1) rotate(0)}30%{transform:translate(-50%,-50%) scale(1.15) rotate(-5deg)}60%{transform:translate(-50%,-50%) scale(1.1) rotate(5deg)}100%{transform:translate(-50%,-50%) scale(1) rotate(0)}}
.cq-mascot-card[data-state="wrong"]   .cq-mascot-slot{animation:cqSad .6s ease}
@keyframes cqSad{0%,100%{transform:translate(-50%,-50%) translateX(0)}25%{transform:translate(-50%,-50%) translateX(-10px)}50%{transform:translate(-50%,-50%) translateX(10px)}75%{transform:translate(-50%,-50%) translateX(-5px)}}

.cq-combo-banner{position:absolute;top:18px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#FFD060 0%,#FF8030 100%);color:#3B1810;font-weight:900;font-size:16px;letter-spacing:-.3px;padding:7px 18px;border-radius:99px;border:2.5px solid #FFE9B3;box-shadow:0 5px 14px rgba(255,128,0,.45);opacity:0;z-index:5;white-space:nowrap}
.cq-combo-banner.show{opacity:1;animation:cqBannerIn .5s cubic-bezier(.22,1.4,.36,1)}
@keyframes cqBannerIn{0%{transform:translateX(-50%) scale(0) rotate(-10deg)}60%{transform:translateX(-50%) scale(1.15) rotate(3deg)}100%{transform:translateX(-50%) scale(1) rotate(0)}}

.cq-stage-tag{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);background:rgba(94,58,31,.85);color:#FFE9B3;padding:8px 18px;border-radius:99px;font-size:13px;font-weight:800;border:2px solid #C9A55A;box-shadow:0 4px 12px rgba(0,0,0,.25);z-index:5;text-align:center;white-space:nowrap;backdrop-filter:blur(4px)}

.cq-effect-layer{position:absolute;inset:0;pointer-events:none;z-index:4}
.cq-spark-fx{position:absolute;font-size:24px;animation:cqSparkUp 1.1s ease-out forwards}
@keyframes cqSparkUp{0%{transform:translate(0,0) scale(.5);opacity:0}20%{opacity:1}100%{transform:translate(var(--dx,0), -100px) scale(1.1) rotate(180deg);opacity:0}}
.cq-cloud-fx{position:absolute;left:50%;top:calc(50% + 50px);transform:translate(-50%,-50%);font-size:90px;opacity:0;animation:cqCloudIn .9s ease-out forwards;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}
@keyframes cqCloudIn{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}40%{transform:translate(-50%,-50%) scale(1.1);opacity:.85}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* 화면 셰이크 (오답 시) */
.cq-shake{animation:cqShake .4s}
@keyframes cqShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* 시간 임박 시 빨간 펄스 */
.cq-card .v5q-timer.urgent,.v5q-timer.cq-urgent{background:#FFD7D7;color:#A03020;animation:cqUrg .55s infinite}
@keyframes cqUrg{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* 결과 화면 */
.cq-result{text-align:center;padding:36px 28px;background:linear-gradient(180deg, #FBF4DC 0%, #F5E5BC 100%)!important;border-color:#8B5A2B!important;box-shadow:0 6px 0 #5E3A1F!important}
.cq-result-emoji{font-size:60px;margin-bottom:6px}
.cq-result-title{font-size:26px;font-weight:900;color:#5E3A1F;margin-bottom:14px;letter-spacing:-.5px}
.cq-result-score{font-size:18px;font-weight:800;color:#3B2410;margin-bottom:10px}
.cq-result-score span{font-size:28px;color:#C44A2E}
.cq-result-exp{display:inline-block;font-size:18px;font-weight:800;color:#1F5A36;background:linear-gradient(135deg,#DFF5E0 0%,#B7E8C2 100%);padding:10px 18px;border-radius:10px;border:2px solid #5BB07A;margin:12px 0}
.cq-result-exp .ic{margin-right:4px}
.cq-result-exp b{font-size:24px;color:#1F5A36;margin-left:4px}
.cq-result-breakdown{font-size:13px;color:#5E3A1F;margin:8px 0 22px;opacity:.85;line-height:1.5}
.cq-result-btn{background:linear-gradient(180deg, #3FA866 0%, #2E8A57 100%);color:#fff;border:2px solid #1F5A36;border-radius:14px;padding:14px 36px;font-size:17px;font-weight:900;cursor:pointer;font-family:inherit;box-shadow:0 5px 0 #1F5A36}
.cq-result-btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 #1F5A36}
.cq-result-btn:active{transform:translateY(2px);box-shadow:0 3px 0 #1F5A36}

/* 임상퀴즈 선택지 — 처방명 / 약재 구성 두 줄 레이아웃 */
.cq-opts .cq-opt{align-items:flex-start;line-height:1.35;padding:11px 14px}
.cq-opts .cq-opt .cq-opt-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.cq-opts .cq-opt .cq-opt-name{font-size:15.5px;font-weight:900;color:#3B2410;letter-spacing:-.2px}
.cq-opts .cq-opt .cq-opt-herbs{font-size:11.5px;font-weight:600;color:#7A5028;opacity:.85;line-height:1.3;word-break:keep-all}
.cq-opts .cq-opt.correct .cq-opt-name{color:#1F4F18}
.cq-opts .cq-opt.correct .cq-opt-herbs{color:#3A6F28}
.cq-opts .cq-opt.wrong .cq-opt-name{color:#5F1808}
.cq-opts .cq-opt.wrong .cq-opt-herbs{color:#8F3018}
.cq-opts .cq-opt .cq-opt-key{margin-top:2px}

/* 임상퀴즈 — 우측 마스코트 카드를 좌측 메인 카드 상단과 맞춤 (타이틀 줄 높이만큼 padding-top) */
#clinicalQuiz.active .v5q-right{padding-top:62px}

/* === 임상퀴즈 — 다중선택(팔강변증 한/열·허/실) 옵션 === */
.cq-opts.cq-multi .cq-opt{align-items:center;justify-content:flex-start;padding:14px 16px;font-size:18px;letter-spacing:0;min-height:64px}
.cq-opts.cq-multi .cq-opt .cq-opt-text{flex-direction:row;align-items:center;font-size:19px;font-weight:900;color:#3B2410;line-height:1.2}
.cq-opts.cq-multi .cq-opt .cq-opt-key.cq-opt-check{width:24px;height:24px;border-radius:6px;background:#FFF8E1;color:#5E3A1F;border:2px solid #5E3A1F;font-size:16px;line-height:1;display:inline-flex;align-items:center;justify-content:center;margin-top:0;flex:0 0 24px;box-sizing:border-box}
.cq-opts.cq-multi .cq-opt.picked{background:linear-gradient(180deg, #FFE7A8 0%, #F0CC78 100%);border-color:#B07020;box-shadow:0 4px 0 #5E3A1F, 0 0 14px rgba(220,170,60,.55)}
.cq-opts.cq-multi .cq-opt.picked .cq-opt-key.cq-opt-check{background:#5E3A1F;color:#FFE9B3}
.cq-opts.cq-multi .cq-opt.correct .cq-opt-key.cq-opt-check{background:#1F4F18;color:#C8F0B8;border-color:#1F4F18}
.cq-opts.cq-multi .cq-opt.wrong   .cq-opt-key.cq-opt-check{background:#5F1808;color:#FFC8B8;border-color:#5F1808}

/* ============================================================
   성장곡선 시각화 (학습통계 → 데이터 탭)
   ------------------------------------------------------------
   외부 라이브러리 없이 SVG + CSS 만으로 구현. 베이지/연녹색 톤.
   ============================================================ */
.growth-section{margin-top:22px;padding:18px;background:linear-gradient(180deg,#FBF6E8 0%,#F4ECCF 100%);border:2px solid #E1D49D;border-radius:16px}
.growth-section .growth-head{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.growth-section .growth-head h3{font-size:20px;font-weight:900;color:#4A3618;margin:0;letter-spacing:-.5px}
.growth-section .growth-intro{font-size:13px;color:#6B5430;margin:0 0 14px;line-height:1.55}
.growth-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.growth-card{background:#FFFCF1;border:1.5px solid #D9C98B;border-radius:14px;padding:14px 16px;box-shadow:0 2px 0 rgba(155,125,55,.12)}
.growth-card .gc-title{font-size:14px;font-weight:900;color:#3B2A12;margin:0 0 12px;display:flex;align-items:center;gap:6px;letter-spacing:-.3px}
.growth-card .gc-empty{padding:24px 8px;text-align:center;color:#9C8A5A;font-size:13px;line-height:1.6}
.growth-card .gc-empty .ico{font-size:30px;display:block;margin-bottom:6px}

/* SVG 라인 차트 (7일 정답률) */
.gc-line-wrap{position:relative;height:140px;padding:6px 6px 22px}
.gc-line-svg{width:100%;height:100%;overflow:visible}
.gc-line-svg .axis{stroke:#D9C98B;stroke-width:1;stroke-dasharray:3 3}
.gc-line-svg .line{fill:none;stroke:#5BA84C;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.gc-line-svg .area{fill:rgba(91,168,76,.15);stroke:none}
.gc-line-svg .dot{fill:#FFFCF1;stroke:#5BA84C;stroke-width:2.5;r:4}
.gc-line-svg .dot.today{fill:#FF9600;stroke:#C77400;r:6;stroke-width:2.5}
.gc-line-svg .dot.empty{fill:#EAE0BB;stroke:#C8B97A;stroke-width:1.5;r:3}
.gc-line-svg text{font-family:inherit;font-size:10px;fill:#7A6238;font-weight:700}
.gc-line-svg text.val{fill:#3B2A12;font-size:9px;font-weight:900}

/* 막대 차트 (풀이 수, 유형별, 효능별) */
.gc-bars{display:flex;flex-direction:column;gap:8px}
.gc-bar-row{display:flex;align-items:center;gap:8px;font-size:12px}
.gc-bar-label{flex:0 0 80px;color:#4A3618;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-bar-track{flex:1;height:14px;background:#F0E6C0;border-radius:7px;overflow:hidden;position:relative}
.gc-bar-fill{height:100%;border-radius:7px;transition:width .4s ease-out}
.gc-bar-fill.low{background:linear-gradient(90deg,#E89A8A,#CC3333)}
.gc-bar-fill.mid{background:linear-gradient(90deg,#FFD180,#FF9600)}
.gc-bar-fill.good{background:linear-gradient(90deg,#A8DCFF,#1CB0F6)}
.gc-bar-fill.master{background:linear-gradient(90deg,#A6E36B,#58A700)}
.gc-bar-fill.count{background:linear-gradient(90deg,#C6E1A8,#7AA557)}
.gc-bar-fill.today{background:linear-gradient(90deg,#FFC080,#FF8000)}
.gc-bar-value{flex:0 0 56px;text-align:right;color:#5E3A1F;font-weight:900;font-size:11px}
.gc-bar-tag{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:6px;font-size:10px;font-weight:700;vertical-align:middle}
.gc-bar-tag.low{background:#FBDBD2;color:#B12424}
.gc-bar-tag.mid{background:#FFE7C7;color:#A05500}
.gc-bar-tag.good{background:#D2ECFB;color:#0A6FA4}
.gc-bar-tag.master{background:#D9F1C2;color:#356A1B}

/* 풋노트 */
.growth-card .gc-foot{margin-top:10px;padding-top:8px;border-top:1px dashed #D9C98B;font-size:11px;color:#7A6238;line-height:1.5}

/* 카드 4개가 한 줄에 모두 들어가지 않을 수 있어 좁은 PC에선 1열 */
@media (max-width: 900px){
  .growth-cards{grid-template-columns:1fr}
}

/* ============================================================
   업적 시스템 (학습통계 → 업적 탭)
   ------------------------------------------------------------
   카드형 레이아웃 / 달성=화려 / 미달성=흐림 / 진행도 바
   ============================================================ */
.ach-header{display:flex;align-items:center;gap:14px;margin-bottom:14px;padding:14px 16px;background:linear-gradient(180deg,#FBF6E8 0%,#F4ECCF 100%);border:2px solid #E1D49D;border-radius:14px}
.ach-header-left{flex:1}
.ach-title{font-size:20px;font-weight:900;color:#4A3618;letter-spacing:-.5px}
.ach-subtitle{font-size:12px;color:#6B5430;margin-top:3px}
.ach-progress-overall{flex:0 0 180px}
.ach-bar-overall{height:14px}

.ach-filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.ach-filter-btn{padding:7px 14px;background:#FFFCF1;border:1.5px solid #D9C98B;border-radius:8px;font-size:12px;font-weight:700;color:#5E3A1F;cursor:pointer;font-family:inherit;transition:transform .08s, background .15s, border-color .15s;display:inline-flex;align-items:center;gap:6px}
.ach-filter-btn:hover{background:#FFF7DC;border-color:#B49B5B}
.ach-filter-btn.active{background:linear-gradient(180deg,#FFD180,#FF9600);color:#4A2A00;border-color:#C77400;box-shadow:0 2px 0 #C77400}
.ach-filter-count{display:inline-block;min-width:18px;text-align:center;padding:0 5px;background:rgba(0,0,0,.08);border-radius:8px;font-size:10px;font-weight:900;line-height:16px}
.ach-filter-btn.active .ach-filter-count{background:rgba(255,255,255,.4);color:#4A2A00}

.ach-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width: 900px){ .ach-grid{grid-template-columns:1fr} }

.ach-card{background:#FFFCF1;border:1.5px solid #D9C98B;border-radius:14px;padding:14px;display:flex;gap:12px;align-items:flex-start;transition:transform .12s, box-shadow .15s}
.ach-card.done{background:linear-gradient(135deg,#FFF1B8 0%,#FFE186 100%);border-color:#C8A040;box-shadow:0 4px 0 rgba(160,120,30,.18), 0 0 18px rgba(255,200,60,.25)}
.ach-card.locked{opacity:.68;background:#F5EFD8}
.ac

/* === 임상퀴즈 결과 모드: 타이머·우측 마스코트 숨김 + 결과 카드 중앙 정렬 === */
#clinicalQuiz .cq-shell.cq-result-mode .v5q-timer{display:none}
#clinicalQuiz .cq-shell.cq-result-mode .v5q-right{display:none}
#clinicalQuiz.active .cq-shell.cq-result-mode .v5q-grid{grid-template-columns:minmax(0,1fr)}
#clinicalQuiz .cq-shell.cq-result-mode .v5q-main{max-width:680px;width:100%;margin:0 auto}
#clinicalQuiz .cq-shell.cq-result-mode .v5q-titlerow{justify-content:center}

/* === 정답/오답 콤보 마스코트 이미지 (오늘의 5문제) === */
.v5q-combo-img{display:block;max-width:423px;max-height:491px;width:auto;height:auto;transform:translateY(65px);filter:drop-shadow(0 12px 16px rgba(0,0,0,.22));animation:v5qComboPop .25s ease-out}
@keyframes v5qComboPop{0%{transform:translateY(65px) scale(.7);opacity:.4}100%{transform:translateY(65px) scale(1);opacity:1}}

/* 틀린문제 — 임상퀴즈 증상 전체 목록 */
.wrev-cq-sym{margin-top:8px;display:flex;flex-direction:column;gap:3px}
.wrev-cq-sym-item{font-size:13.5px;line-height:1.55;color:#6B5B33}

/* === 첫 실행 온보딩 === */
#bonchoOnboard{position:fixed;inset:0;z-index:9000;background:rgba(60,40,10,.45);display:flex;align-items:center;justify-content:center;animation:bobFade .3s ease-out}
@keyframes bobFade{from{opacity:0}to{opacity:1}}
#bonchoOnboard .bob-card{background:#FFFDF4;border:3px solid #E7C887;border-radius:24px;padding:34px 38px 26px;max-width:430px;width:88%;text-align:center;box-shadow:0 18px 50px rgba(60,30,0,.3);animation:bobPop .35s ease-out}
@keyframes bobPop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
#bonchoOnboard .bob-img{height:150px;width:auto;max-width:80%;object-fit:contain;margin-bottom:14px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.18))}
#bonchoOnboard .bob-title{font-size:22px;font-weight:900;color:#4A3415;margin-bottom:10px}
#bonchoOnboard .bob-body{font-size:14.5px;line-height:1.65;color:#7A6638;margin-bottom:16px}
#bonchoOnboard .bob-dots{display:flex;gap:7px;justify-content:center;margin-bottom:16px}
#bonchoOnboard .bob-dots span{width:9px;height:9px;border-radius:99px;background:#E5D9B8;transition:all .2s}
#bonchoOnboard .bob-dots span.on{background:#5B8A3A;width:24px}
#bonchoOnboard .bob-next{display:block;width:100%;background:linear-gradient(135deg,#67A93F,#4C8A2E);color:#fff;font-weight:900;font-size:16px;border:none;border-radius:14px;padding:13px 0;cursor:pointer;box-shadow:0 4px 0 #3A6B22;transition:transform .12s}
#bonchoOnboard .bob-next:hover{transform:translateY(-1px)}
#bonchoOnboard .bob-skip{display:block;margin:10px auto 0;background:none;border:none;color:#A8956A;font-size:13px;cursor:pointer;text-decoration:underline}

/* === 준비중 메뉴 (배틀·랭킹·인벤토리) === */
.v5-tab--soon .v5-tab-img{filter:grayscale(.55) opacity(.75)}
.v5-tab--soon .lbl{color:#B5A87E}
.v5-tab--soon .ico{position:relative}
.v5-tab-soon{position:absolute;top:-7px;right:-14px;background:#C9B98A;color:#fff;font-size:9px;font-weight:900;padding:2px 6px;border-radius:99px;letter-spacing:.02em;pointer-events:none}
/* 준비중 토스트 */
#v5SoonToast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(14px);background:#5B4218;color:#FFF6E2;font-size:14.5px;padding:12px 22px;border-radius:14px;box-shadow:0 8px 24px rgba(60,30,0,.35);opacity:0;transition:all .3s ease;z-index:9500;white-space:nowrap}
#v5SoonToast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* === 홈 상단 65/35 분할 (오늘의 퀘스트 + 성장 전광판) === */
.v5-toprow{display:grid;grid-template-columns:1fr calc((100% - 24px) / 3);gap:14px;align-items:stretch}
.v5-toprow .v5-quest{margin:0;height:100%;display:flex;flex-direction:column}
.v5-toprow .v5-quest-main{flex:1 1 auto;align-content:center}
.v5-toprow .v5-quest-main{grid-template-columns:189px 1fr;grid-template-rows:auto auto;column-gap:18px;row-gap:6px;padding:10px 16px;align-items:center}
.v5-toprow .v5-quest-plant{width:189px;height:189px;grid-row:1 / 3;align-self:center}
.v5-toprow .v5-quest-info{grid-column:2;grid-row:1;align-self:end}
.v5-toprow .v5-quest-sub{margin-bottom:8px}
.v5-toprow .v5-quest-info .v5-quest-xp{margin-bottom:0}
.v5-toprow .v5-quest-title{font-size:28px;white-space:nowrap}
.v5-toprow .v5-quest-start{grid-column:1 / -1;grid-column:2;grid-row:2;margin-top:0;width:100%;justify-self:stretch;padding-top:11px;padding-bottom:11px}

/* === 성장 전광판 (약방 성장기록판) === */
.v5-growth{
  display:flex;flex-direction:column;gap:12px;
  background:linear-gradient(160deg,#FBF3DD 0%,#F3E7C4 100%);
  border:3px solid #D9BF7E;border-radius:22px;padding:16px 16px 18px;
  box-shadow:0 12px 32px rgba(120,90,30,.12),inset 0 1px 0 rgba(255,255,255,.6);
  position:relative;overflow:hidden;
}
.v5-growth::before{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(0deg,transparent 0 22px,rgba(160,120,40,.04) 22px 23px);pointer-events:none}
.v5-growth-head{display:flex;justify-content:space-between;align-items:center;gap:8px;position:relative}
.v5-growth-title{font-size:15.5px;font-weight:900;color:#5B4218;display:flex;align-items:flex-start;gap:6px;line-height:1.25}
.v5-growth-title .line2{display:block;width:100%}
.v5-growth-title .ic{font-size:17px}
.v5-growth-tabs{display:flex;background:#EFE2C0;border:1.5px solid #DcC79A;border-radius:999px;padding:2px}
.v5-growth-tab{border:none;background:none;font-family:inherit;font-size:12px;font-weight:800;color:#9A7C3E;padding:4px 11px;border-radius:999px;cursor:pointer;transition:all .15s}
.v5-growth-tab.active{background:#5B8A3A;color:#fff;box-shadow:0 2px 5px rgba(91,138,58,.3)}

.v5-growth-stats{display:flex;flex-direction:column;gap:8px;position:relative}
.v5-growth-stat{display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.72);border:1.5px solid #E3D2A8;border-radius:13px;padding:9px 13px}
.v5-growth-stat .lb{font-size:12px;font-weight:800;color:#7A6638;display:flex;align-items:center;gap:5px}
.v5-growth-stat .lb img{height:1.25em;width:auto;vertical-align:-3px}
.v5-growth-stat .v{font-size:21px;font-weight:900;display:flex;align-items:baseline;gap:1px}
.v5-growth-stat .v .plus{font-size:14px}
.v5-growth-stat .v .unit{font-size:13px;margin-left:1px}
.v5-growth-stat.exp .v{color:#2E8A57}
.v5-growth-stat.coin .v{color:#D9892B}
.v5-growth-stat.rank .v{color:#B5860B}
.v5-rank-up{display:none;color:#2E8A57;font-size:13px;margin-left:3px;animation:v5RankUp .6s ease}
@keyframes v5RankUp{0%{transform:translateY(4px);opacity:0}100%{transform:translateY(0);opacity:1}}
.v5-growth-stat.coin.flash{animation:v5CoinFlash .7s ease}
@keyframes v5CoinFlash{0%{background:rgba(255,255,255,.72)}35%{background:#FFF1C4;box-shadow:0 0 0 3px rgba(224,190,58,.35)}100%{background:rgba(255,255,255,.72)}}

.v5-growth-bar-wrap{margin-top:2px;position:relative}
.v5-growth-bar-top{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;font-weight:800;margin-bottom:5px}
.v5-growth-bar-top .bar-lb{color:#C2410C}
.v5-growth-bar-top .bar-next{color:#5B8A3A}
.v5-growth-bar{position:relative;height:18px;background:#E7D7AE;border:1.5px solid #D2B879;border-radius:999px;overflow:hidden}
.v5-growth-bar .fill{height:100%;background:linear-gradient(90deg,#7DBB4E,#4C8A2E);border-radius:999px;transition:width .9s cubic-bezier(.25,.9,.3,1)}
.v5-growth-bar .pct{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:10.5px;font-weight:900;color:#3A4D1E;text-shadow:0 1px 1px rgba(255,255,255,.5)}
.v5-growth-bar-foot{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#8A7340;margin-top:5px;font-weight:700}
.v5-growth-bar-foot .remain b{color:#C2410C}

/* 모바일 — 세로 스택 */
@media (max-width:760px){
  .v5-toprow{grid-template-columns:1fr}
}

/* === 임상퀴즈 말풍선 (타이프라이터) === */
.cq-bubble{position:absolute;top:148px;left:50%;transform:translateX(-50%) scale(.9);z-index:4;
  max-width:78%;background:#FFFDF4;border:2.5px solid #5B4218;border-radius:16px;
  padding:10px 16px;font-size:15px;font-weight:800;color:#4A3415;line-height:1.45;
  box-shadow:0 6px 16px rgba(60,30,0,.25);opacity:0;transition:opacity .25s,transform .25s;pointer-events:none}
.cq-bubble.show{opacity:1;transform:translateX(-50%) scale(1)}
.cq-bubble::after{content:"";position:absolute;bottom:-11px;left:50%;transform:translateX(-50%);
  border:11px solid transparent;border-top-color:#5B4218;border-bottom:none}
.cq-bubble::before{content:"";position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);
  border:8px solid transparent;border-top-color:#FFFDF4;border-bottom:none;z-index:1}
.cq-bubble-caret{display:none;width:2px;height:1em;background:#4A3415;margin-left:2px;vertical-align:-2px;animation:cqCaret .7s steps(1) infinite}
.cq-bubble.typing .cq-bubble-caret{display:inline-block}
@keyframes cqCaret{0%,49%{opacity:1}50%,100%{opacity:0}}

/* === PS 환자 이벤트 === */
#psIntro{position:fixed;inset:0;z-index:9600}
.ps-redblink{position:absolute;inset:0;background:#C0231B;animation:psBlink .27s steps(1) 6}
@keyframes psBlink{0%{opacity:.85}50%{opacity:.15}100%{opacity:.85}}
.ps-whiteflash{position:absolute;inset:0;background:#fff;animation:psFlash .45s ease-out forwards}
@keyframes psFlash{0%{opacity:0}30%{opacity:1}100%{opacity:1}}
.ps-stage{position:absolute;inset:0;background:#fff;display:flex;align-items:center;justify-content:center;animation:bobFade .3s ease-out}
.ps-box{position:relative;background:#FFFDF6;border:4px solid #C0231B;border-radius:30px;max-width:470px;width:90%;
  padding:64px 36px 30px;text-align:center;box-shadow:0 20px 60px rgba(140,20,10,.25)}
.ps-bubble{position:relative;display:inline-block;background:#fff;border:2.5px solid #5B4218;border-radius:16px;
  padding:10px 16px;font-size:16px;font-weight:900;color:#4A3415;margin-bottom:12px;min-height:1.4em;min-width:60%}
.ps-bubble::after{content:"";position:absolute;bottom:-11px;left:50%;transform:translateX(-50%);border:11px solid transparent;border-top-color:#5B4218;border-bottom:none}
.ps-bubble::before{content:"";position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);border:8px solid transparent;border-top-color:#fff;border-bottom:none;z-index:1}
.ps-bubble .caret{display:inline-block;width:2px;height:1em;background:#4A3415;margin-left:2px;vertical-align:-2px;animation:cqCaret .7s steps(1) infinite}
.ps-nurse{display:block;height:345px;width:auto;margin:6px auto 12px;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(0,0,0,.2))}
.ps-notice{font-size:15px;line-height:1.7;color:#4A3415;background:#FFF3EE;border:1.5px dashed #D98372;border-radius:14px;padding:14px 18px;margin-bottom:18px}
.ps-notice .win{color:#2E8A57}.ps-notice .lose{color:#C0231B}
.ps-confirm{display:block;width:70%;margin:0 auto;background:linear-gradient(180deg,#E2543F,#C0231B);color:#fff;
  font-weight:900;font-size:17px;font-family:inherit;border:none;border-radius:14px;padding:13px 0;cursor:pointer;
  box-shadow:0 4px 0 #8C150D;transition:transform .12s}
.ps-confirm:hover{transform:translateY(-1px)}
/* PS 타이머 — 적색 네온 */
.v5q-timer.ps-timer{background:#2B0E0A;border-color:#C0231B;color:#FF6B57;text-shadow:0 0 8px rgba(255,90,60,.8)}
.v5q-timer.ps-timer .lb{color:#E08A7A}
.v5q-timer.ps-timer.ps-final{animation:psTimerBlink .5s steps(1) infinite}
@keyframes psTimerBlink{0%{box-shadow:0 0 0 3px rgba(255,60,40,.55),0 0 18px rgba(255,60,40,.7)}50%{box-shadow:none}100%{box-shadow:0 0 0 3px rgba(255,60,40,.55),0 0 18px rgba(255,60,40,.7)}}
/* 10초 이하 — 화면 가장자리 경고등 */
.cq-shell.ps-warning::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9400;
  box-shadow:inset 0 0 90px 24px rgba(192,35,27,.4);animation:psEdge .9s ease-in-out infinite}
@keyframes psEdge{0%,100%{opacity:.4}50%{opacity:1}}
/* 결과 연출 — 우측 패널 */
.ps-result{position:absolute;inset:0;z-index:6;background:rgba(255,252,244,.96);border-radius:inherit;
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px;animation:bobFade .3s ease-out}
.ps-result .ps-nurse{height:420px;margin:8px auto 10px}
.ps-result-body{font-size:17px;line-height:1.8;text-align:center;color:#4A3415;margin-bottom:16px}
.ps-result-body .win{color:#2E8A57;font-size:20px}.ps-result-body .lose{color:#C0231B;font-size:20px}
.ps-result .ps-confirm{width:60%}
.ps-result--success .ps-result-body b:first-child{color:#2E8A57}

/* === PS 환자 진행 중 — 한의사 노굥이 식은땀 === */
.cq-shell.ps-mode .cq-mascot-slot::before{
  content:"\1F4A6";  /* 💦 */
  position:absolute;top:6%;right:14%;font-size:44px;z-index:4;pointer-events:none;
  animation:psSweat 1.3s ease-in-out infinite;
  filter:drop-shadow(0 2px 3px rgba(0,80,160,.25));
}
.cq-shell.ps-mode .cq-mascot-slot::after{
  content:"\1F4A7";  /* 💧 */
  position:absolute;top:14%;left:16%;font-size:30px;z-index:4;pointer-events:none;
  animation:psSweat 1.3s ease-in-out .55s infinite;
  filter:drop-shadow(0 2px 3px rgba(0,80,160,.25));
}
@keyframes psSweat{
  0%{transform:translateY(-6px) scale(.6);opacity:0}
  35%{transform:translateY(0) scale(1);opacity:1}
  75%{transform:translateY(14px) scale(1);opacity:.9}
  100%{transform:translateY(26px) scale(.85);opacity:0}
}

/* === PS 환자 멘트 말풍선 (우측 패널 하단) === */
.ps-patient-bubble{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);z-index:5;
  max-width:84%;min-width:55%;background:#FFF;border:2.5px solid #A03020;border-radius:16px;
  padding:12px 18px;font-size:29px;font-weight:800;color:#7A1F12;line-height:1.4;
  box-shadow:0 6px 16px rgba(120,20,10,.25);pointer-events:none;animation:bobFade .3s ease-out}
.ps-patient-bubble .who{display:block;font-size:10.5px;font-weight:900;color:#C0231B;letter-spacing:.04em;margin-bottom:2px}
.ps-patient-bubble::after{content:"";position:absolute;bottom:-11px;left:24%;border:11px solid transparent;border-top-color:#A03020;border-bottom:none}
.ps-patient-bubble::before{content:"";position:absolute;bottom:-7px;left:24%;margin-left:3px;border:8px solid transparent;border-top-color:#fff;border-bottom:none;z-index:1}
.ps-patient-bubble .caret{display:none;width:2px;height:1em;background:#7A1F12;margin-left:2px;vertical-align:-2px;animation:cqCaret .7s steps(1) infinite}
.ps-patient-bubble.typing .caret{display:inline-block}

/* === 결과 화면 — 새로 채집한 본초 카드 === */
.r-newcards{margin:14px auto 0;max-width:560px;background:linear-gradient(160deg,#FFFBEA 0%,#FFF3D0 100%);border:2.5px solid #E8C96A;border-radius:18px;padding:14px 18px 16px;box-shadow:0 6px 18px rgba(180,140,30,.15)}
.r-newcards h4{margin:0 0 10px;font-size:15px;font-weight:900;color:#8A6A1A;display:flex;align-items:center;gap:6px;justify-content:center}
.r-newcards-n{background:#E8B931;color:#fff;font-size:12px;font-weight:900;padding:2px 9px;border-radius:999px}
.r-newcards-grid{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.r-newcard{width:96px;background:#fff;border:2px solid #EAD9A0;border-radius:14px;padding:8px 6px 9px;text-align:center;
  animation:rCardPop .5s cubic-bezier(.3,1.4,.5,1) both;box-shadow:0 4px 10px rgba(150,110,20,.12)}
@keyframes rCardPop{0%{transform:scale(.4) rotate(-6deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
.r-newcard .ph{height:64px;display:grid;place-items:center;margin-bottom:5px}
.r-newcard .ph img{max-height:64px;max-width:100%;object-fit:contain;border-radius:8px}
.r-newcard .ph .emo{font-size:42px}
.r-newcard .nm{font-size:13px;font-weight:900;color:#4A3415}
.r-newcard .han{font-size:10.5px;color:#A8956A;margin-top:1px}

/* === 프리즘 획득/사용 팝업 === */
.prism-pop{position:fixed;inset:0;z-index:9300;background:rgba(50,35,10,.5);display:flex;align-items:center;justify-content:center;animation:bobFade .3s ease-out}
.prism-card{position:relative;background:#FFFDF4;border:3px solid #7FB3E8;border-radius:24px;max-width:400px;width:88%;padding:30px 30px 24px;text-align:center;box-shadow:0 18px 50px rgba(20,60,120,.3);animation:bobPop .35s ease-out}
.pp-nogyeong{display:block;height:170px;width:auto;margin:0 auto 8px;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(0,0,0,.18))}
.pp-gem{font-size:46px;margin-bottom:4px;animation:ppGemFloat 1.6s ease-in-out infinite}
@keyframes ppGemFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.pp-title{font-size:21px;font-weight:900;color:#2D5C8F;margin-bottom:8px}
.pp-body{font-size:14.5px;line-height:1.7;color:#5A4A28;margin-bottom:16px}
.pp-sub{display:inline-block;margin-top:6px;font-size:12.5px;font-weight:800;color:#7FA3C8}
.pp-btn{display:block;width:70%;margin:0 auto;background:linear-gradient(180deg,#6FA8E0,#3D7AC0);color:#fff;font-weight:900;font-size:16px;font-family:inherit;border:none;border-radius:14px;padding:12px 0;cursor:pointer;box-shadow:0 4px 0 #2A5A94}
/* 파괴 이펙트 */
.pp-break{position:relative;height:64px;margin-bottom:2px}
.pp-break-gem{font-size:46px;display:inline-block;animation:ppShatter .7s ease-out forwards}
@keyframes ppShatter{0%{transform:scale(1);opacity:1}55%{transform:scale(1.25);opacity:1}100%{transform:scale(.4);opacity:0}}
.pp-shard{position:absolute;left:50%;top:50%;width:8px;height:8px;background:linear-gradient(135deg,#BFE0FF,#6FA8E0);border-radius:2px;opacity:0;animation:ppShard .9s ease-out forwards;animation-delay:var(--d)}
@keyframes ppShard{0%{transform:translate(-50%,-50%) rotate(var(--a)) translateX(0) scale(1);opacity:1}100%{transform:translate(-50%,-50%) rotate(var(--a)) translateX(74px) scale(.3);opacity:0}}
/* 인벤토리 — RPG 보드 (타이틀 바 + 탭 + 슬롯 + 포인트 바) */
.inv-stage{display:flex;justify-content:center;padding:24px 0 40px}
.inv-frame{width:min(840px,96vw);background:#B9B2AE;background:linear-gradient(180deg,#C6CDD4 0%,#B5AEA9 100%);
  border-radius:18px;padding:14px;box-shadow:0 18px 50px rgba(40,25,30,.4)}
.inv-titlebar{position:relative;display:flex;align-items:center;justify-content:center;
  background:#4A2C35;border:3px solid #321B22;border-radius:12px;padding:13px 16px;margin-bottom:10px}
.inv-back{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:42px;height:42px;
  background:#5E3A45;border:2px solid #321B22;border-radius:10px;color:#FFE9B8;font-size:26px;font-weight:900;
  cursor:pointer;font-family:inherit;line-height:1}
.inv-back:hover{background:#714754}
.inv-title{font-size:30px;font-weight:900;color:#FFE9B8;letter-spacing:.06em;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.inv-points-top{position:absolute;right:14px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;gap:7px;background:#321B22;border:2px solid #5E3A45;border-radius:999px;padding:7px 16px}
.inv-points-top img{height:24px;width:auto}
.inv-points-top b{font-size:19px;font-weight:900;color:#FFD96A}
.inv-points-top .u{font-size:13px;font-weight:900;color:#D9B978}
.inv-tabs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:10px}
.inv-tab{background:#D9CDC2;border:2.5px solid #4A2C35;border-radius:10px;padding:11px 0;
  font-family:inherit;font-size:18px;font-weight:900;color:#4A2C35;cursor:pointer;transition:all .12s}
.inv-tab:hover{background:#E8DCCF}
.inv-tab.on{background:#4A2C35;color:#FFE9B8;box-shadow:inset 0 3px 6px rgba(0,0,0,.35)}
.inv-slots{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;
  background:#4A2C35;border:3px solid #321B22;border-radius:12px;padding:14px}
.inv-slot{position:relative;aspect-ratio:1/1;background:#C8946B;border:3px solid #6E4426;border-radius:10px;
  box-shadow:inset 0 0 0 4px rgba(255,235,200,.18),inset 0 4px 8px rgba(90,50,15,.3);
  display:grid;place-items:center;padding:0;font-family:inherit}
.inv-slot::after{content:"";position:absolute;inset:7px;border:1.5px solid rgba(110,68,38,.45);border-radius:6px;pointer-events:none}
.inv-slot.filled{cursor:pointer;background:linear-gradient(160deg,#E2B287 0%,#CE9C6F 100%);transition:transform .12s,box-shadow .12s}
.inv-slot.filled:hover{transform:translateY(-2px);box-shadow:0 5px 12px rgba(50,27,34,.45),inset 0 4px 8px rgba(90,50,15,.18)}
.inv-slot.filled.on{border-color:#FFD96A;box-shadow:0 0 0 3px rgba(255,200,60,.6),inset 0 4px 8px rgba(90,50,15,.18)}
.inv-slot.filled img{max-width:60%;max-height:60%;object-fit:contain;filter:drop-shadow(0 3px 5px rgba(60,30,5,.35))}
.inv-slot .qty{position:absolute;right:6px;bottom:5px;background:#321B22;color:#FFE9B8;font-size:14px;font-weight:900;
  padding:1px 9px;border-radius:999px;border:1.5px solid #5E3A45}
.inv-infobar{margin-top:10px;min-height:64px;background:#FFE9B8;border:3px solid #4A2C35;border-radius:10px;
  box-shadow:inset 0 2px 5px rgba(120,70,20,.25);padding:12px 18px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.inv-infobar .hint{color:#A98952;font-size:15px;font-weight:700}
.inv-infobar .nm{font-size:19px;font-weight:900;color:#4A2C35}
.inv-infobar .auto{background:#5B8A3A;color:#fff;font-size:12px;font-weight:900;padding:3px 10px;border-radius:999px}
.inv-infobar .qt{font-size:14px;font-weight:800;color:#8B5A33}
.inv-infobar .ds{flex-basis:100%;font-size:15px;line-height:1.55;color:#6E5430}
.inv-bottombar{margin-top:10px;display:flex;align-items:center;justify-content:flex-end;gap:8px;
  background:#321B22;border:3px solid #4A2C35;border-radius:10px;padding:11px 20px}
.inv-bottombar img{height:26px;width:auto}
.inv-bottombar b{font-size:22px;font-weight:900;color:#FFD96A}
.inv-bottombar .u{font-size:14px;font-weight:900;color:#D9B978}

/* 카드 */
.cr-cardwrap{animation:crCardIn .55s cubic-bezier(.2,1.5,.4,1) both}
@keyframes crCardIn{0%{transform:scale(.3) rotateY(60deg);opacity:0}100%{transform:scale(1) rotateY(0);opacity:1}}
.cr-card{position:relative;width:200px;background:#FFFDF6;border-radius:18px;padding:16px 14px 14px;text-align:center;
  border:4px solid var(--g,#9AA0A6);box-shadow:0 12px 30px rgba(0,0,0,.3)}
.cr-card.cr-normal{--g:#9AA0A6}
.cr-card.cr-rare{--g:#3B82F6;box-shadow:0 0 26px rgba(59,130,246,.6),0 12px 30px rgba(0,0,0,.3)}
.cr-card.cr-super_rare{--g:#9B5DE5;box-shadow:0 0 36px rgba(155,93,229,.75),0 12px 30px rgba(0,0,0,.35)}
.cr-card.cr-legendary{--g:#F2B807;box-shadow:0 0 50px rgba(242,184,7,.85),0 12px 34px rgba(0,0,0,.4);
  background:linear-gradient(160deg,#FFFDF0,#FFF1C2)}
.cr-card.cr-legendary::after{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
  background:linear-gradient(125deg,transparent 30%,rgba(255,255,255,.7) 47%,transparent 60%);background-size:250% 250%;
  animation:crHolo 2.4s linear infinite}
@keyframes crHolo{0%{background-position:120% 0}100%{background-position:-120% 0}}
.cr-grade{display:inline-block;background:var(--g);color:#fff;font-size:12px;font-weight:900;padding:3px 12px;border-radius:999px;margin-bottom:8px}
.cr-new{position:absolute;top:-10px;left:-10px;background:#E23B3B;color:#fff;font-size:12px;font-weight:900;padding:3px 9px;border-radius:8px;box-shadow:0 3px 6px rgba(180,30,30,.4);transform:rotate(-8deg);z-index:2}
.cr-dup{position:absolute;top:-10px;left:-10px;background:#9AA0A6;color:#fff;font-size:11px;font-weight:900;padding:3px 9px;border-radius:8px;transform:rotate(-8deg);z-index:2}
.cr-photo{height:120px;display:grid;place-items:center;background:rgba(0,0,0,.04);border-radius:12px;margin-bottom:8px;overflow:hidden}
.cr-photo img{max-height:120px;max-width:100%;object-fit:contain}
.cr-photo .cr-emo{font-size:64px}
.cr-name{font-size:18px;font-weight:900;color:#3A2D14}
.cr-han{font-size:12px;color:#A8956A;margin-top:1px}

/* 광채/오라 */
.cr-shine{position:absolute;width:330px;height:330px;border-radius:50%;
  background:radial-gradient(circle,rgba(59,130,246,.55) 0%,transparent 65%);animation:crPulse 1.4s ease-in-out infinite;z-index:-1}
.cr-aura{position:absolute;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(155,93,229,.6) 0%,transparent 62%);animation:crPulse 1.6s ease-in-out infinite;z-index:-1}
.cr-ov-legendary .cr-aura{background:radial-gradient(circle,rgba(242,184,7,.7) 0%,transparent 60%);width:520px;height:520px}
@keyframes crPulse{0%,100%{transform:scale(.9);opacity:.6}50%{transform:scale(1.08);opacity:1}}

/* 전설 파티클 */
.cr-particles{position:fixed;inset:0;pointer-events:none;z-index:1}
.cr-particle{position:absolute;left:var(--x);bottom:-12px;width:9px;height:9px;border-radius:2px;
  background:linear-gradient(135deg,#FFE9A0,#F2B807);animation:crRise var(--dur) ease-out var(--dl) forwards;opacity:0}
@keyframes crRise{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(-105vh) rotate(540deg);opacity:0}}

/* 말풍선 */
.cr-bubble{position:relative;max-width:300px;background:#fff;border:2.5px solid #5B4218;border-radius:16px;
  padding:11px 18px;font-size:16px;font-weight:800;color:#4A3415;line-height:1.5;text-align:center;
  opacity:0;transform:scale(.9);transition:opacity .3s,transform .3s;box-shadow:0 6px 16px rgba(60,30,0,.25)}
.cr-bubble.show{opacity:1;transform:scale(1)}
.cr-bubble.pop{animation:crBubblePop .22s ease-out}
@keyframes crBubblePop{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}
.cr-bubble::after{content:"";position:absolute;top:-11px;left:50%;transform:translateX(-50%);border:11px solid transparent;border-bottom-color:#5B4218;border-top:none}
.cr-bubble::before{content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%);border:8px solid transparent;border-bottom-color:#fff;border-top:none;z-index:1}
.cr-bubble-caret{display:none;width:2px;height:1em;background:#4A3415;margin-left:2px;vertical-align:-2px;animation:cqCaret .7s steps(1) infinite}
.cr-confirm{background:linear-gradient(180deg,#5BA86A,#3E8A54);color:#fff;font-weight:900;font-size:15px;font-family:inherit;
  border:none;border-radius:12px;padding:10px 30px;cursor:pointer;box-shadow:0 4px 0 #2A6B3C}
.cr-ov-legendary .cr-confirm{background:linear-gradient(180deg,#E8B931,#C89518);box-shadow:0 4px 0 #9A6E0E}

/* 결과화면 인라인 카드 등급 테두리 */
.r-newcard.rar-rare{border-color:#3B82F6;box-shadow:0 0 12px rgba(59,130,246,.4)}
.r-newcard.rar-super_rare{border-color:#9B5DE5;box-shadow:0 0 14px rgba(155,93,229,.45)}
.r-newcard.rar-legendary{border-color:#F2B807;box-shadow:0 0 16px rgba(242,184,7,.55)}
.r-newcard .rar-tag{display:block;font-size:9.5px;font-weight:900;margin-top:2px}

/* 타임어택 결과 마스코트 */
.ta-result-mascot{text-align:center;margin-bottom:6px}
.ta-result-mascot img{height:450px;width:auto;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(0,0,0,.18))}

/* === 임상수련 진행도 바 === */
.cq-train{margin:0 0 12px;background:#FFF6E9;border:2px solid #E7C887;border-radius:14px;padding:10px 16px}
.cq-train-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.cq-train-lb{font-size:13.5px;font-weight:900;color:#8A5A2A}
.cq-train-num{font-size:14px;font-weight:900;color:#C44A2E}
.cq-train-track{height:14px;background:#EADCBE;border-radius:999px;overflow:hidden;border:1.5px solid #DcC79A}
.cq-train-fill{height:100%;background:linear-gradient(90deg,#E89B3C,#C44A2E);border-radius:999px;transition:width .5s cubic-bezier(.25,.9,.3,1)}
.cq-train.done .cq-train-fill{background:linear-gradient(90deg,#67A93F,#3E8A2E)}
.cq-train.done .cq-train-num{color:#3E8A2E}
/* 임상수련 완료 팝업 */
.cqcap-pop{position:fixed;inset:0;z-index:9300;background:rgba(50,30,10,.5);display:flex;align-items:center;justify-content:center;animation:bobFade .3s ease-out}
.cqcap-card{background:#FFFDF4;border:3px solid #E7C887;border-radius:24px;max-width:400px;width:88%;padding:28px 30px 22px;text-align:center;box-shadow:0 18px 50px rgba(120,70,20,.3);animation:bobPop .35s ease-out}
.cqcap-nogyeong{height:150px;width:auto;margin:0 auto 8px;display:block;filter:drop-shadow(0 8px 14px rgba(0,0,0,.18))}
.cqcap-title{font-size:21px;font-weight:900;color:#C44A2E;margin-bottom:10px}
.cqcap-body{font-size:14px;line-height:1.65;color:#7A6638;margin-bottom:14px}
.cqcap-reward{display:inline-block;background:linear-gradient(135deg,#DFF5E0,#B7E8C2);border:1.5px solid #5BB07A;color:#1F5A36;font-weight:900;font-size:15px;padding:7px 18px;border-radius:999px;margin-bottom:16px}
.cqcap-btns{display:flex;gap:8px}
.cqcap-btn{flex:1;font-family:inherit;font-size:15px;font-weight:900;border-radius:12px;padding:11px 0;cursor:pointer;border:2px solid #E7C887;background:#fff;color:#8A6A2A}
.cqcap-btn.primary{background:linear-gradient(180deg,#E89B3C,#C44A2E);color:#fff;border:none;box-shadow:0 4px 0 #8C3015}

/* 등급명 아래 닉네임 (코끼리원외탕전 회원 닉네임 공유) */
.v5-lv-id{display:flex;flex-direction:column;gap:2px;justify-content:center}
.v5-lv-line{display:flex;align-items:center;gap:8px}
.v5-lv-nick{display:block;font-size:12.5px;font-weight:800;color:#8A6A2A;margin:0;letter-spacing:-0.2px}
.v5-lv-nick::before{content:"👤 ";font-size:11px;opacity:.7}
.v5-lv-nick:empty{display:none}

/* 임상퀴즈 카드 보상칩 — 5px 아래로 */
.v5-mini.yellow .v5-quest-xp{ transform: translateY(5px); }

/* 인벤토리 비어있음 표시 */
.inv-slots{position:relative}
.inv-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:64px;font-weight:900;letter-spacing:4px;color:rgba(255,233,184,.45);pointer-events:none;
  text-shadow:0 2px 8px rgba(0,0,0,.3)}

/* 채집본초카드 — 등급별 보유 수량 */
.bcv2-grades{display:flex;flex-wrap:wrap;gap:3px;margin-top:5px}
.bcv2-g{font-size:9.5px;font-weight:800;padding:1px 5px;border-radius:6px;line-height:1.5}
.bcv2-g.g-n{background:#ECECEC;color:#777}
.bcv2-g.g-r{background:#E3EEFB;color:#3B82F6}
.bcv2-g.g-s{background:#F0E6FB;color:#9B5DE5}
.bcv2-g.g-l{background:#FBF1D6;color:#C99000}

/* 경험치 부스터 아이콘만 20% 확대 (다른 아이콘 영향 없음) */
img[src*="exp-booster"]{transform:scale(1.2);transform-origin:center}

/* 복습대기 결과화면만 90