/* =========================================================================
   칠칠단의 비밀 — 「상호의 찢어진 수첩」 v3 (design/v2 확정 시안 적용본)
   - 설계 화면: 세로 800×1280 / 가로 1280×800 (#box). 기기에 맞춰 통째로 확대·축소(app.js fit)
   - 자산은 모두 로컬(assets/). 출처는 assets/CREDITS.md
   - 저사양 태블릿: 움직임은 transform/opacity 만. 큰 blur·backdrop-filter 안 씀.
     그림자 필터(drop-shadow)는 움직이지 않는 물건에만, 자주 바뀌는 자물쇠 위에는 걸지 않음.
   ========================================================================= */

/* ---------------- 글꼴 (전부 로컬 · OFL) ---------------- */
@font-face{font-family:Song;src:url(assets/fonts/songmyung.woff2) format("woff2");font-display:block}
@font-face{font-family:Pen;src:url(assets/fonts/pen.woff2) format("woff2");font-display:block}
@font-face{font-family:Gowun;src:url(assets/fonts/gowun-r.woff2) format("woff2");font-weight:400;font-display:block}
@font-face{font-family:Gowun;src:url(assets/fonts/gowun-b.woff2) format("woff2");font-weight:700;font-display:block}

/* ---------------- 아트 바이블 토큰 ---------------- */
:root{
  /* 색: 주 3색(먹·종이·가죽) + 강조 1색(인주) */
  --ink:#2B2119; --ink-2:#5A4836; --paper:#EFE2C4; --leather:#5E2F1F; --desk:#1A110B;
  --seal:#A8322A; --pencil:#353B4E; --foil:#D2AB62;
  /* 광원: 왼쪽 위 → 그림자는 모두 오른쪽 아래. 3단(닿음·놓임·들림) */
  --sh-contact:1px 1px 1px rgba(25,12,4,.45),0 0 1px rgba(25,12,4,.35);
  --sh-rest:1px 2px 2px rgba(25,12,4,.30),5px 9px 16px rgba(25,12,4,.34);
  --sh-lift:3px 6px 8px rgba(20,8,0,.30),16px 30px 44px rgba(8,4,0,.58);
  /* 모션: 무게 있게 내려앉기 / 살짝 튕기며 착지 */
  --ease-settle:cubic-bezier(.2,.8,.2,1); --ease-land:cubic-bezier(.3,1.25,.45,1);
  /* 자물쇠 치수 (세로 기본) */
  --ww:88px; --wh:106px; --fs:56px; --lh:62px; --ah:40px; --kk:50px; --open:128px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{font-family:Gowun,"Gowun Batang",serif;color:var(--ink);-webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;
  background:
    radial-gradient(ellipse 62% 46% at 30% 20%,rgba(255,190,110,.20),rgba(255,190,110,0) 70%),
    radial-gradient(ellipse 110% 85% at 38% 32%,rgba(0,0,0,0) 35%,rgba(0,0,0,.78) 100%),
    url(assets/desk.jpg) 0 0/768px;
  background-color:var(--desk)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus{outline:none}
button:focus-visible{outline:3px solid rgba(168,50,42,.6);outline-offset:3px}
b{font-weight:700}

/* 설계 화면 상자 */
/* 가로: 자물쇠를 오른쪽 쪽 폭에 맞게 */
.land{--ww:70px;--wh:92px;--fs:46px;--lh:52px;--ah:38px;--kk:44px;--open:100px}
#box{position:absolute;left:50%;top:50%;width:800px;height:1280px;transform:translate(-50%,-50%) scale(var(--fit,1))}
.land #box{width:1280px;height:800px}
#app{position:absolute;inset:0}
#box::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:90; /* 모든 물건에 같은 램프 빛 한 겹 */
  background:radial-gradient(ellipse 75% 60% at 28% 16%,rgba(255,214,150,.10),rgba(0,0,0,0) 60%,rgba(0,0,0,.16) 100%)}
.scr{position:absolute;inset:0;overflow:hidden}

/* ---------------- 재질 ---------------- */
.leather{background:url(assets/leather.jpg) 0 0/300px;background-color:var(--leather)}
.paper{background:url(assets/paper.jpg) 0 0/420px;background-color:var(--paper)}
.http .inked{-webkit-mask-image:url(assets/ink_mask.webp);mask-image:url(assets/ink_mask.webp);-webkit-mask-size:220px;mask-size:220px}
.http .inked-soft{-webkit-mask-image:url(assets/ink_soft.webp);mask-image:url(assets/ink_soft.webp);-webkit-mask-size:200px;mask-size:200px}
.tape{position:absolute;width:150px;height:40px;background:url(assets/tape.webp) center/100% 100%;opacity:.92;pointer-events:none;z-index:3}
.clip{position:absolute;width:40px;height:112px;filter:drop-shadow(2px 3px 2px rgba(0,0,0,.35));z-index:2;pointer-events:none}

/* ---------------- 펼친 수첩 ---------------- */
.openbook{position:absolute;left:10px;right:10px;top:12px;bottom:12px;border-radius:10px 14px 14px 10px;
  box-shadow:var(--sh-lift),inset 0 0 0 1px rgba(0,0,0,.45),inset 2px 2px 0 rgba(255,214,160,.10)}
.openbook .sheet{position:absolute;left:18px;right:26px;top:16px;bottom:24px;border-radius:2px 4px 4px 2px;
  box-shadow:1px 1px 0 #d9c8a2,2px 2px 0 #c7b48d,3px 3px 0 #dccca8,4px 4px 0 #c2ae86,5px 5px 0 #d6c49e,6px 6px 0 #b8a37b,7px 8px 10px rgba(0,0,0,.5)}
.sheet.ruled{background-image:repeating-linear-gradient(rgba(0,0,0,0) 0 39px,rgba(70,96,140,.17) 39px 40px),url(assets/paper.jpg);
  background-size:100% 40px,420px;background-position:0 22px,0 0}
.sheet .gutter{position:absolute;left:0;top:0;bottom:0;width:70px;pointer-events:none;
  background:linear-gradient(90deg,rgba(70,40,15,.42),rgba(70,40,15,.14) 22px,rgba(70,40,15,0) 70px)}
.sheet .stitch{position:absolute;left:12px;top:30px;bottom:30px;width:2px;pointer-events:none;
  background:repeating-linear-gradient(#6e5a44 0 12px,transparent 12px 26px);opacity:.55}
.sheet .margin-red{position:absolute;top:0;bottom:0;left:84px;width:1.5px;background:rgba(168,50,42,.32);pointer-events:none}
.sheet .light{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 90% 60% at 22% 8%,rgba(255,248,228,.38),rgba(255,248,228,0) 65%),linear-gradient(165deg,rgba(0,0,0,0) 45%,rgba(70,40,12,.16) 100%);
  box-shadow:inset 0 0 40px rgba(110,70,25,.20)}
/* 가로: 양쪽 쪽이 펼쳐진 두 쪽짜리 수첩 (가운데 제본) */
.land .openbook .sheet{left:22px;right:22px;border-radius:3px;
  box-shadow:1px 1px 0 #d9c8a2,-1px 1px 0 #d9c8a2,2px 2px 0 #c7b48d,-2px 2px 0 #c7b48d,3px 3px 0 #dccca8,-3px 3px 0 #dccca8,4px 4px 0 #c2ae86,-4px 4px 0 #c2ae86,5px 5px 0 #b8a37b,-5px 5px 0 #b8a37b,0 8px 12px rgba(0,0,0,.5)}
.land .sheet .gutter{left:calc(50% - 64px);width:128px;
  background:linear-gradient(90deg,rgba(70,40,15,0),rgba(70,40,15,.14) 34%,rgba(70,40,15,.44) 50%,rgba(70,40,15,.14) 66%,rgba(70,40,15,0))}
.land .sheet .stitch{left:calc(50% - 1px)}
.land .sheet .margin-red{display:none}

/* 쪽 안 내용 */
.sc{position:absolute;left:76px;right:24px;top:24px;bottom:18px;display:flex;flex-direction:column}
.land .sc{left:52px;right:52px;top:18px;bottom:14px}
.head{flex:none;display:flex;align-items:flex-end;gap:16px;min-height:60px;padding-bottom:8px;border-bottom:1.5px solid rgba(43,33,25,.55)}
.head .brand{font-family:Song,Gowun,serif;font-size:19px;color:var(--ink-2);padding:12px 0 2px;letter-spacing:.04em}
.head .no{font-family:Song,Gowun,serif;font-size:22px;color:var(--ink-2);padding-bottom:2px}
.head .no b{font-family:Pen,Gowun,serif;font-weight:400;font-size:46px;line-height:30px;color:var(--seal);padding:0 4px}
.head .sp{flex:1}
.head .f{font-size:17px;color:var(--ink-2);padding-bottom:4px;white-space:nowrap}
.head .f u{text-decoration:none;font-family:Pen,Gowun,serif;font-size:34px;color:var(--pencil);border-bottom:1px solid rgba(43,33,25,.4);padding:0 8px;margin-left:6px}
.notebtn{height:56px;padding:0 16px 0 12px;display:flex;align-items:center;gap:8px;font-size:18px;font-weight:700;color:var(--ink);border-radius:3px;white-space:nowrap;
  background:url(assets/paper.jpg) 0 0/420px #f3e8cf;
  box-shadow:inset 0 0 0 4px rgba(0,0,0,0),inset 0 0 0 5px rgba(43,33,25,.3),inset 0 1px 0 rgba(255,250,235,.8),0 2px 0 #c9b28a,0 3px 0 #a58c63,0 4px 0 #7d6545,var(--sh-rest);
  transition:transform .12s var(--ease-settle)}
.notebtn:active{transform:translateY(3px)}
.notebtn i{width:20px;height:28px;background:url(assets/torn_page_s.webp) center/100% 100%;filter:drop-shadow(1px 1px 0 rgba(0,0,0,.3))}
.notebtn b{font-family:Song,Gowun,serif;font-weight:400;font-size:24px;color:var(--seal)}
.body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:16px 4px 8px 0;scrollbar-width:thin;scrollbar-color:rgba(90,72,54,.5) transparent}
.body::-webkit-scrollbar{width:6px}.body::-webkit-scrollbar-thumb{background:rgba(90,72,54,.45);border-radius:3px}

/* 펼침면 배치: 세로 = 위→아래 한 줄, 가로 = 왼쪽 쪽(l·f) / 오른쪽 쪽(r) */
.spread{min-height:100%;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;grid-template-areas:"l" "r" "f"}
.spread>.l{grid-area:l;position:relative}
.spread>.r{grid-area:r;display:flex;flex-direction:column;position:relative;min-width:0}
.spread>.f{grid-area:f}
.spread>.r>.cardbtn:last-child{margin-top:auto}
.land .spread{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);grid-template-rows:1fr auto;grid-template-areas:"l r" "f r";column-gap:96px}
.land .spread>.l{align-self:start}
.land .spread>.f{align-self:end}

/* ---------------- 글자 위계 3단 (+작은 꼬리표) ---------------- */
.t-title{font-family:Song,Gowun,serif;font-size:52px;line-height:60px;letter-spacing:-.01em;color:var(--ink);margin:6px 0 16px;word-break:keep-all}
.t-body{font-size:20px;line-height:34px;color:var(--ink);word-break:keep-all}
.t-hand{font-family:Pen,Gowun,serif;font-size:36px;line-height:40px;color:var(--pencil);word-break:keep-all}
.t-label{font-weight:700;font-size:16px;letter-spacing:.12em;color:var(--ink-2)}
.rubric{font-family:Song,Gowun,serif;color:var(--seal)}
.red{color:var(--seal)}
.sub{color:var(--ink-2)}
.note{margin-top:24px;transform:rotate(-1.2deg);transform-origin:left}
.land .t-title{font-size:46px;line-height:54px}

/* ---------------- 버튼 = 두꺼운 마분지 카드 ---------------- */
.cardbtn{display:flex;align-items:center;justify-content:center;gap:14px;height:96px;width:100%;border-radius:4px;flex:none;
  background:url(assets/paper.jpg) 0 0/420px #f3e8cf;color:var(--seal);font-weight:700;font-size:30px;letter-spacing:.02em;
  box-shadow:inset 0 0 0 9px rgba(0,0,0,0),inset 0 0 0 10.5px rgba(168,50,42,.45),inset 0 1px 0 rgba(255,250,235,.8),
             0 2px 0 #c9b28a,0 4px 0 #a58c63,0 5px 0 #7d6545,var(--sh-rest);
  transition:transform .12s var(--ease-settle),box-shadow .12s}
.cardbtn:active{transform:translateY(4px);box-shadow:inset 0 0 0 10.5px rgba(168,50,42,.45),0 1px 0 #7d6545,var(--sh-contact)}
.cardbtn .arr{font-family:Song,Gowun,serif;font-size:34px;transform:translateY(-1px)}
.cardbtn.alt{height:64px;width:auto;font-size:21px;color:var(--ink);padding:0 22px;
  box-shadow:inset 0 0 0 5px rgba(0,0,0,0),inset 0 0 0 6px rgba(43,33,25,.35),inset 0 1px 0 rgba(255,250,235,.8),0 2px 0 #c9b28a,0 3px 0 #a58c63,0 4px 0 #7d6545,var(--sh-rest)}
.cardbtn.alt:active{transform:translateY(3px);box-shadow:inset 0 0 0 6px rgba(43,33,25,.35),0 1px 0 #7d6545,var(--sh-contact)}
.cardbtn.alt .arr{font-size:24px}
.cardbtn:disabled{cursor:default;color:rgba(43,33,25,.45);transform:none;background-color:#e2d6bb;
  box-shadow:inset 0 0 0 6px rgba(0,0,0,0),inset 0 0 0 7px rgba(43,33,25,.18),0 1px 0 #a58c63,var(--sh-contact)}
.cardbtn.ghost{background:transparent;box-shadow:inset 0 0 0 2px rgba(43,33,25,.45)}
.cardbtn.danger{color:var(--seal)}

/* =========================================================================
   A. 표지
   ========================================================================= */
#sA .book{position:absolute;left:96px;top:118px;width:584px;height:870px;transform:rotate(-1.6deg)}
#sA .pages{position:absolute;left:14px;right:-12px;top:8px;bottom:-12px;border-radius:4px 10px 10px 4px;
  background:repeating-linear-gradient(90deg,#e6d6b2 0 2px,#cdb995 2px 3px),#e2d1ab;box-shadow:var(--sh-lift)}
#sA .pages::after{content:"";position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(0deg,#e8d9b7 0 2px,#c6b18b 2px 3px);clip-path:inset(calc(100% - 14px) 0 0 0)}
#sA .loose{position:absolute;width:210px;height:290px;background:url(assets/torn_page.webp) center/100% 100%;filter:brightness(.86) sepia(.15) drop-shadow(3px 5px 5px rgba(0,0,0,.5))}
#sA .loose.l1{right:-58px;top:236px;transform:scaleX(-1) rotate(-7deg)}
#sA .loose.l2{right:-30px;top:560px;transform:scaleX(-1) rotate(4deg);width:170px;height:240px}
#sA .cover{position:absolute;inset:0;border-radius:6px 16px 16px 6px;overflow:hidden;background-size:220px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.55),inset 2px 2px 0 rgba(255,214,160,.14),inset -4px -6px 14px rgba(0,0,0,.45),3px 5px 6px rgba(0,0,0,.4)}
#sA .cover::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse 70% 50% at 28% 22%,rgba(255,205,150,.22),rgba(0,0,0,0) 60%),linear-gradient(160deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.46))}
#sA .cover::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;border-radius:inherit;
  box-shadow:inset 0 0 0 4px rgba(205,150,105,.75),inset 0 0 18px 7px rgba(185,125,80,.55);
  }
#sA .cover::after{opacity:.35}
.http #sA .cover::after{opacity:1;-webkit-mask-image:url(assets/wear.webp);mask-image:url(assets/wear.webp);-webkit-mask-size:180px;mask-size:180px}
#sA .era,#sA .title,#sA .rule,#sA .label,#sA .warn{z-index:3}
#sA .spine{position:absolute;left:0;top:0;bottom:0;width:58px;background:url(assets/cloth.jpg) 0 0/180px #3a2018;
  box-shadow:inset -6px 0 10px rgba(0,0,0,.45),inset 8px 0 8px rgba(255,200,150,.06),2px 0 0 rgba(0,0,0,.35)}
#sA .spine::after{content:"";position:absolute;right:-1px;top:0;bottom:0;width:3px;background:linear-gradient(90deg,rgba(0,0,0,.5),rgba(255,210,160,.12))}
#sA .frame{position:absolute;left:96px;right:40px;top:40px;bottom:40px;border-radius:4px;box-shadow:inset 1px 1px 0 rgba(0,0,0,.55),1px 1px 0 rgba(255,214,160,.13)}
#sA .frame::after{content:"";position:absolute;inset:10px;border-radius:2px;box-shadow:inset 1px 1px 0 rgba(0,0,0,.5),1px 1px 0 rgba(255,214,160,.10)}
#sA .era{position:absolute;left:58px;right:0;top:150px;text-align:center;font-family:Song,Gowun,serif;font-size:22px;letter-spacing:.5em;color:var(--foil);opacity:.85}
#sA .title{position:absolute;left:58px;right:0;top:196px;text-align:center;font-family:Song,Gowun,serif;font-size:92px;line-height:104px;cursor:default;
  background:linear-gradient(175deg,#f2d896 0%,#c99a4a 38%,#e8c67c 55%,#a7782f 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(-1px -1px 0 rgba(0,0,0,.7)) drop-shadow(1px 1px 0 rgba(255,220,160,.22)) drop-shadow(0 0 6px rgba(0,0,0,.25))}
#sA .rule{position:absolute;left:220px;right:160px;top:428px;height:1px;background:rgba(210,171,98,.55);box-shadow:0 1px 0 rgba(0,0,0,.5)}
#sA .rule::before{content:"◆";position:absolute;left:50%;top:-12px;transform:translateX(-50%);font-size:14px;color:var(--foil)}
#sA .label{position:absolute;left:186px;top:500px;width:290px;height:150px;transform:rotate(1.2deg);border-radius:3px;box-shadow:var(--sh-contact),inset 0 0 18px rgba(120,80,30,.25)}
#sA .label::before{content:"";position:absolute;inset:9px;border:1.5px solid rgba(43,33,25,.55);border-radius:2px;box-shadow:inset 0 0 0 4px rgba(43,33,25,.35)}
#sA .label .k{position:absolute;left:28px;top:24px;font-size:15px;letter-spacing:.3em;color:var(--ink-2);font-weight:700}
#sA .label .v{position:absolute;left:0;right:0;top:46px;text-align:center;font-family:Pen,Gowun,serif;font-size:62px;line-height:70px;color:var(--pencil);transform:rotate(-2deg)}
#sA .label .ln{position:absolute;left:28px;right:28px;top:110px;height:1px;background:rgba(43,33,25,.45)}
#sA .warn{position:absolute;left:150px;top:720px;font-family:Pen,Gowun,serif;font-size:36px;color:#e8d6b0;opacity:.78;transform:rotate(-3deg)}
#sA .ribbon{position:absolute;left:470px;top:968px;width:26px;height:120px;transform:rotate(5deg);transform-origin:top;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 1px,rgba(0,0,0,0) 1px 3px),linear-gradient(90deg,#5e1612,#9c2a22 28%,#d0574a 46%,#8f241d 72%,#5e1612);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 88%,0 100%);filter:drop-shadow(3px 4px 3px rgba(0,0,0,.45))}
#sA .tagbox{position:absolute;left:0;right:0;top:1048px;display:flex;flex-direction:column;align-items:center;gap:22px}
#sA .tag{position:relative;width:320px;height:108px;transform:rotate(-2deg);border-radius:6px 30px 30px 6px;
  background:url(assets/paper_crumple.jpg) 0 0/360px #e3cc98;box-shadow:0 2px 0 #a88c5c,var(--sh-rest);
  display:flex;align-items:center;padding-left:84px;gap:12px;color:var(--seal);animation:nudge 2.4s var(--ease-settle) infinite;will-change:transform}
#sA .tag::before{content:"";position:absolute;left:24px;top:38px;width:30px;height:30px;border-radius:50%;
  background:radial-gradient(circle,#1a110b 0 7px,#c9b07c 8px 12px,rgba(0,0,0,0) 13px);box-shadow:inset 1px 1px 1px rgba(0,0,0,.3)}
#sA .tag b{font-size:32px;letter-spacing:.04em}
#sA .tag i{font-style:normal;font-family:Song,Gowun,serif;font-size:36px}
#sA .tag small{position:absolute;left:86px;bottom:12px;font-size:17px;color:var(--ink-2);font-weight:700}
#sA .tag.two b,#sA .tag.two i{transform:translateY(-12px)}
#sA .tagbox.two{top:1026px}
#sA .tag:active{animation:none;transform:rotate(-2deg) translateY(3px)}
#sA .newteam{background-color:#e6d8b8;transform:rotate(1deg);height:60px;font-size:20px}
#sA .tag.two~.newteam{margin-top:-6px}
#sA .org{position:absolute;left:0;right:0;bottom:22px;text-align:center;font-size:17px;letter-spacing:.32em;color:#a08a68}
@keyframes nudge{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(-2deg) translateY(-3px)}}
/* 가로 표지: 수첩은 왼쪽, 꼬리표는 오른쪽 */
.land #sA .book{left:150px;top:46px;transform:rotate(-1.6deg) scale(.8);transform-origin:0 0}
.land #sA .ribbon{left:530px;top:730px;height:90px}
.land #sA .tagbox{left:700px;right:90px;top:310px}
.land #sA .tagbox.two{top:290px}
.land #sA .org{left:700px;right:90px;bottom:60px}

/* =========================================================================
   요원 등록(난이도) · 코스
   ========================================================================= */
.choices{display:flex;flex-direction:column;gap:30px;margin-top:40px}
.port .sp-level>.r{padding-top:30px}
.port .sp-level .choice{min-height:150px}
.port .sp-level .back{margin-top:44px;align-self:center}
.choice{position:relative;display:flex;align-items:center;gap:24px;min-height:128px;padding:16px 30px 16px 24px;border-radius:4px;text-align:left;width:100%;
  background:url(assets/paper.jpg) 0 0/420px #f3e8cf;color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,250,235,.8),inset 0 0 22px rgba(120,80,30,.16),0 2px 0 #c9b28a,0 4px 0 #a58c63,0 5px 0 #7d6545,var(--sh-rest);
  transition:transform .12s var(--ease-settle),box-shadow .12s}
.choice::after{content:"";position:absolute;inset:9px;border:1.5px solid rgba(43,33,25,.42);pointer-events:none}
.choice:nth-child(1){transform:rotate(-.5deg)}.choice:nth-child(2){transform:rotate(.4deg)}.choice:nth-child(3){transform:rotate(-.3deg)}
.choice:active{transform:translateY(4px);box-shadow:inset 0 0 22px rgba(120,80,30,.16),0 1px 0 #7d6545,var(--sh-contact)}
.choice .arr{margin-left:auto;font-family:Song,Gowun,serif;font-size:38px;color:var(--seal)}
.ch-seal{flex:none;width:86px;height:86px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:Song,Gowun,serif;font-size:46px;color:var(--seal);
  border:4px solid var(--seal);box-shadow:inset 0 0 0 4px rgba(0,0,0,0),inset 0 0 0 5.5px rgba(168,50,42,.85);transform:rotate(-9deg);padding-bottom:4px}
.ch-txt b{display:block;font-family:Song,Gowun,serif;font-weight:400;font-size:38px;line-height:46px}
.ch-txt small{display:block;font-size:19px;line-height:28px;color:var(--ink-2)}
.ch-big{flex:none;width:92px;text-align:center;font-family:Song,Gowun,serif;font-size:60px;line-height:62px;color:var(--seal)}
.ch-big small{display:block;font-family:Gowun;font-weight:700;font-size:17px;line-height:22px;color:var(--ink-2);letter-spacing:.2em}
.ch-route{display:flex;flex-wrap:wrap;gap:8px}
.ch-route i,.route i{position:relative;width:40px;height:40px;border:1.5px solid rgba(43,33,25,.55);font-style:normal;font-family:Song,Gowun,serif;font-size:21px;display:flex;align-items:center;justify-content:center;color:var(--ink-2)}
.ch-route i.fin,.route i.fin{border-style:dashed}
.back{margin-top:28px;align-self:flex-start}
.land .choices{margin-top:0;gap:22px}
.land .choice{min-height:112px}

/* =========================================================================
   공통 종이 카드 (문제 카드·줄거리·전보·모달) — 찢긴 가장자리 텍스처를 9조각으로 늘림
   그림자는 ::before 한 겹에만 (안의 자물쇠가 바뀌어도 그림자를 다시 그리지 않음)
   ========================================================================= */
.qcard{position:relative;padding:40px 40px 36px;margin:0 -8px 0 -30px;transform:rotate(-.7deg)}
.qcard::before{content:"";position:absolute;inset:0;z-index:-1;border:40px solid transparent;border-image:url(assets/card.webp) 52 fill / 40px stretch;
  filter:drop-shadow(1px 2px 1px rgba(25,12,4,.3)) drop-shadow(5px 10px 12px rgba(25,12,4,.32));will-change:transform}
.qcard>.clip{left:40px;top:-52px}
.qcard .qin{position:relative}
.stamp-tag{display:inline-block;padding:7px 16px 6px;border:3px solid var(--seal);color:var(--seal);background:rgba(168,50,42,.06);font-weight:700;font-size:19px;letter-spacing:.1em;transform:rotate(-1.5deg)}

/* Story Time · 브리핑 */
.storycard{margin-top:28px;transform:rotate(.6deg)}
.storycard .storytxt{margin-top:16px;font-size:21px;line-height:36px}
.sp-story .r>.cardbtn{margin-top:36px}
.port .sp-story>.r{padding-top:40px}
.port .sp-story .storycard{margin-top:24px;margin-bottom:auto}
.port .sp-story .storycard .storytxt{font-size:22px;line-height:40px}
.land .sp-story .storycard{margin-top:0}
.telecard{margin:8px -8px 0 -30px;transform:rotate(-.8deg)}
.telecard .tele{margin-top:12px}
.rules{margin-top:30px}
.rules ol{list-style:none;margin-top:10px}
.rules li{display:flex;gap:14px;align-items:baseline;font-size:20px;line-height:32px;padding:7px 0;border-bottom:1px dashed rgba(43,33,25,.25)}
.rules .rn{flex:none;width:34px;font-family:Song,Gowun,serif;font-size:26px;color:var(--seal);text-align:center}
.sp-brief .r{padding-top:20px}
.port .sp-brief .t-title{font-size:46px;line-height:54px}
.port .telecard .tele{font-size:19px;line-height:31px}
.port .rules{margin-top:22px}
.port .rules li{padding:5px 0}
.land .sp-brief .r{padding-top:0}
/* 용품 = 테이프로 붙인 구겨진 목록 쪽지 */
.kit{position:relative;margin:4px 0 30px;padding:20px 24px 12px;background:url(assets/paper_crumple.jpg) 0 0/360px #ead9b3;transform:rotate(.5deg);box-shadow:var(--sh-rest)}
.kit .kt-tape{left:42%;top:-18px;transform:rotate(-3deg);width:130px}
.kt{display:flex;gap:16px;align-items:baseline;padding:9px 0;border-bottom:1px dashed rgba(43,33,25,.28)}
.kt:last-child{border-bottom:0}
.kt b{flex:none;width:118px;font-family:Song,Gowun,serif;font-weight:400;font-size:22px;line-height:28px;color:var(--seal)}
.kt span{font-size:18px;line-height:28px;word-break:keep-all}
.land .sp-brief .t-title{font-size:40px;line-height:48px;margin-bottom:8px}
.land .telecard .tele{font-size:19px;line-height:30px}
.land .rules{margin-top:18px}
.land .rules li{font-size:19px;line-height:28px;padding:5px 0}
.land .kit{margin:14px 0 20px}

/* =========================================================================
   E. 이동 (지도)
   ========================================================================= */
.sp-move .t-title small{font-size:30px;margin-right:12px}
.sp-move .r{min-height:560px;padding:26px 6px 10px}
.mapwrap{position:relative;flex:1;width:100%;max-width:640px;margin:0 auto;transform:rotate(1.1deg);
  background:url(assets/map_paper.webp) center/100% 100%;filter:drop-shadow(1px 2px 1px rgba(25,12,4,.35)) drop-shadow(4px 8px 10px rgba(25,12,4,.28))}
.mapwrap svg{position:absolute;left:7%;top:5.5%;width:86%;height:89%}
.sp-move .tape.t1{left:-22px;top:20px;transform:rotate(-38deg);width:130px}
.sp-move .tape.t2{right:-14px;top:24px;transform:rotate(34deg);width:120px}
.route{display:flex;align-items:center;gap:8px;margin-top:18px}
.route .t-label{margin-right:8px}
.route i.done{color:rgba(43,33,25,.35)}
.route i.done::after{content:"";position:absolute;left:3px;right:3px;top:18px;height:2.5px;background:var(--pencil);transform:rotate(-40deg);opacity:.8}
.route i.now{border:2.5px solid var(--seal);color:var(--seal);font-weight:700}
.sp-move .hint{margin:14px 0 22px;font-size:18px;color:var(--ink-2)}
.sp-move .note{margin-top:14px}
.land .sp-move .r{min-height:0;padding:8px 0 4px}
.land .mapwrap{max-width:none;width:auto;aspect-ratio:640/700;flex:1;align-self:center}

/* 오른쪽 가장자리 색인 탭 (누르면 수첩 모아 보기) */
.tabs{position:absolute;right:2px;top:150px;display:flex;flex-direction:column;gap:6px;z-index:1;padding:0}
.tabs i{display:flex;align-items:center;justify-content:center;width:34px;height:100px;font-style:normal;font-family:Song,Gowun,serif;font-size:20px;color:var(--ink);padding-left:8px;
  background:url(assets/paper.jpg) 0 0/300px #e8d9b6;border-radius:0 6px 6px 0;box-shadow:var(--sh-contact)}
.tabs i.miss{width:18px;height:70px;margin:15px 0;color:transparent;background:url(assets/stub.webp) 0 -200px/46px 860px;filter:brightness(.8) drop-shadow(1px 1px 1px rgba(0,0,0,.4));border-radius:0;box-shadow:none}
.tabs i.now{background-color:#f3e6c6;color:var(--seal);box-shadow:var(--sh-contact),inset -3px 0 0 var(--seal)}
.land .tabs{top:96px;gap:4px}
.land .tabs i{height:72px}
.land .tabs i.miss{height:50px;margin:11px 0}

/* =========================================================================
   B. 문제 (부 이야기 + 문제 카드 + 놋쇠 자물쇠)
   ========================================================================= */
.sp-stage .t-title{margin:4px 0 10px}
.scene{font-size:18px;line-height:29px;color:var(--ink-2);padding-left:14px;border-left:3px solid rgba(168,50,42,.35);margin-bottom:14px;word-break:keep-all}
.sp-stage .storytxt{font-size:20px;line-height:31px}
.sp-stage .r{padding-top:40px}
.land .sp-stage .r{padding-top:34px}
.sp-stage .qcard{padding:36px 36px 28px 40px}
.sp-stage .qcard>.clip{top:-60px}
.sp-stage{grid-template-rows:auto auto auto 1fr;grid-template-areas:"l" "r" "f" "g"}
.spread>.g{grid-area:g}
.sp-stage .f{padding-top:22px}
.sp-stage .g{padding-top:14px;align-self:end}
.land .sp-stage{grid-template-rows:1fr auto;grid-template-areas:"l r" "g r"}
.land .sp-stage .f{padding-top:16px;align-self:start}
.land .sp-stage .g{padding:16px 0 4px;align-self:end}
.land .sp-stage .storytxt{font-size:19px;line-height:30px}
.qc .qtop{display:flex;align-items:center;gap:12px}
.qc .q{margin:10px 0 12px;font-size:21px;line-height:33px;word-break:keep-all}
.land .qc .q{font-size:19px;line-height:30px}
.qc .qimg{display:block;max-width:100%;margin:0 auto 14px;border-radius:2px;box-shadow:var(--sh-contact)}
.hn{position:relative;margin:0 0 10px;padding:10px 16px 12px;background:url(assets/paper.jpg) 0 0/300px #f6edd7;box-shadow:var(--sh-contact);border-left:4px solid rgba(168,50,42,.55)}
.hn:nth-child(odd){transform:rotate(.4deg)}.hn:nth-child(even){transform:rotate(-.4deg)}
.hn b{display:block;font-family:Song,Gowun,serif;font-weight:400;font-size:19px;color:var(--seal)}
.hn span{display:block;font-size:19px;line-height:30px;word-break:keep-all}
.wrongmsg{height:0;overflow:hidden;text-align:center;font-weight:700;font-size:20px;color:var(--seal);opacity:0;transition:opacity .2s}
.wrongmsg.on{height:auto;margin-top:12px;opacity:1}

/* 놋쇠 자물쇠 */
.lock{position:relative;border-radius:14px;display:flex;align-items:center;gap:16px;padding:14px 20px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,rgba(0,0,0,.03) 1px 3px),linear-gradient(165deg,#ecd08c 0%,#c69a4c 30%,#9d7230 62%,#c9a259 82%,#8a6227 100%);
  box-shadow:inset 1px 1px 0 rgba(255,240,200,.75),inset -1px -2px 0 rgba(60,35,5,.6),inset 0 0 22px rgba(80,50,10,.35),var(--sh-rest)}
.lock .screw{position:absolute;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f4dea4,#9a7332 60%,#5c3d12);box-shadow:1px 1px 1px rgba(0,0,0,.4)}
.lock .screw::after{content:"";position:absolute;left:2px;right:2px;top:6px;height:2px;background:rgba(50,30,5,.7);transform:rotate(35deg)}
.lock .s1{left:9px;top:9px}.lock .s2{right:9px;top:9px}.lock .s3{left:9px;bottom:9px}.lock .s4{right:9px;bottom:9px}
.lock .wheels{display:flex;align-items:center;gap:12px;flex:1;justify-content:center}
.wheelcol{display:flex;flex-direction:column;align-items:center;width:var(--ww)}
.wheelcol .up,.wheelcol .dn{width:var(--ww);height:var(--ah);display:flex;align-items:center;justify-content:center}
.wheelcol .up::before,.wheelcol .dn::before{content:"";width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;filter:drop-shadow(1px 1px 0 rgba(255,236,190,.6))}
.wheelcol .up::before{border-bottom:13px solid #5a3a12}
.wheelcol .dn::before{border-top:13px solid #5a3a12}
.wheelcol .up:active::before{border-bottom-color:var(--seal)}
.wheelcol .dn:active::before{border-top-color:var(--seal)}
.wheel{position:relative;display:block;width:calc(var(--ww) - 8px);height:var(--wh);border-radius:6px;overflow:hidden;
  background:linear-gradient(#050302,#2b2017 14%,#5a4a3a 44%,#6c5a48 52%,#2b2017 86%,#050302);
  box-shadow:0 0 0 3px #7c5a24,0 0 0 4px #f0d79a,inset 0 0 8px rgba(0,0,0,.7)}
.wheel.sel{box-shadow:0 0 0 3px #7c5a24,0 0 0 4px #f0d79a,0 0 0 7px var(--seal),inset 0 0 8px rgba(0,0,0,.7)}
.wheel span{position:absolute;left:0;right:0;text-align:center;font-weight:700;color:#f2e6cc}
.wheel::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(0,0,0,.85),rgba(0,0,0,.35) 22%,rgba(255,240,210,.06) 48%,rgba(0,0,0,.35) 78%,rgba(0,0,0,.85))}
.wheel .c{top:calc((var(--wh) - var(--lh)) / 2);font-size:var(--fs);line-height:var(--lh);text-shadow:0 2px 2px rgba(0,0,0,.6)}
.wheel .a,.wheel .b{font-size:calc(var(--fs) * .7);line-height:calc(var(--fs) * .7);opacity:.7;transform:scaleY(.5)}
.wheel .a{top:calc(var(--fs) * -.28)}.wheel .b{bottom:calc(var(--fs) * -.28)}
.wheel.roll-up .c{animation:rollUp .2s var(--ease-settle)}
.wheel.roll-dn .c{animation:rollDn .2s var(--ease-settle)}
@keyframes rollUp{from{transform:translateY(45%);opacity:.2}}
@keyframes rollDn{from{transform:translateY(-45%);opacity:.2}}
.lock .open{flex:none;width:var(--open);height:var(--open);border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 36% 30%,#fbe7b0,#d6ad5e 38%,#a17630 70%,#7a5520);
  box-shadow:0 0 0 5px #7c5a24,0 0 0 7px #e9cf8f,3px 5px 6px rgba(40,20,0,.5),inset -4px -6px 10px rgba(70,40,5,.45),inset 3px 4px 6px rgba(255,245,215,.6);
  font-weight:700;font-size:32px;color:#3a220c;text-shadow:1px 1px 0 rgba(255,238,195,.75),-1px -1px 0 rgba(60,35,5,.35);letter-spacing:.06em;transition:transform .1s}
.lock .open:active{transform:translateY(2px);box-shadow:0 0 0 5px #7c5a24,0 0 0 7px #e9cf8f,1px 2px 2px rgba(40,20,0,.5),inset 4px 6px 10px rgba(70,40,5,.45)}
.lock.ok .open{transform:scale(.94);background:radial-gradient(circle at 36% 30%,#fff3c8,#ecc56f 38%,#b98a3a 70%,#7a5520)}
.lock.ok .wheel{box-shadow:0 0 0 3px #7c5a24,0 0 0 4px #f0d79a,0 0 0 7px #e9cf8f,inset 0 0 8px rgba(0,0,0,.7)}
.lock.shake{animation:shake .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(5px)}30%,50%,70%{transform:translateX(-9px)}40%,60%{transform:translateX(9px)}}
/* 자릿수가 많으면(2부 9자리) 3칸씩 끊고, 열기 손잡이는 아래 긴 놋쇠 막대로 */
.lock.many{flex-wrap:wrap;--ww:56px;--wh:92px;--fs:42px;--lh:50px;padding:12px 16px 16px;row-gap:12px}
.land .lock.many{--ww:42px;--wh:80px;--fs:34px;--lh:40px;padding:10px 12px 14px}
.land .lock.many .wheels{gap:4px}
.land .lock.many .open{height:60px}
.lock.many .wheels{width:100%;gap:6px}
.lock .sep{width:16px;height:4px;border-radius:2px;background:#5a3a12;opacity:.55;margin:0 4px}
.lock.many .open{width:100%;height:70px;border-radius:35px;font-size:28px}
/* 숫자 바로 누르기 (타자기 활자 단추) */
.nkeys{display:flex;justify-content:space-between;margin-top:12px;padding:0 2px}
.tkey{width:var(--kk);height:var(--kk);border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;
  background:radial-gradient(circle at 40% 32%,#4a403a,#1d1714 62%,#0f0b09);color:#f2e6cc;font-weight:700;font-size:22px;
  box-shadow:0 0 0 3px #a98443,0 0 0 4px #e6cc8e,2px 3px 0 4px rgba(40,22,6,.55),inset 0 2px 2px rgba(255,240,215,.22);transition:transform .08s}
.tkey:active{transform:translateY(3px);box-shadow:0 0 0 3px #a98443,0 0 0 4px #e6cc8e,0 1px 0 4px rgba(40,22,6,.55),inset 0 2px 3px rgba(0,0,0,.5)}
/* 영어 단어 = 활자판 */
.lock.type{flex-direction:column;align-items:stretch;padding:16px 16px 18px;gap:14px;--open:100px}
.land .lock.type{--kk:40px;--open:90px;padding:12px 12px 14px;gap:10px}
.land .tslot{width:52px;height:74px;font-size:38px}
.land .slots{gap:6px}
.land .krow{gap:5px}
.land .tkeys{gap:6px;padding:10px 5px 5px}
.lock.type .lrow{display:flex;align-items:center;gap:14px}
.slots{flex:1;display:flex;gap:8px;justify-content:center}
.tslot{width:60px;height:84px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:44px;color:var(--ink);
  background:linear-gradient(#f8efd8,#e4d4ae);box-shadow:inset 0 -3px 0 rgba(120,85,30,.35),inset 0 0 0 1px rgba(90,60,20,.35),0 0 0 3px #7c5a24,0 0 0 4px #f0d79a}
.tslot.empty::after{content:"";width:28px;height:3px;background:rgba(43,33,25,.35);margin-top:40px}
.tslot.sel{box-shadow:inset 0 -3px 0 rgba(120,85,30,.35),inset 0 0 0 1px rgba(90,60,20,.35),0 0 0 3px #7c5a24,0 0 0 4px #f0d79a,0 0 0 7px var(--seal)}
.tkeys{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 6px 6px;border-radius:8px;background:rgba(40,22,6,.22);box-shadow:inset 1px 1px 3px rgba(40,22,6,.45),1px 1px 0 rgba(255,236,190,.35)}
.krow{display:flex;gap:6px}
.tkey.wide{width:calc(var(--kk) * 1.7);border-radius:calc(var(--kk) / 2);font-size:18px}

/* 힌트권 */
.hints{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tkcol{display:flex;flex-direction:column;gap:6px}
.tks{display:flex;align-items:center;gap:10px}
.ticket{position:relative;width:100px;height:60px;border-radius:3px;background:linear-gradient(#e9d39b,#dcc183);color:#5a3e17;flex:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:var(--sh-contact)}
.ticket::before{content:"";position:absolute;left:-5px;top:4px;bottom:4px;width:10px;background:radial-gradient(circle at 0 50%,#f4ead3 3.2px,rgba(0,0,0,0) 3.6px) 0 0/10px 10px}
.ticket::after{content:"";position:absolute;inset:5px;border:1px dashed rgba(90,62,23,.45);border-radius:2px}
.ticket b{font-size:18px;letter-spacing:.1em}
.ticket small{font-family:Song,Gowun,serif;font-size:14px;opacity:.75}
.ticket.used{width:28px;background:#dcc183;clip-path:polygon(0 0,100% 0,82% 8%,100% 17%,78% 28%,96% 39%,80% 50%,100% 62%,76% 72%,95% 84%,80% 93%,100% 100%,0 100%)}
.ticket.used *,.ticket.used::after{display:none}
.ticket.peel{transform:rotate(-4deg) translateY(-3px);box-shadow:var(--sh-rest)}
.tks .more{font-family:Pen,Gowun,serif;font-size:30px;color:var(--pencil)}
.hbtn{margin-left:auto}
.hdone{margin-left:auto;text-align:right;font-size:18px;line-height:26px;color:var(--ink-2)}
.sp-stage .left{font-size:17px;color:var(--ink-2)}
.sp-stage .left b{color:var(--ink)}
.hintnotes{margin:0 0 14px}
.land .hintnotes .hn span{font-size:18px;line-height:27px}

/* =========================================================================
   C. 쪽 되찾음 · 중간 성공 (책상 위)
   ========================================================================= */
.desk .cap{position:absolute;left:0;right:0;top:46px;text-align:center;z-index:4}
.desk .cap .k{font-size:17px;letter-spacing:.42em;color:#c9ad7a;cursor:default;display:inline-block;padding:6px 10px}
.desk .cap h2{font-family:Song,Gowun,serif;font-weight:400;font-size:52px;line-height:62px;color:#f3e3bd;margin-top:2px;text-shadow:2px 3px 6px rgba(0,0,0,.6);word-break:keep-all}
#sC .hero{position:absolute;left:100px;top:178px;width:600px;height:700px;transform:rotate(-2.4deg);animation:fly .9s var(--ease-land) both;will-change:transform}
#sC .hshadow{position:absolute;left:-62px;top:-52px;width:784px;height:832px;transform:translate(18px,30px);background:url(assets/torn_page_shadow.webp) center/100% 100%}
#sC .hpaper{position:absolute;inset:0;background:url(assets/torn_page.webp) center/100% 100%}
@keyframes fly{from{transform:translate(300px,-260px) rotate(16deg) scale(1.08);opacity:0}60%{opacity:1}}
#sC .hero .ruled{position:absolute;inset:0 0 0 30px;background-image:repeating-linear-gradient(rgba(0,0,0,0) 0 39px,rgba(70,96,140,.17) 39px 40px);background-position:0 22px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30px,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 30px,#000 calc(100% - 26px),transparent)}
#sC .hero .in{position:absolute;left:78px;right:48px;top:58px}
#sC .hero .pn{font-size:24px;letter-spacing:.06em}
#sC .hero .t-title{font-size:50px;margin:2px 0 24px}
#sC .hero .t-hand{line-height:40px}
#sC .hero .t-hand em{font-style:normal;color:var(--seal)}
#sC .seal{position:absolute;right:44px;bottom:56px;width:196px;height:196px;transform:rotate(-13deg);color:var(--seal);opacity:.92;mix-blend-mode:multiply;animation:thunk .32s .75s var(--ease-settle) both}
#sC .seal svg,.halfseal svg,.okseal svg{width:100%;height:100%;display:block}
@keyframes thunk{from{transform:rotate(-13deg) scale(1.6);opacity:0}}
#sC .tape.t1{left:262px;top:158px;transform:rotate(-5deg)}
.desk .foot{position:absolute;left:96px;right:96px;bottom:48px;display:flex;flex-direction:column;align-items:center;gap:14px;z-index:4}
.desk .reward{text-align:center;font-size:18px;line-height:28px;color:#dcc79e;word-break:keep-all}
#sC .count{display:flex;justify-content:center;align-items:flex-end;gap:10px}
#sC .count i{width:26px;height:36px;border-radius:1px;border:1.5px dashed rgba(239,226,196,.35)}
#sC .count i.on{border:0;background:url(assets/torn_page_s.webp) center/100% 100%}
#sC .count i.new{transform:translateY(-6px) rotate(-4deg);box-shadow:0 0 10px 2px rgba(255,205,130,.45)}
#sC .count span{margin-left:12px;color:#e3cfa4;font-family:Song,Gowun,serif;font-size:24px;line-height:36px}
.memo{display:flex;align-items:center;justify-content:center;gap:14px;min-height:56px;padding:0 18px;color:#e2cd9f;font-size:19px;border-radius:4px;word-break:keep-all;text-align:left}
.memo .box{flex:none;position:relative;width:30px;height:30px;border:2.5px solid #d6c095;border-radius:3px}
.memo.on .box::after{content:"";position:absolute;left:7px;top:-4px;width:12px;height:24px;border:solid #f0a08f;border-width:0 4.5px 4.5px 0;transform:rotate(40deg)}
.memo.on{color:#f3e3bd}
.memo.nag{animation:shake .42s cubic-bezier(.36,.07,.19,.97);color:#ffc2a8;background:rgba(168,50,42,.28)}
/* 가로: 쪽은 왼쪽, 글·버튼은 오른쪽 */
.land #sC .hero{left:80px;top:70px;width:480px;height:660px}
.land #sC .hshadow{left:-50px;top:-46px;width:628px;height:784px}
.land #sC .hero .in{left:66px;right:40px;top:50px}
.land #sC .hero .t-title{font-size:44px;margin-bottom:18px}
.land #sC .hero .t-hand{font-size:32px;line-height:38px}
.land #sC .seal{width:160px;height:160px;right:34px;bottom:44px}
.land #sC .tape.t1{left:220px;top:52px}
.land .desk .cap{left:640px;right:60px;top:90px;text-align:left}
.land .desk .cap h2{font-size:46px;line-height:56px}
.land .desk .foot{left:640px;right:60px;bottom:60px;align-items:stretch}
.land .desk .reward{text-align:left}
.land #sC .count{justify-content:flex-start}

#sM .midnote{position:absolute;left:96px;right:96px;top:220px;animation:fly .8s var(--ease-land) both}
#sM .qcard{margin:0;transform:rotate(-1.4deg)}
#sM .t-body{margin-top:18px;font-size:22px;line-height:38px}
#sM .nx{margin-top:26px;transform:rotate(-1deg)}
#sM .halfseal{position:absolute;right:-6px;top:-30px;width:150px;height:150px;transform:rotate(12deg);color:var(--seal);opacity:.9;mix-blend-mode:multiply}
.land #sM .midnote{left:70px;right:auto;width:540px;top:110px}
#sM .padlock{position:absolute;left:280px;top:600px;width:240px;height:300px;animation:pop .5s .5s var(--ease-land) both}
@keyframes pop{from{transform:translateY(-30px) rotate(-6deg);opacity:0}}
.land #sM .padlock{left:230px;top:470px;width:200px;height:250px}
#sM .padlock svg{width:100%;height:100%;display:block;transform:rotate(6deg)}

/* =========================================================================
   D. 수첩 모아 보기 (모달 전체 화면)
   ========================================================================= */
.sp-note .t-title{font-size:46px;line-height:54px;margin-bottom:6px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 22px;margin:34px 6px 0 0}
.slot{position:relative;height:290px}
.slot .frame{position:absolute;inset:0;border:1.5px dashed rgba(43,33,25,.38);border-radius:2px}
.slot .n{position:absolute;left:0;right:0;top:86px;text-align:center;font-family:Song,Gowun,serif;font-size:46px;color:rgba(43,33,25,.30)}
.slot .p{position:absolute;left:8px;right:8px;top:152px;text-align:center;font-size:18px;line-height:24px;color:var(--ink-2);word-break:keep-all}
.slot .p .tog{font-size:16px}
.slot .stub{position:absolute;left:-4px;top:0;bottom:0;width:20px;background:url(assets/stub.webp) center/100% 100%;opacity:.95}
.slot.got .pg{position:absolute;inset:-4px -2px;background:url(assets/torn_page_s.webp) center/100% 100%;filter:drop-shadow(1px 2px 1px rgba(25,12,4,.35)) drop-shadow(3px 5px 6px rgba(25,12,4,.22))}
.slot.got .pg .r{position:absolute;inset:0 0 0 14px;background-image:repeating-linear-gradient(rgba(0,0,0,0) 0 23px,rgba(70,96,140,.15) 23px 24px);background-position:0 14px}
.slot.got .in{position:absolute;left:22px;right:10px;top:16px}
.slot.got .pn{font-family:Song,Gowun,serif;font-size:17px;color:var(--seal)}
.slot.got .tt{font-family:Song,Gowun,serif;font-size:23px;line-height:28px;margin-top:4px;word-break:keep-all}
.slot.got .h{font-family:Pen,Gowun,serif;font-size:26px;line-height:28px;color:var(--pencil);margin-top:14px;word-break:keep-all}
.corner{position:absolute;width:26px;height:26px;background:linear-gradient(135deg,#2a211b,#120d09 60%,#3a2f26)}
.corner.tl{left:-6px;top:-6px;clip-path:polygon(0 0,100% 0,0 100%)}
.corner.tr{right:-6px;top:-6px;clip-path:polygon(0 0,100% 0,100% 100%)}
.corner.bl{left:-6px;bottom:-6px;clip-path:polygon(0 0,100% 100%,0 100%)}
.corner.br{right:-6px;bottom:-6px;clip-path:polygon(100% 0,100% 100%,0 100%)}
.slot.now .ring{position:absolute;inset:-8px -6px;width:calc(100% + 12px);height:calc(100% + 16px);overflow:visible}
.slot.now .n{color:var(--seal);opacity:.85}
.slot.now .p{color:var(--ink)}
.slot.now .next{position:absolute;left:0;right:0;bottom:50px;text-align:center;font-family:Pen,Gowun,serif;font-size:30px;color:var(--seal)}
.slot.final .n{font-size:40px}
.tally{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 18px;margin:30px 0 26px}
.tally .big{font-family:Pen,Gowun,serif;font-size:72px;line-height:72px;color:var(--pencil)}
.tally .big em{font-style:normal;color:var(--seal)}
.tally .t-body{color:var(--ink-2)}
.tally .tnote{flex-basis:100%;margin-top:10px;transform:rotate(-1deg);transform-origin:left}
.land .sp-note{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;grid-template-areas:"l" "r" "f"}
.land .sp-note .grid{grid-template-columns:repeat(8,1fr);gap:20px 18px;margin-top:22px}
.land .sp-note .slot{height:250px}
.land .sp-note .slot .n{top:62px}.land .sp-note .slot .p{top:120px}
.land .sp-note .slot.got .tt{font-size:20px;line-height:25px}
.land .sp-note .slot.got .h{font-size:23px;line-height:25px}
.land .sp-note .slot.now .next{bottom:28px}
.land .sp-note .f{display:flex;align-items:center;gap:30px}
.land .sp-note .tally{flex:1;margin:10px 0}
.land .sp-note .tally .tnote{font-size:30px}
.land .sp-note .f .cardbtn{width:420px}

/* 결과(엔딩) */
.endtxt{margin-top:4px;font-size:40px;line-height:48px}
.endtxt em{font-style:normal;color:var(--seal);display:inline-block;transform:rotate(-1.5deg)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:30px;border-top:1.5px solid rgba(43,33,25,.5);border-bottom:1.5px solid rgba(43,33,25,.5)}
.stats div{padding:12px 6px 14px;text-align:center;font-size:18px;color:var(--ink-2)}
.stats div+div{border-left:1px dashed rgba(43,33,25,.4)}
.stats b{display:block;font-family:Pen,Gowun,serif;font-weight:400;font-size:64px;line-height:68px;color:var(--pencil)}
.stats b small{font-size:30px;margin-left:2px}
.okseal{position:absolute;right:-6px;top:-12px;width:170px;height:170px;transform:rotate(11deg);color:var(--seal);opacity:.9;mix-blend-mode:multiply;animation:thunk2 .34s .4s var(--ease-settle) both}
@keyframes thunk2{from{transform:rotate(11deg) scale(1.6);opacity:0}}
.minigrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 18px;margin:44px 4px 0 0}
.minigrid .slot{height:200px}
.land .minigrid .slot{height:150px}
.minigrid .slot .n{top:40px;font-size:38px}.minigrid .slot .p{top:96px;font-size:16px;line-height:21px}
.minigrid .slot.got .tt{font-size:19px;line-height:24px}
.sp-end .r .note{margin-top:36px}
.sp-end .r .sub{margin-top:8px}
.land .sp-end .minigrid{margin-top:8px}
.land .endtxt{font-size:36px;line-height:44px}

/* =========================================================================
   모달 (힌트권·선생님 메뉴·초기화) — 책상 위에 올려놓은 종이 카드
   ========================================================================= */
.modal{position:absolute;inset:0;z-index:100;background:rgba(12,7,3,.74)}
.modal.hidden{display:none}
.modal.m-full{background:none}
.modal.m-full .scr{animation:rise .3s var(--ease-settle) both}
@keyframes rise{from{transform:translateY(40px);opacity:0}}
.mbox{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:40px}
.mcard{width:600px;margin:0;transform:rotate(-.6deg);animation:drop .32s var(--ease-land) both}
@keyframes drop{from{transform:translateY(-40px) rotate(-3deg);opacity:0}}
.mcard>.clip{left:auto;right:60px}
.mt{font-family:Song,Gowun,serif;font-size:40px;line-height:50px;text-align:center;margin:6px 0 14px;word-break:keep-all}
.mp{font-size:20px;line-height:33px;text-align:center;color:var(--ink);word-break:keep-all}
.mp b{color:var(--seal)}
.mcard .row{display:flex;gap:16px;margin-top:26px}
.mcard .row .cardbtn{flex:1;height:80px;font-size:26px;width:auto}
.mticket{display:flex;justify-content:center;margin:6px 0 18px}
.ticket.big{width:170px;height:92px;transform:rotate(-4deg);box-shadow:var(--sh-rest)}
.ticket.big b{font-size:26px}.ticket.big small{font-size:17px}
.pindots{display:flex;justify-content:center;align-items:center;gap:18px;height:44px;margin:12px 0 18px}
.pindots i{width:24px;height:24px;border-radius:50%;border:2.5px solid var(--ink)}
.pindots i.on{background:var(--ink)}
.pindots em{font-style:normal;font-weight:700;color:var(--seal);margin-left:10px;font-size:19px}
.pindots.shake{animation:shake .42s}
.pinpad{display:grid;grid-template-columns:repeat(3,88px);gap:18px 28px;justify-content:center;padding-bottom:8px}
.pinpad .tkey{width:88px;height:88px;font-size:32px}
.pinpad .tkey.fn{font-size:19px;background:radial-gradient(circle at 40% 32%,#6b5a48,#3b2f25 62%,#251c15)}
.adminfo{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;padding:14px 4px;border-top:1.5px solid rgba(43,33,25,.45);border-bottom:1.5px solid rgba(43,33,25,.45)}
.adminfo div{font-size:20px;font-weight:700}
.adminfo .w{grid-column:1/-1}
.adminfo span{display:block;font-size:15px;font-weight:700;letter-spacing:.1em;color:var(--ink-2)}
.ans{margin:16px 0 4px}
.ans b{display:block;margin-top:10px;font-size:19px;line-height:30px}
.ans u{text-decoration:none;font-family:Pen,Gowun,serif;font-weight:400;font-size:34px;color:var(--seal);margin-left:6px}
.acts{display:flex;flex-direction:column;gap:14px;margin-top:20px}
.acts .cardbtn{width:100%;height:70px;font-size:23px}
.acts .cardbtn.alt{height:64px;font-size:21px}
.land .mcard{width:640px}
.land .m-admin .mcard,.land .m-pin .mcard{transform:rotate(-.4deg) scale(.86)}
.land .m-admin .mcard{animation:none}


/* =========================================================================
   팀 타이머 = 수첩 위에 놓인 놋쇠 회중시계 (미션 시작 후 모든 화면·모달 위에 늘 보임)
   1초마다 글자와 초침(transform)만 바뀜
   ========================================================================= */
.watch{position:absolute;top:20px;right:20px;z-index:120;display:flex;align-items:center;gap:10px;height:80px;padding:0 18px 0 8px;border-radius:40px;cursor:default;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,rgba(0,0,0,.03) 1px 3px),linear-gradient(165deg,#f0d690 0%,#c99c4e 32%,#9d7230 64%,#c9a259 84%,#8a6227 100%);
  box-shadow:inset 1px 1px 0 rgba(255,240,200,.8),inset -1px -2px 0 rgba(60,35,5,.6),0 0 0 2px #6e4c1c,var(--sh-rest)}
.watch.hidden{display:none}
.watch .wface{position:relative;flex:none;width:64px;height:64px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#fffaf0,#efe2c4 70%,#d8c49a);box-shadow:0 0 0 3px #7c5a24,0 0 0 4px #f0d79a,inset 0 1px 4px rgba(60,35,5,.45)}
.watch .wface::before{content:"";position:absolute;left:26px;top:-13px;width:12px;height:9px;border-radius:3px 3px 1px 1px;background:linear-gradient(90deg,#8a6227,#f0d690,#8a6227);box-shadow:0 1px 0 #5c3d12}
.watch .wtick{position:absolute;inset:4px;border-radius:50%;
  background:repeating-conic-gradient(from -1.5deg,rgba(43,33,25,.75) 0 3deg,transparent 3deg 30deg);
  -webkit-mask:radial-gradient(circle,transparent 0 21px,#000 22px);mask:radial-gradient(circle,transparent 0 21px,#000 22px)}
.watch .whand{position:absolute;left:31px;top:8px;width:2px;height:25px;background:var(--seal);border-radius:1px;transform-origin:1px 24px;transition:transform .25s var(--ease-land)}
.watch .wpin{position:absolute;left:28px;top:28px;width:8px;height:8px;border-radius:50%;background:#2b2119}
.watch .wwin{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:134px;height:60px;padding:2px 12px 0;border-radius:8px;
  background:linear-gradient(#0d0906,#2b2017 40%,#3a2d22 55%,#120c08);box-shadow:inset 0 2px 6px rgba(0,0,0,.8),0 0 0 2px #7c5a24,0 0 0 3px #f0d79a}
.watch small{font-size:13px;font-weight:700;letter-spacing:.14em;color:#c9b07c;line-height:15px}
.watch b{font-size:38px;line-height:40px;color:#f6ead0;font-variant-numeric:tabular-nums;letter-spacing:.02em;text-shadow:0 2px 2px rgba(0,0,0,.7)}
.watch.low small{color:#f3b46a}
.watch.low b{color:#ffe0a8}
.watch.over .wwin{background:linear-gradient(#1a0604,#3e120c 45%,#4a1a12 55%,#1a0604)}
.watch.over small{color:#ff9d86}
.watch.over b{color:#ff8f78}
.watch.frozen .whand{background:#7a6a58}
.watch::after{content:"";position:absolute;inset:-6px;border-radius:46px;box-shadow:0 0 0 4px rgba(255,190,90,.9),0 0 18px 6px rgba(255,170,60,.55);opacity:0;pointer-events:none}
.watch.alarm::after{animation:wglow 1.4s ease-in-out 3}
@keyframes wglow{50%{opacity:1}}
.land .watch{top:12px;right:18px}
/* 시계 자리를 머리줄에서 비워 둠 */
.timed .head{padding-right:214px}
.land.timed .head{padding-right:184px}
.head .brand,.head .no{white-space:nowrap}
.port.timed .head .f{display:none}
.port.timed .desk .cap{left:56px;right:290px;text-align:left;top:30px}
.port.timed .desk .cap h2{font-size:44px;line-height:54px}
.port.timed #sC .hero{top:196px}
.port.timed #sC .tape.t1{top:176px}

/* =========================================================================
   힌트 쪽지 봉투 (문제 화면 아래 늘 같은 자리) + 힌트 쪽지 화면
   ========================================================================= */
.envbtn{margin-left:auto;display:flex;align-items:center;gap:14px;height:80px;padding:0 22px 0 16px;border-radius:4px;color:var(--ink);text-align:left;
  background:url(assets/paper.jpg) 0 0/420px #f3e8cf;
  box-shadow:inset 0 0 0 5px rgba(0,0,0,0),inset 0 0 0 6px rgba(43,33,25,.35),inset 0 1px 0 rgba(255,250,235,.8),0 2px 0 #c9b28a,0 3px 0 #a58c63,0 4px 0 #7d6545,var(--sh-rest);
  transition:transform .12s var(--ease-settle)}
.envbtn:active{transform:translateY(3px)}
.env{position:relative;flex:none;width:62px;height:44px;border-radius:2px;background:linear-gradient(#e2c890,#cfae6f);box-shadow:var(--sh-contact);transform:rotate(-4deg);overflow:hidden}
.env::before{content:"";position:absolute;left:0;right:0;top:0;height:26px;background:linear-gradient(#ecd6a2,#d9bb7e);clip-path:polygon(0 0,100% 0,50% 100%);box-shadow:0 1px 0 rgba(0,0,0,.2)}
.env::after{content:"";position:absolute;left:0;right:0;bottom:0;height:44px;background:linear-gradient(to top right,transparent 49%,rgba(120,85,30,.25) 50%,transparent 51%),linear-gradient(to top left,transparent 49%,rgba(120,85,30,.25) 50%,transparent 51%)}
.env i{position:absolute;left:23px;top:16px;width:16px;height:16px;border-radius:50%;z-index:1;background:radial-gradient(circle at 40% 35%,#d4574b,#9c2a22 60%,#6e1a14);box-shadow:0 1px 1px rgba(0,0,0,.4)}
.envbtn .et b{display:block;font-family:Song,Gowun,serif;font-weight:400;font-size:26px;line-height:30px;color:var(--seal)}
.envbtn .et small{display:block;font-size:16px;color:var(--ink-2)}
.m-hintpage .mcard{width:680px}
.hp-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hp-tk{display:flex;align-items:center;gap:10px;font-size:18px;color:var(--ink-2)}
.hp-tk b{color:var(--seal)}
.hp-tk .mini{display:flex;gap:4px}
.hp-tk .mini i{width:14px;height:22px;border-radius:2px;background:linear-gradient(#e9d39b,#dcc183);box-shadow:var(--sh-contact)}
.hp-tk .mini i.u{background:none;box-shadow:inset 0 0 0 1.5px rgba(90,62,23,.35)}
.hp-t{margin:14px 0 8px}
.hp-t .rubric{font-size:28px;margin-right:4px}
.hp-sub{font-family:Gowun;font-size:18px;color:var(--ink-2)}
.hsteps{max-height:640px;overflow-y:auto;padding:4px 4px 4px 0}
.hstep{position:relative;margin:12px 0;padding:12px 18px 14px;border-radius:2px;display:flex;flex-direction:column;gap:6px;
  background:url(assets/paper.jpg) 0 0/300px #f6edd7;box-shadow:var(--sh-contact);border-left:4px solid rgba(168,50,42,.55)}
.hstep:nth-child(odd){transform:rotate(.3deg)}.hstep:nth-child(even){transform:rotate(-.3deg)}
.hstep>b{font-family:Song,Gowun,serif;font-weight:400;font-size:21px;color:var(--seal)}
.hstep>span{font-size:19px;line-height:30px;word-break:keep-all}
.hstep.lock{background:transparent;box-shadow:none;border:1.5px dashed rgba(43,33,25,.3);opacity:.7}
.hstep.lock>b{color:var(--ink-2)}
.hstep.lock>span{color:var(--ink-2);font-size:18px}
.hstep.next{background:rgba(255,250,235,.55);border:1.5px dashed rgba(168,50,42,.45);box-shadow:none;flex-direction:row;align-items:center;justify-content:space-between;gap:16px}
.hstep.next .cardbtn{width:auto;height:60px;font-size:21px}
.hstep .cardbtn small{font-size:15px;color:var(--ink-2);margin-left:4px;font-weight:700}
.hstep.ask{flex-direction:column;align-items:stretch}
.askq p{font-size:19px;line-height:30px;text-align:center}
.askq p b{color:var(--seal)}
.askq .row{margin-top:10px}
.hstep.ans{border-left-color:var(--seal);background-color:#fbf3df}
.ansbox{text-align:center}
.ansbox img{display:block;max-width:100%;max-height:260px;margin:4px auto 8px;box-shadow:var(--sh-contact)}
.ansbox .av{font-size:44px;line-height:52px;font-weight:700;color:var(--seal);letter-spacing:.08em;word-break:keep-all}
.hp-notice{flex:1;text-align:center;font-size:19px;line-height:29px;color:var(--ink);padding:8px 10px;background:rgba(168,50,42,.09);border-radius:2px}
.hp-notice b{color:var(--seal)}
.hp-close{width:100%;margin-top:16px}
.land .m-hintpage .mcard{width:760px}
.land .m-hintpage .hsteps{max-height:420px}
.land .m-hintpage .hp-t{margin:8px 0 4px}
.arow{display:flex;gap:12px;align-items:center}
.arow .cardbtn{flex:1;width:auto}
.arow .tl{flex:none;font-size:15px;font-weight:700;letter-spacing:.08em;color:var(--ink-2);width:52px;line-height:20px}
.acts .arow .cardbtn.alt{height:60px;font-size:20px;padding:0 10px}
.pindots.mv{font-family:Song,Gowun,serif;font-size:44px;color:var(--ink)}
.adminfo small{font-size:15px;font-weight:400;color:var(--ink-2)}
/* 가로: 힌트권 묶음을 작게 → 봉투와 한 줄 */
.land .sp-stage .ticket{width:66px;height:44px}
.land .sp-stage .ticket b{font-size:14px;letter-spacing:.04em}
.land .sp-stage .ticket small{display:none}
.land .sp-stage .ticket.used{width:22px}
.land .sp-stage .tks{gap:8px}
.land .envbtn{height:72px;padding:0 16px 0 12px;gap:10px}
.land .envbtn .et b{font-size:23px}
.land .env{width:54px;height:40px}
.land .env i{left:19px;top:14px}
.land .okseal{top:auto;bottom:-200px;right:30px;width:180px;height:180px}