/* 쉬운보기 — 글씨와 버튼을 크게, 꾸밈은 걷어내고 한 가지 강조색(샴페인 골드)만 남긴다.
   원칙(easy-view 스킬): ① body.easy 에서 토큰을 다시 정의 ② 화면 뿌리(top·wrap·tabbar·시트·모달)에만 zoom 1.28.
   ⚠ zoom 은 «겹치면 곱해진다» — 이미 zoom 된 조상(.wrap) 안의 자손에는 다시 걸지 않는다(함정 1).
   ⚠ env(safe-area-*) 는 zoom 의 영향을 받으므로 ÷1.28 로 적는다(함정 2).
   기기별 상태는 localStorage "mydrama-easy" — index.html 의 <body> 바로 뒤 스크립트가 첫 그림 전에 클래스를 붙인다. */

/* ── 1층: 토큰 — 단색 어두운 바탕 + 상아색 글씨, 강조색은 --accent 하나 ─────────────── */
body.easy{
  --accent:#e8c37a;
  --bg:#0d0b09; --s1:#1a1713; --glass:#1a1713;
  --ln:#2a2620; --ln2:#3b362c; --line:#2a2620;
  --ink:#efeae0; --dim:#a69d8d; --faint:#a69d8d;
  /* 금빛 계열은 전부 무채색으로 — 단, 선택 표시가 사라지지 않게 «보이는» 농도로 둔다(함정 3) */
  --gold:#efeae0; --gold-text:#efeae0; --gold-dim:#a69d8d; --gold-on:#241a08;
  --gold-soft:rgba(239,234,224,.12); --gold-line:rgba(239,234,224,.5);
  --tabh:60px;
  font-size:15.5px; line-height:1.6;
  word-break:keep-all; overflow-wrap:break-word;          /* 함정 4: 한글은 어절 단위로 줄바꿈 */
  background:#0d0b09;
}

/* ── 2층: 화면 뿌리에만 zoom ──────────────────────────────────────────────── */
body.easy .top{zoom:1.28;padding-top:calc(env(safe-area-inset-top,0px) / 1.28);height:calc(56px + env(safe-area-inset-top,0px) / 1.28)}
body.easy .wrap{zoom:1.28}
body.easy .tabbar{zoom:1.28;height:calc(var(--tabh) + env(safe-area-inset-bottom,0px) / 1.28);padding-bottom:calc(env(safe-area-inset-bottom,0px) / 1.28)}
body.easy .sb{zoom:1.28}
/* 모달·시트·토스트·툴팁은 body 바로 아래에 붙는 뿌리라 따로 건다 */
body.easy .modal{zoom:1.28;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px) / 1.28)}
body.easy .vrsheet{zoom:1.28;max-height:calc(calc(var(--vh100) * 0.8) / 1.28);padding-bottom:calc(14px + env(safe-area-inset-bottom,0px) / 1.28)}
body.easy #toast{zoom:1.28;bottom:calc((var(--tabh) * 1.28 + 12px + env(safe-area-inset-bottom,0px)) / 1.28)}
body.easy .toast{box-shadow:none;background:#1a1713;border:1px solid var(--ln2);font-size:15.5px;border-radius:12px}
/* 툴팁은 JS 가 getBoundingClientRect 로 위치를 잡으므로 zoom 대신 글자·여백만 키운다 */
body.easy #hpTip{font-size:20px;padding:15px 18px;max-width:min(340px,calc(100vw - 24px));box-shadow:none;background:#1a1713;border-color:var(--ln2)}

/* 사이드바(폰: 바텀시트) — 높이 한도도 zoom 만큼 나눈다 */
@media(max-width:768px){
  body.easy .sb{max-height:calc(min(calc(var(--dvh100) * 0.82),calc(var(--dvh100) - 48px)) / 1.28);padding-bottom:calc(16px + env(safe-area-inset-bottom,0px) / 1.28);box-shadow:none;background:#17140f}
}
/* 데스크톱·태블릿: 사이드바 칸 폭도 zoom 만큼 넓힌다(좁은 아이콘 줄이던 구간도 라벨이 보이게) */
@media(min-width:768.02px){
  body.easy .shell{grid-template-columns:calc(232px * 1.28) minmax(0,1fr)}
  body.easy .sb{padding:16px 10px}
  body.easy .sb .brand{font-size:17px;letter-spacing:.3em;text-align:left;padding:4px 10px 12px}
  body.easy .sb .brand span{display:inline}
  body.easy .sb .brand em,body.easy .sb .brand .sbq{display:none}
  body.easy .sb .brand .sbl{display:block;width:150px;height:auto;margin:2px 0 4px}
  body.easy .sb .grp{font-size:13px;padding:12px 10px 5px;border-top:0;margin-top:0}
  body.easy .sb a{justify-content:flex-start;padding:11px 13px}
  body.easy .sb a .lb,body.easy .sb a i{display:inline}
  body.easy .sb a svg{width:20px;height:20px}
  body.easy .body{padding:0 20px 44px}
}

/* ── 꾸밈 걷어내기: 그림자·번쩍임·유리·그라데이션 ──────────────────────────── */
body.easy .tabbar{background:#0d0b09;backdrop-filter:none;-webkit-backdrop-filter:none;border-top:1px solid var(--ln2)}
body.easy .sb{background:#17140f}
body.easy .sn-badge,body.easy .vrfab button{backdrop-filter:none;-webkit-backdrop-filter:none}
body.easy .vrfab button{box-shadow:none;background:#1a1713;color:var(--ink);border-color:var(--ln2)}
body.easy .vrfab button.key{background:var(--accent);color:#241a08;border-color:var(--accent);box-shadow:none}
body.easy .hm-art,body.easy .au-fab,body.easy .chp,body.easy .rdfd{box-shadow:none}
body.easy .au-fab{background:var(--accent);color:#241a08}
body.easy .hm-mh,body.easy .au-mh{background:#1a1713;border:1px solid var(--ln2)}
body.easy .dfr[class*="k-"],body.easy .skel{background:#1a1713}
body.easy .netstage{background:#0d0b09}
body.easy .stg{animation:none}
body.easy .card,body.easy .panel,body.easy .hm-auth,body.easy .hm-cont,body.easy .hm-bk,body.easy .au-bk1,body.easy .au-kid,body.easy .pj-tile,body.easy .chl,body.easy .hm-tile{background:#1a1713;border-color:var(--ln2)}
body.easy .card.link:hover,body.easy .row.link:hover{background:#211d17}
body.easy .modal,body.easy .vrsheet{background:#1a1713;box-shadow:none}
body.easy .mbg,body.easy .vrbg{background:rgba(0,0,0,.7)}
body.easy .pj-tile.read{background:#211d17;border-color:var(--gold-line)}
body.easy .pj-ico{background:#211d17;border-color:var(--ln2);color:var(--ink)}
body.easy .hm-av,body.easy .au-av{background:#3b362c;color:var(--ink)}

/* ── 1색 강조: 큰 버튼과 지금 탭만 금빛 ────────────────────────────────────── */
body.easy .btn{color:var(--ink);background:#211d17;border-color:var(--ln2);box-shadow:none}
body.easy .btn:hover:not(:disabled){color:var(--ink);border-color:var(--gold-line)}
body.easy .btn.line{background:transparent;color:var(--ink);border-color:var(--ln2)}
body.easy .btn.gold,body.easy .btn.gold:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:#241a08}
body.easy .tabbar a{color:var(--dim)}
body.easy .tabbar a.on,body.easy .tabbar a.on svg{color:var(--accent)}
body.easy .btn.line.sm.on,body.easy .chip.on,body.easy .hold.on{background:#efeae0;color:#0d0b09;border-color:#efeae0}   /* 선택 = 상아색 채움 + 어두운 글씨 */
body.easy .chip{background:#211d17;color:var(--ink);border-color:var(--ln2)}
body.easy .chip.on{background:#efeae0;color:#0d0b09}
body.easy .bar>i,body.easy .vrprog i{background:#efeae0}
body.easy .hp,body.easy .hp:hover,body.easy .hp.pin{background:#211d17;color:var(--dim);border-color:var(--ln2)}
body.easy .hp:hover,body.easy .hp.pin{color:var(--ink);border-color:var(--gold-line)}
body.easy .bdg,body.easy .st{color:var(--ink);background:#211d17;border-color:var(--ln2);font-size:13px;padding:6px 10px}
body.easy .bdg.ok,body.easy .st.ok{color:var(--ok);background:transparent;border-color:rgba(52,211,153,.4)}
body.easy .bdg.err,body.easy .st.err{color:var(--danger);background:transparent;border-color:rgba(244,63,94,.45)}
body.easy .bdg.dim{color:var(--dim)}
body.easy .sb a.on,body.easy .tr.on,body.easy .chi.on{color:var(--ink);background:#2a2620;border-color:var(--gold-line)}
body.easy .vrseg button.on{background:#efeae0;color:#0d0b09}
body.easy .vrth.on{box-shadow:0 0 0 3px #efeae0}
body.easy .vrp.sel{background:rgba(239,234,224,.14);box-shadow:inset 0 0 0 2px var(--gold-line)}
body.easy .vrmi.key,body.easy .vrtoc a.on{color:var(--accent)}

/* ── 글자·크기 (zoom 1.28 이 곱해지므로 CSS 값은 눈에 보이는 값 ÷ 1.28) ──────── */
body.easy .top b{font-size:23px;color:var(--ink)}
body.easy .top .back{width:44px;height:44px}
body.easy .pagehd{margin:18px 0 14px}
body.easy .pagehd h1{font-size:23px;color:var(--ink)}   /* 폰에서는 app.css 가 숨긴다(머리에 같은 제목이 있다) */
body.easy .pagehd p{font-size:15.5px}
body.easy .pagehd p b{color:var(--ink)}
body.easy .sec,body.easy .sect,body.easy .ttl{font-size:18px;color:var(--ink)}
body.easy .sec a{color:var(--dim);font-size:15.5px}
body.easy .card h3,body.easy .card.proj h3,body.easy .eng .hd2 b{font-size:17px;color:var(--ink)}
body.easy .mini,body.easy .muted,body.easy .row .sm{font-size:15.5px}
body.easy .mini .big{color:var(--ink);font-size:19px}
body.easy .f .lab{font-size:15px;color:var(--dim)}
body.easy .inp,body.easy .crow .inp{height:56px;font-size:16px;border-radius:12px;background:#0d0b09;border-color:var(--ln2)}
body.easy textarea.inp{height:auto;min-height:110px;font-size:16px}
body.easy .inp:focus{border-color:#efeae0}
body.easy .btn{height:54px;font-size:16px;border-radius:12px;padding:0 18px}
body.easy .btn.sm{height:46px;font-size:15px}
body.easy .btn.md{height:56px;font-size:16.5px}
body.easy .chip{font-size:15px;padding:11px 16px;min-height:46px}
body.easy .chips a{font-size:15px;min-height:46px;background:#211d17;color:var(--ink);border-color:var(--ln2)}
body.easy .row{min-height:72px;padding:12px 14px}
body.easy .tr,body.easy .chi{min-height:56px}
body.easy .tabbar a{font-size:13px;gap:2px}
body.easy .tabbar a svg{width:26px;height:26px}
body.easy .sb a{font-size:16px;min-height:56px;color:var(--dim)}
body.easy .sb a.on{color:var(--ink)}
body.easy .sb .grp{font-size:14px;color:var(--dim)}

/* 한 줄 짜리 눌림 요소는 줄바꿈 금지(함정 4) — 대신 줄(flex-wrap)이 접힌다 */
body.easy .btn,body.easy .chip,body.easy .bdg,body.easy .st,body.easy .hold,body.easy .chips a,body.easy .tabbar a{white-space:nowrap}
body.easy .chips,body.easy .fchips,body.easy .au-bs,body.easy .hm-bs,body.easy .chacts{flex-wrap:wrap}

/* ── 폭 281px(360÷1.28) 안에서 가로 넘침 막기 ─────────────────────────────── */
body.easy .top{gap:6px;padding-left:10px;padding-right:10px}
body.easy .top .acts{max-width:58%;overflow:hidden}
/* 머리의 보조 단추는 숨기고 큰 기본 단추만 남긴다 — 읽기 화면의 Aa·≡ 는 예외 */
body.easy .top .acts .btn:not(.gold):not(#vrAa):not(#vrMenu){display:none}
body.easy .top .acts .btn{height:44px;padding:0 12px;font-size:15px}
body.easy .top .acts .bdg{display:none}
body.easy .cnt4{grid-template-columns:repeat(2,minmax(0,1fr))}
body.easy .hm-tiles,body.easy .pj-hub{grid-template-columns:minmax(0,1fr);gap:10px}
body.easy .hm-art{display:none}
body.easy .hm-tile{height:auto;min-height:76px;justify-content:center}
body.easy .hm-tx{padding:14px 16px}
body.easy .hm-tx b{font-size:19px}
body.easy .hm-tx span{font-size:15px;white-space:normal}
body.easy .pj-tile{min-height:76px;flex-direction:row;align-items:center;gap:12px}
body.easy .pj-ico{display:none}
body.easy .pj-tile b{margin-top:0;font-size:18px}
body.easy .au-head h1{font-size:23px}
body.easy .au-kids{margin-left:10px;padding-left:10px}
body.easy .au-kid{flex-wrap:wrap}
body.easy .row{flex-wrap:wrap}
body.easy .row .rm,body.easy .row .tm,body.easy .row .pgw{width:auto;flex:none;max-width:100%}
body.easy .row .sm{flex:1 1 100%;white-space:normal}
body.easy .oltree,body.easy .chl,body.easy .chp{max-height:calc((var(--dvh100) - 140px) / 1.28)}
body.easy .chp{top:56px;background:#14110d}
body.easy .rdfd{top:56px}
body.easy .card>table,body.easy .card>pre,body.easy .panel>table{display:block;max-width:100%;overflow-x:auto}
body.easy .otbl td:first-child{width:auto}
body.easy .grid>*,body.easy .fg>*{grid-column:span 12!important}
body.easy .crow>*{grid-column:1/-1!important}
body.easy .jobbar{flex-wrap:wrap}
body.easy .jobbar .jm{max-width:100%;white-space:normal}

/* ── 다른 세션이 만드는 새 홈(hm2-*)·표지 상자(.cv)·상태 알약(.st) — 클래스 이름만 보고 일반 규칙 ── */
body.easy .cv{display:none}                                   /* 표지 상자: 쉬운보기에선 숨김 */
body.easy .hm2-stats,body.easy .hm2-sv{display:none}       /* 숫자 타일·서가 미리보기 */
body.easy .hm2-hero{display:flex;flex-direction:column;gap:14px;background:#1a1713;border:1px solid var(--ln2);border-radius:16px;box-shadow:none;padding:18px}
body.easy .hm2-hero::before,body.easy .hm2-hero::after{display:none}
body.easy .hm2-row{min-height:72px;font-size:16px;padding:12px 14px}
body.easy .hm2-row b{font-size:17px}
body.easy .hm2-bk{background:#1a1713;border-color:var(--ln2)}
/* 주 버튼은 가로 가득 · 눈에 보이는 높이 약 60px */
body.easy .hm2-hero>.btn.gold,body.easy .hm2-hero.empty .acts .btn,body.easy form .btn.gold.md{width:100%;height:47px;font-size:17px}
body.easy .hm2-hero .tx>b{font-size:21px;color:var(--ink)}
body.easy .hm2-hero .eb{color:var(--dim)}

/* 설치 카드 — 좁은 칸에서 그림·글이 겹치지 않게 세로로 쌓는다 */
body.easy .inst{flex-direction:column;align-items:flex-start;gap:12px}
body.easy .inst .ib{width:100%}
body.easy .inst .ib b{font-size:18px}
body.easy .inst .ib p{font-size:15.5px}
body.easy .inst .ib .btn{width:100%}
body.easy .inst .step span{font-size:14px}
body.easy .inst img{display:none}
body.easy .hd2{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
body.easy .hd2 b{font-size:17px;color:var(--ink)}

/* ── 설정의 쉬운보기 스위치(맨 위) ──────────────────────────────────────── */
.ezrow{display:flex;align-items:center;gap:14px;width:100%;min-height:76px;padding:14px 16px;margin:14px 0 6px;text-align:left;cursor:pointer;
  border-radius:16px;border:1px solid var(--ln2);background:#1a1713;color:var(--ink);font:inherit}
.ezrow .ezt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ezrow .ezt b{font-size:18px;line-height:1.3;color:var(--ink)}
.ezrow .ezt span{font-size:15px;line-height:1.4;color:var(--dim)}
.ezrow .ezsw{flex:none;width:60px;height:34px;border-radius:99px;background:#3b362c;position:relative;transition:background .18s}
.ezrow .ezsw::after{content:"";position:absolute;left:4px;top:4px;width:26px;height:26px;border-radius:50%;background:#efeae0;transition:transform .18s cubic-bezier(.23,1,.32,1)}
.ezrow[aria-checked="true"] .ezsw{background:#efeae0}
.ezrow[aria-checked="true"] .ezsw::after{transform:translateX(26px);background:#241a08}
.ezrow:active{transform:scale(.985)}
body.easy .ezrow{min-height:84px;margin-top:16px}

/* ── 읽기 화면: 본문은 이중 확대하지 않는다(함정 1) — 본문만 zoom 을 되돌리고, 머리·끝 버튼은 키운다 ── */
body.easy .vr{zoom:.78125;margin:0 -12px}
body.easy .vrhd,body.easy .vrend{zoom:1.28}
body.easy .vrtext{font-size:max(var(--vr-fs),20px)}
body.easy .vrhd h1{font-size:19px}
body.easy .vrhd .vrbook,body.easy .vrhd .vrmeta{font-size:13px}
body.easy .vrnext{min-height:64px;font-size:15px}
body.easy .vrfab{bottom:calc(var(--tabh) + 14px + env(safe-area-inset-bottom,0px) / 1.28)}
body.easy .vrfab button{width:52px;height:52px}
body.easy .vrfab button.key{width:60px;height:60px}
body.easy .vrrow>b{font-size:15px}
body.easy .vrseg button{height:44px;font-size:15px}
body.easy .vrstep button{width:46px;height:46px}
body.easy .vrmi{min-height:58px;font-size:16px}
body.easy .vrtoc a{min-height:56px;font-size:15.5px}
body.easy .vrsheet h4{font-size:15px;color:var(--dim)}
@media(max-width:768px){
  body.easy .au-fab{bottom:calc(var(--tabh) + 16px + env(safe-area-inset-bottom,0px) / 1.28)}
}

/* ── 인물 관계 별자리(starnet.js): 번쩍임을 낮춘다. 캔버스는 JS 가 body.easy 를 읽어 후광·별가루를 줄인다 ── */
/* 캔버스는 getBoundingClientRect 로 크기·누른 자리를 계산하므로 확대되면 어긋난다 — 무대만 zoom 을 되돌려 실제 px 로 둔다(함정 1) */
body.easy .netstage{zoom:calc(.78125 / var(--pcz));height:min(60dvh,560px);border-radius:14px;border-color:var(--ln2)}
body.easy .sn-badge{background:#1a1713;border:1px solid var(--ln2);color:var(--ink);font-size:16px;padding:8px 14px}
body.easy .sn-hd,body.easy .sn-ft{left:10px;right:10px}
body.easy .sn-st{color:var(--dim);font-size:15px}
body.easy .sn-tip{display:none}

/* 움직임을 줄이는 환경에서는 전환도 끈다 */
@media(prefers-reduced-motion:reduce){.ezrow .ezsw,.ezrow .ezsw::after{transition:none}}

body.easy .hm-cont .m{font-family:inherit;font-weight:600;font-size:16px}

/* v3(내 작품·작품 허브 시안 07·08) — 쉬운보기: 표지·소개 숨김, 세리프 대신 본문 글꼴, 평평한 카드 */
body.easy .v3h1,body.easy .wk-t h3,body.easy .pj-hero .tx h1,body.easy .v3sec h2{font-family:var(--sans)}
body.easy .wk{background:#1a1713;padding:14px}
body.easy .wk-s .pr,body.easy .pj-hero .pr,body.easy .pj-hero .by{display:none}
body.easy .wk-hd{grid-template-columns:minmax(0,1fr)}
body.easy .wk-hd .acts{display:grid;grid-template-columns:1fr 1fr;order:3}
body.easy .wk-hd .lnk{justify-self:start}
body.easy .pj-hub.v3 .pj-ico{display:none}
body.easy .dot{background:transparent}
body.easy .v3rows .row{background:#1a1713}

/* px 회차 통합 QA(2026-10-14) — 폰 1안 마크업이 늘린 요소를 쉬운보기에서 정리 */
.st-ih .ib [hidden]{display:none}
body.easy .st-aa{display:none}
body.easy .st-ih .ib{flex:1 1 100%}
body.easy .au3-bk h3{flex:none}
body.easy .top .acts{flex:none;overflow:visible}