/* 작품 페이지 공통 · 쉽게 읽기 (2026-10-21 작가 승인 기준, 북켓몬에서 옮김)
   작품 모음·젤리 패닉 페이지와 같은 콜라주 결(찢긴 종이 · 테이프 · 오린 글자). 작품 잉크는 body[data-ink] 를 따른다. */
body[data-ink="red"]{--ez-paper:url("paper-red.jpg")}body[data-ink="blue"]{--ez-paper:url("paper-blue.jpg")}body[data-ink="teal"]{--ez-paper:url("paper-teal.jpg")}body[data-ink="ink"]{--ez-paper:url("paper-ink.jpg")}
/* 여는 곳 두 군데: 위 메뉴의 파란 종이 버튼 + 첫 화면의 종이 띠. 눈에 먼저 띄게 남색 종이 + 먹 그림자 */
.easy-open{position:relative;font:inherit;font-size:15px;font-weight:800;color:#fff4e8;cursor:pointer;border:0;padding:9px 18px 8px;margin-left:8px;
  background:var(--accent,#4b4ad1) var(--ez-paper,url("paper-blue.jpg")) center/140px;transform:rotate(-3deg);box-shadow:0 3px 0 #1b1a17;
  clip-path:polygon(0 8%,8% 0,96% 6%,100% 70%,94% 100%,4% 94%);filter:drop-shadow(2px 3px 0 #1b1a17)}
.easy-open:hover,.easy-open:focus-visible{background-image:url("paper-kraft.jpg");color:#1b1a17}
.easy-open:focus-visible,.easy-hero:focus-visible{outline:2px solid #1b1a17;outline-offset:4px}
.easy-hero{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font:inherit;text-align:left;cursor:pointer;border:0;
  padding:12px 22px 12px 18px;color:#fff4e8;font-size:17px;font-weight:800;line-height:1.3;
  background:var(--accent,#4b4ad1) var(--ez-paper,url("paper-blue.jpg")) center/200px;transform:rotate(-1.5deg);
  clip-path:polygon(0 6%,6% 0,52% 4%,97% 0,100% 50%,97% 100%,45% 96%,2% 100%);filter:drop-shadow(4px 4px 0 #1b1a17)}
.easy-hero-k{font:13px/1.2 "Black Han Sans",sans-serif;letter-spacing:.02em;color:#ffd84a}
.easy-hero:hover{background-image:url("paper-kraft.jpg");color:#1b1a17}
.easy-hero:hover .easy-hero-k{color:var(--accent,#4b4ad1)}
/* 처음 한 번만 탁 붙어 눈길을 끈다 */
.easy-open,.easy-hero{animation:ezPop .5s steps(4,end) .6s both}
@keyframes ezPop{0%{opacity:0;scale:1.35}60%{opacity:1;scale:.94}100%{opacity:1;scale:1}}
@media(prefers-reduced-motion:reduce){.easy-open,.easy-hero{animation:none}}

.easy{--ink:#1b1a17;--cream:#eee6d6;--blue:var(--accent,#4b4ad1);--red:var(--bad,#c0412a);
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:#121216;color:var(--cream);overflow-y:auto;overflow-x:clip;
  font-family:"Wanted Sans Variable","Wanted Sans","Noto Sans KR",sans-serif;word-break:keep-all;line-height:1.6}
.easy::backdrop{background:#121216}
.easy[open]{display:block}
.easy *{box-sizing:border-box}

.easy-scraps{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ez-hex{position:absolute;width:var(--s);height:calc(var(--s) * .86);background:var(--c);
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);transform:rotate(var(--r))}
.ez-hex.h1{--s:84px;--c:var(--blue);--r:12deg;left:3%;top:330px}
.ez-hex.h2{--s:46px;--c:#cfc4ae;--r:-18deg;left:6%;top:120px}
.ez-hex.h3{--s:70px;--c:var(--blue);--r:28deg;right:4%;top:980px}
.ez-tape{position:absolute;width:120px;opacity:.75}
.ez-tape.t1{right:5%;top:420px;transform:rotate(18deg)}
.ez-tape.t2{left:2%;top:860px;transform:rotate(-24deg)}

.easy-top,.easy-head,.ez-grid,.easy-foot{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding-left:28px;padding-right:28px}
.easy-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:22px}
.easy-close{font:inherit;font-size:13px;font-weight:800;color:var(--ink);cursor:pointer;border:0;padding:6px 13px;
  background:url("paper-kraft.jpg") center/120px;transform:rotate(-2deg);
  clip-path:polygon(0 8%,8% 0,96% 6%,100% 70%,94% 100%,4% 94%)}
.easy-close:hover,.easy-close:focus-visible{background-image:var(--ez-paper,url("paper-blue.jpg"));color:#fff4e8}
.easy-who{font-size:12.5px;font-weight:700;letter-spacing:.16em;color:#9d968a}

.easy-head{display:grid;grid-template-columns:1.3fr .9fr;gap:20px;align-items:center;padding-top:40px}
.ez-h{margin:0;font:400 clamp(30px,4.4vw,52px)/1.45 "Black Han Sans","Wanted Sans Variable",sans-serif;letter-spacing:0}
.ez-strip{display:inline-block;padding:.04em .3em .06em;margin:.06em .1em;color:var(--ink);background:url("paper-cream.jpg") center/180px;
  clip-path:polygon(0 4%,3% 0,30% 6%,62% 0,97% 3%,100% 40%,98% 100%,66% 94%,31% 100%,2% 96%);box-shadow:0 6px 0 rgba(0,0,0,.35)}
.ez-strip.accent{color:#fff4e8;background-image:var(--ez-paper,url("paper-blue.jpg"));transform:rotate(-1.5deg)}
.ez-lede{display:inline-block;max-width:560px;margin:18px 0 0;padding:15px 20px;color:var(--ink);font-size:16px;line-height:1.7;
  background:url("paper-cream.jpg") center/300px;clip-path:polygon(1% 3%,40% 0,99% 2%,100% 55%,98% 98%,55% 100%,2% 97%,0 40%)}
.ez-play{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}
.ez-btn{display:inline-block;padding:10px 18px 9px;color:var(--ink);font:800 14px/1.3 inherit;text-decoration:none;border:0;cursor:pointer;
  background:url("paper-cream.jpg") center/160px;transform:rotate(2deg);box-shadow:0 4px 0 rgba(0,0,0,.4);
  clip-path:polygon(0 6%,8% 0,52% 5%,97% 0,100% 52%,96% 100%,45% 95%,3% 100%)}
.ez-btn.main{color:#fff4e8;background-image:var(--ez-paper,url("paper-blue.jpg"));font-size:16px;padding:12px 22px 11px;transform:rotate(-2deg)}
.ez-btn:hover,.ez-btn:focus-visible{background-image:var(--ez-paper,url("paper-blue.jpg"));color:#fff4e8}
.ez-btn.main:hover,.ez-btn.main:focus-visible{background-image:url("paper-cream.jpg");color:var(--ink)}
.ez-obj{margin:0;justify-self:center;width:min(300px,100%)}
.ez-obj img{display:block;width:100%;height:auto;transform:rotate(-6deg);filter:drop-shadow(10px 10px 0 var(--blue)) drop-shadow(0 18px 20px rgba(0,0,0,.45))}

.ez-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 30px;padding-top:56px}
.ez-card{position:relative;color:var(--ink);background:url("paper-cream.jpg") center/320px;padding:26px 28px;transform:rotate(var(--tilt,0deg));
  clip-path:polygon(0 2%,30% 0,70% 1.5%,100% 0,99% 40%,100% 98%,62% 100%,28% 98.5%,0 100%,1% 55%);filter:drop-shadow(0 14px 16px rgba(0,0,0,.5))}
.ez-card.wide{grid-column:1/-1}
.ez-card.kraft{background-image:url("paper-kraft.jpg")}
.ez-card.accent{background-image:var(--ez-paper,url("paper-blue.jpg"));color:#fff4e8}
.ez-tag{display:inline-block;margin-bottom:14px;padding:3px 10px;font:15px/1.3 "Black Han Sans",sans-serif;letter-spacing:.04em;color:var(--ink);
  background:url("paper-kraft.jpg") center/120px;transform:rotate(-3deg);box-shadow:0 3px 0 rgba(0,0,0,.25)}
.ez-card.kraft .ez-tag,.ez-card.accent .ez-tag{background-image:url("paper-cream.jpg")}
.ez-card p{margin:0}
.ez-small{margin-top:12px!important;font-size:13px;opacity:.78}

.ez-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;counter-reset:f}
.ez-flow li{counter-increment:f;position:relative;font-size:16px;font-weight:700;line-height:1.45;padding-top:30px}
.ez-flow li::before{content:"0" counter(f);position:absolute;top:0;left:0;font:15px "Black Han Sans",sans-serif;color:var(--blue)}
.ez-flow li+li::after{content:"→";position:absolute;left:-22px;top:30px;color:#8f877a}
.ez-flow li.mine{color:var(--blue)}
.ez-flow li b{display:inline-block;margin-left:6px;padding:0 6px;font-size:11px;color:#fff4e8;background:var(--blue);transform:rotate(-3deg);vertical-align:2px}

.ez-old{font-size:17px;color:#6b6152;text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:2px}
.ez-down{color:var(--blue);font-size:18px;margin:4px 0!important}
.ez-new{font-size:19px;font-weight:800;line-height:1.5}

.ez-list{margin:0;padding:0;list-style:none}
.ez-list li{font-size:16px;font-weight:700;line-height:1.5;padding:6px 0 6px 22px;position:relative}
.ez-list li::before{content:"";position:absolute;left:0;top:14px;width:10px;height:10px;background:#fff4e8;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}

.ez-stamp{position:absolute;right:28px;top:22px;padding:2px 12px;font:20px "Black Han Sans",sans-serif;color:var(--blue);border:2.5px solid var(--blue);transform:rotate(6deg)}
.ez-band{margin:2px -12px 16px!important;padding:10px 18px;color:#fff4e8;font-weight:800;font-size:19px;background:var(--blue);
  clip-path:polygon(0 8%,2% 0,98% 4%,100% 92%,97% 100%,1% 96%)}
.ez-band b{color:#ffd84a;font-size:1.25em}
.ez-dots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.ez-dots span{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
.ez-d{display:grid;grid-template-columns:repeat(15,10px);gap:4px}
.ez-d i{display:block;width:10px;height:10px;border-radius:50%;background:#c9bea7}
.ez-d.on i{background:color-mix(in srgb,var(--blue) 55%,transparent)}
.ez-d i.x{background:var(--red)}

.ez-evo{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ez-evo img{width:64px;height:64px;object-fit:contain;background:#fff8ec;padding:4px;transform:rotate(-2deg);box-shadow:0 3px 0 rgba(0,0,0,.2)}
.ez-evo span{color:#8f877a}
.ez-row{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:8px 28px}
.ez-row .ez-tag{margin-bottom:0}
.ez-row .ez-evo{margin-bottom:0}
.ez-row p{font-size:17px;font-weight:700}

.easy-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-top:48px;padding-bottom:64px}
.easy-foot p{margin:0 auto 0 0;color:#c9c2b4;font-size:14px}

/* 열릴 때 한 번, 종이가 탁 붙는다 */
.easy[open] .easy-head,.easy[open] .ez-card{animation:ezSlap .42s steps(4,end) both}
.easy[open] .ez-card:nth-child(2){animation-delay:.08s}.easy[open] .ez-card:nth-child(3){animation-delay:.16s}
.easy[open] .ez-card:nth-child(4){animation-delay:.24s}.easy[open] .ez-card:nth-child(5){animation-delay:.32s}
@keyframes ezSlap{0%{opacity:0;transform:scale(1.25) rotate(-3deg)}60%{opacity:1;transform:scale(.97) rotate(1deg)}100%{opacity:1;transform:rotate(var(--tilt,0deg))}}
@media(prefers-reduced-motion:reduce){.easy[open] .easy-head,.easy[open] .ez-card{animation:none}}

@media(max-width:760px){
  .easy-top,.easy-head,.ez-grid,.easy-foot{padding-left:18px;padding-right:18px}
  .easy-head{grid-template-columns:1fr;padding-top:24px}
  .ez-obj{width:150px;order:-1;justify-self:start}
  .ez-h{font-size:28px}
  .ez-lede{font-size:14px}
  .ez-grid{grid-template-columns:1fr;gap:26px;padding-top:36px}
  .ez-card{padding:22px 20px}
  .ez-flow{grid-template-columns:1fr 1fr;gap:16px 18px}
  .ez-flow li+li::after{display:none}
  .ez-row{display:block}.ez-row .ez-tag{margin-bottom:14px}.ez-row .ez-evo{margin-bottom:12px}.ez-row p{font-size:16px}
  .ez-dots{grid-template-columns:1fr}
  .ez-d{grid-template-columns:repeat(15,9px);gap:4px}.ez-d i{width:9px;height:9px}
  .ez-band{font-size:16px}
  .ez-stamp{font-size:16px;right:18px;top:18px}
  .ez-hex.h1,.ez-hex.h3,.ez-tape{display:none}
  .easy-open{padding:7px 12px 6px;font-size:13px;margin-left:2px}
  .easy-hero{width:100%;font-size:16px}
}

/* 막대 비교(작품마다 선택) */
.ez-bars{display:grid;gap:10px;margin-top:6px}
.ez-bars div{display:grid;grid-template-columns:150px minmax(0,1fr) 52px;align-items:center;gap:12px;font-size:14px;font-weight:700}
.ez-bars i{display:block;height:18px;width:var(--w);background:#b9ad95}
.ez-bars .hi i{background:var(--blue)}.ez-bars .mid i{background:var(--ink)}
.ez-bars b{font:18px "Black Han Sans",sans-serif;text-align:right}
.ez-bars .hi b{color:var(--blue)}
.ez-pic{display:block;width:100%;max-width:220px;transform:rotate(-2deg);box-shadow:0 4px 0 rgba(0,0,0,.25)}
@media(max-width:760px){.ez-bars div{grid-template-columns:1fr 44px;gap:4px 10px}.ez-bars div>span{grid-column:1/-1}}