/* 6학년 사회 게임 — 게임 방법 설명서 공통 스타일 (시리즈와 같은 종이 질감·굵은 제목) */
:root{--paper:#F4EEE2;--ink:#24212B;--soft:#5B5566;--white:#FFFDF8;--line:#E3D8C4;--theme:#3B6FE0;--theme-soft:#E6EEFC;--gold:#F5C542;--shadow:0 10px 30px rgba(36,33,43,.12);
  font-family:'Pretendard Variable',Pretendard,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box;word-break:keep-all;overflow-wrap:anywhere}
html,body{margin:0;background:var(--paper)}
body{font-size:20px;line-height:1.6}
body:before{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.12;background-image:radial-gradient(#77694c .5px,transparent .5px);background-size:5px 5px}
h1,h2,h3{font-family:'Black Han Sans','Pretendard Variable','Malgun Gothic',sans-serif;font-weight:400;letter-spacing:-.02em;line-height:1.15;margin:0}
p{margin:0}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
.wrap{width:min(1080px,100%);margin:0 auto;padding:0 20px}

/* 위 막대 */
.nav{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:12px;min-height:64px}
.nav a{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-weight:800;font-size:18px;padding:8px 14px;border-radius:14px;background:var(--white);box-shadow:0 3px 0 #24212B14}
.nav .play{margin-left:auto;background:var(--theme);color:#fff;box-shadow:0 4px 0 color-mix(in srgb,var(--theme) 70%,#000)}
.nav .toc{display:flex;gap:6px;flex-wrap:wrap}
.nav .toc a{background:none;box-shadow:none;padding:6px 8px;font-size:16px;color:var(--soft)}

/* 표지 */
.hero{padding:34px 0 10px}
.hero .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:center}
.hero h1{font-size:clamp(46px,7vw,76px)}
.hero h1 span{color:var(--theme)}
.hero .tag{font-size:clamp(22px,2.6vw,28px);font-weight:800;margin:12px 0 18px}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chips li{background:var(--white);border:2px solid var(--line);border-radius:999px;padding:4px 14px;font-weight:800;font-size:18px}
.hero-shot{border-radius:20px;overflow:hidden;box-shadow:var(--shadow);transform:rotate(1.2deg);border:6px solid var(--white)}

/* 큰 상자 */
section{padding:26px 0}
.sec-title{display:flex;align-items:center;gap:12px;font-size:clamp(32px,4vw,42px);margin-bottom:16px}
.sec-title i{font-style:normal;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--theme);color:#fff;font-size:24px;font-family:'Black Han Sans',sans-serif}
.goal{background:var(--white);border:4px solid var(--ink);border-radius:24px;padding:22px 26px;box-shadow:var(--shadow)}
.goal .big{font-size:clamp(24px,3vw,32px);font-weight:900;line-height:1.45}
.goal .big mark{background:linear-gradient(transparent 55%,color-mix(in srgb,var(--gold) 70%,transparent) 0);color:inherit}

/* 단계 */
.steps{display:flex;flex-direction:column;gap:26px}
.step{background:var(--white);border-radius:24px;padding:22px;box-shadow:var(--shadow);display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:22px;align-items:start;break-inside:avoid}
.step-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.step-head .num{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--theme);color:#fff;font-family:'Black Han Sans',sans-serif;font-size:28px}
.step-head h3{font-size:clamp(28px,3.2vw,36px)}
.step .say{font-size:22px;font-weight:700;margin-bottom:12px}
.step.full{grid-template-columns:1fr}

/* 화면 사진 + 번호 */
.shot{position:relative;container-type:inline-size;margin:0;border-radius:16px;border:3px solid var(--ink);background:#ddd;line-height:0}
.shot img{border-radius:13px;width:100%}
.shot a{display:block;cursor:zoom-in}
.mk{position:absolute;transform:translate(-62%,-62%);width:clamp(20px,5.2cqw,36px);height:clamp(20px,5.2cqw,36px);font-size:clamp(12px,3cqw,20px)!important;border-radius:50%;background:var(--theme);color:#fff;display:grid;place-items:center;font:400 20px/1 'Black Han Sans',sans-serif;border:3px solid #fff;box-shadow:0 3px 8px #0006;pointer-events:none}
.legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.legend li{display:flex;gap:10px;align-items:flex-start;font-size:20px;font-weight:700;line-height:1.4}
.legend li b{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--theme);color:#fff;font:400 17px/1 'Black Han Sans',sans-serif;margin-top:1px}
.legend li span small{display:block;font-weight:600;color:var(--soft);font-size:17px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cap{font-size:17px;font-weight:700;color:var(--soft);margin-top:6px}

/* 규칙 상자·꿀팁 */
.rule{display:flex;gap:14px;align-items:flex-start;background:var(--theme-soft);border-radius:18px;padding:14px 18px;margin-top:12px;font-weight:800;font-size:21px}
.rule .ic{flex:none;font-size:26px;line-height:1.2}
.tips{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;list-style:none;margin:0;padding:0}
.tips li{background:var(--white);border-radius:18px;padding:16px 18px;box-shadow:0 4px 14px #24212B14;font-weight:700}
.tips li b{display:block;font-family:'Black Han Sans',sans-serif;font-weight:400;font-size:24px;color:var(--theme);margin-bottom:4px}
.collect{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.collect figure{margin:0;background:var(--white);border-radius:20px;padding:12px;box-shadow:0 4px 14px #24212B14}
.collect figure .shot{border-width:2px}
.collect figcaption{font-weight:800;font-size:20px;margin-top:10px}
.collect figcaption small{display:block;color:var(--soft);font-weight:600;font-size:17px}

/* 선생님께 */
.teacher{background:#FFF8E6;border:3px dashed #E3CC8F;border-radius:24px;padding:22px 26px}
.teacher h2{font-size:34px;margin-bottom:6px}
.teacher .who{font-weight:800;color:var(--soft);margin-bottom:14px}
.teacher h3{font-size:24px;margin:18px 0 8px}
.teacher ul,.teacher ol{margin:0;padding-left:1.3em}
.teacher li{margin:4px 0}
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;list-style:none;padding:0!important}
.flow li{background:var(--white);border-radius:16px;padding:12px 14px;margin:0!important}
.flow li b{display:block;font-family:'Black Han Sans',sans-serif;font-weight:400;font-size:22px;color:var(--theme)}
.spoiler{background:var(--white);border-left:6px solid var(--theme);border-radius:0;padding:12px 16px;margin-top:10px}
.foot{padding:30px 0 50px;text-align:center;color:var(--soft);font-size:17px}

/* 좁은 화면 */
@media (max-width:860px){
  .hero .wrap,.step,.pair{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr}
  .nav .toc{display:none}
}
/* 인쇄: A4 세로, 화면 사진은 단계마다 한 쪽 안에 */
@media print{
  .tips li,.collect figure,.g,.flow li,.teacher li,.goal{break-inside:avoid;page-break-inside:avoid}
  .foot{padding:4pt 0}
  @page{size:A4;margin:12mm}
  body{font-size:13pt}
  body:before,.nav,.no-print{display:none!important}
  .step,.goal,.collect figure,.tips li{box-shadow:none;border:1.5pt solid #ccc}
  .step{grid-template-columns:1fr 1fr;page-break-inside:avoid}
  .hero-shot{transform:none}
  section{padding:10pt 0}
  .teacher{page-break-before:always}
  a{text-decoration:none}
}