/* 진법 알기(learn.js) — 왼쪽(세로 화면·큰 수는 위) 자리판 · 가운데 3D 젤리 집 · 아래 조작 막대 · 오른쪽 확대/축소.
   토큰은 DESIGN.md(진법 4색 · 값 색 · 잉크). 반경은 11 · 18 · 끝까지 둥글게만. 글자 16px 이상, 숫자는 고정폭. */
#lc { position: fixed; inset: 0; width: 100vw; height: 100dvh; display: block; touch-action: none; z-index: 0; filter: saturate(1.08) contrast(1.04); }
#lhud { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
#learn > :not(#lc):not(#lhud) { z-index: 2; }
.ln-top { position: absolute; left: 0; right: 0; top: 0; padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left)); pointer-events: none; }
.ln-top > * { pointer-events: auto; }
.ln-title { gap: 8px; min-height: 56px; padding: 6px 20px 6px 10px; border-radius: 999px; background: rgba(255, 253, 249, .92); font-size: 26px; }

/* 자리판 카드 */
.ln-panel.hud.kit { position: absolute; left: max(16px, env(safe-area-inset-left)); top: 88px; width: min(440px, 38vw); display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 18px;
  border-radius: 18px; background: rgba(255, 253, 249, .96); box-shadow: var(--shadow); color: var(--ink); white-space: normal; font-variant-numeric: tabular-nums; }
.ln-rule { display: flex; justify-content: center; margin: 0; }
.ln-rule .rl { display: inline-flex; align-items: center; gap: 10px; font: 600 28px var(--num); }
.ln-rule svg.icon { margin: 0; }
.pv { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 10px 8px; justify-items: center; }
.pv.many { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
.pvc { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; min-width: 0; border-radius: 11px; }
/* 지붕: 거듭제곱(2⁵) + 자릿값 칩 */
.pvh { display: grid; place-items: center; min-height: 58px; }
.pv .pw { font-size: 16px; padding: 1px 8px 2px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); }
.pv .chip { height: 32px; font-variant-numeric: tabular-nums; }
/* 방 게이지: 오른쪽 방들에 모인 젤리 / 방 크기 — 가득 차면 노란 불 */
.gg { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; max-width: 104px; }
.gb { display: block; width: 100%; height: 10px; border-radius: 999px; background: #efeaf7; overflow: hidden; }
.gb i { display: block; height: 100%; border-radius: inherit; background: var(--vc, var(--v8)); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--ease); }
.pvc.full .gb i { background: var(--v4); }
.gt { font: 600 16px/1.2 var(--num); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* 불빛: 방을 가득 채운 횟수(2진 1개 · 8진 7개 · 10진 9개 · 16진 15개) */
.lamps { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; max-width: 104px; min-height: 9px; }
.lamps i { width: 9px; height: 9px; border-radius: 50%; background: #e1dbee; }
.lamps i.on { background: var(--v4); box-shadow: 0 0 0 2px rgba(201, 154, 28, .45), 0 0 8px 2px rgba(255, 213, 74, .7); }
.pv .lamps:has(i:only-child) i { width: 14px; height: 14px; }   /* 2진: 불 하나 */
.pvd { position: relative; display: grid; place-items: center; width: 100%; max-width: 96px; height: 76px; border-radius: 11px; background: #fff; box-shadow: inset 0 0 0 3px var(--line); font: 600 50px/1 var(--num); color: var(--ink); font-variant-numeric: tabular-nums; }
.pvd.lead0 { color: #6f6889; }
.pvd.on { background: #fff3c4; box-shadow: inset 0 0 0 3px var(--v4), 0 0 0 4px rgba(255, 213, 74, .35); }
.pvc.flash .pvd { animation: lightup .7s var(--ease); }
@keyframes lightup { 30% { transform: scale(1.1); box-shadow: inset 0 0 0 3px var(--v4), 0 0 0 10px rgba(255, 213, 74, .45), 0 0 26px 8px rgba(255, 213, 74, .7); } }
.pvd.jammed { box-shadow: inset 0 0 0 3px var(--red); background: #fff; }
.pvd .g { display: inline-flex; align-items: center; justify-content: center; }
.pvd .g.jam { color: var(--red); animation: jam .45s var(--ease) 2; }
.pvd .g.jam.two { transform: scaleX(.55); letter-spacing: -.06em; animation-name: jam2; }
.pvd .x { position: absolute; right: -8px; top: -10px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--red); color: #fff; font: 700 18px var(--kr); }
.pvd .g.drop { animation: drop .5s var(--ease) both; }
@keyframes jam { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes jam2 { 0%, 100% { transform: scaleX(.55); } 25% { transform: scaleX(.55) translateX(-6px); } 75% { transform: scaleX(.55) translateX(6px); } }
@keyframes drop { from { transform: translateY(-70px) scale(.8); opacity: 0; } 60% { transform: translateY(4px) scale(1.04); opacity: 1; } }
/* 글자 젤리(16진법 10~15): 칸 하나에 글자 하나 */
.lj { position: relative; display: inline-grid; place-items: center; min-width: 1.2em; height: 1.4em; padding: .38em .16em .04em; border-radius: 11px; background: #dceaff; color: #2e4f91; box-shadow: inset 0 0 0 3px #9cc6ff; line-height: 1; }
.lj .lj-face { position: absolute; top: .16em; left: 50%; transform: translateX(-50%); width: 18px; height: 5px; margin: 0;
  background: radial-gradient(circle at 2.5px 2.5px, #2a2140 2px, transparent 2.5px) left / 5px 5px no-repeat, radial-gradient(circle at 2.5px 2.5px, #2a2140 2px, transparent 2.5px) right / 5px 5px no-repeat; }
.pvd .lj { font-size: .8em; }
.ln-val { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; min-height: 44px; margin: 0; font: 600 28px var(--num); font-variant-numeric: tabular-nums; }
.ln-val .chip { font-size: .9em; }
/* 숫자 띠: 그 진법에 있는 숫자만. 지금 1의 자리 숫자에 노란 칸 */
.strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 6px; margin: 0; padding: 12px 0 0; list-style: none; border-top: 1px solid rgba(59, 50, 82, .1); }
.strip.s2 { grid-template-columns: repeat(3, minmax(0, 64px)); justify-content: center; }
.strip.s8 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.strip.s16 { grid-template-columns: repeat(30, minmax(0, 1fr)); }
.strip.s16 li { grid-column: span 3; }
.strip.s16 li.lt { grid-column: span 5; }
.strip li { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.strip .sd { display: grid; place-items: center; width: 100%; max-width: 52px; height: 44px; border-radius: 11px; background: #fff; box-shadow: inset 0 0 0 2px var(--line); font: 600 26px var(--num); }
.strip .sd .lj { font-size: 22px; }
.strip .tv { font: 600 16px var(--num); color: var(--ink); white-space: nowrap; }
.strip .tv .bs { font-size: 13px; }
.strip li.on .sd { background: var(--v4); box-shadow: inset 0 0 0 2px #c79a1c; }
.strip li.lt:not(.lit):not(.on) .sd { opacity: .5; }
.strip li.lt:not(.lit):not(.on) .tv { color: var(--ink-2); }
.strip li.lit .sd .lj, .strip li.on .sd .lj { box-shadow: inset 0 0 0 3px var(--b16); }
.strip li.no .sd { color: #6f6889; background: #f5f2fa repeating-linear-gradient(-45deg, transparent 0 7px, rgba(205, 197, 222, .5) 7px 10px); box-shadow: none; text-decoration: line-through 3px var(--red); }
.strip li.no .tv { font: 600 16px var(--kr); color: var(--ink-2); }
.strip li.nope .sd { box-shadow: inset 0 0 0 3px var(--red); animation: jam .45s var(--ease) 2; }

/* 큰 수(2진 7채 이상): 마을이 두 줄로 접히면 자리판도 두 줄(위 = 큰 자리, 아래 = 작은 자리). 줄마다 칸 폭을 따로 나눈다 */
.pv.fold { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 6px; }
.pv.fold .pvbr { flex-basis: 100%; height: 0; }
.pv.fold .pvc { flex: 1 1 0; max-width: 112px; container-type: inline-size; }
.pv.fold .pvh { min-height: 50px; }
.pv.fold .pvd { height: 54px; font-size: 36px; }
@container (max-width: 74px) { .pv.fold .gt { display: none; } }
@container (max-width: 50px) { .pv.fold .pw { display: none; } .pv.fold .chip { font-size: 16px !important; } }
#learn.fold .ln-panel.hud.kit { width: min(600px, 44vw); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 16px; }
#learn.fold .pv, #learn.fold .ln-val { grid-column: 1 / -1; }
#learn.fold .ln-rule { grid-row: 3; grid-column: 1; }
#learn.fold .strip { grid-row: 3; grid-column: 2; border-top: 0; padding: 0; }
#learn.fold .ln-val { font-size: 24px; min-height: 36px; }

/* 조작: 아래 막대(실험실 .dock 과 같은 모양) · 오른쪽 확대/축소 */
.ln-dock { align-items: stretch; }
.ln-dock .btn .pic { display: flex; align-items: center; gap: 6px; min-height: 30px; font: 700 26px var(--num); font-variant-numeric: tabular-nums; }
.ln-dock .btn.next { flex-direction: row; gap: 10px; padding: 0 18px; background: var(--ink); color: #fff; }
.ln-dock .btn.next .ic { width: 24px; height: 24px; }
.ln-dock .btn.next .nxp .ar { color: #d9d4e6; }
.ln-dock .btn.next .nxp .w { color: #fff; }
#lnSub .jel { opacity: .55; }
.ln-zoom { position: absolute; right: max(16px, env(safe-area-inset-right)); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 18px; background: rgba(255, 253, 249, .9); box-shadow: var(--shadow); }
.ln-zoom .btn { min-width: 64px; padding: 0 8px; box-shadow: none; font-size: 18px; }

@media (max-width: 1100px) and (orientation: landscape) {
  .ln-panel.hud.kit { width: 340px; gap: 8px; padding: 12px 14px 14px; top: 80px; }
  .pvh { min-height: 52px; }
  .pvd { height: 60px; font-size: 40px; }
  .ln-val { font-size: 22px; min-height: 32px; }
  .ln-rule .rl { font-size: 22px; }
  .strip .sd { height: 36px; font-size: 22px; }
  .ln-dock .btn { min-width: 84px; }
  .ln-dock .btn.next > span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  #learn.fold .ln-panel.hud.kit { width: min(400px, 48vw); }
  #learn.fold .pv.fold .pvd { height: 46px; font-size: 30px; }
}
@media (max-height: 640px) and (orientation: landscape) {
  .ln-panel.hud.kit { top: 76px; gap: 6px; }
  .pvh { min-height: 50px; }
  .pvd { height: 52px; font-size: 36px; }
  .strip { padding-top: 6px; gap: 6px 4px; }
  .strip .sd { height: 32px; }
  .strip .tv { font-size: 16px; }
  #learn.fold .ln-panel.hud.kit { width: min(340px, 42vw); gap: 6px 10px; padding: 10px 12px 12px; }
  #learn.fold .pv.fold { gap: 6px 4px; }
  #learn.fold .pv.fold .lamps { display: none; }   /* 2진 불 = 숫자 칸이 노랗게 켜짐(같은 뜻) — 낮은 화면은 하나만 */
  #learn.fold .pv.fold .pvh { min-height: 0; }
  #learn.fold .pv.fold .pvd { height: 38px; font-size: 26px; }
  #learn.fold .ln-val { font-size: 20px; min-height: 28px; }
  #learn.fold .strip .sd { height: 30px; font-size: 20px; }
}
@media (orientation: portrait) {
  .ln-panel.hud.kit { left: 12px; right: 12px; top: 80px; width: auto; gap: 8px; padding: 12px; }
  .pvd { height: 56px; font-size: 38px; }
  .pvh { min-height: 50px; }
  .ln-rule .rl { font-size: 22px; }
  .ln-val { font-size: 22px; min-height: 30px; }
  .strip { gap: 6px 4px; padding-top: 8px; }
  .strip .sd { height: 36px; font-size: 22px; }
  .strip .sd .lj { font-size: 18px; }
  .strip.s10 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
  .strip.s8 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  #learn.fold .ln-panel.hud.kit { width: auto; gap: 6px 12px; }
  #learn.fold .pv.fold { gap: 6px 4px; }
  #learn.fold .pv.fold .lamps { display: none; }   /* 2진 불 = 숫자 칸이 노랗게 켜짐(같은 뜻) — 세로 화면은 마을 자리를 넓게 */
  #learn.fold .pv.fold .pvh { min-height: 0; }
  #learn.fold .pv.fold .pvd { height: 42px; font-size: 28px; }
  /* 세로 화면: 확대/축소 단추는 자리판 바로 아래 오른쪽에 가로로(두 손가락으로도 된다) */
  .ln-zoom { top: var(--ztop, 380px); transform: none; right: 12px; flex-direction: row; padding: 4px; }
  .ln-dock .btn.step { grid-column: span 2; }
  .ln-dock .btn.next { grid-column: span 2; min-height: 72px; padding: 0 10px; }
  .ln-dock .btn.next > span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media (orientation: portrait) and (max-width: 440px) {
  #learn.fold .ln-zoom { flex-direction: column; top: calc(var(--ztop, 380px) + 4px); }
  #learn.fold .ln-zoom .btn { min-width: 48px; min-height: 44px; }
  #learn.fold .ln-panel.hud.kit { padding: 8px 10px 10px; }
  #learn.fold .pv.fold .gg { gap: 0; }
  #learn.fold .pv.fold .gt { display: none; }
  #learn.fold .pv.fold .pvd { height: 36px; font-size: 24px; }
  #learn.fold .ln-val { font-size: 18px; min-height: 26px; }
  #learn.fold .ln-rule .rl { font-size: 18px; }
  #learn.fold .strip .sd { height: 30px; font-size: 18px; }
  .ln-dock #lnReset span, .ln-dock #lnAuto span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .pv .chip { font-size: 16px !important; height: 28px; }
}
/* 대비: 기호(× → =)는 잉크 2, 작은 진법 알약은 흰 바탕 + 진법색 테두리 + 잉크 글자(SPEC 2.5) */
.ln-panel .op { color: var(--ink-2); }
.ln-panel .bs { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px var(--bc, var(--ink)); }
@media (prefers-reduced-motion: reduce) { .gb i { transition: none; } }

/* 7판: 규칙 두 칸 · 젤리팁 시작 수 · 값 줄 여러 줄 · 10진법 자리 칸(판 · 막대 · 낱개) */
.ln-rule { flex-wrap: wrap; gap: 8px; }
.ln-rule .cell b { font-weight: 700; }
.ln-tips { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.ln-tips .tl { font: 700 17px var(--kr); color: var(--ink-2); }
.ln-tips .btn.tp { min-height: 56px; min-width: 56px; padding: 0 10px; font: 600 22px var(--num); box-shadow: inset 0 0 0 2px var(--line); }
.ln-tips .btn.tp .n { font-size: 1em; }
.ln-tips .btn.tp.on { background: var(--v4); box-shadow: inset 0 0 0 2px #c79a1c; }
.ln-val { flex-direction: column; gap: 8px; }
.ln-val .vr { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; }
.ln-val .cell { font-size: 17px; }
.ln-val .qm { font-family: var(--num); color: var(--ink-2); }
.ln-val .pcs { display: flex; gap: 6px; }
.ln-val .pc { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 6px 8px 8px; border-radius: 11px; border: 2px solid var(--pcc); background: color-mix(in srgb, var(--pcc) 16%, #fffdf9); }
.ln-val .pc.z { opacity: .55; }
.ln-val .pcl { font: 700 16px/1.2 var(--kr); color: var(--ink); white-space: nowrap; }
.ln-val .pb { display: flex; align-items: center; gap: 6px; min-height: 30px; }
.ln-val .pb .x, .ln-val .pv10 { font: 600 22px var(--num); }
.pic1, .pic10, .pic100 { display: inline-block; flex: none; }
.pic1 { width: 13px; height: 13px; border-radius: 4px; background: #ff8db4; }
.pic10 { width: 40px; height: 10px; border-radius: 3px; background: repeating-linear-gradient(90deg, #ef5350 0 3.4px, rgba(255, 255, 255, .85) 3.4px 4px); }
.pic100 { width: 28px; height: 28px; border-radius: 4px; background: repeating-linear-gradient(90deg, transparent 0 2.4px, rgba(255, 255, 255, .85) 2.4px 2.8px), repeating-linear-gradient(0deg, #b9c2ff 0 2.4px, rgba(255, 255, 255, .85) 2.4px 2.8px); }
#lnAdd.nudge { animation: nudge 1.2s var(--ease) 3; }
@keyframes nudge { 50% { transform: scale(1.07); box-shadow: 0 0 0 8px rgba(255, 213, 74, .55), var(--shadow); } }
@media (prefers-reduced-motion: reduce) { #lnAdd.nudge { animation: none; box-shadow: 0 0 0 6px rgba(255, 213, 74, .55), var(--shadow); } }
.ln-panel.hud.kit { max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain; }
@media (orientation: portrait) {
  #learn.tip .strip { display: none; }   /* 규칙 두 칸이 같은 뜻 — 마을 자리를 넓게 */
  .ln-val .pc { padding: 4px 6px 6px; }
  .ln-val .pb .x, .ln-val .pv10 { font-size: 20px; }
  .ln-tips .btn.tp { min-height: 48px; font-size: 20px; }
}
@media (max-width: 440px) {
  #learn.tip .ln-title > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }   /* 좁은 폰: [젤리팁][10] 만(소리 단추 자리) */
  #learn.tip .ln-title { padding-right: 12px; }
}