/* 概率公示页样式：单栏长滚动长文档版式，PC 与 M 共用一份，靠 .is-mobile 分流 */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #fdf6e8;
  color: #4a3708;
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* 页面大标题字体：Noto Sans KR Bold（运营提供的字体包，SIL OFL 开源可商用，许可见 font/NotoSansKR-OFL.txt）。
   原字体单个 6MB，已裁成常用 2350 个韩文音节 + 英文数字标点的网页字体（约 164KB），
   运营在面板里改标题文案也能覆盖；极少见的生僻音节会逐字回退到下方系统字体。 */
@font-face {
  font-family: "NotoSansKR-Title";
  src: url("../../font/NotoSansKR-Bold-subset.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 顶部主视觉：取 KV 上半部分，底部渐变过渡到页面底色，避免硬边 */
.prob-hero {
  position: relative;
  width: 100%;
  height: clamp(220px, 28.13vw, 720px);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.prob-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 120px;
  background: linear-gradient(180deg, rgba(253, 246, 232, 0) 0%, rgba(253, 246, 232, 0.75) 60%, #fdf6e8 100%);
}

.prob-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px 80px;
}

.prob-title {
  font-family: "NotoSansKR-Title", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  font-size: 46px;
  font-weight: 700;
  text-align: center;
  color: #7a5b08;
  margin: -20px 0 36px;
  position: relative;
  z-index: 2;
}

/* 目录：胶囊按钮，点击锚点跳到对应章节 */
.toc {
  background: #fffdf7;
  border: 2px solid #f3dda6;
  border-radius: 18px;
  padding: 24px 28px;
  margin-bottom: 44px;
}
.toc__title {
  font-size: 22px;
  color: #d78900;
  margin-bottom: 16px;
}
.toc__list { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; }
.toc__list a {
  display: inline-block;
  padding: 8px 18px;
  background: #fdf1d8;
  border: 1px solid #f0d69c;
  border-radius: 999px;
  color: #7a5b08;
  text-decoration: none;
  font-size: 15px;
  transition: all .2s ease;
}
.toc__list a:hover { background: #d78900; border-color: #d78900; color: #fff; }

/* 章节卡片 */
.sec { margin-bottom: 40px; scroll-margin-top: 20px; }
.sec__title {
  font-size: 26px;
  color: #7a5b08;
  padding-left: 14px;
  border-left: 6px solid #d78900;
  margin-bottom: 18px;
}
.sec__note {
  font-size: 15px;
  color: #8a7440;
  margin: 14px 0 10px;
  line-height: 1.6;
  /* 配置里的换行按行显示（如「일반 상태 / 크리티컬 상태」两行综合中奖率），
     连续空格仍折叠，原有单行说明的表现不变 */
  white-space: pre-line;
}

/* 并排表：窄表并排，宽表独占一行 */
.tables { display: flex; flex-wrap: wrap; gap: 20px; }
.tbl { flex: 1 1 260px; min-width: 260px; }
.tbl--wide { flex: 1 1 100%; }
.tbl__caption {
  font-size: 17px;
  font-weight: 700;
  color: #d78900;
  margin-bottom: 8px;
}
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fffdf7;
  border: 1px solid #f0d69c;
  border-radius: 12px;
  overflow: hidden;
  font-size: 15px;
}
thead th {
  background: #f7e6c0;
  color: #7a5b08;
  font-weight: 700;
  padding: 11px 14px;
  text-align: left;
  white-space: nowrap;
}
tbody td {
  padding: 10px 14px;
  border-top: 1px solid #f5e6c8;
  line-height: 1.5;
}
/* 统一对齐：表头与数据默认左对齐，仅最右一列右对齐并用等宽数字，方便竖向比对 */
tbody td.num, thead th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:nth-child(even) td { background: #fffaf0; }

.prob-note {
  margin-top: 30px;
  padding: 16px 20px;
  background: #fff6e2;
  border: 1px dashed #e8c98a;
  border-radius: 12px;
  font-size: 14px;
  color: #8a7440;
  line-height: 1.7;
}

.prob-footer {
  background: #f3e6cc;
  padding: 26px 20px;
  text-align: center;
  font-size: 13px;
  color: #8a7440;
}

/* ── 移动端 ───────────────────────────────────────────── */
body.is-mobile .prob-wrap { padding: 0 16px 50px; }
/* 手机端主视觉：按图片自身比例整幅铺满宽度（750×448 ≈ 59.7vw），底部多留一小段
   页面底色，供下方渐变做过渡——这样 KV 里的角色、巴士、草地都能完整露出，
   不像 cover 那样上下各裁掉一块。 */
body.is-mobile .prob-hero {
  height: 63vw;
  background-color: #fdf6e8;
  background-size: 100% auto;
  background-position: center top;
}
/* 渐变只在 KV 最下沿几像素内快速收到底色（消除硬切边），
   前面一大段几乎全透明，不糊掉画面主体 */
body.is-mobile .prob-hero::after {
  height: 9vw;
  background: linear-gradient(180deg,
    rgba(253, 246, 232, 0) 0%,
    rgba(253, 246, 232, 0.2) 50%,
    rgba(253, 246, 232, 0.9) 63%,
    #fdf6e8 100%);
}
body.is-mobile .prob-title { font-size: 28px; margin: -6px 0 22px; }
body.is-mobile .toc { padding: 16px; border-radius: 14px; margin-bottom: 28px; }
body.is-mobile .toc__title { font-size: 18px; }
body.is-mobile .toc__list { gap: 8px; }
body.is-mobile .toc__list a { font-size: 13px; padding: 6px 13px; }
body.is-mobile .sec__title { font-size: 19px; }
body.is-mobile .sec__note { font-size: 13px; }
body.is-mobile .tbl { flex: 1 1 100%; min-width: 0; }
/* 宽表在窄屏横向滚动，避免挤压变形 */
body.is-mobile .tbl__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
body.is-mobile table { font-size: 13px; }
body.is-mobile thead th, body.is-mobile tbody td { padding: 8px 10px; }
body.is-mobile .prob-note { font-size: 12px; padding: 13px 15px; }