.ox-page{--light:#edf7ff;--soft:#cde8ff;--mid:#68afe8;--dark:#337ab8;--deep:#1b4f81;--ink:#183652;width:min(1360px,calc(100% - 40px));margin:28px auto 58px;color:#24364b;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif}
.ox-theme-red{--light:#ffe7eb;--soft:#ffcbd3;--mid:#ee7181;--dark:#bf3f58;--deep:#78283b;--ink:#4a2230}.ox-theme-orange{--light:#fff0df;--soft:#ffd9af;--mid:#f59a47;--dark:#c96122;--deep:#7b3913;--ink:#4c2a16}.ox-theme-yellow{--light:#fff8d8;--soft:#ffe99b;--mid:#eac246;--dark:#a97d17;--deep:#674a0d;--ink:#473913}.ox-theme-green{--light:#eafaf0;--soft:#c9efd7;--mid:#61c287;--dark:#2b895a;--deep:#175b3b;--ink:#173a2b}.ox-theme-blue{--light:#edf7ff;--soft:#cde8ff;--mid:#68afe8;--dark:#337ab8;--deep:#1b4f81;--ink:#183652}.ox-theme-indigo{--light:#f1f2ff;--soft:#d9ddff;--mid:#8994dc;--dark:#5662ae;--deep:#343d79;--ink:#292f55}.ox-theme-purple{--light:#faf1ff;--soft:#ead5ff;--mid:#b07bdb;--dark:#7948aa;--deep:#4e2d77;--ink:#38224a}
.ox-dashboard{display:grid;grid-template-columns:minmax(290px,1.15fr) minmax(0,2.55fr) minmax(142px,156px);gap:10px;align-items:stretch;padding:10px 14px;margin-bottom:17px;border:1px solid color-mix(in srgb,var(--mid) 45%,#d5e1ef);border-radius:18px;background:radial-gradient(circle at 8% 0%,#fff,transparent 34%),linear-gradient(135deg,var(--light),#fff 48%,var(--soft));box-shadow:0 7px 22px color-mix(in srgb,var(--dark) 12%,transparent)}
.ox-brand{display:flex;gap:12px;align-items:center}.ox-logo{width:74px;height:74px;flex:0 0 74px;display:flex;align-items:center;justify-content:center;gap:3px;border-radius:22px;background:linear-gradient(145deg,var(--mid),var(--deep));box-shadow:0 6px 17px color-mix(in srgb,var(--deep) 24%,transparent),inset 0 1px 0 rgba(255,255,255,.35);transform:rotate(-2deg)}.ox-logo span{width:28px;height:40px;display:grid;place-items:center;border-radius:10px;background:#fff;font-size:26px;font-weight:1000;box-shadow:0 3px 8px rgba(0,0,0,.15)}.ox-logo .o{color:#0d83e8}.ox-logo .x{color:#e93d4f}.ox-kicker{font-size:9.5px;letter-spacing:.14em;color:var(--dark);font-weight:900}.ox-brand h2{margin:2px 0;font-size:22px;color:var(--deep)}.ox-brand h2 small{font-size:.5em;color:#60758c}.ox-brand p{margin:0;font-size:11px;color:#6f8298}
.ox-history{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.ox-stat-card{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:8px 10px;border:1px solid color-mix(in srgb,var(--mid) 38%,#d7e2ef);border-radius:12px;background:linear-gradient(155deg,#fff 0%,var(--light) 62%,var(--soft) 100%);box-shadow:inset 0 1px 0 #fff,0 4px 12px color-mix(in srgb,var(--dark) 9%,transparent)}.ox-stat-card b{font-size:16px;color:var(--deep)}.ox-stat-card span{font-size:10px;color:#6b7e91}.ox-user-actions{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:11px;font-weight:850;color:var(--deep)}.ox-home{width:42px;height:42px;border-radius:11px;border:1px solid var(--soft);background:linear-gradient(145deg,#fff,var(--light));display:grid;place-items:center;text-decoration:none;color:var(--deep);font-size:23px}.ox-content-ad{margin:16px 0}
.ox-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:13px;padding:10px 13px;border:1px solid var(--soft);border-radius:15px;background:linear-gradient(110deg,var(--light),#fff)}.ox-toolbar strong{font-size:16px;color:var(--deep)}.ox-toolbar span{display:block;font-size:10.5px;color:#71859c}.ox-toolbar-right{display:flex;align-items:center;gap:8px}.ox-time-chip{padding:8px 10px!important;border-radius:9px;background:#fff;border:1px solid var(--soft);font-weight:900;color:var(--deep)!important}.ox-time-chip b{font-size:17px}.ox-toolbar button{border:1px solid var(--dark);background:var(--dark);color:#fff;border-radius:9px;padding:9px 13px;font-weight:900;cursor:pointer}
.ox-workspace{display:flex;flex-direction:column;gap:12px}.ox-stage{display:grid;grid-template-columns:270px minmax(0,1fr) 220px;gap:14px;min-height:540px;padding:14px;border:1px solid var(--mid);border-radius:20px;background:radial-gradient(circle at 40% 0%,rgba(255,255,255,.95),transparent 33%),linear-gradient(145deg,var(--light),#fff 47%,var(--soft));box-shadow:0 9px 28px rgba(35,62,82,.07)}
.ox-host-wrap{position:relative;overflow:hidden;border-radius:17px;background:linear-gradient(180deg,#fff,var(--light));border:1px solid var(--soft)}.ox-host{position:absolute;left:50%;bottom:0;width:100%;height:100%;object-fit:cover;object-position:center top;transform:translateX(-50%);filter:saturate(.96)}
.ox-question-area{display:flex;flex-direction:column;min-width:0}.ox-question-meta{display:flex;justify-content:center;gap:8px;margin:8px 0}.ox-question-meta span{padding:6px 13px;border-radius:999px;background:var(--dark);color:#fff;font-size:11px;font-weight:900}.ox-question-meta span+span{background:var(--light);border:1px solid var(--mid);color:var(--deep)}
.ox-speech{position:relative;min-height:190px;padding:34px 34px 28px;border:3px solid var(--mid);border-radius:50px;background:#fff;box-shadow:0 8px 20px rgba(30,65,100,.08);display:flex;flex-direction:column;justify-content:center}.ox-speech:before{content:"";position:absolute;left:-27px;bottom:44px;width:48px;height:42px;background:#fff;clip-path:polygon(100% 0,0 100%,100% 72%);filter:drop-shadow(-3px 3px 0 var(--mid))}.ox-speech p{margin:0;font-size:clamp(19px,2.1vw,27px);line-height:1.48;text-align:center;color:var(--ink);font-weight:900;word-break:keep-all}.ox-speech small{display:block;margin-top:13px;text-align:center;color:#7b8da0;font-size:10.5px}
.ox-paddles{display:flex;justify-content:center;gap:46px;margin:22px 0 14px;perspective:900px}.ox-paddle{position:relative;width:145px;height:175px;border:0;background:transparent;cursor:pointer;transform-style:preserve-3d;transform-origin:50% 92%;transform:rotateX(74deg) translateY(22px);transition:transform .26s cubic-bezier(.16,.84,.3,1.15),filter .2s}.ox-paddle:hover{filter:brightness(1.05)}.ox-paddle.is-raised{transform:rotateX(0deg) translateY(-4px)}.ox-sign{position:absolute;top:0;left:10px;width:125px;height:125px;border-radius:50%;display:grid;place-items:center;background:#fff;font-size:74px;font-weight:1000;border:11px solid;box-shadow:0 10px 20px rgba(25,50,75,.14),inset 0 0 0 4px rgba(255,255,255,.8)}.ox-paddle-o .ox-sign{color:#1689ea;border-color:#1689ea}.ox-paddle-x .ox-sign{color:#ec4151;border-color:#ec4151}.ox-handle{position:absolute;top:116px;left:62px;width:22px;height:46px;border-radius:0 0 7px 7px;background:linear-gradient(90deg,#7c4c28,#c8894f,#714321);z-index:-1}.ox-paddle small{position:absolute;bottom:0;left:12px;right:12px;padding:6px;border-radius:10px;background:var(--deep);color:#fff;font-weight:900}.ox-paddle:disabled{cursor:default;opacity:.72}
.ox-message{margin-top:auto;padding:9px 12px;border:1px solid var(--soft);border-radius:11px;background:#fff;color:#61778d;font-size:12px;font-weight:800;text-align:center}.ox-message.is-correct{background:#eefaf4;color:#287052}.ox-message.is-wrong{background:#fff1f2;color:#a1424b}
.ox-side{display:flex;flex-direction:column;gap:10px}.ox-time-panel{padding:16px;border:1px solid var(--soft);border-radius:16px;background:linear-gradient(145deg,#fff,var(--light));text-align:center}.ox-time-panel span{display:block;font-size:11px;font-weight:900;color:var(--deep)}.ox-time-panel>b{display:block;font-size:54px;line-height:1;color:var(--deep);margin:4px 0}.ox-time-panel small{font-size:8.5px;letter-spacing:.13em;color:#8a9bad}.ox-time-track{height:8px;margin-top:10px;border-radius:99px;background:#dbe7f2;overflow:hidden}.ox-time-track i{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--mid),var(--dark));transition:width .25s linear}
.ox-live-stats{display:grid;gap:7px}.ox-live-stats div{display:flex;align-items:center;justify-content:space-between;padding:10px;border:1px solid var(--soft);border-radius:11px;background:#fff}.ox-live-stats span{font-size:11px;font-weight:800;color:#65798e}.ox-live-stats b{font-size:18px;color:var(--deep)}
.ox-praise-card{margin-top:auto;border:1px solid var(--mid);border-radius:15px;overflow:hidden;background:linear-gradient(145deg,#fff,var(--light));text-align:center}.ox-praise-card img{width:100%;height:135px;object-fit:cover;object-position:center 30%;display:block}.ox-praise-card div{padding:8px}.ox-praise-card small{display:inline-block;padding:3px 7px;border-radius:99px;background:var(--soft);font-weight:900;color:var(--deep);font-size:9px}.ox-praise-card strong{display:block;margin-top:5px;color:var(--deep);font-size:14px}.ox-praise-card.is-applause{animation:applause .55s ease 2}
.ox-bottom{display:grid;grid-template-columns:1fr 1.25fr;gap:12px}.ox-help,.ox-praise-guide{padding:13px 15px;border:1px solid var(--soft);border-radius:15px;background:linear-gradient(145deg,#fff,var(--light))}.ox-help strong,.ox-praise-guide>strong{font-size:14px;color:var(--deep)}.ox-help p{font-size:12.5px;line-height:1.7;color:#647a90;margin:7px 0 0}.ox-praise-guide{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.ox-praise-guide>strong{grid-column:1/-1}.ox-praise-guide div{font-size:10.5px;color:#596f84}.ox-praise-guide span{display:block;margin-bottom:3px;padding:3px 6px;border-radius:999px;background:var(--soft);color:var(--deep);font-weight:900;text-align:center}
@keyframes applause{50%{transform:translateY(-5px) rotate(-1deg) scale(1.02)}}@keyframes correctPulse{50%{transform:scale(1.015)}}.ox-stage.is-correct{animation:correctPulse .28s ease}
html.bp-dark .ox-dashboard,html.bp-dark .ox-toolbar,html.bp-dark .ox-stage{background:linear-gradient(145deg,color-mix(in srgb,var(--deep) 17%,#111d2c),#111d2c 55%,color-mix(in srgb,var(--mid) 10%,#111d2c))!important;border-color:color-mix(in srgb,var(--mid) 32%,#36506d)!important;color:#dce8f3!important}html.bp-dark .ox-stat-card,html.bp-dark .ox-time-panel,html.bp-dark .ox-live-stats div,html.bp-dark .ox-praise-card,html.bp-dark .ox-help,html.bp-dark .ox-praise-guide,html.bp-dark .ox-message{background:#172436!important;border-color:#36506d!important;color:#dce8f3!important}html.bp-dark .ox-speech{background:#172436!important;border-color:var(--mid)!important}html.bp-dark .ox-speech:before{background:#172436!important}html.bp-dark .ox-speech p,html.bp-dark .ox-brand h2,html.bp-dark .ox-toolbar strong,html.bp-dark .ox-live-stats b,html.bp-dark .ox-time-panel>b,html.bp-dark .ox-praise-card strong{color:#eef6ff!important}html.bp-dark .ox-host-wrap{background:#172436!important;border-color:#36506d!important}
@media(max-width:950px){.ox-dashboard{grid-template-columns:1fr}.ox-user-actions{flex-direction:row;justify-content:flex-end}.ox-stage{grid-template-columns:220px minmax(0,1fr)}.ox-side{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr)}.ox-praise-card{margin-top:0}.ox-praise-card img{height:95px}}@media(max-width:720px){.ox-page{width:calc(100% - 20px)}.ox-history{grid-template-columns:repeat(2,1fr)}.ox-toolbar{align-items:flex-start;flex-direction:column}.ox-stage{grid-template-columns:1fr}.ox-host-wrap{height:320px}.ox-question-area{order:-1}.ox-side{grid-template-columns:1fr}.ox-paddles{gap:16px}.ox-paddle{width:125px;height:155px}.ox-sign{width:105px;height:105px;font-size:62px}.ox-bottom{grid-template-columns:1fr}.ox-praise-guide{grid-template-columns:repeat(2,1fr)}}

/* 2026-08-14 photoreal host + fixed speech-tail border + result-only praise */
.ox-host-wrap{
  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
  overflow:hidden!important;
}
.ox-host{
  position:static!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center top!important;
  transform:none!important;
}

/* Speech tail: outer colored border + inner white/dark fill */
.ox-speech:before{
  content:""!important;
  position:absolute!important;
  left:-34px!important;
  bottom:43px!important;
  width:38px!important;
  height:46px!important;
  background:var(--mid)!important;
  clip-path:polygon(100% 0,0 62%,100% 100%)!important;
  filter:none!important;
  z-index:0!important;
}
.ox-speech:after{
  content:""!important;
  position:absolute!important;
  left:-27px!important;
  bottom:48px!important;
  width:32px!important;
  height:36px!important;
  background:#fff!important;
  clip-path:polygon(100% 0,0 62%,100% 100%)!important;
  z-index:1!important;
}

/* Result host appears only after 60 seconds, directly below speech bubble */
.ox-result-host{
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  align-items:center;
  gap:14px;
  margin:12px 0 0;
  padding:11px 13px;
  border:1px solid var(--mid);
  border-radius:16px;
  background:linear-gradient(145deg,#fff,var(--light));
  overflow:hidden;
  transform-origin:center top;
}
.ox-result-host.is-hidden{display:none!important}
.ox-result-host.is-show{animation:resultRise .55s cubic-bezier(.16,.84,.3,1.12) both}
.ox-result-host img{
  width:150px;
  height:120px;
  object-fit:cover;
  object-position:center 28%;
  border-radius:12px;
  border:1px solid var(--soft);
}
.ox-result-bubble{
  position:relative;
  padding:14px 16px;
  border:2px solid var(--mid);
  border-radius:22px;
  background:#fff;
}
.ox-result-bubble:before{
  content:"";
  position:absolute;
  left:-16px;
  top:38px;
  width:16px;
  height:18px;
  background:var(--mid);
  clip-path:polygon(100% 0,0 50%,100% 100%);
}
.ox-result-bubble:after{
  content:"";
  position:absolute;
  left:-12px;
  top:41px;
  width:12px;
  height:12px;
  background:#fff;
  clip-path:polygon(100% 0,0 50%,100% 100%);
}
.ox-result-bubble strong{display:block;font-size:19px;line-height:1.35;color:var(--deep)}
.ox-result-bubble small{display:block;margin-top:5px;color:#76899c;font-weight:800}
@keyframes resultRise{
  from{opacity:0;transform:translateY(18px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* Old right-side praise image card is not used */
.ox-praise-card{display:none!important}

/* New result guide has eight thresholds */
.ox-praise-guide{grid-template-columns:repeat(4,1fr)!important}

/* Dark mode applies to photographic images as well */
html.bp-dark .ox-host,
html.bp-dark .ox-result-host img{
  filter:brightness(.72) saturate(.82) contrast(1.04)!important;
}
html.bp-dark .ox-host-wrap{
  background:#0f1a28!important;
}
html.bp-dark .ox-speech:after,
html.bp-dark .ox-result-bubble,
html.bp-dark .ox-result-bubble:after{
  background:#172436!important;
}
html.bp-dark .ox-result-host{
  background:linear-gradient(145deg,#172436,color-mix(in srgb,var(--mid) 10%,#172436))!important;
  border-color:color-mix(in srgb,var(--mid) 38%,#36506d)!important;
}
html.bp-dark .ox-result-bubble strong{color:#eef6ff!important}
html.bp-dark .ox-result-bubble small{color:#aebfd0!important}

@media(max-width:720px){
  .ox-result-host{grid-template-columns:100px minmax(0,1fr)}
  .ox-result-host img{width:100px;height:95px}
  .ox-praise-guide{grid-template-columns:repeat(2,1fr)!important}
}

/* 2026-08-14: CSS stopwatch illustration, no text baked into image assets */
.ox-time-panel{
  display:grid!important;
  grid-template-columns:78px minmax(0,1fr)!important;
  align-items:center!important;
  column-gap:10px!important;
  padding:15px!important;
}
.ox-time-copy{text-align:left}
.ox-time-copy span{display:block;font-size:11px;font-weight:900;color:var(--deep)}
.ox-time-copy>b{display:block;font-size:48px;line-height:1;color:var(--deep);margin:2px 0}
.ox-time-copy small{font-size:8.5px;letter-spacing:.13em;color:#8a9bad}
.ox-time-track{grid-column:1/-1;width:100%}

.ox-stopwatch{
  position:relative;
  width:72px;
  height:72px;
  border-radius:50%;
  border:8px solid var(--mid);
  background:
    radial-gradient(circle at center,#fff 0 49%,var(--light) 50% 62%,var(--deep) 63% 100%);
  box-shadow:
    0 6px 14px color-mix(in srgb,var(--deep) 22%,transparent),
    inset 0 0 0 3px rgba(255,255,255,.72);
}
.ox-stopwatch:before{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:50%;
  background:
    repeating-conic-gradient(from -90deg,var(--deep) 0 2deg,transparent 2deg 30deg);
  opacity:.5;
  -webkit-mask:radial-gradient(circle,transparent 0 72%,#000 73%);
  mask:radial-gradient(circle,transparent 0 72%,#000 73%);
}
.ox-stopwatch-top{
  position:absolute;
  width:24px;height:10px;
  left:50%;top:-18px;
  transform:translateX(-50%);
  border-radius:5px;
  background:linear-gradient(180deg,var(--mid),var(--deep));
  box-shadow:0 2px 5px rgba(0,0,0,.18);
}
.ox-stopwatch-top:after{
  content:"";
  position:absolute;
  width:8px;height:10px;
  left:50%;top:8px;
  transform:translateX(-50%);
  background:var(--deep);
  border-radius:3px;
}
.ox-stopwatch-side{
  position:absolute;
  width:12px;height:7px;
  right:-12px;top:9px;
  transform:rotate(38deg);
  border-radius:4px;
  background:linear-gradient(180deg,var(--mid),var(--deep));
}
.ox-stopwatch-hand{
  position:absolute;
  width:3px;height:24px;
  left:50%;top:13px;
  transform-origin:50% 100%;
  transform:translateX(-50%) rotate(0deg);
  border-radius:3px;
  background:var(--deep);
  transition:transform .25s linear;
  z-index:3;
}
.ox-stopwatch-center{
  position:absolute;
  width:9px;height:9px;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:var(--dark);
  border:2px solid #fff;
  z-index:4;
}

/* Main and result assets remain pure photographic illustrations; all messages are live HTML. */
.ox-result-bubble strong,.ox-result-bubble small,.ox-speech p,.ox-speech small{
  position:relative;
  z-index:3;
}
html.bp-dark .ox-stopwatch{
  background:
    radial-gradient(circle at center,#142033 0 49%,#1c2a3d 50% 62%,var(--deep) 63% 100%)!important;
  border-color:color-mix(in srgb,var(--mid) 70%,#93a4ff)!important;
}
html.bp-dark .ox-time-copy span,
html.bp-dark .ox-time-copy>b{color:#eef6ff!important}
@media(max-width:950px){
  .ox-time-panel{grid-template-columns:70px minmax(0,1fr)!important}
  .ox-stopwatch{width:64px;height:64px}
}

/* =========================================================
   2026-08-14 ox4
   Speech bubble uses real PNG artwork as background.
   There are NO CSS-generated tails and NO text in the image.
   ========================================================= */
.ox-speech{
    position:relative!important;
    min-height:230px!important;
    padding:44px 48px 38px 125px!important;
    border:0!important;
    border-radius:0!important;
    background-color:transparent!important;
    background-repeat:no-repeat!important;
    background-position:center!important;
    background-size:100% 100%!important;
    box-shadow:none!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:visible!important;
}
.ox-speech:before,
.ox-speech:after{
    content:none!important;
    display:none!important;
}
.ox-speech p{
    max-width:779px;
    margin:0!important;
    text-align:center!important;
    color:var(--ink)!important;
}
.ox-speech small{
    margin-top:12px!important;
    color:color-mix(in srgb,var(--deep) 58%,#8090a0)!important;
}

/* Light-theme speech bubble artwork */
.ox-theme-red .ox-speech{background-image:url("assets/img/speech-red.png")!important}
.ox-theme-orange .ox-speech{background-image:url("assets/img/speech-orange.png")!important}
.ox-theme-yellow .ox-speech{background-image:url("assets/img/speech-yellow.png")!important}
.ox-theme-green .ox-speech{background-image:url("assets/img/speech-green.png")!important}
.ox-theme-blue .ox-speech{background-image:url("assets/img/speech-blue.png")!important}
.ox-theme-indigo .ox-speech{background-image:url("assets/img/speech-indigo.png")!important}
.ox-theme-purple .ox-speech{background-image:url("assets/img/speech-purple.png")!important}

/* Dark-mode variants are also actual PNG artwork. */
html.bp-dark .ox-theme-red .ox-speech{background-image:url("assets/img/speech-red-dark.png")!important}
html.bp-dark .ox-theme-orange .ox-speech{background-image:url("assets/img/speech-orange-dark.png")!important}
html.bp-dark .ox-theme-yellow .ox-speech{background-image:url("assets/img/speech-yellow-dark.png")!important}
html.bp-dark .ox-theme-green .ox-speech{background-image:url("assets/img/speech-green-dark.png")!important}
html.bp-dark .ox-theme-blue .ox-speech{background-image:url("assets/img/speech-blue-dark.png")!important}
html.bp-dark .ox-theme-indigo .ox-speech{background-image:url("assets/img/speech-indigo-dark.png")!important}
html.bp-dark .ox-theme-purple .ox-speech{background-image:url("assets/img/speech-purple-dark.png")!important}
html.bp-dark .ox-speech p{color:#eef6ff!important}
html.bp-dark .ox-speech small{color:#aebfd0!important}

/* One long game-description panel instead of score-range cards */
.ox-bottom-single{
    display:block!important;
}
.ox-help-wide{
    width:100%!important;
    padding:18px 21px!important;
}
.ox-help-wide>strong{
    display:block;
    margin-bottom:11px;
    font-size:15px!important;
}
.ox-help-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px 26px;
}
.ox-help-grid p{
    margin:0!important;
    font-size:12.5px!important;
    line-height:1.75!important;
}
.ox-help-grid b{
    color:var(--dark);
    margin-right:4px;
}
.ox-praise-guide{display:none!important}

/* Result panel remains under the main question bubble after the game. */
.ox-result-host{
    margin-top:6px!important;
}

@media(max-width:779px){
    .ox-speech{
        min-height:220px!important;
        padding:40px 38px 34px 105px!important;
    }
}
@media(max-width:720px){
    .ox-speech{
        min-height:205px!important;
        padding:38px 26px 32px 82px!important;
        background-size:100% 100%!important;
    }
    .ox-help-grid{grid-template-columns:1fr!important}
}

/* =========================================================
   2026-08-14 ox5 — approved-layout implementation
   The speech bubble is a real PNG <img>; no CSS background,
   no pseudo-elements, no stretching beyond its native ratio.
   ========================================================= */

/* Match approved concept proportions more closely */
.ox-stage{
    grid-template-columns: 285px minmax(0,1fr) 230px!important;
    min-height:555px!important;
    gap:16px!important;
    padding:14px!important;
}
.ox-host-wrap{
    border-radius:18px!important;
    overflow:hidden!important;
}
.ox-host{
    object-fit:cover!important;
    object-position:center top!important;
}
.ox-question-area{
    justify-content:flex-start!important;
    min-width:0!important;
}
.ox-question-meta{
    position:relative!important;
    z-index:4!important;
    margin:3px 0 2px!important;
}

/* REAL IMAGE speech bubble */
.ox-speech{
    position:relative!important;
    width:100%!important;
    aspect-ratio:1400/500!important;
    min-height:0!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:none!important;
    box-shadow:none!important;
    overflow:visible!important;
    display:block!important;
}
.ox-speech:before,
.ox-speech:after{
    content:none!important;
    display:none!important;
}
.ox-speech-bg{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
    pointer-events:none!important;
    user-select:none!important;
    filter:none!important;
}
.ox-speech-content{
    position:absolute!important;
    z-index:2!important;
    left:14%!important;
    right:3.5%!important;
    top:11%!important;
    bottom:10%!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
}
.ox-speech-content p{
    margin:0!important;
    width:100%!important;
    max-width:none!important;
    font-size:clamp(18px,2vw,27px)!important;
    line-height:1.46!important;
    color:var(--ink)!important;
    font-weight:900!important;
    word-break:keep-all!important;
}
.ox-speech-content small{
    display:block!important;
    margin-top:12px!important;
    font-size:10.5px!important;
    color:color-mix(in srgb,var(--deep) 60%,#8090a0)!important;
}
html.bp-dark .ox-speech-content p{color:#eef6ff!important}
html.bp-dark .ox-speech-content small{color:#aebfd0!important}

/* O/X area sits closer to approved mockup */
.ox-paddles{
    margin:8px 0 9px!important;
    gap:42px!important;
}
.ox-paddle{
    width:148px!important;
    height:174px!important;
}
.ox-message{
    margin-top:2px!important;
}

/* Stopwatch/stat column proportions */
.ox-side{gap:10px!important}
.ox-time-panel{
    min-height:135px!important;
    border-radius:16px!important;
}

/* Full-width long help panel */
.ox-bottom-single{
    display:block!important;
    width:100%!important;
}
.ox-help-wide{
    width:100%!important;
    box-sizing:border-box!important;
    padding:18px 22px!important;
}
.ox-help-grid{
    grid-template-columns:1fr 1fr!important;
    column-gap:34px!important;
    row-gap:7px!important;
}
.ox-help-grid p{
    font-size:12.5px!important;
    line-height:1.72!important;
}

/* Keep result presenter directly under the question bubble */
.ox-result-host{
    margin:4px 0 0!important;
    z-index:3!important;
}

/* Dark mode also affects photo assets, but NEVER the bubble art */
html.bp-dark .ox-host,
html.bp-dark .ox-result-host img{
    filter:brightness(.73) saturate(.84) contrast(1.04)!important;
}
html.bp-dark .ox-speech-bg{
    filter:none!important;
}

@media(max-width:1000px){
    .ox-stage{
        grid-template-columns:220px minmax(0,1fr)!important;
    }
    .ox-side{
        grid-column:1/-1!important;
        display:grid!important;
        grid-template-columns:repeat(3,1fr)!important;
    }
}
@media(max-width:720px){
    .ox-stage{grid-template-columns:1fr!important}
    .ox-host-wrap{height:310px!important}
    .ox-question-area{order:-1}
    .ox-speech-content{
        left:15%!important;
        right:4%!important;
        top:10%!important;
        bottom:9%!important;
    }
    .ox-speech-content p{
        font-size:clamp(15px,4vw,21px)!important;
    }
    .ox-side{
        grid-template-columns:1fr!important;
    }
    .ox-help-grid{
        grid-template-columns:1fr!important;
    }
}

/* =========================================================
   2026-08-14 ox6
   AUTHORITATIVE speech-bubble rules.
   Only the real <img class="ox-speech-bg"> is visible.
   Any previous CSS bubble/background/pseudo-tail is neutralized.
   ========================================================= */

/* Remove every old visual layer from the speech wrapper itself */
.ox-speech{
    position:relative!important;
    display:block!important;
    width:calc(100% + 36px)!important;
    max-width:none!important;
    aspect-ratio:1600/560!important;
    min-height:0!important;
    margin:0 0 0 -36px!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:none!important;
    background-image:none!important;
    background-color:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
    filter:none!important;
}
.ox-speech::before,
.ox-speech::after{
    content:none!important;
    display:none!important;
    width:0!important;
    height:0!important;
    border:0!important;
    background:none!important;
    clip-path:none!important;
    filter:none!important;
}

/* The PNG is the sole speech-bubble artwork */
.ox-speech-bg{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:none!important;
    filter:none!important;
    pointer-events:none!important;
    user-select:none!important;
    z-index:1!important;
}

/* Text uses the larger right-side body area, never the tail */
.ox-speech-content{
    position:absolute!important;
    z-index:2!important;
    left:18%!important;
    right:3.5%!important;
    top:10%!important;
    bottom:9%!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    padding:0 14px!important;
    box-sizing:border-box!important;
}
.ox-speech-content p{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    font-size:clamp(18px,2.05vw,28px)!important;
    line-height:1.5!important;
    font-weight:900!important;
    color:var(--ink)!important;
    word-break:keep-all!important;
    overflow-wrap:break-word!important;
}
.ox-speech-content small{
    display:block!important;
    margin-top:13px!important;
    font-size:10.5px!important;
    line-height:1.35!important;
    color:color-mix(in srgb,var(--deep) 60%,#8090a0)!important;
}

/* Eliminate legacy theme background-image rules on wrapper */
.ox-theme-red .ox-speech,
.ox-theme-orange .ox-speech,
.ox-theme-yellow .ox-speech,
.ox-theme-green .ox-speech,
.ox-theme-blue .ox-speech,
.ox-theme-indigo .ox-speech,
.ox-theme-purple .ox-speech,
html.bp-dark .ox-theme-red .ox-speech,
html.bp-dark .ox-theme-orange .ox-speech,
html.bp-dark .ox-theme-yellow .ox-speech,
html.bp-dark .ox-theme-green .ox-speech,
html.bp-dark .ox-theme-blue .ox-speech,
html.bp-dark .ox-theme-indigo .ox-speech,
html.bp-dark .ox-theme-purple .ox-speech{
    background:none!important;
    background-image:none!important;
}

/* Give the question column a little more horizontal room */
.ox-stage{
    grid-template-columns:285px minmax(0,1fr) 225px!important;
}
.ox-question-area{
    min-width:0!important;
    overflow:visible!important;
}

/* Keep O/X slightly lower so larger bubble has room */
.ox-paddles{
    margin-top:2px!important;
}

/* Dark mode only changes HTML text, not the PNG art itself */
html.bp-dark .ox-speech-content p{color:#eef6ff!important}
html.bp-dark .ox-speech-content small{color:#aebfd0!important}
html.bp-dark .ox-speech-bg{filter:none!important}

/* Responsive sizing */
@media(max-width:1000px){
    .ox-speech{
        width:calc(100% + 20px)!important;
        margin-left:-20px!important;
    }
    .ox-speech-content{
        left:18.5%!important;
        right:4%!important;
    }
}
@media(max-width:720px){
    .ox-speech{
        width:100%!important;
        margin-left:0!important;
        aspect-ratio:1600/610!important;
    }
    .ox-speech-content{
        left:18%!important;
        right:4%!important;
        top:9%!important;
        bottom:8%!important;
        padding:0 8px!important;
    }
    .ox-speech-content p{
        font-size:clamp(15px,4vw,21px)!important;
        line-height:1.42!important;
    }
}

/* ox10: adaptive question typography */
.ox-speech-content{
  overflow:hidden!important;
}
.ox-speech-content p#questionText{
  max-height:100%!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  padding:0 4px!important;
  white-space:normal!important;
  word-break:keep-all!important;
  overflow-wrap:break-word!important;
  text-wrap:balance;
  transition:font-size .12s ease,line-height .12s ease;
}

/* ==========================================================
   OX11 FINAL GAME LAYOUT
   - taller question area
   - enough O/X raise space
   - result banner below O/X after game
   ========================================================== */

.ox-stage{
    grid-template-columns:285px minmax(0,1fr) 225px!important;
    min-height:650px!important;
    align-items:stretch!important;
}

.ox-question-area{
    display:flex!important;
    flex-direction:column!important;
    min-width:0!important;
    overflow:visible!important;
}

/* Bigger vertical speech bubble */
.ox-speech{
    position:relative!important;
    width:calc(100% + 40px)!important;
    max-width:none!important;
    aspect-ratio:1600/690!important;
    min-height:0!important;
    margin:0 0 0 -40px!important;
    padding:0!important;
    border:0!important;
    background:none!important;
    background-image:none!important;
    box-shadow:none!important;
    overflow:visible!important;
}
.ox-speech::before,
.ox-speech::after{
    content:none!important;
    display:none!important;
}
.ox-speech-bg{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    display:block!important;
    object-fit:contain!important;
    object-position:center!important;
    z-index:1!important;
    pointer-events:none!important;
    filter:none!important;
}
.ox-speech-content{
    position:absolute!important;
    z-index:2!important;
    left:18.5%!important;
    right:3.7%!important;
    top:8%!important;
    bottom:8%!important;
    padding:0 18px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
}
.ox-speech-content p#questionText{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    font-size:24px;
    line-height:1.42;
    font-weight:900!important;
    word-break:keep-all!important;
    overflow-wrap:break-word!important;
    white-space:normal!important;
    max-height:100%!important;
    overflow:hidden!important;
}
.ox-speech-content small{
    flex:0 0 auto!important;
    margin-top:10px!important;
}

/* Make sure old theme background-image rules never show a second bubble */
.ox-theme-red .ox-speech,
.ox-theme-orange .ox-speech,
.ox-theme-yellow .ox-speech,
.ox-theme-green .ox-speech,
.ox-theme-blue .ox-speech,
.ox-theme-indigo .ox-speech,
.ox-theme-purple .ox-speech,
html.bp-dark .ox-theme-red .ox-speech,
html.bp-dark .ox-theme-orange .ox-speech,
html.bp-dark .ox-theme-yellow .ox-speech,
html.bp-dark .ox-theme-green .ox-speech,
html.bp-dark .ox-theme-blue .ox-speech,
html.bp-dark .ox-theme-indigo .ox-speech,
html.bp-dark .ox-theme-purple .ox-speech{
    background:none!important;
    background-image:none!important;
}

/* O/X gets a dedicated raising area */
.ox-paddles{
    flex:0 0 178px!important;
    min-height:178px!important;
    margin:4px 0 4px!important;
    display:flex!important;
    align-items:flex-end!important;
    justify-content:center!important;
    gap:42px!important;
    perspective:900px!important;
}
.ox-paddle{
    width:142px!important;
    height:165px!important;
}
.ox-message{
    flex:0 0 auto!important;
    margin-top:2px!important;
}

/* Result message location: below O/X, only shown after game */
.ox-result-host{
    flex:0 0 auto!important;
    width:100%!important;
    min-height:122px!important;
    margin:10px 0 0!important;
    grid-template-columns:138px minmax(0,1fr)!important;
    gap:14px!important;
    padding:10px 14px!important;
    box-sizing:border-box!important;
    border-radius:16px!important;
}
.ox-result-host img{
    width:138px!important;
    height:108px!important;
    object-fit:cover!important;
    object-position:center 28%!important;
}
.ox-result-bubble{
    min-height:78px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
}
.ox-result-bubble strong{
    font-size:20px!important;
    line-height:1.35!important;
}

/* Keep help section below full-width */
.ox-help-wide{
    width:100%!important;
}

@media(max-width:1000px){
    .ox-stage{
        grid-template-columns:220px minmax(0,1fr)!important;
    }
    .ox-side{
        grid-column:1/-1!important;
    }
    .ox-speech{
        width:calc(100% + 22px)!important;
        margin-left:-22px!important;
    }
}
@media(max-width:720px){
    .ox-stage{grid-template-columns:1fr!important}
    .ox-speech{
        width:100%!important;
        margin-left:0!important;
        aspect-ratio:1600/760!important;
    }
    .ox-speech-content{
        left:18%!important;
        right:4%!important;
        top:7%!important;
        bottom:7%!important;
    }
    .ox-paddles{
        min-height:165px!important;
        flex-basis:165px!important;
    }
    .ox-result-host{
        grid-template-columns:95px minmax(0,1fr)!important;
    }
    .ox-result-host img{
        width:95px!important;
        height:90px!important;
    }
}

/* ============================================================
   OX13 NEW QUESTION BUBBLE
   This uses unique ox-qbubble2 classes so no old speech rules
   can overlap or interfere.
   ============================================================ */
.ox-qbubble2{
    position:relative;
    width:calc(100% + 70px);
    margin-left:-70px;
    aspect-ratio:1700/760;
    flex:0 0 auto;
    overflow:visible;
    z-index:2;
}
.ox-qbubble2-bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    object-position:center;
    pointer-events:none;
    user-select:none;
    filter:none!important;
    z-index:1;
}
.ox-qbubble2-content{
    position:absolute;
    left:20.2%;
    right:3.2%;
    top:7%;
    bottom:7%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    overflow:hidden;
    box-sizing:border-box;
    padding:0 22px;
    z-index:2;
}
.ox-qbubble2-content #questionText{
    width:100%;
    max-width:none;
    margin:0;
    padding:0 4px;
    box-sizing:border-box;
    font-size:22px;
    line-height:1.40;
    font-weight:900;
    color:var(--ink);
    word-break:keep-all;
    overflow-wrap:break-word;
    white-space:normal;
    overflow:hidden;
}
.ox-qbubble2-content #questionRef{
    display:block;
    flex:0 0 auto;
    margin-top:10px;
    font-size:10.5px;
    line-height:1.3;
    color:color-mix(in srgb,var(--deep) 60%,#8090a0);
}
html.bp-dark .ox-qbubble2-content #questionText{color:#eef6ff}
html.bp-dark .ox-qbubble2-content #questionRef{color:#aebfd0}

/* Question area is taller; bubble occupies most of it. */
.ox-stage{
    min-height:700px!important;
    grid-template-columns:285px minmax(0,1fr) 225px!important;
}
.ox-question-area{
    min-width:0!important;
    overflow:visible!important;
    display:flex!important;
    flex-direction:column!important;
}
.ox-question-meta{
    flex:0 0 auto!important;
    margin-bottom:0!important;
}

/* Leave exactly enough room for the paddles to stand up. */
.ox-paddles{
    flex:0 0 166px!important;
    min-height:166px!important;
    margin:-4px 0 3px!important;
    align-items:flex-end!important;
}
.ox-paddle{
    width:138px!important;
    height:158px!important;
}
.ox-message{
    flex:0 0 auto!important;
    margin-top:2px!important;
}

/* Result banner stays beneath O/X after game. */
.ox-result-host{
    width:100%!important;
    min-height:118px!important;
    margin-top:9px!important;
}

/* Ensure obsolete old bubble cannot show even if legacy markup survived somewhere. */
.ox-speech,
.ox-speech-bg,
.ox-speech-content{
    display:none!important;
}

@media(max-width:1000px){
    .ox-qbubble2{
        width:calc(100% + 36px);
        margin-left:-36px;
    }
    .ox-qbubble2-content{
        left:20.5%;
        right:3.6%;
    }
}
@media(max-width:720px){
    .ox-stage{grid-template-columns:1fr!important}
    .ox-qbubble2{
        width:100%;
        margin-left:0;
        aspect-ratio:1700/850;
    }
    .ox-qbubble2-content{
        left:20%;
        right:4%;
        top:6%;
        bottom:6%;
        padding:0 10px;
    }
}

/* BiblePang v5: Word Search-style stat icons */
.ox-stat-card{display:grid!important;grid-template-columns:38px minmax(0,1fr)!important;align-items:center!important;gap:8px!important}
.ox-stat-icon{width:34px;height:34px;display:grid;place-items:center;color:var(--deep)}
.ox-stat-icon svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ox-stat-copy{display:flex;flex-direction:column;min-width:0}
.ox-stat-copy>span{font-size:10px!important;font-weight:850;color:var(--deep)!important}
.ox-stat-copy>b{font-size:14px!important;line-height:1.2}
.ox-stat-copy>small{font-size:9px;color:#6b7e91;white-space:nowrap}
.stat-play .ox-stat-icon{color:#7164d8}.stat-best .ox-stat-icon{color:#e7a11b}.stat-score .ox-stat-icon{color:#27ada2}.stat-points .ox-stat-icon{color:#ec991a}
html.bp-dark .ox-stat-copy>span,html.bp-dark .ox-stat-copy>b{color:#eef6ff!important}
html.bp-dark .ox-stat-copy>small{color:#aebfd0!important}

/* v6 color image icons */

.ox-stat-icon{width:40px!important;height:40px!important;background:transparent!important;display:grid!important;place-items:center!important}
.ox-stat-icon img{display:block!important;width:38px!important;height:38px!important;object-fit:contain!important;max-width:none!important}
.ox-stat-icon svg{display:none!important}
.ox-history.is-loading{grid-template-columns:1fr!important}
.ox-stat-loading{display:flex!important;align-items:center!important;justify-content:center!important;min-height:48px!important;padding:6px 10px!important}
.ox-stat-loading span{font-size:9px!important;line-height:1.15!important;font-weight:700!important;color:#7a8797!important;white-space:nowrap!important}
html.bp-dark .ox-stat-loading span,body.bp-dark .ox-stat-loading span,html[data-theme="dark"] .ox-stat-loading span{color:#aebfd0!important}

/* v7: OX loading UI — two steps smaller and never wraps */
.ox-history.is-loading{
  grid-template-columns:1fr!important;
  min-height:72px!important;
  height:72px!important;
  align-items:stretch!important;
}
.ox-stat-loading{
  min-height:72px!important;height:72px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  padding:4px 8px!important;overflow:hidden!important;
}
.ox-stat-loading span{
  display:block!important;
  font-size:7.5px!important;
  line-height:1!important;
  font-weight:650!important;
  white-space:nowrap!important;
  word-break:keep-all!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}


/* ==========================================================
   BiblePang OX v8 — fixed stats grid
   ========================================================== */

/* 통계 영역은 로딩 여부와 관계없이 항상 4열 */
.ox-history{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:8px!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
}

/* 로딩 문구 하나만 4칸 전체를 차지 */
.ox-history .ox-stat-loading{
    grid-column:1 / -1!important;
    width:100%!important;
    min-width:0!important;
    min-height:58px!important;
    height:58px!important;
    padding:4px 8px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    box-sizing:border-box!important;
}

.ox-history .ox-stat-loading span{
    display:block!important;
    font-size:7.5px!important;
    line-height:1!important;
    font-weight:650!important;
    white-space:nowrap!important;
    word-break:keep-all!important;
}

/* v7의 is-loading 1열 강제 규칙 무효화 */
.ox-history.is-loading{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    min-height:0!important;
    height:auto!important;
}

/* 모바일에서만 기존처럼 2열 */
@media(max-width:720px){
    .ox-history,
    .ox-history.is-loading{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }
    .ox-history .ox-stat-loading{
        grid-column:1 / -1!important;
    }
}


/* =========================================================
   OX v27 - Level + Bible scope selector
   ========================================================= */
.ox-scope-card{
    margin:0 0 13px;
    padding:14px;
    border:1px solid color-mix(in srgb,var(--mid) 42%,#d4e1ec);
    border-radius:17px;
    background:linear-gradient(135deg,var(--light),#fff 48%,color-mix(in srgb,var(--soft) 64%,#fff));
    box-shadow:0 7px 22px color-mix(in srgb,var(--dark) 8%,transparent);
}
.ox-select-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px}
.ox-select-heading>div>span,.ox-scope-divider>span{display:block;font-size:9px;letter-spacing:.12em;color:var(--dark);font-weight:950}
.ox-select-heading strong,.ox-scope-divider strong{display:block;margin-top:1px;font-size:14px;color:var(--deep)}
.ox-select-heading small{display:block;margin-top:2px;font-size:10px;color:#71859a}
.ox-select-heading>b{padding:7px 12px;border-radius:10px;background:var(--deep);color:#fff;font-size:12px;white-space:nowrap}
.ox-level-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ox-level-btn,.ox-scope-btn{
    appearance:none;border:1px solid color-mix(in srgb,var(--mid) 40%,#d2deea);background:#fff;color:var(--ink);
    border-radius:10px;padding:9px 10px;font-weight:900;cursor:pointer;transition:.16s ease;
}
.ox-level-btn{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px}
.ox-level-btn small{font-size:8.5px;color:#8292a2;font-weight:800}
.ox-level-btn:hover,.ox-scope-btn:hover{border-color:var(--mid);background:var(--light)}
.ox-level-btn.is-active,.ox-scope-btn.is-active{
    border-color:var(--dark);background:linear-gradient(135deg,var(--dark),var(--deep));color:#fff;box-shadow:0 5px 13px color-mix(in srgb,var(--dark) 18%,transparent)
}
.ox-level-btn.is-active small{color:rgba(255,255,255,.74)}
.ox-scope-divider{display:flex;align-items:center;gap:8px;margin:15px 0 8px;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--mid) 22%,#e3eaf1)}
.ox-scope-tabs{display:flex;flex-wrap:wrap;gap:7px}
.ox-scope-btn{padding:7px 10px;font-size:10.5px}
.ox-scope-sub{margin-top:9px;padding:9px;border:1px solid color-mix(in srgb,var(--soft) 72%,#dce5ed);border-radius:11px;background:rgba(255,255,255,.52)}
.ox-scope-sub.is-hidden{display:none}
.ox-scope-sub-label{margin-bottom:6px;font-size:9.5px;font-weight:900;color:var(--deep)}
.ox-scope-tabs--books .ox-scope-btn{font-size:10px;padding:6px 8px}
.ox-scope-status{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--light) 55%,#fff);border:1px solid color-mix(in srgb,var(--mid) 18%,#e4eaf0)}
.ox-scope-status span{font-size:11px;font-weight:950;color:var(--deep)}.ox-scope-status small{font-size:9.5px;color:#72859a}
.ox-toolbar button:disabled{opacity:.48;cursor:not-allowed}

html.bp-dark .ox-scope-card,
body.bp-dark .ox-scope-card,
html[data-theme="dark"] .ox-scope-card{
    background:linear-gradient(145deg,color-mix(in srgb,var(--deep) 17%,#111d2c),#111d2c 58%,color-mix(in srgb,var(--mid) 9%,#111d2c))!important;
    border-color:#36506d!important;
}
html.bp-dark .ox-select-heading strong,
html.bp-dark .ox-scope-divider strong,
html.bp-dark .ox-scope-sub-label,
html.bp-dark .ox-scope-status span{color:#eef6ff!important}
html.bp-dark .ox-select-heading small,
html.bp-dark .ox-scope-status small{color:#aebfd0!important}
html.bp-dark .ox-level-btn,
html.bp-dark .ox-scope-btn{background:#172436;color:#eaf3fb;border-color:#36506d}
html.bp-dark .ox-level-btn.is-active,
html.bp-dark .ox-scope-btn.is-active{background:linear-gradient(135deg,var(--dark),var(--deep));border-color:var(--mid);color:#fff}
html.bp-dark .ox-scope-sub,
html.bp-dark .ox-scope-status{background:#111d2c;border-color:#36506d}

@media(max-width:720px){
 .ox-level-tabs{grid-template-columns:1fr 1fr}
 .ox-select-heading{align-items:flex-start}
 .ox-scope-status{align-items:flex-start;flex-direction:column;gap:3px}
}


/* =========================================================
   OX v29
   - toolbar green/red status lights + matched count
   - centered stopwatch hand
   - sound toggle
   - result circular chart
   ========================================================= */

/* Toolbar restored live status */
.ox-toolbar-right{
    flex-wrap:wrap!important;
    justify-content:flex-end!important;
}
.ox-answer-status{
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:38px;
    padding:0 10px;
    border:1px solid color-mix(in srgb,var(--mid) 34%,#d6e1eb);
    border-radius:10px;
    background:#fff;
    white-space:nowrap;
}
.ox-status-light{
    position:relative;
    width:11px;
    height:11px;
    border-radius:50%;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.10);
    transition:.15s ease;
}
.ox-status-light--green{background:#9ebba9}
.ox-status-light--red{background:#c5a2a7}
.ox-status-light--green.is-on{
    background:#19b96b;
    box-shadow:0 0 0 3px rgba(25,185,107,.13),0 0 12px rgba(25,185,107,.72);
}
.ox-status-light--red.is-on{
    background:#ed4b55;
    box-shadow:0 0 0 3px rgba(237,75,85,.13),0 0 12px rgba(237,75,85,.70);
}
.ox-toolbar-correct{
    margin-left:3px;
    font-size:10.5px!important;
    color:#6d8195!important;
    font-weight:850;
}
.ox-toolbar-correct b{
    display:inline!important;
    margin:0 2px;
    font-size:14px!important;
    color:var(--deep)!important;
}

/* Stopwatch: bottom of the hand is mathematically fixed to clock center */
.ox-stopwatch-hand{
    width:3px!important;
    height:25px!important;
    left:calc(50% - 1.5px)!important;
    top:calc(50% - 25px)!important;
    transform-origin:50% 100%!important;
    transform:rotate(0deg)!important;
    border-radius:3px 3px 1px 1px!important;
    transition:transform .25s linear!important;
}
.ox-stopwatch-center{
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
}

/* Speaker */
.ox-sound-toggle{
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    border:1px solid var(--mid)!important;
    border-radius:10px!important;
    background:#fff!important;
    color:var(--deep)!important;
    font-size:17px!important;
    line-height:1!important;
    cursor:pointer!important;
    box-shadow:0 3px 9px color-mix(in srgb,var(--dark) 8%,transparent)!important;
}
.ox-sound-toggle:hover{background:var(--light)!important}
.ox-sound-toggle.is-muted{
    opacity:.72;
    background:color-mix(in srgb,var(--light) 65%,#fff)!important;
}

/* Result circular graph */
.ox-result-summary{
    grid-column:1/-1;
    display:grid;
    grid-template-columns:132px minmax(0,1fr);
    gap:16px;
    align-items:center;
    margin-top:12px;
    padding:14px;
    border:1px solid color-mix(in srgb,var(--mid) 34%,#d8e3ed);
    border-radius:16px;
    background:linear-gradient(135deg,color-mix(in srgb,var(--light) 70%,#fff),#fff);
}
.ox-result-donut{
    --ox-rate:0;
    position:relative;
    width:116px;
    height:116px;
    margin:auto;
    border-radius:50%;
    background:conic-gradient(
        var(--dark) calc(var(--ox-rate) * 1%),
        color-mix(in srgb,var(--soft) 72%,#e7edf3) 0
    );
    box-shadow:0 7px 18px color-mix(in srgb,var(--deep) 13%,transparent);
}
.ox-result-donut:after{
    content:"";
    position:absolute;
    inset:12px;
    border-radius:50%;
    background:#fff;
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mid) 24%,#e3eaf0);
}
.ox-result-donut-center{
    position:absolute;
    inset:0;
    z-index:2;
    display:grid;
    place-content:center;
    text-align:center;
}
.ox-result-donut-center strong{
    font-size:23px;
    line-height:1;
    color:var(--deep);
}
.ox-result-donut-center small{
    margin-top:5px;
    font-size:9.5px;
    color:#7a8c9f;
    font-weight:900;
}
.ox-result-numbers{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}
.ox-result-numbers>div{
    padding:10px 11px;
    border:1px solid color-mix(in srgb,var(--soft) 76%,#dce5ed);
    border-radius:11px;
    background:#fff;
}
.ox-result-numbers span{
    display:block;
    font-size:9.5px;
    color:#74879b;
    font-weight:850;
}
.ox-result-numbers b{
    display:block;
    margin-top:2px;
    font-size:17px;
    color:var(--deep);
}
.ox-result-numbers .is-correct b{color:#22835a}
.ox-result-numbers .is-wrong b{color:#b84b56}

/* dark mode */
html.bp-dark .ox-answer-status,
body.bp-dark .ox-answer-status,
html[data-theme="dark"] .ox-answer-status,
html.bp-dark .ox-sound-toggle,
body.bp-dark .ox-sound-toggle,
html[data-theme="dark"] .ox-sound-toggle{
    background:#172436!important;
    border-color:#36506d!important;
    color:#eef6ff!important;
}
html.bp-dark .ox-toolbar-correct{color:#aebfd0!important}
html.bp-dark .ox-toolbar-correct b{color:#eef6ff!important}
html.bp-dark .ox-result-summary{
    background:linear-gradient(135deg,color-mix(in srgb,var(--deep) 14%,#172436),#172436)!important;
    border-color:#36506d!important;
}
html.bp-dark .ox-result-donut:after{
    background:#111d2c;
    box-shadow:inset 0 0 0 1px #36506d;
}
html.bp-dark .ox-result-donut-center strong{color:#eef6ff}
html.bp-dark .ox-result-donut-center small{color:#aebfd0}
html.bp-dark .ox-result-numbers>div{background:#111d2c;border-color:#36506d}
html.bp-dark .ox-result-numbers span{color:#aebfd0}
html.bp-dark .ox-result-numbers b{color:#eef6ff}

@media(max-width:779px){
    .ox-answer-status{order:3}
}
@media(max-width:720px){
    .ox-result-summary{grid-template-columns:1fr}
    .ox-result-numbers{grid-template-columns:1fr 1fr}
}


/* =========================================================
   OX v30 - Large paddles / horizontal signal lights /
            exact centered stopwatch sweep
   ========================================================= */

/* 1. O / X paddles: enlarge into the unused lower space */
.ox-answer-zone,
.ox-paddles,
.ox-answer-buttons{
    min-height:178px!important;
}
.ox-paddles{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:54px!important;
    padding:18px 12px 12px!important;
}
.ox-paddle{
    transform-origin:center bottom!important;
}
.ox-paddle .ox-sign{
    width:126px!important;
    height:92px!important;
    min-width:126px!important;
    display:grid!important;
    place-items:center!important;
    font-size:58px!important;
    line-height:1!important;
    border-width:7px!important;
    box-shadow:
        0 8px 0 color-mix(in srgb,var(--deep) 38%,#8b6a2a),
        0 13px 22px rgba(0,0,0,.16)!important;
}
.ox-paddle .ox-handle{
    width:86px!important;
    height:12px!important;
    margin-top:-2px!important;
    border-radius:7px!important;
}
.ox-paddle small{
    margin-top:6px!important;
    font-size:12px!important;
    font-weight:900!important;
}
.ox-paddle.is-raised{
    transform:translateY(-7px) scale(1.03)!important;
}

/* 2. Correct / wrong lights: horizontal, centered, vivid traffic-light colors */
.ox-answer-status{
    min-width:190px!important;
    min-height:46px!important;
    display:grid!important;
    grid-template-columns:48px 48px minmax(72px,auto)!important;
    align-items:center!important;
    justify-content:center!important;
    column-gap:14px!important;
    padding:4px 10px!important;
}
.ox-light-item{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:2px!important;
}
.ox-light-item small{
    font-size:8px!important;
    line-height:1!important;
    font-weight:900!important;
    color:#718398!important;
}
.ox-status-light{
    width:17px!important;
    height:17px!important;
    border:2px solid rgba(255,255,255,.92)!important;
    box-shadow:
        0 0 0 1px rgba(0,0,0,.13),
        inset 0 -2px 3px rgba(0,0,0,.15)!important;
}
.ox-status-light--green{
    background:#21c36f!important;
}
.ox-status-light--red{
    background:#f0525c!important;
}
/* when inactive they remain clearly colored but subdued */
.ox-status-light--green:not(.is-on){
    background:#7dbb98!important;
    opacity:.72!important;
}
.ox-status-light--red:not(.is-on){
    background:#c88a90!important;
    opacity:.72!important;
}
.ox-status-light--green.is-on{
    opacity:1!important;
    background:#00d86f!important;
    box-shadow:
        0 0 0 2px rgba(0,216,111,.15),
        0 0 14px 4px rgba(0,216,111,.58),
        inset 0 -2px 3px rgba(0,0,0,.12)!important;
}
.ox-status-light--red.is-on{
    opacity:1!important;
    background:#ff3344!important;
    box-shadow:
        0 0 0 2px rgba(255,51,68,.15),
        0 0 14px 4px rgba(255,51,68,.55),
        inset 0 -2px 3px rgba(0,0,0,.12)!important;
}
.ox-toolbar-correct{
    align-self:center!important;
    text-align:center!important;
    line-height:1.25!important;
}

/* 3. Stopwatch hand:
      - hand bottom endpoint exactly at clock center
      - JS controls rotate only; never overridden by !important
      - 60 elapsed seconds => 360 degrees */
.ox-stopwatch-hand{
    position:absolute!important;
    width:3px!important;
    height:25px!important;
    left:calc(50% - 1.5px)!important;
    top:calc(50% - 25px)!important;
    transform-origin:50% 100%!important;
    transform:rotate(0deg);
    transition:transform .22s linear!important;
    z-index:5!important;
    background:var(--deep)!important;
}
.ox-stopwatch-center{
    position:absolute!important;
    width:10px!important;
    height:10px!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
    z-index:6!important;
}

/* Make the minute/second hand visually reach the dial but not exceed it */
.ox-stopwatch-hand:after{
    content:"";
    position:absolute;
    width:5px;
    height:5px;
    left:50%;
    top:1px;
    transform:translateX(-50%);
    border-radius:50%;
    background:var(--dark);
}

html.bp-dark .ox-light-item small,
body.bp-dark .ox-light-item small{
    color:#aebfd0!important;
}

@media(max-width:760px){
    .ox-paddles{gap:28px!important}
    .ox-paddle .ox-sign{
        width:108px!important;
        height:82px!important;
        min-width:108px!important;
        font-size:50px!important;
    }
    .ox-answer-status{
        min-width:178px!important;
        grid-template-columns:44px 44px minmax(66px,auto)!important;
        column-gap:10px!important;
    }
}

/* OX v31 final fixes */
.ox-stopwatch-hand{
    --ox-hand-deg:0deg;
    transform:rotate(var(--ox-hand-deg))!important;
    transform-origin:50% 100%!important;
    left:calc(50% - 1.5px)!important;
    top:calc(50% - 25px)!important;
}
.ox-result-host:not(.is-hidden){
    overflow:visible!important;
}
.ox-result-host .ox-result-summary{
    display:grid!important;
    visibility:visible!important;
    opacity:1!important;
}
.ox-result-donut{
    background:conic-gradient(
        var(--dark) calc(var(--ox-rate,0) * 1%),
        color-mix(in srgb,var(--soft) 72%,#e7edf3) 0
    )!important;
}


/* =========================================================
   OX v35 - Bible Quiz style isolated result modal
   ========================================================= */
.oxq-result-modal{
    position:fixed;
    inset:0;
    z-index:2147483000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
}
.oxq-result-modal.is-show{display:flex}
.oxq-result-backdrop{
    position:absolute;
    inset:0;
    background:rgba(9,20,35,.54);
    backdrop-filter:blur(5px);
}
.oxq-result-card{
    position:relative;
    z-index:1;
    width:min(430px,calc(100% - 24px));
    padding:24px;
    border:1px solid color-mix(in srgb,var(--mid) 45%,#d6e0ea);
    border-radius:22px;
    background:#fff;
    box-shadow:0 28px 80px rgba(16,38,66,.28);
    text-align:center;
    color:var(--ink);
}
.oxq-result-close{
    position:absolute;
    right:13px;
    top:10px;
    width:32px;
    height:32px;
    border:0;
    background:transparent;
    color:#8190a1;
    font-size:25px;
    cursor:pointer;
}
.oxq-result-kicker{
    display:block;
    color:var(--dark);
    font-size:10px;
    font-weight:950;
    letter-spacing:.12em;
}
.oxq-result-card h3{
    margin:5px 0 13px;
    font-size:23px;
    color:var(--deep);
}
.oxq-result-ring-wrap{
    position:relative;
    width:170px;
    height:170px;
    margin:0 auto 12px;
}
.oxq-result-ring{
    width:100%;
    height:100%;
    transform:rotate(-90deg);
}
.oxq-result-ring-bg,
.oxq-result-ring-progress{
    fill:none;
    stroke-width:12;
}
.oxq-result-ring-bg{
    stroke:color-mix(in srgb,var(--soft) 80%,#e7edf4);
}
.oxq-result-ring-progress{
    stroke:var(--dark);
    stroke-linecap:round;
    transition:stroke-dashoffset 1.45s cubic-bezier(.22,.8,.28,1);
}
.oxq-result-ring-text{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}
.oxq-result-ring-text strong{
    font-size:32px;
    line-height:1;
    color:var(--deep);
}
.oxq-result-ring-text span{
    margin-top:6px;
    color:var(--dark);
    font-size:14px;
    font-weight:900;
}
.oxq-result-message{
    margin:0 auto 14px;
    color:#65788d;
    font-size:12px;
    line-height:1.65;
}
.oxq-result-retry-box{
    padding:11px 12px;
    border-radius:12px;
    background:color-mix(in srgb,var(--light) 68%,#fff);
    border:1px solid color-mix(in srgb,var(--mid) 28%,#e2e8ef);
}
.oxq-result-retry-box strong{
    display:block;
    color:var(--deep);
    font-size:13px;
}
.oxq-result-retry-box span{
    display:block;
    margin-top:4px;
    color:#7d8c9c;
    font-size:10.5px;
    line-height:1.45;
}
.oxq-result-actions{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:14px;
}
.oxq-primary-btn,
.oxq-secondary-btn{
    border-radius:11px;
    padding:10px 14px;
    font-size:12px;
    font-weight:900;
    cursor:pointer;
}
.oxq-primary-btn{
    border:0;
    background:linear-gradient(135deg,var(--dark),var(--deep));
    color:#fff;
}
.oxq-primary-btn:disabled{
    opacity:.45;
    cursor:not-allowed;
}
.oxq-secondary-btn{
    border:1px solid color-mix(in srgb,var(--mid) 45%,#d9e2eb);
    background:#fff;
    color:var(--deep);
}

/* Dark mode - same structure as Bible Quiz */
html.bp-dark .oxq-result-card,
body.bp-dark .oxq-result-card,
html[data-theme="dark"] .oxq-result-card{
    background:#121f2e!important;
    border-color:#3b5873!important;
    color:#e8f1fa!important;
}
html.bp-dark .oxq-result-card h3,
html.bp-dark .oxq-result-ring-text strong,
html.bp-dark .oxq-result-retry-box strong,
body.bp-dark .oxq-result-card h3,
body.bp-dark .oxq-result-ring-text strong,
body.bp-dark .oxq-result-retry-box strong,
html[data-theme="dark"] .oxq-result-card h3,
html[data-theme="dark"] .oxq-result-ring-text strong,
html[data-theme="dark"] .oxq-result-retry-box strong{
    color:#eef6ff!important;
}
html.bp-dark .oxq-result-message,
html.bp-dark .oxq-result-retry-box span,
body.bp-dark .oxq-result-message,
body.bp-dark .oxq-result-retry-box span,
html[data-theme="dark"] .oxq-result-message,
html[data-theme="dark"] .oxq-result-retry-box span{
    color:#9fb3c7!important;
}
html.bp-dark .oxq-result-ring-bg,
body.bp-dark .oxq-result-ring-bg,
html[data-theme="dark"] .oxq-result-ring-bg{
    stroke:#263b50!important;
}
html.bp-dark .oxq-result-ring-progress,
body.bp-dark .oxq-result-ring-progress,
html[data-theme="dark"] .oxq-result-ring-progress{
    stroke:var(--mid)!important;
}
html.bp-dark .oxq-result-retry-box,
body.bp-dark .oxq-result-retry-box,
html[data-theme="dark"] .oxq-result-retry-box{
    background:#17283a!important;
    border-color:#314d66!important;
}
html.bp-dark .oxq-secondary-btn,
body.bp-dark .oxq-secondary-btn,
html[data-theme="dark"] .oxq-secondary-btn{
    background:#17283a!important;
    border-color:#3a5874!important;
    color:#dbe8f3!important;
}

@media(max-width:720px){
    .oxq-result-actions{flex-direction:column}
    .oxq-result-actions button{width:100%}
}


/* =========================================================
   OX v37 - dashboard safe width fix
   기존 3칸 구조(브랜드 / 4개 통계 / 회원)를 유지합니다.
   ========================================================= */
.ox-dashboard{
    column-gap:10px!important;
}
.ox-history{
    min-width:0!important;
}
.ox-history .ox-stat-card{
    min-width:0!important;
}
.ox-user-actions{
    min-width:142px!important;
    width:100%!important;
    padding:4px 6px!important;
    box-sizing:border-box!important;
}
.ox-user-actions>span{
    display:block!important;
    width:100%!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    text-align:center!important;
    line-height:1.3!important;
}
/* 영문+숫자 12자리 + '님' 기준 여유 폭 */
@media(min-width:951px){
    .ox-dashboard{
        grid-template-columns:minmax(290px,1.15fr) minmax(0,2.55fr) minmax(142px,156px)!important;
    }
}


/* =========================================================
   OX v39 - header alignment polish
   ========================================================= */

/* 타이틀 영역은 약간 줄이고 통계 영역을 오른쪽으로 이동 */
@media(min-width:951px){
    .ox-dashboard{
        grid-template-columns:minmax(270px,1.05fr) minmax(0,2.65fr) minmax(150px,162px)!important;
        column-gap:12px!important;
    }
}

/* 통계 4개 카드는 균등하게, 좌측으로 뭉치지 않게 */
.ox-history{
    width:100%!important;
    min-width:0!important;
    justify-self:stretch!important;
}
.ox-history-grid,
.ox-history{
    column-gap:8px!important;
}

/* 회원 아이디 + 씨앗 아이콘은 반드시 한 줄 */
.ox-user-actions{
    min-width:150px!important;
    width:100%!important;
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-rows:auto auto!important;
    justify-items:center!important;
    align-content:center!important;
    gap:7px!important;
    padding:5px 7px!important;
}
.ox-user-actions>span{
    width:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
    font-size:11.5px!important;
    font-weight:900!important;
    line-height:1.15!important;
}
.ox-user-actions>span i,
.ox-user-actions>span svg,
.ox-user-actions>span .fa,
.ox-user-actions>span .fas,
.ox-user-actions>span .far{
    flex:0 0 auto!important;
    vertical-align:middle!important;
}

/* 홈 버튼: 깔끔한 라인 홈 아이콘 + 한 단계 굵은 테두리 */
.ox-home{
    width:42px!important;
    height:42px!important;
    display:grid!important;
    place-items:center!important;
    padding:0!important;
    border:2px solid var(--mid)!important;
    border-radius:12px!important;
    background:color-mix(in srgb,var(--light) 68%,#fff)!important;
    color:var(--deep)!important;
    box-shadow:0 4px 11px color-mix(in srgb,var(--dark) 9%,transparent)!important;
    transition:transform .16s ease,background .16s ease,border-color .16s ease!important;
}
.ox-home:hover{
    transform:translateY(-1px)!important;
    background:var(--light)!important;
    border-color:var(--dark)!important;
}
.ox-home-icon{
    width:20px!important;
    height:20px!important;
    display:block!important;
}

/* 다크모드 */
html.bp-dark .ox-home,
body.bp-dark .ox-home,
html[data-theme="dark"] .ox-home{
    background:#172436!important;
    border-color:color-mix(in srgb,var(--mid) 70%,#526b84)!important;
    color:#eef6ff!important;
}


/* =========================================================
   OX v41 - based on v39
   통계박스 크기/높이는 v39 그대로 유지
   ========================================================= */

/* 한글 제목 아래에 Bible OX Quiz를 한 줄로 표시 */
.ox-brand h2,
.ox-brand .ox-title,
.ox-brand-title{
    line-height:1.08!important;
}
.ox-brand h2 small,
.ox-brand .ox-title small,
.ox-brand-title small{
    display:block!important;
    width:max-content!important;
    max-width:100%!important;
    margin-top:3px!important;
    white-space:nowrap!important;
    line-height:1.15!important;
    font-size:10px!important;
}

/* 회원명 폰트는 v40에서 적당했던 크기만 가져옴 */
.ox-user-actions>span{
    font-size:13px!important;
    font-weight:950!important;
    letter-spacing:-.01em!important;
    white-space:nowrap!important;
    line-height:1!important;
}

/* 기존 씨앗 아이콘과 아이디+님을 정확히 한 줄 중앙 정렬 */
.ox-user-actions>span{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
}
.ox-user-actions>span::before{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    line-height:1!important;
    vertical-align:middle!important;
    transform:translateY(0)!important;
}
.ox-user-actions>span i,
.ox-user-actions>span svg,
.ox-user-actions>span .fa,
.ox-user-actions>span .fas,
.ox-user-actions>span .far{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    align-self:center!important;
    flex:0 0 auto!important;
    line-height:1!important;
    vertical-align:middle!important;
    margin:0!important;
    transform:none!important;
}

/* v39 홈 버튼과 크기/외곽선은 그대로 둠 */