/* 상자 밀기 전용 바닷속 놀이판. 다른 교실 퍼즐은 이 규칙을 사용하지 않는다. */
html .cp-shell[data-game="sokoban"] {
  --cp-ink: #153f42;
  --cp-muted: #426867;
  --cp-accent: #087b7e;
  --cp-line: #b7d2c7;
  background: #57c4cb url("../sokoban-ocean/background.56861b384965.webp") center / cover fixed;
}
html .cp-shell[data-game="sokoban"] .cp-wrap { max-width: 1480px; }
html .cp-shell[data-game="sokoban"] .cp-play-panel,
html .cp-shell[data-game="sokoban"] .cp-sidebar {
  background: rgba(255, 250, 231, .94);
  border: 3px solid #ead9b4;
  border-radius: 25px;
  box-shadow: 0 8px 0 #378b8866, 0 16px 35px #0d62694a;
}
html .cp-shell[data-game="sokoban"] .game-puzzle-options {
  border: 2px solid #e7d5ad;
  background: #fff9e7;
  box-shadow: 0 4px 0 #3b8d8c55;
}
html .cp-shell[data-game="sokoban"] .game-puzzle-options > summary { color: #175c60; }
html .cp-shell[data-game="sokoban"] .cp-sidebar { box-shadow: none; border: 0; }
html .cp-shell[data-game="sokoban"] .cp-board-head h2 { color: #15575a; }
html .cp-shell[data-game="sokoban"] .cp-badge { color: #155b5c; background: #d6f1df; }
html .cp-shell[data-game="sokoban"] .cp-instruction {
  padding: 8px 14px;
  color: #155557;
  font-weight: 750;
  border-radius: 14px;
  background: #f7edcf;
}
html .cp-shell[data-game="sokoban"] .cp-board-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: clamp(12px, 2vw, 28px);
  align-items: center;
}
@media (min-width: 1001px) and (orientation: landscape) {
  /* 게임판의 최대 폭 이후에도 빈 열이 커지지 않도록 조작판과 함께 중앙에 둔다. */
  html .cp-shell[data-game="sokoban"] .cp-board-layout {
    max-width: 928px;
    margin-inline: auto;
  }
}
html .cp-shell[data-game="sokoban"] .cp-board--sokoban {
  width: min(100%, 620px);
  padding: clamp(7px, 1vw, 13px);
  gap: 3px;
  background: #f4e6c9;
  border: 4px solid #fff6df;
  border-radius: 22px;
  box-shadow: 0 7px 0 #a99b76, 0 14px 24px #155d5b55;
  overflow: visible;
}
html .cp-shell[data-game="sokoban"] .cp-board--sokoban .cp-cell {
  position: relative;
  background: #f6e6be url("../sokoban-ocean/floor.0a4003ba732c.webp") center / cover;
  border: 1px solid #d6c39c;
  border-radius: 7px;
  box-shadow: inset 0 -3px 0 #c5b48c88;
}
html .cp-shell[data-game="sokoban"] .cp-board--sokoban .is-wall {
  /* 그림의 투명 테두리를 셀 안에서 확대해 바위가 칸을 채우게 한다. */
  background: #348f8b url("../sokoban-ocean/wall.bf7b942aa873.webp") center / 125% 125%;
  border-color: #347a74;
  box-shadow: inset 0 -4px 0 #17696388;
}
/* 원래 텍스트와 aria-label은 남기고 장면 자산은 셀 안에서만 보여준다. */
html .cp-shell[data-game="sokoban"].sokoban-art-ready .cp-board--sokoban :is(.is-goal,.is-player,.is-box) { font-size: 0; }
html .cp-shell[data-game="sokoban"].sokoban-art-ready .cp-board--sokoban .is-goal::before,
html .cp-shell[data-game="sokoban"].sokoban-art-ready .cp-board--sokoban :is(.is-player,.is-box)::after {
  content: '';
  display: block;
  position: absolute;
  inset: 3%;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
html .cp-shell[data-game="sokoban"].sokoban-art-ready .cp-board--sokoban .is-goal::before {
  background-image: url("../sokoban-ocean/goal.290df3ea877b.webp");
  background-size: 140% auto;
  z-index: 1;
}
html .cp-shell[data-game="sokoban"].sokoban-art-ready .cp-board--sokoban .is-player::after {
  background-image: url("../sokoban-ocean/robot.e8dee27e1359.webp");
  background-size: 160% auto;
  z-index: 2;
}
html .cp-shell[data-game="sokoban"].sokoban-art-ready .cp-board--sokoban .is-box::after {
  background-image: url("../sokoban-ocean/crate.0965937b5d25.webp");
  background-size: 160% 160%;
  z-index: 2;
}
html .cp-shell[data-game="sokoban"].sokoban-art-ready .cp-board--sokoban .is-box.is-goal::before,
html .cp-shell[data-game="sokoban"].sokoban-art-ready .cp-board--sokoban .is-player.is-goal::before {
  inset: 0;
  border: 3px solid #e9ad37;
  border-radius: 7px;
  background-color: #ffe18b88;
}
html .cp-shell[data-game="sokoban"] .cp-board--sokoban .is-hint {
  outline: 4px solid #e98c21;
  outline-offset: 1px;
  z-index: 3;
}
html .cp-shell[data-game="sokoban"] .cp-board-controls {
  display: grid;
  gap: 14px;
  align-self: center;
  padding: 16px;
  border: 2px solid #e3cda0;
  border-radius: 20px;
  background: #fff6df;
  box-shadow: 0 5px 0 #a78c69aa;
}
html .cp-shell[data-game="sokoban"] .cp-board-controls .cp-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 0;
  margin: 0;
}
html .cp-shell[data-game="sokoban"] .cp-stats > div { background: #f5ead0; padding: 8px 4px; }
html .cp-shell[data-game="sokoban"] .cp-stats span { color: #315f5e; font-size: 14px; line-height: 1.35; }
html .cp-shell[data-game="sokoban"] .cp-stats strong { color: #16565a; font-size: 20px; }
html .cp-shell[data-game="sokoban"] .cp-dpad {
  display: grid;
  grid-template-columns: repeat(3, minmax(48px, 60px));
  gap: 6px;
  justify-content: center;
  width: 100%;
  margin: 0;
}
html .cp-shell[data-game="sokoban"] .cp-dpad button {
  min-width: 48px;
  min-height: 48px;
  border: 2px solid #d8c49b;
  background: #fffaf0;
  color: #087f81;
  box-shadow: 0 4px 0 #c9b487;
  font-size: 25px;
  line-height: 1;
}
html .cp-shell[data-game="sokoban"] .cp-dpad button:active { transform: translateY(2px); box-shadow: 0 2px 0 #c9b487; }
html .cp-shell[data-game="sokoban"] .cp-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
html .cp-shell[data-game="sokoban"] .cp-actions button { min-height: 48px; padding: 8px 5px; line-height: 1.25; font-size: 15px; }
html .cp-shell[data-game="sokoban"] .cp-actions .cp-hint { color: #674509; background: #ffe39c; border-color: #dfb95c; }
html .cp-shell[data-game="sokoban"] .cp-feedback { color: #245e5d; background: #def2df; }
html .cp-shell[data-game="sokoban"] .cp-win { background: #fef2c9; border-color: #e4c785; }

@keyframes ocean-robot-move { 50% { transform: translateY(-7%); } }
@keyframes ocean-box-push { 50% { transform: scale(.89, 1.08); } }
@keyframes ocean-goal-arrive { 50% { filter: drop-shadow(0 0 10px #ffd85a); transform: scale(1.08); } }
html .cp-shell[data-game="sokoban"] .is-move-arrival::after { animation: ocean-robot-move .24s ease-out; }
html .cp-shell[data-game="sokoban"] .is-push-arrival::after { animation: ocean-box-push .24s ease-out; }
html .cp-shell[data-game="sokoban"] .is-goal-arrival::before { animation: ocean-goal-arrive .45s ease-out; }
@media (prefers-reduced-motion: reduce) {
  html .cp-shell[data-game="sokoban"] :is(.is-move-arrival,.is-push-arrival,.is-goal-arrival)::before,
  html .cp-shell[data-game="sokoban"] :is(.is-move-arrival,.is-push-arrival,.is-goal-arrival)::after { animation: none; }
  html .cp-shell[data-game="sokoban"] .cp-dpad button:active { transform: none; }
}
@media (max-width: 1000px), (orientation: portrait) {
  html .cp-shell[data-game="sokoban"] .cp-board-layout { grid-template-columns: minmax(0, 1fr) minmax(190px, 235px); }
  html .cp-shell[data-game="sokoban"] .cp-board-controls { display: grid; }
}
@media (max-width: 600px) {
  html .cp-shell[data-game="sokoban"] { background-attachment: scroll; }
  html .cp-shell[data-game="sokoban"] .cp-play-panel { padding: 10px; }
  html .cp-shell[data-game="sokoban"] .cp-board-head h2 { font-size: 18px; }
  html .cp-shell[data-game="sokoban"] .cp-board-head .cp-eyebrow { margin-bottom: 2px; }
  html .cp-shell[data-game="sokoban"] .cp-instruction { font-size: 15px; line-height: 1.3; margin: 5px 0 8px; padding: 5px; }
  html .cp-shell[data-game="sokoban"] .cp-board-layout {
    grid-template-columns: minmax(0, 1fr) minmax(108px, 125px);
    gap: 9px 6px;
  }
  html .cp-shell[data-game="sokoban"] .cp-board--sokoban { grid-column: 1 / -1; width: min(100%, 360px); padding: 6px; border-radius: 16px; }
  html .cp-shell[data-game="sokoban"] .cp-board-controls { display: contents; }
  html .cp-shell[data-game="sokoban"] .cp-dpad { grid-column: 1; grid-row: 2; grid-template-columns: repeat(3, 48px); gap: 5px; }
  html .cp-shell[data-game="sokoban"] .cp-board-controls .cp-stats { grid-column: 2; grid-row: 2; grid-template-columns: 1fr; gap: 3px; align-content: center; }
  html .cp-shell[data-game="sokoban"] .cp-stats > div { display: flex; align-items: center; justify-content: space-between; gap: 3px; padding: 3px 6px; border-radius: 8px; }
  html .cp-shell[data-game="sokoban"] .cp-stats span { font-size: 12px; margin: 0; }
  html .cp-shell[data-game="sokoban"] .cp-stats strong { font-size: 16px; white-space: nowrap; }
  html .cp-shell[data-game="sokoban"] .cp-actions { grid-column: 1 / -1; grid-row: 3; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 승인된 바다 시안: 문제 선택은 접고 놀이판과 방향 조작을 먼저 보여준다. */
html[data-classroom-playing] #classroom-puzzle[data-game="sokoban"] .cp-layout {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
}
html .cp-shell[data-game="sokoban"] .game-puzzle-options {
  position: absolute; right: clamp(8px, 2vw, 26px); top: 4px; z-index: 5;
  width: min(250px, 86vw); border: 2px solid #decba2; border-radius: 18px;
  background: #fff8e6; box-shadow: 0 4px 0 #287b7955;
}
html .cp-shell[data-game="sokoban"] .game-puzzle-options:not([open]) { width: auto; }
html .cp-shell[data-game="sokoban"] .cp-play-panel {
  grid-column: 1; padding: 58px 12px 18px; background: transparent; border: 0; box-shadow: none;
}
html .cp-shell[data-game="sokoban"] .ocean-overview {
  max-width: 990px; margin: 0 auto 12px; padding: 10px 16px;
  border: 2px solid #e3d4b2; border-radius: 18px; background: #fff8e5ef;
  box-shadow: 0 6px 0 #287b7940, 0 10px 24px #064d5850;
}
html .cp-shell[data-game="sokoban"] .ocean-overview .cp-board-head { margin: 0; }
html .cp-shell[data-game="sokoban"] .ocean-overview .cp-board-head h2 { font-size: 18px; }
html .cp-shell[data-game="sokoban"] .ocean-overview .cp-instruction {
  margin: 4px 0 0; padding: 0; background: transparent; font-size: 15px; line-height: 1.4;
  word-break: keep-all; overflow-wrap: normal;
}
html .cp-shell[data-game="sokoban"] .cp-board-layout {
  width: min(100%, 990px); max-width: none; margin: 0 auto;
  grid-template-columns: minmax(0, 620px) minmax(240px, 300px); justify-content: center;
}
html .cp-shell[data-game="sokoban"] .cp-board-controls { width: min(100%, 300px); }
html .cp-shell[data-game="sokoban"] .cp-board-controls .cp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
html .cp-shell[data-game="sokoban"] .cp-stats > div { min-width: 0; text-align: center; border-radius: 10px; }
html .cp-shell[data-game="sokoban"] .cp-stats > div:first-child { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; padding-inline: 12px; }
html .cp-shell[data-game="sokoban"] .cp-stats span { font-size: 14px; word-break: keep-all; overflow-wrap: normal; }
html .cp-shell[data-game="sokoban"] .cp-dpad button {
  background: #fff7e6 url("../sokoban-ocean/direction-button.72017637d238.webp") center / 190% 127% no-repeat;
  border: 1px solid #d5bc8d; border-radius: 14px; box-shadow: 0 3px 0 #b99e7180;
  color: #075b5e; font-weight: 800;
}
html .cp-shell[data-game="sokoban"] .cp-actions button {
  background: #fff7e6 url("../sokoban-ocean/tool-button.35dd0a9bac03.webp") center / 105% 135% no-repeat;
  border: 1px solid #d5bc8d; border-radius: 14px; color: #174f51; font-weight: 750;
}
html .cp-shell[data-game="sokoban"] .cp-actions .cp-hint {
  background: #ffe39c url("../sokoban-ocean/tool-button.35dd0a9bac03.webp") center / 105% 135% no-repeat; color: #654208; border-color: #d9b75f;
}
html .cp-shell[data-game="sokoban"] :is(.cp-dpad button,.cp-actions button):focus-visible { outline: 3px solid #075f68; outline-offset: 2px; }
html .cp-shell[data-game="sokoban"] :is(.cp-dpad button,.cp-actions button):disabled { opacity: .58; }
html .cp-shell[data-game="sokoban"] .cp-feedback,
html .cp-shell[data-game="sokoban"] .ocean-storage-warning,
html .cp-shell[data-game="sokoban"] .cp-record { max-width: 990px; margin: 12px auto 0; padding: 9px 13px; border-radius: 10px; word-break: keep-all; }
html .cp-shell[data-game="sokoban"] .ocean-storage-warning { background: #fff0d5; border: 1px solid #c98a43; color: #613f18; font-size: 14px; }
html .cp-shell[data-game="sokoban"] .cp-record { width: fit-content; background: #fff8e9e8; color: #245e5d; }
body:has(#classroom-puzzle[data-game="sokoban"]) #classroom-play-toolbar { background: #f2fbf4; color: #15585a; }
body:has(#classroom-puzzle[data-game="sokoban"]) #classroom-play-toolbar :is(h1,button,a) { color: #15585a; }
@media (min-width: 1001px) and (orientation: landscape) {
  html .cp-shell[data-game="sokoban"] .ocean-overview { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
  html .cp-shell[data-game="sokoban"] .ocean-overview .cp-instruction { margin: 0; }
  html .cp-shell[data-game="sokoban"] .cp-board--sokoban { width: min(100%, 620px, calc(100dvh - 250px)); }
}
@media (max-width: 1000px), (orientation: portrait) {
  html .cp-shell[data-game="sokoban"] .cp-board-layout { grid-template-columns: minmax(0, 1fr) minmax(190px, 235px); }
  html .cp-shell[data-game="sokoban"] .cp-board-controls { width: 100%; }
}
@media (max-width: 600px) {
  html .cp-shell[data-game="sokoban"] .cp-play-panel { padding: 0 8px 16px; }
  html .cp-shell[data-game="sokoban"] .ocean-overview { position: relative; padding: 8px 12px; margin-bottom: 8px; }
  html .cp-shell[data-game="sokoban"] .ocean-overview .cp-board-head { min-height: 48px; padding-right: 130px; }
  html .cp-shell[data-game="sokoban"] #cp-status-badge { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  html .cp-shell[data-game="sokoban"] .ocean-overview .cp-board-head h2 { font-size: 16px; }
  html .cp-shell[data-game="sokoban"] .ocean-overview .cp-instruction { font-size: 14px; }
  html .cp-shell[data-game="sokoban"] .cp-board-layout { grid-template-columns: minmax(0, 1fr) minmax(108px, 125px); }
  html .cp-shell[data-game="sokoban"] .cp-board-controls { display: contents; }
  html .cp-shell[data-game="sokoban"] .cp-board-controls .cp-stats { grid-column: 2; grid-row: 2; grid-template-columns: 1fr; }
  html .cp-shell[data-game="sokoban"] .cp-stats > div:first-child { grid-column: auto; padding-inline: 6px; }
  html .cp-shell[data-game="sokoban"] .cp-stats span { font-size: 14px; }
}
/* 공용 태블릿 그리드의 두 번째 행으로 밀리지 않도록 선택 버튼을 첫 행에 둔다. */
html .cp-shell[data-game="sokoban"] .game-puzzle-options { grid-row: 1; grid-column: 1; }
html .cp-shell[data-game="sokoban"] :is(#cp-size, #cp-status-badge, #cp-best) { font-size: 14px; }
/* 작은 선택창 안에서는 난이도와 문제를 한 줄씩 배치해 글자가 쪼개지지 않는다. */
html .cp-shell[data-game="sokoban"] .game-puzzle-options .cp-sidebar {
  display: flex; flex-direction: column; gap: 8px;
}
html .cp-shell[data-game="sokoban"] .game-puzzle-options :is(.cp-tiers,.cp-sidebar label,.cp-sidebar select,.cp-storage-note) { margin: 0; }
html .cp-shell[data-game="sokoban"] .game-puzzle-options :is(button,label,legend,p) { word-break: keep-all; overflow-wrap: normal; }
html .cp-shell[data-game="sokoban"] .game-puzzle-options .cp-sidebar label { align-self: stretch; }
/* 완성 후에도 같은 바다 세계 안에서 다음 선택을 이어간다. */
html .cp-shell[data-game="sokoban"] .cp-win {
  max-width: 990px; margin: 12px auto 0; padding: 16px 18px;
  background: #fff8e8; border: 2px solid #e3cda0; border-radius: 18px;
  color: #15575a; box-shadow: 0 5px 0 #287b7940;
}
html .cp-shell[data-game="sokoban"] .cp-win > span { font-size: 24px; line-height: 1; color: #bb8534; }
html .cp-shell[data-game="sokoban"] .cp-win h2 { margin: 4px 0 6px; font-size: 21px; }
html .cp-shell[data-game="sokoban"] .cp-win p { margin: 0 0 12px; font-size: 15px; line-height: 1.5; word-break: keep-all; }
html .cp-shell[data-game="sokoban"] .cp-win > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
html .cp-shell[data-game="sokoban"] .cp-win button {
  flex: 1 1 160px; max-width: 240px; min-height: 48px; padding: 8px 10px;
  background: #fff7e6 url("../sokoban-ocean/tool-button.35dd0a9bac03.webp") center / 105% 135% no-repeat;
  border: 1px solid #d5bc8d; border-radius: 14px; color: #174f51; font-size: 15px; font-weight: 750;
}
html .cp-shell[data-game="sokoban"] .cp-win button.cp-primary {
  background: #ffe39c url("../sokoban-ocean/tool-button.35dd0a9bac03.webp") center / 105% 135% no-repeat;
  border-color: #d9b75f; color: #654208;
}
html .cp-shell[data-game="sokoban"] .cp-win button:focus-visible { outline: 3px solid #075f68; outline-offset: 2px; }
/* 공용 결과 카드의 강제 스타일은 이 게임의 그림 버튼에 한해 덮어쓴다. */
html #classroom-puzzle[data-game="sokoban"] .cp-win[data-game-result-style] {
  background: #fff8e8 !important; border: 2px solid #e3cda0 !important;
  color: #15575a !important; padding: 16px 18px !important; box-shadow: 0 5px 0 #287b7940 !important;
}
html #classroom-puzzle[data-game="sokoban"] .cp-win [data-result-part="title"] { color: #15575a !important; margin: 4px 0 6px !important; }
html #classroom-puzzle[data-game="sokoban"] .cp-win [data-result-part="detail"] { color: #315f5e !important; margin: 0 0 12px !important; font-size: 15px !important; line-height: 1.5 !important; }
html #classroom-puzzle[data-game="sokoban"] .cp-win [data-result-part="actions"] { gap: 8px !important; margin: 12px 0 0 !important; }
html #classroom-puzzle[data-game="sokoban"] .cp-win :is([data-result-part="primary"], [data-result-part="secondary"]) {
  background: #fff7e6 url("../sokoban-ocean/tool-button.35dd0a9bac03.webp") center / 105% 135% no-repeat !important;
  border-color: #d5bc8d !important; color: #174f51 !important;
}
html #classroom-puzzle[data-game="sokoban"] .cp-win [data-result-part="primary"] {
  background: #ffe39c url("../sokoban-ocean/tool-button.35dd0a9bac03.webp") center / 105% 135% no-repeat !important;
  border-color: #d9b75f !important; color: #654208 !important;
}
html #classroom-puzzle[data-game="sokoban"] .cp-win button:focus-visible { outline-color: #075f68 !important; }

/* 닿지 못하는 방향을 눌렀을 때 게임판 가까이에서도 바로 알려준다. */
html .cp-shell[data-game="sokoban"] #ocean-inline-status {
  margin: 6px 0 0; padding: 5px 9px; border-radius: 9px;
  background: #fff0d5; color: #6b491a; font-size: 14px; line-height: 1.4; word-break: keep-all;
}
html .cp-shell[data-game="sokoban"] #cp-completed { font-size: 14px; }
html .cp-shell[data-game="sokoban"] .cp-tiers button { min-height: 48px; }
html .cp-shell[data-game="sokoban"] .ocean-overview:has(#ocean-inline-status:not([hidden])) .cp-instruction { display: none; }