:root{
  --bg:#071a2b!important;
  --panel:#0a2236!important;
  --card:#0a2236!important;
  --line:#315f78!important;
  --text:#d7e5ea!important;
  --muted:#91aeb8!important;
  --accent:#8fb8c8!important;
  --good:#83a994!important;
  --bad:#b66f70!important;
  --special:#9d8fb5!important;
  --land1:#756c58!important;
  --land2:#625b4d!important;
  --sea1:#315f78!important;
  --sea2:#274e67!important;
  --sc-serif:"Noto Serif KR","Noto Serif CJK KR","NanumMyeongjo","Batang","Georgia","Times New Roman",serif;
}
html,body{background:#071a2b!important;color:#d7e5ea!important}
body{
  font-family:var(--sc-serif)!important;
  background-image:linear-gradient(rgba(143,184,200,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(143,184,200,.018) 1px,transparent 1px),radial-gradient(circle at 50% 0,#17384d 0,#0a2236 34%,#071a2b 100%)!important;
  background-size:36px 36px,36px 36px,auto!important;
  letter-spacing:.012em;
}
button,a{font-family:inherit!important}

/* Tutorial */
.shell{width:min(100% - 22px,1080px)!important}
.top{padding:8px 0 12px;border-bottom:1px solid #315f78}
.brand h1{
  width:min(510px,74vw);
  aspect-ratio:815/128;
  background:url("./ui/menu/title.png") left center/contain no-repeat;
  color:transparent!important;
  font-size:1px!important;
  overflow:hidden;
}
.brand p{color:#91aeb8!important;font-size:13px!important}
.utils a{
  min-height:40px!important;
  border:1px solid #315f78!important;
  border-radius:0!important;
  background:rgba(7,26,43,.72)!important;
  color:#d7e5ea!important;
}
.utils a:hover{border-color:#8fb8c8!important;background:rgba(49,95,120,.5)!important}
.utils a.primary{border-color:#8fb8c8!important}
.progress,.boardCard,.lessonCard,.block,.boardFeedback,.completeBox{
  border-radius:0!important;
  border-color:#315f78!important;
  background:rgba(7,26,43,.68)!important;
  box-shadow:none!important;
}
.track{height:8px!important;border-radius:0!important;background:#102d43!important}
.bar{background:#8fb8c8!important}
.chapterTabs{gap:5px!important}
.chapterTab,.lessonDot,.actionBtn,.lessonBtn,.footBtn{
  border-radius:0!important;
  border-color:#315f78!important;
  background:rgba(10,34,54,.88)!important;
  color:#91aeb8!important;
}
.chapterTab.active,.lessonDot.active,.actionBtn.primary,.lessonBtn.primary,.footBtn.primary{
  border-color:#8fb8c8!important;
  background:rgba(49,95,120,.58)!important;
  color:#d7e5ea!important;
}
.lessonDot.done{border-color:#83a994!important;color:#c8ded1!important}
.boardTop{border-color:#315f78!important}
.phase{border-radius:0!important;border-color:#8fb8c8!important;background:rgba(49,95,120,.35)!important;color:#d7e5ea!important}
.board{border:2px solid #8fb8c8!important;background:#071a2b!important}
.cell.land.a{background:#756c58 url("./ui/board/land_light.png") center/cover!important}
.cell.land.b{background:#625b4d url("./ui/board/land_dark.png") center/cover!important}
.cell.sea.a{background:#315f78 url("./ui/board/sea_light.png") center/cover!important}
.cell.sea.b{background:#274e67 url("./ui/board/sea_dark.png") center/cover!important}
.cell.selected{box-shadow:inset 0 0 0 3px #8fb8c8!important}
.cell.legal::after{background:#aecbd3!important}
.goal,.hintBox{border-left:2px solid #8fb8c8!important}
.lessonCard h2{font-family:var(--sc-serif)!important;color:#d7e5ea!important}
.eyebrow,.block small{color:#8fb8c8!important}
.block p,.boardFeedback{color:#d7e5ea!important;font-size:13px!important}
.completeBox{border-color:#83a994!important;color:#c8ded1!important}
.footerNav{border-color:#315f78!important;background:rgba(7,26,43,.97)!important;backdrop-filter:none!important}

/* Rulebook */
body>.wrap{width:min(100%,900px)!important}
body>.wrap::before{
  content:"";
  display:block;
  width:min(560px,80vw);
  aspect-ratio:815/128;
  margin:4px 0 18px;
  background:url("./ui/menu/title.png") left center/contain no-repeat;
}
body>.wrap>h1{display:none}
body>.wrap>.badge{
  border-radius:0!important;
  border-color:#8fb8c8!important;
  background:rgba(49,95,120,.35)!important;
  color:#d7e5ea!important;
}
body>.wrap>.sub{color:#91aeb8!important;font-size:14px!important}
.section{
  position:relative;
  border-radius:0!important;
  border-color:#315f78!important;
  background:rgba(7,26,43,.72)!important;
  box-shadow:none!important;
}
.section::before{content:"";position:absolute;left:-1px;top:14px;width:3px;height:28px;background:#8fb8c8}
.section::after{content:"◇";position:absolute;right:14px;top:12px;color:#8fb8c8;font-size:12px;opacity:.6}
.section h2{color:#d7e5ea!important;font-family:var(--sc-serif)!important;letter-spacing:.02em}
.section p,.section li{color:#c4d4da!important;font-size:14px!important}
.callout{border-radius:0!important;border-left:2px solid #8fb8c8!important;background:rgba(49,95,120,.16)!important;color:#d7e5ea!important}
strong{color:#e7f0f3!important}
.contentNav{position:sticky;top:0;z-index:5;display:flex;justify-content:flex-end;gap:6px;margin:-4px 0 10px;padding:6px 0;background:linear-gradient(180deg,#071a2b 70%,transparent)}
.contentNav a{min-height:38px;display:inline-flex;align-items:center;padding:7px 10px;border:1px solid #315f78;color:#d7e5ea;text-decoration:none;background:#071a2b;font-size:12px}
.contentNav a:hover{border-color:#8fb8c8;background:#17384d}

@media(max-width:760px){
  .shell{width:min(100% - 10px,1080px)!important}
  .brand h1{width:min(72vw,440px)}
  .layout{gap:7px!important}
  .lessonCard{padding:11px!important}
  .section p,.section li{font-size:13px!important}
  body>.wrap::before{margin-top:28px}
}

.scReduceMotion *{
  animation-duration:.001ms!important;
  animation-iteration-count:1!important;
  transition-duration:.001ms!important;
  scroll-behavior:auto!important;
}