.jg-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}
.jg-page[data-theme=red]{--light:#ffe7eb;--soft:#ffcbd3;--mid:#ee7181;--dark:#bf3f58;--deep:#78283b;--ink:#4a2230}.jg-page[data-theme=orange]{--light:#fff0df;--soft:#ffd9af;--mid:#f59a47;--dark:#c96122;--deep:#7b3913;--ink:#4c2a16}.jg-page[data-theme=yellow]{--light:#fff8d8;--soft:#ffe99b;--mid:#eac246;--dark:#a97d17;--deep:#674a0d;--ink:#473913}.jg-page[data-theme=green]{--light:#eafaf0;--soft:#c9efd7;--mid:#61c287;--dark:#2b895a;--deep:#175b3b;--ink:#173a2b}.jg-page[data-theme=blue]{--light:#edf7ff;--soft:#cde8ff;--mid:#68afe8;--dark:#337ab8;--deep:#1b4f81;--ink:#183652}.jg-page[data-theme=indigo]{--light:#f1f2ff;--soft:#d9ddff;--mid:#8994dc;--dark:#5662ae;--deep:#343d79;--ink:#292f55}.jg-page[data-theme=purple]{--light:#faf1ff;--soft:#ead5ff;--mid:#b07bdb;--dark:#7948aa;--deep:#4e2d77;--ink:#38224a}
.jg-page *, .jg-page *:before,.jg-page *:after{box-sizing:border-box}
.jg-dashboard{display:grid;grid-template-columns:minmax(300px,1.25fr) minmax(470px,2.3fr) 80px;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)}
.jg-brand{display:flex;gap:12px;align-items:center;min-width:0}.jg-title-logo{position:relative;width:80px;height:80px;flex:0 0 80px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#fff,color-mix(in srgb,var(--light) 70%,#fff));border:2px solid color-mix(in srgb,var(--mid) 55%,#fff);box-shadow:0 6px 16px color-mix(in srgb,var(--deep) 14%,transparent),inset 0 1px 0 rgba(255,255,255,.96);overflow:visible}.jg-title-logo:after{content:"";position:absolute;inset:5px;border-radius:50%;border:1px solid color-mix(in srgb,var(--soft) 72%,#fff);pointer-events:none}.jg-logo-svg{display:block;width:68px;height:68px;overflow:visible}.jg-logo-disc{fill:color-mix(in srgb,var(--light) 56%,#fff);stroke:color-mix(in srgb,var(--soft) 58%,#fff);stroke-width:1}.jg-logo-piece{stroke:rgba(255,255,255,.9);stroke-width:1.2;stroke-linejoin:round}.jg-logo-piece-a{fill:var(--dark)}.jg-logo-piece-b{fill:color-mix(in srgb,var(--mid) 55%,#ffd45d)}.jg-logo-piece-c{fill:color-mix(in srgb,var(--dark) 62%,#69d45f)}.jg-logo-gloss{fill:url(#jgLogoHi);opacity:.55;pointer-events:none}.jg-logo-sparkles{fill:color-mix(in srgb,var(--mid) 70%,#fff)}.jg-brand-copy{min-width:0}.jg-kicker{font-size:9.5px;letter-spacing:.14em;color:var(--dark);font-weight:900}.jg-brand h2{margin:2px 0;font-size:21px;color:var(--deep);white-space:nowrap}.jg-brand h2 small{font-size:.5em;color:#60758c}.jg-brand p{margin:0;font-size:10.5px;color:#6f8298;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jg-history{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.jg-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)}.jg-stat-card b{font-size:16px;color:var(--deep)}.jg-stat-card span{font-size:10px;color:#6b7e91}.jg-user-actions{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:11px;font-weight:850;color:var(--deep)}.jg-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}.jg-content-ad{margin:16px 0}
.jg-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)}.jg-toolbar strong{display:block;font-size:16px;color:var(--deep)}.jg-toolbar span{display:block;font-size:10.5px;color:#71859c}.jg-toolbar-right{display:flex;align-items:center;gap:8px}.jg-info-chip{padding:8px 10px!important;border-radius:9px;background:#fff;border:1px solid var(--soft);font-weight:900;color:var(--deep)!important}.jg-info-chip b{font-size:14px}.jg-toolbar button{border:1px solid var(--dark);background:var(--dark);color:#fff;border-radius:9px;padding:9px 13px;font-weight:900;cursor:pointer}
.jg-statusbar{display:grid;grid-template-columns:1fr 1fr 1fr 1fr auto;gap:8px;margin-bottom:12px}.jg-statusbar>div:not(.jg-controls){padding:9px 11px;border:1px solid var(--soft);border-radius:12px;background:linear-gradient(145deg,#fff,var(--light))}.jg-statusbar span{display:block;font-size:10px;color:#6c8094;font-weight:800}.jg-statusbar b{font-size:16px;color:var(--deep)}.jg-statusbar .jg-point{color:#e98500}.jg-controls{display:flex;align-items:center;gap:7px}.jg-controls button{width:42px;height:42px;border:0;border-radius:11px;background:var(--deep);color:#fff;font-size:19px;cursor:pointer}
.jg-workspace{display:flex;flex-direction:column;gap:12px}.jg-stage{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:14px;min-height:535px;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)}
.jg-game-area{min-width:0;display:flex;flex-direction:column}.jg-field{position:relative;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:12px;height:455px;min-width:0}.jg-board-wrap,.jg-tray{position:relative;min-width:0;border-radius:16px;overflow:hidden}.jg-board-wrap{padding:52px 10px 10px;background:linear-gradient(180deg,var(--deep),color-mix(in srgb,var(--deep) 82%,#09192c));border:1px solid var(--soft);display:flex;align-items:center;justify-content:center}.jg-panel-label,.jg-tray-title{position:absolute;z-index:3;left:10px;right:10px;top:10px;padding:7px 9px;border-radius:10px;background:rgba(10,35,65,.74);color:#fff}.jg-panel-label strong,.jg-tray-title span{display:block;font-size:12px;font-weight:900}.jg-panel-label span,.jg-tray-title small{display:block;font-size:9.5px;opacity:.78}
.jg-board{position:relative;width:100%;max-width:100%;aspect-ratio:4/3;background:#142638;border:3px solid #fff;border-radius:10px;box-shadow:0 0 0 3px var(--mid),0 12px 25px rgba(0,0,0,.22);overflow:hidden}.jg-board img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .35s}.jg-board.is-playing img{opacity:0!important}.jg-board.is-complete img{opacity:1!important}.jg-board-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.28) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.28) 1px,transparent 1px);background-size:20% 20%}.jg-board.is-playing .jg-board-grid{opacity:.15}
.jg-count-bubble{position:absolute;left:50%;top:50%;z-index:8;transform:translate(-50%,-50%) scale(.82);opacity:0;min-width:190px;padding:15px 20px;border:3px solid var(--mid);border-radius:28px;background:#fff;text-align:center;box-shadow:0 12px 32px rgba(0,0,0,.2);transition:.2s}.jg-count-bubble.show{opacity:1;transform:translate(-50%,-50%) scale(1)}.jg-count-bubble b{display:block;font-size:46px;line-height:1;color:#f06f3a}.jg-count-bubble span{font-size:12px;font-weight:900;color:var(--ink)}
.jg-tray{padding-top:48px;background:linear-gradient(160deg,color-mix(in srgb,var(--dark) 92%,#17365c),var(--deep));border:2px dashed color-mix(in srgb,var(--mid) 62%,#fff)}.jg-tray:after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.11) 1px,transparent 1px);background-size:17px 17px;pointer-events:none}.jg-tray-empty{position:absolute;inset:45px 0 0;display:grid;place-items:center;padding:35px;color:#fff;font-size:11px;font-weight:800;text-align:center;opacity:.65}.jg-pieces-layer{position:absolute;inset:0;z-index:10;pointer-events:none;overflow:visible}.jg-piece{position:absolute;touch-action:none;cursor:grab;pointer-events:auto;filter:drop-shadow(0 4px 4px rgba(0,0,0,.36));transition:filter .15s}.jg-piece:active{cursor:grabbing;filter:drop-shadow(0 8px 6px rgba(0,0,0,.44))}.jg-piece.locked{pointer-events:none;filter:none}.jg-piece.snap{animation:jgSnap .22s ease-out}.jg-piece.bump{animation:jgBump .25s ease}@keyframes jgSnap{50%{transform:scale(1.08)}}@keyframes jgBump{50%{transform:rotate(3deg)}}
.jg-tip{margin-top:10px;padding:9px 11px;border:1px solid var(--soft);border-radius:11px;background:#fff;color:#61778d;font-size:11px;font-weight:800}.jg-tip b{color:var(--deep);margin-right:7px}
.jg-side{display:flex;flex-direction:column;gap:10px}.jg-side>div{padding:12px;border:1px solid var(--soft);border-radius:16px;background:linear-gradient(145deg,#fff,var(--light))}.jg-side h3{margin:0 0 9px;font-size:13px;color:var(--deep)}.jg-level{position:relative;width:100%;display:grid;grid-template-columns:1fr auto;gap:2px;text-align:left;border:2px solid transparent;border-radius:12px;padding:9px 10px;margin:6px 0;background:#fff;color:#24364b;cursor:pointer}.jg-level span{font-size:12px;font-weight:900}.jg-level b{grid-column:1;font-size:9.5px;color:#74879b}.jg-level em{grid-row:1/3;grid-column:2;align-self:center;font-style:normal;font-size:12px;font-weight:900;color:var(--dark)}.jg-level.is-active{border-color:var(--mid);box-shadow:0 0 0 2px color-mix(in srgb,var(--mid) 16%,transparent)}
.jg-record-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.jg-record-grid div{padding:8px;border-radius:10px;background:#fff;border:1px solid color-mix(in srgb,var(--soft) 70%,#fff)}.jg-record-grid span{display:block;font-size:9.5px;color:#72869a}.jg-record-grid b{font-size:14px;color:var(--deep)}
.jg-bottom{display:block}.jg-help{padding:13px 15px;border:1px solid var(--soft);border-radius:15px;background:linear-gradient(145deg,#fff,var(--light))}.jg-help>strong{font-size:14px;color:var(--deep)}.jg-help-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;margin-top:8px}.jg-help-grid p{margin:0;font-size:11.5px;line-height:1.65;color:#647a90}.jg-help-grid b{color:var(--dark);margin-right:4px}
.jg-modal{position:fixed;inset:0;background:rgba(3,15,30,.74);z-index:9999;display:none;place-items:center;padding:18px}.jg-modal.show{display:grid}.jg-modal-card{position:relative;width:min(560px,96vw);max-height:94vh;overflow:auto;background:#fff;border-radius:24px;padding:22px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.38)}.jg-trophy{font-size:56px;animation:jgFloat 1s ease-in-out infinite alternate}@keyframes jgFloat{to{transform:translateY(-7px) rotate(4deg)}}.jg-modal h2{margin:0;color:var(--dark);font-size:27px}.jg-modal h3{margin:10px 0 3px}.jg-modal p{margin:0 0 10px;color:#73869a;font-weight:700}.jg-modal img{width:min(340px,85%);aspect-ratio:4/3;object-fit:cover;border-radius:16px;border:4px solid var(--soft);box-shadow:0 9px 22px rgba(0,0,0,.15)}.jg-result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:13px 0}.jg-result-stats div{background:var(--light);padding:10px;border-radius:12px}.jg-result-stats span{display:block;color:#71859a;font-size:10px}.jg-result-stats b{font-size:18px;color:var(--deep)}.jg-result-stats div:last-child b{color:#e98500}.jg-modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.jg-modal-actions button{border:0;border-radius:10px;padding:10px 12px;background:var(--dark);color:#fff;font-weight:900;cursor:pointer}.jg-modal-actions button:nth-child(3){grid-column:1/-1;background:#6e8296}.jg-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}.jg-confetti i{position:absolute;top:-20px;width:10px;height:18px;border-radius:2px;animation:jgConfetti 2.8s linear forwards}@keyframes jgConfetti{to{transform:translate(var(--drift),650px) rotate(720deg);opacity:.1}}
html.bp-dark .jg-page{color:#dce8f3}
html.bp-dark .jg-dashboard,html.bp-dark .jg-toolbar,html.bp-dark .jg-stage{background:linear-gradient(145deg,color-mix(in srgb,var(--deep) 18%,#101b2a),#111d2c 55%,color-mix(in srgb,var(--mid) 11%,#111d2c))!important;border-color:color-mix(in srgb,var(--mid) 34%,#36506d)!important;color:#dce8f3!important}
html.bp-dark .jg-stat-card,html.bp-dark .jg-statusbar>div:not(.jg-controls),html.bp-dark .jg-side>div,html.bp-dark .jg-help,html.bp-dark .jg-tip{background:#172436!important;border-color:#36506d!important;color:#dce8f3!important;box-shadow:none!important}
html.bp-dark .jg-level,html.bp-dark .jg-record-grid div,html.bp-dark .jg-info-chip{background:#111d2c!important;border-color:#36506d!important;color:#eaf3fb!important}
html.bp-dark .jg-brand h2,html.bp-dark .jg-toolbar strong,html.bp-dark .jg-statusbar b,html.bp-dark .jg-side h3,html.bp-dark .jg-record-grid b,html.bp-dark .jg-help>strong{color:#eef6ff!important}
html.bp-dark .jg-brand p,html.bp-dark .jg-toolbar span,html.bp-dark .jg-statusbar span,html.bp-dark .jg-record-grid span,html.bp-dark .jg-help-grid p,html.bp-dark .jg-tip{color:#aebfd0!important}
html.bp-dark .jg-home{background:#172436!important;border-color:#36506d!important;color:#eef6ff!important}
html.bp-dark .jg-board-wrap{background:linear-gradient(180deg,#0d1a2a,#08111d)!important;border-color:#36506d!important}
html.bp-dark .jg-tray{background:linear-gradient(160deg,color-mix(in srgb,var(--dark) 55%,#101824),#0b1422)!important;border-color:color-mix(in srgb,var(--mid) 45%,#64758a)!important}
html.bp-dark .jg-panel-label,html.bp-dark .jg-tray-title{background:rgba(4,13,25,.82)!important}
html.bp-dark .jg-count-bubble{background:#172436!important;border-color:var(--mid)!important}
html.bp-dark .jg-count-bubble span{color:#eef6ff!important}
html.bp-dark .jg-board img,html.bp-dark .jg-piece{filter:brightness(.72) saturate(.82) contrast(1.05)!important}
html.bp-dark .jg-piece.locked{filter:brightness(.72) saturate(.82) contrast(1.05)!important}
html.bp-dark .jg-modal-card{background:#172436!important;color:#dce8f3!important}
html.bp-dark .jg-modal h2,html.bp-dark .jg-modal h3{color:#eef6ff!important}
html.bp-dark .jg-modal p{color:#aebfd0!important}
html.bp-dark .jg-modal img{filter:brightness(.72) saturate(.82) contrast(1.05)!important;border-color:#36506d!important}
html.bp-dark .jg-result-stats div{background:#111d2c!important}
html.bp-dark .jg-result-stats span{color:#aebfd0!important}
html.bp-dark .jg-result-stats b{color:#eef6ff!important}
html.bp-dark .jg-result-stats div:last-child b{color:#ffb347!important}
@media(max-width:1000px){.jg-dashboard{grid-template-columns:1fr}.jg-user-actions{flex-direction:row;justify-content:flex-end}.jg-stage{grid-template-columns:1fr}.jg-side{display:grid;grid-template-columns:1.2fr 1fr 1fr}.jg-field{height:500px}}
@media(max-width:720px){.jg-page{width:calc(100% - 20px)}.jg-history{grid-template-columns:repeat(2,1fr)}.jg-brand h2{white-space:normal}.jg-brand p{display:none}.jg-toolbar{align-items:flex-start;flex-direction:column}.jg-statusbar{grid-template-columns:1fr 1fr}.jg-controls{justify-content:flex-end}.jg-field{display:block;height:900px}.jg-board-wrap{height:400px}.jg-tray{height:488px;margin-top:12px}.jg-pieces-layer{height:900px}.jg-side{grid-template-columns:1fr}.jg-help-grid{grid-template-columns:1fr}.jg-modal-actions{grid-template-columns:1fr}.jg-modal-actions button:nth-child(3){grid-column:1}.jg-result-stats{grid-template-columns:1fr 1fr}.jg-result-stats div:last-child{grid-column:1/-1}}

/* j5: circular theme-aware jigsaw illustration logo */
html.bp-dark .jg-title-logo{background:linear-gradient(145deg,#172436,#101b2a)!important;border-color:color-mix(in srgb,var(--mid) 55%,#36506d)!important;box-shadow:0 7px 18px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.06)!important}
html.bp-dark .jg-title-logo:after{border-color:color-mix(in srgb,var(--mid) 28%,#36506d)!important}
html.bp-dark .jg-logo-disc{fill:#111d2c;stroke:#36506d}
html.bp-dark .jg-logo-piece-a{fill:color-mix(in srgb,var(--dark) 78%,#aab8ff)}
html.bp-dark .jg-logo-piece-b{fill:color-mix(in srgb,var(--mid) 62%,#ffc557)}
html.bp-dark .jg-logo-piece-c{fill:color-mix(in srgb,var(--dark) 54%,#60cf77)}
html.bp-dark .jg-logo-gloss{opacity:.34}
html.bp-dark .jg-logo-sparkles{fill:color-mix(in srgb,var(--mid) 78%,#fff)}
@media(max-width:720px){.jg-title-logo{width:68px;height:68px;flex-basis:68px}.jg-logo-svg{width:58px;height:58px}}

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

/* v6 color image icons */

.jg-stat-icon{width:40px!important;height:40px!important;background:transparent!important;display:grid!important;place-items:center!important}
.jg-stat-icon img{display:block!important;width:38px!important;height:38px!important;object-fit:contain!important;max-width:none!important}
.jg-stat-icon svg{display:none!important}

/* v7: Jigsaw stat text one step up */
.jg-stat-copy>span{font-size:11px!important;line-height:1.3!important}
.jg-stat-copy>b{font-size:15px!important;line-height:1.2!important}


/* ==========================================================
   BiblePang Jigsaw — 그림 속 성경 이야기
   기존 '나의 직소 기록' 박스를 대체합니다.
   ========================================================== */
.jg-story-card{
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:13px!important;
  background:
    linear-gradient(145deg,#fff 0%,color-mix(in srgb,var(--light) 78%,#fff) 58%,var(--light) 100%)!important;
  border-color:color-mix(in srgb,var(--mid) 42%,var(--soft))!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 5px 14px color-mix(in srgb,var(--dark) 8%,transparent);
}
.jg-story-card h3{
  display:flex;
  align-items:center;
  gap:6px;
  margin:0 0 2px!important;
  font-size:13px!important;
  color:var(--deep)!important;
}
.jg-story-icon{font-size:16px;line-height:1}
.jg-story-title{
  display:block;
  font-size:12px;
  line-height:1.35;
  font-weight:900;
  color:var(--dark);
}
.jg-story-text{
  margin:0;
  font-size:10.5px;
  line-height:1.62;
  font-weight:650;
  color:#4f6579;
  word-break:keep-all;
  overflow-wrap:anywhere;
  max-height:124px;
  overflow:auto;
  padding-right:4px;
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--mid) 52%,transparent) transparent;
}
.jg-story-reference{
  margin-top:auto;
  padding-top:6px;
  border-top:1px dashed color-mix(in srgb,var(--mid) 35%,var(--soft));
  font-size:9.5px;
  line-height:1.35;
  font-weight:850;
  color:var(--deep);
  text-align:right;
}
.jg-story-text::-webkit-scrollbar{width:5px}
.jg-story-text::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--mid) 48%,transparent);
  border-radius:99px;
}

/* 다크모드 */
html.bp-dark .jg-story-card,
body.bp-dark .jg-story-card,
html[data-theme="dark"] .jg-story-card{
  background:linear-gradient(145deg,#172436,#132130)!important;
  border-color:#36506d!important;
  box-shadow:none!important;
}
html.bp-dark .jg-story-card h3,
html.bp-dark .jg-story-title,
body.bp-dark .jg-story-card h3,
body.bp-dark .jg-story-title,
html[data-theme="dark"] .jg-story-card h3,
html[data-theme="dark"] .jg-story-title{
  color:#eef6ff!important;
}
html.bp-dark .jg-story-text,
body.bp-dark .jg-story-text,
html[data-theme="dark"] .jg-story-text{
  color:#c1d0dd!important;
}
html.bp-dark .jg-story-reference,
body.bp-dark .jg-story-reference,
html[data-theme="dark"] .jg-story-reference{
  color:color-mix(in srgb,var(--mid) 72%,#eef6ff)!important;
  border-top-color:#36506d!important;
}

@media(max-width:1000px){
  .jg-story-text{max-height:110px}
}
@media(max-width:720px){
  .jg-story-text{max-height:none}
}


/* =========================================================
   v24 - Large Jigsaw Workspace
   난이도: 게임판 상단 전체폭
   게임판 : 조각놀이터 = 6 : 4
   하단: 성경이야기(좌) + 게임방법(우)
   ========================================================= */
.jg-page{
    width:min(1360px,calc(100% - 40px))!important;
}
.jg-level-strip{
    display:grid;
    grid-template-columns:minmax(210px,.7fr) minmax(0,2.3fr);
    gap:16px;
    align-items:center;
    padding:12px 14px;
    border:1px solid var(--soft);
    border-radius:16px;
    background:linear-gradient(120deg,var(--light),#fff 48%,color-mix(in srgb,var(--soft) 60%,#fff));
    box-shadow:0 6px 18px color-mix(in srgb,var(--dark) 8%,transparent);
}
.jg-level-strip-title strong{display:block;color:var(--deep);font-size:14px}
.jg-level-strip-title span{display:block;margin-top:3px;color:#74879b;font-size:10px}
.jg-level-strip-buttons{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:9px;
}
.jg-level-strip .jg-level{
    margin:0!important;
    min-height:56px;
    grid-template-columns:1fr auto;
    padding:8px 11px;
    border-width:1.5px;
}
.jg-level-strip .jg-level span{font-size:12px}
.jg-level-strip .jg-level b{font-size:9.5px}
.jg-level-strip .jg-level em{font-size:12px}

/* 우측 사이드 제거 후 게임영역 전체 폭 사용 */
.jg-stage{
    display:block!important;
    min-height:0!important;
    padding:16px!important;
}
.jg-game-area{width:100%}

/* 6 : 4 */
.jg-field{
    grid-template-columns:minmax(0,3fr) minmax(0,2fr)!important;
    gap:15px!important;
    height:610px!important;
}
.jg-board-wrap{
    padding:54px 14px 14px!important;
}
.jg-tray{
    padding-top:52px!important;
}
.jg-board{
    width:min(100%,720px)!important;
    max-height:525px;
    margin:auto;
}
.jg-panel-label,.jg-tray-title{
    left:12px!important;
    right:12px!important;
    top:11px!important;
    padding:8px 10px!important;
}
.jg-panel-label strong,.jg-tray-title span{font-size:13px!important}
.jg-panel-label span,.jg-tray-title small{font-size:10px!important}

/* 하단 두 박스: 같은 크기/디자인 */
.jg-bottom-info{
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:12px;
}
.jg-bottom-info .jg-story-card,
.jg-bottom-info .jg-help{
    min-width:0;
    min-height:178px;
    padding:14px 16px!important;
    border:1px solid var(--soft)!important;
    border-radius:15px!important;
    background:linear-gradient(145deg,#fff,var(--light))!important;
    box-shadow:0 5px 16px color-mix(in srgb,var(--dark) 7%,transparent);
}
.jg-bottom-info .jg-story-card h3{
    margin:0 0 8px;
    font-size:14px;
    color:var(--deep);
}
.jg-bottom-info .jg-story-title{
    display:block;
    margin-bottom:5px;
}
.jg-bottom-info .jg-story-text{
    max-height:78px;
    overflow:auto;
}
.jg-bottom-info .jg-story-reference{margin-top:7px}
.jg-bottom-info .jg-help-grid{
    grid-template-columns:1fr!important;
    gap:5px!important;
}
.jg-bottom-info .jg-help-grid p{
    line-height:1.55!important;
}

/* dark mode */
html.bp-dark .jg-level-strip,
body.bp-dark .jg-level-strip,
html[data-theme="dark"] .jg-level-strip,
html.bp-dark .jg-bottom-info .jg-story-card,
html.bp-dark .jg-bottom-info .jg-help,
body.bp-dark .jg-bottom-info .jg-story-card,
body.bp-dark .jg-bottom-info .jg-help{
    background:linear-gradient(145deg,color-mix(in srgb,var(--deep) 16%,#101b2a),#111d2c)!important;
    border-color:#36506d!important;
    color:#dce8f3!important;
}
html.bp-dark .jg-level-strip-title strong,
html.bp-dark .jg-bottom-info .jg-story-card h3,
html.bp-dark .jg-bottom-info .jg-story-title{
    color:#eef6ff!important;
}
html.bp-dark .jg-level-strip-title span,
html.bp-dark .jg-bottom-info .jg-story-text{
    color:#aebfd0!important;
}

/* tablet */
@media(max-width:1000px){
    .jg-page{width:calc(100% - 24px)!important}
    .jg-level-strip{grid-template-columns:1fr}
    .jg-field{height:560px!important}
    .jg-bottom-info{grid-template-columns:1fr 1fr!important}
}
/* mobile */
@media(max-width:720px){
    .jg-level-strip-buttons{grid-template-columns:1fr}
    .jg-level-strip .jg-level{min-height:48px}
    .jg-field{display:block!important;height:1000px!important}
    .jg-board-wrap{height:520px!important}
    .jg-tray{height:465px!important;margin-top:12px}
    .jg-pieces-layer{height:1000px!important}
    .jg-bottom-info{grid-template-columns:1fr!important}
}