@font-face{font-family:SUITE;src:url('/static/fonts/suite-variable-v1.woff2') format('woff2');font-weight:300 900;font-display:swap;}
@font-face{font-family:Nunito;src:url('/static/fonts/nunito-variable-v1.ttf') format('truetype');font-weight:200 1000;font-display:swap;}
@font-face{font-family:NanumSquareRound;src:url('/static/fonts/nanum-square-round-bold-v1.woff2') format('woff2');font-weight:700;font-display:swap;}

.story-webtoon {
    --page: #ffffff;
    --ink: #2b211b;
    --paper: #fffaf0;
    --muted: #8a7b6c;
    --slant: 6%;      /* 사선 컷의 기울기 (컷 너비 대비) */
    --gutter: 5%;     /* 사선 컷 사이의 흰 여백 두께 */
    --bubble-opacity: .97;  /* 말풍선 불투명도 */
  }
.story-webtoon * { box-sizing: border-box; }
.story-webtoon {
    margin: 0;
    background: var(--page);
    color: var(--ink);
    font-family: "SUITE", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
    font-synthesis: none;
  }
.story-webtoon .episode { max-width: 760px; margin: 0 auto; background: var(--page); }
.story-webtoon header.title, .story-webtoon footer.end {
    text-align: center;
    padding: 72px 24px;
    color: var(--muted);
    line-height: 1.7;
  }
.story-webtoon header.title h1 { margin: 0 0 8px; font-size: 26px; color: var(--ink); letter-spacing: .02em; }
.story-webtoon header.title p, .story-webtoon footer.end p { margin: 0; font-size: 14px; }
.story-webtoon .panel {
    position: relative;
    container-type: inline-size;
    margin: 0;
    line-height: 0;
    overflow: visible;
  }
.story-webtoon .panel .art {
    clip-path: polygon(
      0 var(--tl, 0%),
      100% var(--tr, 0%),
      100% calc(100% - var(--br, 0%)),
      0 calc(100% - var(--bl, 0%))
    );
  }
.story-webtoon .panel img { width: 100%; height: auto; display: block; }
/* Follow the artwork's clipping coordinates, including slanted edges. */
.journey-renewal .story-webtoon .panel .art { position: relative; }
.journey-renewal .story-webtoon .panel .art::before,
.journey-renewal .story-webtoon .panel .art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 65%);
    pointer-events: none;
  }
.journey-renewal .story-webtoon .panel .art::before {
    clip-path: polygon(0 var(--tl, 0%), 100% var(--tr, 0%),
      100% calc(var(--tr, 0%) + 2px), 0 calc(var(--tl, 0%) + 2px));
  }
.journey-renewal .story-webtoon .panel .art::after {
    clip-path: polygon(0 calc(100% - var(--bl, 0%) - 2px),
      100% calc(100% - var(--br, 0%) - 2px),
      100% calc(100% - var(--br, 0%)), 0 calc(100% - var(--bl, 0%)));
  }
.story-webtoon .j-dr, .story-webtoon .j-dl { margin-top: calc(var(--gutter) - var(--slant)); }
.story-webtoon .j-s { margin-top: 8%; }
.story-webtoon .j-m { margin-top: 16%; }
.story-webtoon .j-l { margin-top: 28%; }
.story-webtoon .edge-room { margin-top: 22%; }
.story-webtoon .cut-b-dr { --bl: var(--slant); --br: 0%; }
.story-webtoon .cut-b-dl { --bl: 0%; --br: var(--slant); }
.story-webtoon .j-dr { --tl: 0%; --tr: var(--slant); }
.story-webtoon .j-dl { --tl: var(--slant); --tr: 0%; }
.story-webtoon .bubble {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    translate:0 calc(-1 * var(--bubble-lift,0px));
    padding:calc(.85em + var(--bubble-text-height, 0px)*.18) 1.35em;
    background: var(--paper);
    color: var(--ink);
    border: .6cqw solid var(--ink);
    border-radius: 48%;
    font-size: 3.5cqw;
    font-weight: 500;
    line-height: 1.45;
    text-align: center;
    word-break: keep-all;
    box-shadow: 0 .6cqw 1.6cqw rgba(60, 35, 10, .25);
    opacity: 1;
    z-index: 2;
  }
.story-webtoon .bubble[data-speaker="보담"] {
    --paper: #f8f5fc;
    --ink: #56505b;
    --bubble-drift: .06;
    --tail-length: 2.6;
    --tail-base: 2.5;
    --tail-bend: .12;
    --pen-pressure: .95;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .015em;
  }
.story-webtoon .bubble[data-speaker="로담"] {
    --paper: #fff8e9;
    --ink: #49362d;
    --bubble-drift: .2;
    --tail-length: 4;
    --tail-base: 3.4;
    --tail-bend: .65;
    --pen-pressure: 1.05;
    font-weight: 500;
    line-height: 1.45;
  }
.story-webtoon .bubble[data-speaker="하담"] {
    --bubble-shape: box;
    --bubble-radius: 2.8;
    --paper: #f5f4ef;
    --ink: #555c58;
    --pen-pressure: 1.1;
    border-radius: 2.8cqw;
  }
.story-webtoon .bubble > span { display:block; }
.story-webtoon .bubble strong, .story-webtoon .bubble .emphasis, .story-webtoon .voice strong, .story-webtoon .voice .emphasis { font-weight: 700; }
.story-webtoon .bubble.edge-top {
    top: 0;
    transform: translateY(-50%);
  }
.story-webtoon .bubble.edge-bottom {
    top: auto;
    bottom: 0;
    transform: translateY(50%);
  }
.story-webtoon .bubble.pen-drawn {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }
.story-webtoon .bubble-outline {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    z-index: -1;
    pointer-events: none;
    filter: drop-shadow(.1cqw .3cqw .3cqw rgb(58 43 34 / .24)) drop-shadow(.2cqw 1.35cqw 1cqw rgb(58 43 34 / .34));
    opacity: var(--bubble-opacity);
  }
.story-webtoon .panel .callout-image {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    height: auto;
    z-index: 2;
    opacity: .7;
    transform: rotate(var(--tilt, 0deg));
    pointer-events: none;
  }
.story-webtoon .dialogue-gap {
    position: relative;
    container-type: inline-size;
    display: flow-root;
    padding-bottom: 12%;
    background: var(--page);
  }
.story-webtoon .dialogue-gap .bubble {
    position: relative;
    left: auto;
    top: auto;
    margin: -4cqw auto 0 8%;
    z-index: 1;
  }
.story-webtoon .voice {
    position: absolute;
    left: var(--x); top: var(--y); width: var(--w);
    padding: 2.4cqw 3cqw;
    background: rgb(255 250 240 / 85%);
    opacity: 1;
    color: var(--ink);
    border-radius: 1.2cqw;
    font-size: 3.4cqw;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    word-break: keep-all;
  }
.story-webtoon .language-control { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:24px; font-size:13px; }
.story-webtoon .language-control select { font:inherit; color:var(--ink,#2b211b); background:var(--paper,#fff); border:1px solid var(--line,#d8cfc5); border-radius:8px; padding:8px 12px; }
.story-webtoon .language-control select:focus-visible { outline:2px solid var(--ink-2,#86694e); outline-offset:3px; }
.story-webtoon .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.story-webtoon[lang="en"] { font-family:"Nunito", "SUITE", sans-serif; }
.story-webtoon[lang="en"] .bubble, .story-webtoon[lang="en"] .voice { font-family:"Nunito", "SUITE", sans-serif; font-size:3.35cqw; word-break:normal; overflow-wrap:break-word; letter-spacing:0; }

/* Language belongs to the episode metadata, outside the artwork. */
.story-episode-meta { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:16px; }
.story-language-slot { margin-left:auto; }
.story-language-tabs { display:flex; gap:3px; padding:3px; background:var(--village-wash,#f5f2ed); border:1px solid var(--line,#dfd8ce); border-radius:10px; }
.story-language-tabs button { min-height:40px; padding:8px 15px; border:0; border-radius:7px; background:transparent; color:var(--ink-2,#71685f); font:500 14px/1.3 SUITE,Nunito,sans-serif; cursor:pointer; }
.story-language-tabs button[aria-selected="true"] { background:var(--paper,#fff); color:var(--ink,#2b211b); box-shadow:0 1px 4px #0002; }
.story-language-tabs button:focus-visible { outline:2px solid var(--ink-2,#86694e); outline-offset:2px; }
.story-language-status { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(max-width:600px) {
  .cms-webtoon.story-webtoon { width:100vw; max-width:none; margin-inline:calc(50% - 50vw); }
  .story-webtoon .episode { max-width:none; }
  .story-webtoon .bubble, .story-webtoon .voice,
  .story-webtoon[lang="en"] .bubble, .story-webtoon[lang="en"] .voice { font-size:clamp(16px,4cqw,20px); line-height:1.4; }
  .story-webtoon .bubble,
  .story-webtoon .bubble[data-speaker] { padding:calc(.85em + var(--bubble-text-height, 0px)*.18) 1.1em; }
  /* Keep the two close conversations beside their speakers on narrow screens. */
  [data-episode="rodam-01"] .bubble:has(> span[data-i18n="dialogue09"]) { left:2%;width:47%; }
  [data-episode="rodam-01"] .bubble:has(> span[data-i18n="dialogue10"]) { left:51%;top:8%;width:47%; }
  [data-episode="rodam-01"] .bubble:has(> span[data-i18n="dialogue15"]) {
    left:60%;top:22%;width:38%;transform:translateY(-100%);translate:none;
    --bubble-tail-side:down;--tip-x:72%;--tip-y:34%;--tail-max-length:6;
  }
  [data-episode="rodam-01"] .bubble:has(> span[data-i18n="dialogue16"]) {
    left:2%;top:0%;width:56%;transform:translateY(-50%);translate:none;
    --bubble-tail-side:down;--tip-x:32%;--tip-y:34%;--tail-max-length:6;
  }
  .story-webtoon .voice { top:auto; bottom:4%; }
  .story-webtoon .edge-room { margin-top:28%; }
  .story-webtoon .j-l { margin-top:34%; }
  .story-webtoon .dialogue-gap { padding-bottom:16%; }
  .story-episode-meta { gap:10px; }
  .story-language-tabs button { min-height:44px; padding:8px 12px; }
}

.village-comic-heading [data-story-title] { font-family:SUITE,Nunito,sans-serif; font-weight:500; }
.village-comic-heading [data-story-title][lang="en"], .story-language-tabs button[lang="en"] { font-family:Nunito,SUITE,sans-serif; }

/* Letter shapes stay expressive after the short motion has settled. */
.story-webtoon .panel .story-sfx.callout-text {
 position:absolute;left:var(--x);top:var(--y);width:var(--w);
 background:none;border:0;padding:0;border-radius:0;z-index:2;
 color:#70513d;font-family:NanumSquareRound,SUITE,sans-serif;font-size:clamp(20px,7.3cqw,52px);font-weight:700;
 line-height:1.25;white-space:nowrap;pointer-events:none;
 transform:rotate(var(--tilt,0deg));opacity:.92;
 -webkit-text-stroke:clamp(1.5px,.45cqw,2.8px) #fff8e9;paint-order:stroke fill;
 text-shadow:0 1px 2px #4e302840;
}
.story-webtoon[lang="en"] .panel .story-sfx.callout-text {font-family:Nunito,NanumSquareRound,sans-serif}
.story-webtoon .panel.sfx-light .story-sfx.callout-text {color:#fff1d4;-webkit-text-stroke-color:#70513d}
.story-sfx .sfx-letters,.story-sfx .word {display:inline-block}
.story-sfx .char {
 display:inline-block;--rest-y:0em;--rest-r:-5deg;--rest-scale:1;
 transform:translateY(var(--rest-y)) rotate(var(--rest-r)) scale(var(--rest-scale));
 transform-origin:50% 80%;
}
.story-sfx .char:nth-child(even) {--rest-y:.07em;--rest-r:5deg;--rest-scale:.93}
.sfx-shake .story-sfx {letter-spacing:.025em}
.sfx-drop .story-sfx .char {--rest-r:-3deg;--rest-scale:1.04}
.sfx-drop .story-sfx .char:nth-child(even) {--rest-r:4deg;--rest-y:.1em;--rest-scale:.92}
.story-webtoon .panel.sfx-wave .story-sfx.callout-text {font-style:italic;color:#5f6a50}
.sfx-wave .story-sfx .char:nth-child(3n) {--rest-y:-.12em;--rest-r:-8deg}
.story-webtoon .panel.sfx-spark .story-sfx.callout-text {color:#956b30}
.story-sfx .sfx-marks {position:absolute;inset:-.3em -8%;width:116%;height:calc(100% + .6em);fill:none;stroke:currentColor;stroke-width:1.4;opacity:.6;overflow:visible}
.story-sfx.sfx-play:not(.sfx-done) .char {animation:sfx-shiver .48s ease-out both;animation-delay:calc(var(--char-index,0)*35ms)}
.sfx-drop .story-sfx.sfx-play:not(.sfx-done) .char {animation-name:sfx-settle;animation-duration:.62s}
.sfx-wave .story-sfx.sfx-play:not(.sfx-done) .char {animation-name:sfx-breeze;animation-duration:.7s}
.sfx-spark .story-sfx.sfx-play:not(.sfx-done) .char {animation-name:sfx-glint;animation-duration:.6s}
@keyframes sfx-shiver {20%{translate:-.05em 0}40%{translate:.05em 0}65%{translate:-.025em 0}100%{translate:0 0}}
@keyframes sfx-settle {0%{translate:0 -.24em}60%{translate:0 .035em}82%{translate:0 -.025em}100%{translate:0 0}}
@keyframes sfx-breeze {30%{translate:0 -.08em}65%{translate:.03em .035em}100%{translate:0 0}}
@keyframes sfx-glint {45%{scale:1.07}100%{scale:1}}
@media(prefers-reduced-motion:reduce){.story-webtoon .story-sfx .char{animation:none!important}}
/* 로담의 이야기 말풍선: 좁은 폭에서 한 단어만 외따로 떨어지지 않게 줄 길이를 고르게 맞춘다. */
[data-episode^="rodam"] .story-webtoon .bubble{text-wrap:balance}
/* 로담의 이야기 외침 글씨: 터지듯 커졌다가 흔들리며 자리를 잡는다(한 번만). */
@keyframes rodam-shout{0%{scale:.4;opacity:0}10%{scale:1.28;opacity:1}22%{scale:.95;translate:-.8cqw .3cqw}34%{scale:1.1;translate:.8cqw -.3cqw}46%{scale:1;translate:-.5cqw .1cqw}62%{translate:.4cqw 0}80%{translate:-.2cqw 0}}
[data-episode^="rodam"] .story-webtoon .callout-image.sfx-play:not(.sfx-done),[data-episode="journey-renewal-06"] .story-webtoon .callout-image.sfx-play:not(.sfx-done){animation:rodam-shout 1.15s ease-out backwards}
@media(prefers-reduced-motion:reduce){[data-episode^="rodam"] .story-webtoon .callout-image,[data-episode="journey-renewal-06"] .story-webtoon .callout-image{animation:none!important}}
/* 별밤 컷: 위쪽 70% 영역에 색이 다른 별이 반짝인다. 보이는 동안만 움직이고 움직임 줄이기에서는 정지한 별만 남긴다. */
@keyframes star-twinkle{0%,100%{opacity:.05;scale:.35}45%{opacity:1;scale:1.6}60%{opacity:.85;scale:1.25}}
.story-webtoon .panel.star-twinkle .art{position:relative}
.story-webtoon .star-field{position:absolute;inset:0 0 30% 0;overflow:hidden;pointer-events:none}
.story-webtoon .star-field i{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:#fff;box-shadow:0 0 calc(var(--s)*1.4) calc(var(--s)*.5) var(--c),0 0 calc(var(--s)*4) calc(var(--s)*.9) var(--c);opacity:.5;animation:star-twinkle var(--d) ease-in-out var(--l) infinite paused}
.story-webtoon .star-field i::before,.story-webtoon .star-field i::after{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;background:linear-gradient(90deg,#0000,var(--c) 35%,#fff 50%,var(--c) 65%,#0000)}
.story-webtoon .star-field i::before{width:calc(var(--s)*7);height:max(1px,calc(var(--s)*.22))}
.story-webtoon .star-field i::after{width:max(1px,calc(var(--s)*.22));height:calc(var(--s)*7);background:linear-gradient(180deg,#0000,var(--c) 35%,#fff 50%,var(--c) 65%,#0000)}
.story-webtoon .star-live .star-field i{animation-play-state:running}
@media(prefers-reduced-motion:reduce){.story-webtoon .star-field i{animation:none}}
/* 외침 말풍선(.shout): 별 모양 윤곽과 굵은 큰 글씨. 장면에 들어오면 한 번 터지듯 커졌다 떨리며 자리를 잡는다. */
@keyframes shout-pop{0%{scale:.3;opacity:0}14%{scale:1.22;opacity:1}28%{scale:.95;translate:-.8cqw .2cqw}42%{scale:1.06;translate:.8cqw -.2cqw}58%{scale:1;translate:-.5cqw 0}78%{translate:.3cqw 0}}
.story-webtoon .bubble.shout{font-weight:700;font-size:1.28em;line-height:1.5;padding:calc(1.9em + var(--bubble-text-height,0px)*.18) 2.4em;--paper:#fff3e6;--ink:#7a3f2e}
.story-webtoon[lang="en"] .bubble.shout{font-weight:700}
.story-webtoon .panel:has(.bubble.shout):not(.shout-in) .bubble.shout{opacity:0}
.story-webtoon .panel.shout-in .bubble.shout{animation:shout-pop .95s ease-out backwards}
@media(prefers-reduced-motion:reduce){.story-webtoon .panel .bubble.shout{animation:none!important;opacity:1!important}}