/* 연금 오디세이 — 화면 스타일
   글을 고칠 일은 없습니다. 문구는 content.js 에 있습니다. */

/* 글꼴은 fonts/ 에 직접 담습니다. CDN 을 쓰지 않습니다. 출처는 fonts/출처.md */
@font-face{
  font-family:'PretendardLocal';
  src:url('fonts/PretendardVariable.woff2') format('woff2');
  font-weight:45 920; font-style:normal; font-display:swap;
}

:root{
  --canvas:#fff; --parch:#F7F1E4; --cream:#F2E1C0; --bronzeparch:#E9D3AC;
  --sea:#08384A; --searule:#155A6E;
  --ink:#153140; --ink2:#2E4B58; --mute:#6B5E50;
  --bronze:#8A4A1E; --bronzed:#6E3A16; --hair:#E4D9C2;
  --sand:#E7B278; --green:#2E7D5B;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}   /* .btn 의 display:block 이 hidden 을 덮지 않도록 */
html,body{margin:0;padding:0;height:100%}
body{
  font-family:PretendardLocal,Pretendard,'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  background:#dfd6c4; color:var(--ink); line-height:1.5;
  display:flex; justify-content:center; align-items:stretch;
}
#app{
  width:100%; max-width:430px; background:var(--canvas); position:relative;
  display:flex; flex-direction:column; min-height:100dvh; overflow:hidden;
  box-shadow:0 0 40px rgba(0,0,0,.18);
}

/* ---------- 상단 바 ---------- */
header{
  flex:0 0 auto; display:flex; align-items:center; gap:8px;
  padding:8px 12px; border-bottom:1px solid var(--hair); background:var(--canvas);
  min-height:52px;
}
header .ttl{font-size:12.5px;font-weight:600;color:var(--bronze);letter-spacing:.04em;flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iconbtn{
  border:1px solid var(--hair); background:var(--parch); color:var(--ink2);
  border-radius:999px; padding:0 13px; min-height:36px; min-width:44px;
  font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap;
}
.iconbtn:active{background:var(--bronzeparch)}
.iconbtn:focus-visible,.btn:focus-visible,.choice:focus-visible{outline:3px solid var(--bronze);outline-offset:2px}
main{flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch}
.pad{padding:20px 20px 30px}

/* ---------- 글 ---------- */
h1{font-size:30px;line-height:1.15;letter-spacing:-.5px;margin:0 0 10px;font-weight:700}
h2{font-size:21px;line-height:1.28;margin:0 0 8px;font-weight:700;letter-spacing:-.3px}
.eyebrow{font-size:11px;font-weight:700;color:var(--bronze);letter-spacing:.1em;margin:0 0 6px}
p{margin:0 0 12px;font-size:15.5px;color:var(--ink2)}
.lead{font-size:17px;color:var(--ink)}
.small{font-size:12.5px;color:var(--mute);margin:0}

/* ---------- 화면 전환 ---------- */
.screen{display:none}
.screen.on{display:block;animation:fade .28s ease both}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
}

/* ---------- 큰 그림 ---------- */
.hero{width:100%;display:block}
#s-cover .hero{height:calc(100dvh - 210px);min-height:280px;object-fit:cover;object-position:50% 38%}
/* 이야기 화면: 그림을 자르지 않고 통째로 보여 준다 */
.stage{position:relative;background:var(--sea);height:calc(100dvh - 76px);min-height:340px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer}
.stage>img{width:100%;height:100%;object-fit:contain;display:block}
.taphint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  background:rgba(8,56,74,.82);color:#EBD9B8;border:1px solid rgba(231,178,120,.45);
  border-radius:999px;padding:9px 16px;font-size:13px;font-weight:600;white-space:nowrap;
  backdrop-filter:blur(3px);animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-5px)}}
.storysheet{position:absolute;left:0;right:0;bottom:0;padding:76px 20px 22px;color:#fff;
  background:linear-gradient(to bottom,rgba(8,56,74,0) 0%,rgba(8,56,74,.94) 42%,#062F3E 100%);
  animation:rise .34s cubic-bezier(.2,.9,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.storysheet .eyebrow{color:var(--sand)}
.storysheet h1{color:#fff;font-size:27px;margin:0 0 4px}
.storysheet .sub{color:#BBD3DB;font-size:14px;margin:0 0 12px}
.storysheet .body{color:#EDF4F6;font-size:16px;line-height:1.62;margin:0 0 16px}
.storysheet .btn{background:var(--bronze)}

/* 결과 그림도 자르지 않는다 */
#islandBody .resultpic{width:100%;max-height:44dvh;object-fit:contain;display:block;
  border-radius:12px;border:1px solid var(--hair);background:var(--sea);margin-bottom:14px}
.herowrap{position:relative;line-height:0}
.heroveil{position:absolute;inset:auto 0 0 0;height:55%;
  background:linear-gradient(to bottom,rgba(8,56,74,0) 0%,rgba(8,56,74,.92) 78%,#08384A 100%)}
.herotext{position:absolute;left:0;right:0;bottom:0;padding:0 20px 22px;color:#fff;line-height:1.5}
.herotext h1{color:#fff}
.herotext .eyebrow{color:var(--sand)}
.herotext p{color:#DCE9EE;font-size:15px}

/* ---------- 버튼 ---------- */
.btn{
  display:block;width:100%;border:0;border-radius:12px;padding:15px 16px;min-height:52px;
  font:inherit;font-size:16px;font-weight:700;cursor:pointer;margin-top:10px;text-align:center;
  background:var(--sea);color:#fff;letter-spacing:-.2px;
}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:var(--parch);color:var(--ink);border:1px solid var(--hair)}
.btn.bronze{background:var(--bronze)}
.btn[disabled]{opacity:.45;cursor:default}
.choice{
  display:block;width:100%;text-align:left;border:1px solid var(--hair);background:var(--canvas);
  border-radius:12px;padding:14px 15px;min-height:52px;font:inherit;font-size:15.5px;color:var(--ink);
  margin-top:10px;cursor:pointer;line-height:1.45;
}
.choice:active{background:var(--parch)}
.choice .no{font-weight:700;color:var(--bronze);margin-right:7px}
.choice.wrong{border-color:#D8C3A0;background:var(--parch);opacity:.62}
.choice.right{border-color:var(--bronze);background:var(--bronzeparch);color:var(--bronzed);font-weight:700}
.choice[disabled]{cursor:default}

/* ---------- 부엉 선배 ---------- */
.owl{display:flex;gap:11px;align-items:flex-start;margin:0 0 14px}
.owl img{width:52px;height:52px;flex:0 0 auto}
.bubble{
  background:var(--parch);border:1px solid var(--hair);border-radius:4px 14px 14px 14px;
  padding:11px 13px;font-size:15px;color:var(--ink);flex:1 1 auto;
}
.bubble b{color:var(--bronzed)}
.who{font-size:11px;color:var(--mute);font-weight:700;margin:0 0 3px}

/* ---------- 카드 ---------- */
.card{border:1px solid var(--hair);background:var(--parch);border-radius:12px;padding:15px;margin-bottom:12px}
.rowlbl{font-size:11px;font-weight:700;color:var(--mute);letter-spacing:.03em;margin:0 0 5px}
.hintbox{border:1px solid #E0CEAE;background:var(--bronzeparch);border-radius:12px;padding:13px 15px;margin-top:12px}
.hintbox p{color:var(--bronzed);margin:0;font-size:14.5px}

/* ---------- 지도 ---------- */
.mapwrap{position:relative;line-height:0}
.mapwrap img{width:100%;display:block}
.pin{
  position:absolute;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;line-height:1;
  border:2px solid #fff;display:flex;align-items:center;justify-content:center;padding:0;
  font:inherit;font-size:14px;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.pin.lock{background:rgba(21,49,64,.62);color:#e2e9ec;cursor:default}
.pin.open{background:var(--bronze);color:#fff;cursor:pointer;animation:pulse 1.9s infinite}
.pin.done{background:var(--green);color:#fff;cursor:pointer}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(138,74,30,.55)}50%{box-shadow:0 0 0 11px rgba(138,74,30,0)}}
.maphint{background:var(--sea);color:#DCE9EE;font-size:12.5px;padding:10px 16px;text-align:center}

/* ---------- 아이템 ---------- */
.medal{text-align:center;padding:6px 0 2px}
.medal img{width:148px;height:148px;animation:pop .5s cubic-bezier(.2,1.3,.4,1) both}
@keyframes pop{from{opacity:0;transform:scale(.55) rotate(-14deg)}to{opacity:1;transform:none}}
.ribbon{
  background:var(--cream);border:1px solid var(--hair);border-radius:10px;
  padding:13px 15px;text-align:center;margin:12px 0 4px;
}
.ribbon .nm{font-weight:700;color:var(--bronzed);font-size:16px;display:block;margin-bottom:3px}
.ribbon .ph{font-size:15px;color:var(--ink)}

/* ---------- 모달 ---------- */
.modal{position:fixed;inset:0;background:rgba(10,30,40,.62);display:none;z-index:50;
  align-items:flex-end;justify-content:center}
.modal.on{display:flex}
.sheet{background:var(--canvas);width:100%;max-width:430px;max-height:88dvh;border-radius:16px 16px 0 0;
  display:flex;flex-direction:column;animation:up .26s ease both}
@keyframes up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.sheet header{border-bottom:1px solid var(--hair)}
.sheetbody{overflow-y:auto;padding:14px}
.gbnav{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--hair);
  background:var(--parch)}
.gbnav .pg{flex:1;text-align:center;font-size:13.5px;font-weight:700;color:var(--bronzed);
  font-variant-numeric:tabular-nums}
.gbnav .pg small{display:block;font-weight:400;font-size:11.5px;color:var(--mute);margin-top:2px}
.gbnav button{min-width:54px;min-height:44px;border-radius:10px;border:1px solid var(--hair);
  background:var(--canvas);font:inherit;font-size:17px;font-weight:700;color:var(--bronzed);cursor:pointer}
.gbnav button[disabled]{opacity:.32;cursor:default}
.gbnav button:active:not([disabled]){background:var(--bronzeparch)}
.sheet.tall{max-height:94dvh}
.sheetbody img{width:100%;border:1px solid var(--hair);border-radius:8px;display:block;cursor:zoom-in}
#gbBody{overflow:auto}
#gbBody.zoom img{width:210%;max-width:none;cursor:zoom-out}
.gbzoom{position:absolute;right:20px;margin-top:-38px;background:rgba(8,56,74,.8);color:#EBD9B8;
  border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;pointer-events:none}
.bagitem{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--hair);
  width:100%;background:none;border-left:0;border-right:0;border-top:0;text-align:left;font:inherit;cursor:pointer}
.bagitem img{width:48px;height:48px;flex:0 0 auto}
.bagitem .t{font-weight:700;font-size:15px;color:var(--bronzed)}
.bagitem .d{font-size:13.5px;color:var(--ink2)}
.bagempty{color:var(--mute);font-size:13.5px;text-align:center;padding:26px 0}

/* ---------- 입력 ---------- */
input[type=text],input[type=date]{
  width:100%;font:inherit;font-size:17px;padding:13px 14px;border:1px solid #C9BDA3;
  border-radius:10px;background:var(--canvas);color:var(--ink);
}
input:focus{outline:0;border-color:var(--bronze);box-shadow:0 0 0 3px rgba(138,74,30,.15)}
.pick{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 4px}
.pick button{
  border:1px solid var(--hair);background:var(--parch);border-radius:999px;
  padding:0 14px;min-height:44px;font:inherit;font-size:14.5px;color:var(--ink2);cursor:pointer;
}
.pick button[aria-pressed=true]{background:var(--bronze);border-color:var(--bronze);color:#fff;font-weight:700}
.field{margin:0 0 18px}
.field>label{display:block;font-size:12px;font-weight:700;color:var(--mute);letter-spacing:.03em;margin:0 0 7px}

/* ---------- 항해일지 카드 ---------- */
.logcard{border:2px solid var(--bronze);background:var(--parch);border-radius:14px;padding:18px;position:relative}
.logcard h2{color:var(--bronzed)}
.logcard dl{margin:0}
.logcard dt{font-size:11.5px;font-weight:700;color:var(--mute);letter-spacing:.03em;margin:12px 0 3px}
.logcard dd{margin:0;font-size:16px;color:var(--ink);font-weight:600}
.sealrow{display:flex;align-items:center;gap:10px;margin-top:18px;padding-top:14px;border-top:1px solid var(--hair)}
.sealrow img{width:46px;height:46px}
.sealrow span{font-size:13px;color:var(--mute)}

/* ---------- 진행 점 ---------- */
.steps{display:flex;gap:5px;padding:10px 20px 0}
.steps i{flex:1;height:3px;border-radius:2px;background:var(--hair)}
.steps i.on{background:var(--bronze)}
.footnote{border-top:1px solid var(--hair);margin-top:18px;padding-top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


/* ══ 소문의 바다 — 섬 2 뒤 사건 ══════════════════════════════
   섬 화면과 구분되는 밤바다. 여기만 어둡다.                        */
#s-event{background:#041F2B;color:#EAF2F5;min-height:100%}
.fog{position:relative;min-height:calc(100dvh - 52px);overflow:hidden;
  background:radial-gradient(120% 80% at 50% 8%, #0C4356 0%, #062E3D 45%, #041F2B 100%)}
.fog::before,.fog::after{content:"";position:absolute;left:-30%;right:-30%;height:46%;
  background:radial-gradient(60% 100% at 50% 50%, rgba(190,215,225,.16), rgba(190,215,225,0) 70%);
  animation:drift 19s ease-in-out infinite;pointer-events:none}   /* 안개가 버튼 클릭을 가로채면 안 된다 */
.fog::before{top:12%}
.fog::after{top:48%;animation-duration:26s;animation-direction:reverse}
@keyframes drift{0%,100%{transform:translateX(-7%)}50%{transform:translateX(7%)}}
.fogpad{position:relative;padding:28px 20px 34px}
#s-event .eyebrow{color:var(--sand)}
#s-event h1,#s-event h2{color:#fff}
#s-event p{color:#C9DDE4}

/* ① 떠오르는 말들 */
.voices{min-height:238px;display:flex;flex-direction:column;justify-content:center;gap:14px;margin:6px 0 4px}
.voice{align-self:flex-start;max-width:86%;background:rgba(10,52,68,.72);
  border:1px solid rgba(160,195,206,.3);border-radius:14px;padding:11px 15px;
  font-size:16px;color:#D9E8EE;opacity:0;animation:ghost .7s ease forwards}
.voice:nth-child(even){align-self:flex-end}
.voice::after{content:"— 어디서 들은 말";display:block;margin-top:5px;
  font-size:11px;color:#7FA3B1;letter-spacing:.02em}
@keyframes ghost{from{opacity:0;transform:translateY(12px) scale(.97);filter:blur(4px)}
                 to{opacity:1;transform:none;filter:none}}

/* ② 선택지 — 어두운 바탕용 */
#s-event .choice{background:rgba(10,52,68,.6);border-color:rgba(160,195,206,.32);color:#EAF2F5}
#s-event .choice:active{background:rgba(14,66,86,.9)}
#s-event .choice .no{color:var(--sand)}
#s-event .choice.wrong{background:rgba(6,36,48,.7);border-color:rgba(120,150,162,.3);opacity:.5}
#s-event .choice.right{background:rgba(231,178,120,.18);border-color:var(--sand);color:#FBE6CB}
#s-event .hintbox{background:rgba(10,52,68,.78);border-color:rgba(160,195,206,.34)}
#s-event .hintbox p{color:#DCEAF0}
#s-event .bubble{background:rgba(10,52,68,.72);border-color:rgba(160,195,206,.3);color:#EAF2F5}
#s-event .bubble b{color:var(--sand)}
#s-event .who{color:#8FB2BF}
#s-event .btn.ghost{background:rgba(10,52,68,.6);border-color:rgba(160,195,206,.32);color:#EAF2F5}

/* ③ 해도 — 연도 셋이 나란히 */
.chart{background:rgba(247,241,228,.96);border-radius:14px;padding:16px 15px 14px;margin:4px 0 14px;
  color:var(--ink)}
#s-event .chart h2{color:var(--bronzed);font-size:17px;margin:0 0 3px}
#s-event .chart .src{font-size:11.5px;color:var(--mute);margin:0 0 13px}
.bigyear{display:flex;align-items:center;gap:15px;background:var(--canvas);
  border:1px solid var(--hair);border-radius:12px;padding:14px 15px}
.bigyear b{flex:0 0 auto;font-size:40px;font-weight:700;color:#A6412A;letter-spacing:-1.5px;
  font-variant-numeric:tabular-nums;line-height:1}
.bigyear b i{font-size:17px;font-style:normal;margin-left:2px;letter-spacing:0}
.bigyear ul{margin:0;padding-left:16px;flex:1 1 auto}
#s-event .bigyear li{font-size:12px;line-height:1.5;color:var(--ink2);margin-bottom:3px}
#s-event .whyttl{margin:14px 0 8px;font-size:12.5px;font-weight:700;color:var(--bronzed)}
.why{display:flex;flex-wrap:wrap;gap:7px}
.why span{background:var(--bronzeparch);border:1px solid #DCC69F;border-radius:999px;
  padding:6px 12px;font-size:12.5px;color:var(--bronzed);font-weight:600}
#s-event .chart .caveat{margin:12px 0 0;font-size:12px;color:var(--mute);
  border-top:1px solid var(--hair);padding-top:10px}

/* ④ 내가 할 것 */
.dobox{background:rgba(231,178,120,.13);border:1px solid rgba(231,178,120,.42);
  border-radius:14px;padding:16px 16px 14px;margin:4px 0 6px}
.dobox h2{font-size:16px;margin:0 0 10px;color:var(--sand)}
.dobox ol{margin:0;padding-left:20px}
.dobox li{color:#EDF5F8;font-size:15.5px;line-height:1.6;margin-bottom:6px}
.dobox li b{color:#FBE6CB}
.dobox .tail{margin:10px 0 0;color:var(--sand);font-size:15px;font-weight:600}