/* SIDE WORKS 설명 만화 (manga.js). 학습만화 결은 두고 톤은 담백하게: 얇고 둥근 컷, 옅은 스크린톤, 효과 글자는 파랑 하나.
   색은 --ink · --sheet · --line · --accent 만 쓴다(볼 홍조만 옅은 분홍). 컷은 내용에 맞춰 늘어나 말풍선이 잘리지 않는다. */
.manga-wrap{margin:0;width:100%}
.manga-title{font:600 12px/1.4 var(--head,sans-serif);letter-spacing:.08em;color:color-mix(in srgb,var(--ink) 70%,transparent);margin:0 0 8px;display:flex;align-items:center;gap:8px}
.manga-title::before{content:"";width:16px;height:2px;border-radius:2px;background:var(--accent)}
.manga{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%}
.manga.n3 .koma:last-child{grid-column:1/-1}
@media (min-width:760px){.manga{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.manga.n2{grid-template-columns:repeat(2,minmax(0,1fr))}.manga.n3{grid-template-columns:repeat(3,minmax(0,1fr))}.manga.n3 .koma:last-child{grid-column:auto}}

.koma{position:relative;min-height:236px;border:1.5px solid color-mix(in srgb,var(--ink) 78%,transparent);border-radius:14px;background:var(--sheet);display:flex;flex-direction:column;overflow:hidden;min-width:0}
@media (min-width:760px){.koma{min-height:260px}}
.koma .kn{position:absolute;left:9px;top:7px;font:600 10.5px/1 var(--head,sans-serif);color:color-mix(in srgb,var(--ink) 50%,transparent);z-index:3;font-variant-numeric:tabular-nums}
.fuki{position:relative;z-index:2;margin:24px 9px 10px;background:var(--sheet);color:var(--ink);border:1.5px solid color-mix(in srgb,var(--ink) 80%,transparent);border-radius:14px;padding:8px 11px;
  font:500 14px/1.55 var(--sans,sans-serif);letter-spacing:-.01em;word-break:keep-all;overflow-wrap:break-word}
@media (min-width:760px){.fuki{font-size:15px}}
.fuki::after{content:"";position:absolute;bottom:-6px;left:38%;width:10px;height:10px;background:var(--sheet);border-right:1.5px solid color-mix(in srgb,var(--ink) 80%,transparent);border-bottom:1.5px solid color-mix(in srgb,var(--ink) 80%,transparent);transform:rotate(45deg)}
.koma.is-me .fuki::after{left:auto;right:34%}
.chara{position:relative;z-index:1;margin-top:auto;width:74%;max-width:170px;line-height:0}
.koma.is-me .chara{align-self:flex-start;margin-left:5%}
.koma:not(.is-me) .chara{align-self:flex-end;margin-right:5%}
.manga-char{display:block;width:100%;height:auto}
.prop{position:absolute;z-index:1;bottom:8px;width:30%;max-width:64px;line-height:0;opacity:.95}
.koma.is-me .prop{right:8px}
.koma:not(.is-me) .prop{left:8px}
.prop svg{display:block;width:100%;height:auto}

/* 선 */
.manga-char .mk{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.manga-char .mk.thin{stroke-width:1.7}
.manga-char .mk.hair{stroke-width:1.15}
.manga-char .mk.mp-s{stroke:var(--sheet);opacity:.8}
.manga-char .mp,.manga-char .mk.mp{fill:var(--sheet)}
.manga-char .mf,.manga-char .mk.mf{fill:var(--ink)}
.manga-char .mk.ma,.manga-char .ma{fill:var(--accent)}
.manga-char .mk.ma-s{stroke:var(--accent);stroke-width:2.6}
.manga-char .mk.ma-s2{stroke:var(--accent)}
.manga-char .mb{fill:var(--blush,#F6A6B8);opacity:.55}
.manga-char .glass{fill:color-mix(in srgb,var(--sheet) 70%,transparent)}
.fx-sp{position:absolute;z-index:2;pointer-events:none;width:38px;height:auto;bottom:34%;left:10%}
.koma.is-me .fx-sp{left:auto;right:10%}
.fx-sp .mk{fill:none;stroke:var(--accent);stroke-width:1.2;stroke-linejoin:round;opacity:.7}

/* 효과: 옅은 스크린톤 · 가는 집중선 */
.koma.fx-tone{background:radial-gradient(circle,color-mix(in srgb,var(--line) 70%,transparent) .9px,transparent 1.2px) 0 0/7px 7px,var(--sheet)}
.koma.fx-speed::before{content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 50% 64%,var(--ink) 0 .6deg,transparent .6deg 9deg);
  -webkit-mask:radial-gradient(circle at 50% 64%,transparent 0 40%,#000 66%);mask:radial-gradient(circle at 50% 64%,transparent 0 40%,#000 66%);opacity:.14}
.manga-char .arm{fill:none;stroke:var(--ink);stroke-width:10.5;stroke-linecap:round;stroke-linejoin:round}
.manga-char .armf{fill:none;stroke:var(--sheet);stroke-width:7.2;stroke-linecap:round;stroke-linejoin:round}

/* 컷 꼴 바꾸기(manga.js SHOTS): 가까이 · 멀리 · 뒤집기 · 넓은 첫·끝 컷 */
.koma.v-zoom .chara{width:92%;max-width:220px;margin-bottom:-12%}
.koma.v-far .chara{width:50%;max-width:116px}
.koma.v-far .prop{width:44%;max-width:112px;bottom:14px;opacity:.85}
.koma.v-flip .manga-char{transform:scaleX(-1)}
.koma.v-zoom .prop{opacity:.55}
.manga.wide .koma:first-child,.manga.wide .koma:last-child{grid-column:1/-1}
@media (min-width:760px){.manga.wide{grid-template-columns:repeat(3,minmax(0,1fr))}.manga.wide .koma:first-child,.manga.wide .koma:last-child{grid-column:span 2}}
.manga-char.guest .ma{fill:var(--accent)}

/* 2026-10-28 권마다 다른 인물·장소 배경(manga.js HAIRS·OUTFITS·ACCS·SCENES) */
.manga-char .mk.mg,.manga-char .mg{fill:color-mix(in srgb,var(--ink) 38%,var(--sheet))}
.manga-char.age-kid{transform:scale(.8);transform-origin:50% 100%}
.koma.v-flip .manga-char.age-kid{transform:scale(-.8,.8)}
.bg-scene{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;fill:none;stroke:color-mix(in srgb,var(--ink) 22%,transparent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.koma.has-scene .prop{display:none}
.koma .role{position:absolute;right:9px;top:6px;z-index:3;font:600 10.5px/1.4 var(--head,sans-serif);color:color-mix(in srgb,var(--ink) 62%,transparent);background:var(--sheet);border-radius:6px;padding:0 5px}