/* 「황야의 사냥개 AI 무한판」 화면을 엔진 안에서 그대로 보여 주기 위한 스타일 — story-ai.css를 .aiStoryView 범위로 옮긴 것.
   body.aiStory(js/ai-story.js가 붙임)일 때만 엔진의 장면 카드 내용을 숨긴다. 다른 스토리에는 영향이 없다. */
body.aiStory .storyCard{background:none;border:0;box-shadow:none;overflow:visible;border-radius:0;padding:0}
body.aiStory #visual,body.aiStory .storyBody,body.aiStory #continuity,body.aiStory #timerBox,body.aiStory #diceBox,
body.aiStory #outcomePanel,body.aiStory #choiceBox,body.aiStory #customArea,body.aiStory #aiRoutePanel,body.aiStory #variantText{display:none!important}
.aiStoryView{--moor:#0b1110;        
  --page:#121a18;        
  --ink:#e6e1d3;         
  --dim:#9aa59f;         
  --rule:#2a3733;        
  --phos:#7cffb2;        
  --blood:#e0847a;       
  --brass:#c9a96a;       
  --serif:"Nanum Myeongjo","Batang","Noto Serif KR",serif;
  --sans:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  color-scheme:dark;}
.aiStoryView,.aiStoryView *{box-sizing:border-box}
.aiStoryView{background:var(--moor);color:var(--ink)}
.aiStoryView{font-family:var(--sans);font-size:15px;line-height:1.6;padding-inline:16px;padding-block:0 48px;min-height:100%}
.aiStoryView button{font:inherit;color:inherit}
.aiStoryView :focus-visible{outline:2px solid var(--phos);outline-offset:2px}
.aiStoryView .wrap{max-width:720px;margin:0 auto}
.aiStoryView header.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:linear-gradient(var(--moor) 82%,transparent);padding-block:14px 10px;margin-inline:-16px;padding-inline:16px}
.aiStoryView .barTop{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.aiStoryView .brand{font-family:var(--serif);font-weight:800;font-size:18px;letter-spacing:.02em}
.aiStoryView .brand small{font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.14em;color:var(--phos);margin-left:8px;text-transform:uppercase}
.aiStoryView .actLabel{font-size:12px;color:var(--dim);letter-spacing:.06em}
.aiStoryView .hud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:10px}
.aiStoryView .meter{min-width:0}
.aiStoryView .meter .lab{display:flex;justify-content:space-between;font-size:11.5px;color:var(--dim);gap:6px}
.aiStoryView .meter .lab b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.aiStoryView .meter .track{height:4px;background:var(--rule);border-radius:2px;margin-top:4px;overflow:hidden}
.aiStoryView .meter .fill{height:100%;background:var(--dim);transition:width .6s ease}
.aiStoryView .meter.fear .fill{background:var(--phos)}
.aiStoryView .meter.danger .fill{background:var(--blood)}
.aiStoryView .meter.holmes .fill{background:var(--brass)}
.aiStoryView .meter.beryl .fill{background:#b7a6d9}
.aiStoryView .meter.bump .lab b{color:var(--phos)}
@media (max-width:460px){.aiStoryView .hud{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.aiStoryView .tools{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.aiStoryView .chip{background:none;border:1px solid var(--rule);border-radius:999px;padding:5px 12px;font-size:12.5px;color:var(--dim);cursor:pointer}
.aiStoryView .chip:hover{border-color:var(--dim);color:var(--ink)}
.aiStoryView .chip .n{color:var(--phos);margin-left:4px;font-variant-numeric:tabular-nums}
.aiStoryView main{margin-top:8px}
.aiStoryView .sceneHead{display:flex;align-items:baseline;gap:12px;margin:18px 0 6px}
.aiStoryView .sceneNo{font-size:11px;letter-spacing:.14em;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.aiStoryView h1.sceneTitle{font-family:var(--serif);font-weight:800;font-size:clamp(22px,4.5vw,30px);line-height:1.25;margin:0;text-wrap:balance}
.aiStoryView .prior{border-left:2px solid var(--rule);padding:4px 0 4px 14px;margin:14px 0 4px;color:var(--dim);font-size:13.5px}
.aiStoryView .prior .dice{color:var(--brass);font-variant-numeric:tabular-nums}
.aiStoryView .prose{font-family:var(--serif);font-size:17px;line-height:1.95;margin-top:14px;max-width:65ch}
.aiStoryView .prose p{margin:0 0 1.05em}
.aiStoryView .prose .caret{display:inline-block;width:.5em;height:1em;background:var(--phos);vertical-align:-2px;animation:as-blink 1s steps(1) infinite;margin-left:2px}
@keyframes as-blink{50%{opacity:0}}
.aiStoryView .waiting{font-family:var(--serif);color:var(--dim);font-size:16px;margin-top:18px}
.aiStoryView .waiting .stop{margin-left:10px}
.aiStoryView .choices{display:grid;gap:10px;margin-top:22px}
.aiStoryView .choice{display:flex;justify-content:space-between;align-items:center;gap:14px;text-align:left;background:var(--page);border:1px solid var(--rule);border-radius:10px;padding:14px 16px;cursor:pointer;transition:border-color .15s,transform .15s}
.aiStoryView .choice:hover{border-color:var(--phos)}
.aiStoryView .choice:active{transform:translateY(1px)}
.aiStoryView .choice .t{min-width:0;font-size:15.5px}
.aiStoryView .choice .tag{flex:none;font-size:11.5px;color:var(--dim);border:1px solid var(--rule);border-radius:999px;padding:2px 9px;white-space:nowrap}
.aiStoryView .choice .tag.check{color:var(--brass);border-color:#5b4c2f}
.aiStoryView .free{display:flex;gap:8px;margin-top:12px}
.aiStoryView .free input{flex:1;min-width:0;background:transparent;border:1px dashed var(--rule);border-radius:10px;color:var(--ink);padding:12px 14px;font:inherit;font-size:14.5px}
.aiStoryView .free input::placeholder{color:#6f7a75}
.aiStoryView .btn{background:var(--phos);color:#06120c;border:0;border-radius:10px;padding:11px 16px;font-weight:600;cursor:pointer;white-space:nowrap}
.aiStoryView .btn.ghost{background:none;color:var(--ink);border:1px solid var(--rule)}
.aiStoryView .btn:disabled{opacity:.45;cursor:default}
.aiStoryView .msg{margin-top:16px;padding:12px 14px;border:1px solid #5a3833;border-radius:10px;color:var(--ink);font-size:14px}
.aiStoryView .msg .row{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.aiStoryView .cover{padding-block:8vh 24px}
.aiStoryView .cover .kicker{font-size:12px;letter-spacing:.18em;color:var(--phos);text-transform:uppercase}
.aiStoryView .cover h1{font-family:var(--serif);font-weight:800;font-size:clamp(34px,8vw,56px);line-height:1.12;margin:14px 0 18px;text-wrap:balance}
.aiStoryView .cover h1 em{font-style:normal;color:var(--phos);text-shadow:0 0 24px rgba(124,255,178,.35)}
.aiStoryView .cover p{font-family:var(--serif);font-size:16.5px;line-height:1.9;max-width:58ch;color:#cfcabd;margin:0 0 12px}
.aiStoryView .cover .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:24px 0}
.aiStoryView .cover .fact{border-top:1px solid var(--rule);padding-top:10px;font-size:13px;color:var(--dim)}
.aiStoryView .cover .fact b{display:block;color:var(--ink);font-size:14px;font-weight:600;margin-bottom:2px}
.aiStoryView .cover .actions{display:flex;gap:10px;flex-wrap:wrap}
.aiStoryView .cover .fine{font-size:12.5px;color:var(--dim);margin-top:14px;max-width:60ch}
.aiStoryView .drawer{position:fixed;inset:auto 0 0 0;max-height:72vh;overflow:auto;background:var(--page);border-top:1px solid var(--rule);padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px));z-index:10;box-shadow:0 -20px 40px rgba(0,0,0,.5)}
.aiStoryView .drawer .in{max-width:720px;margin:0 auto}
.aiStoryView .drawer header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.aiStoryView .drawer h2{font-family:var(--serif);font-size:19px;margin:0}
.aiStoryView .entry{border-top:1px solid var(--rule);padding:10px 0}
.aiStoryView .entry b{font-weight:600}
.aiStoryView .entry p{margin:2px 0 0;color:#c9c4b6;font-family:var(--serif);font-size:15px}
.aiStoryView .entry .when{font-size:11px;color:var(--dim);margin-left:6px}
.aiStoryView .empty{color:var(--dim);font-size:14px}
.aiStoryView .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:6px 0 14px}
.aiStoryView .stats div{border:1px solid var(--rule);border-radius:8px;padding:8px 10px;font-size:13px;color:var(--dim)}
.aiStoryView .stats b{color:var(--ink);font-size:16px;display:block;font-variant-numeric:tabular-nums}
.aiStoryView .ending .kicker{font-size:12px;letter-spacing:.18em;color:var(--phos);text-transform:uppercase;margin-top:24px}
.aiStoryView .final{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:18px 0}
.aiStoryView .final div{border-top:1px solid var(--rule);padding-top:8px;font-size:13px;color:var(--dim)}
.aiStoryView .final b{display:block;font-size:20px;color:var(--ink);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.aiStoryView,.aiStoryView *{transition:none!important;animation:none!important}
}
.aiStoryView .loading{display:flex;align-items:center;gap:12px;margin-top:22px;color:var(--dim);font-family:var(--serif);font-size:16px}
.aiStoryView .loading .spin{width:18px;height:18px;border:2px solid var(--rule);border-top-color:var(--phos);border-radius:50%;animation:as-spin 1s linear infinite;flex:none}
@keyframes as-spin{to{transform:rotate(360deg)}}
.aiStoryView .loading .sec{font-family:var(--sans);font-size:12px;font-variant-numeric:tabular-nums}
.aiStoryView .serverNote{font-size:12.5px;color:var(--dim);margin-top:10px}

/* 엔진 안에서의 보정 */
.aiStoryView{border-radius:16px;border:1px solid #2a3733;min-height:70vh}
/* 엔진의 공통 버튼·선택지 모양이 섞이지 않도록 되돌린다 */
.aiStoryView button{text-transform:none;letter-spacing:normal;box-shadow:none;min-height:0;width:auto;margin:0}
.aiStoryView .choice{width:100%}
.aiStoryView .choice::before,.aiStoryView .choice::after,.aiStoryView .btn::before,.aiStoryView .btn::after{content:none!important}
.aiStoryView .endActions{display:flex;gap:10px;flex-wrap:wrap}
.aiStoryView header.bar{top:56px}
.aiStoryView .drawer{z-index:60}
@media (max-width:760px){.aiStoryView{border-radius:0;border-inline:0}}