/* ==========================================================================
   콰이어트 레전드 — 게임 소개 · 소설 목차 · 장 본문
   사이트는 어두운 바탕이지만 이 페이지들은 삽화의 아트 디렉션을 따른다:
   종이색 바탕, 먹색 글자, 황토 · 진청 포인트. 화려한 빛은 쓰지 않는다.
   ========================================================================== */

.ql {
    --ql-paper: #efe5d1;
    --ql-paper-deep: #e6d8bd;
    --ql-card: #f7f0e3;
    --ql-ink: #2b241d;
    --ql-ink-2: #574a3c;
    --ql-ink-3: #7f6d57;
    --ql-line: rgba(70, 50, 30, 0.18);
    --ql-line-strong: rgba(70, 50, 30, 0.38);
    --ql-ochre: #9a6722;
    --ql-slate: #36536d;
    --ql-shadow: 0 18px 40px -24px rgba(40, 25, 10, 0.55), 0 1px 3px rgba(40, 25, 10, 0.15);
    --ql-serif: "Noto Serif KR", "Nanum Myeongjo", "NanumMyeongjo", "AppleMyungjo", "Batang", "바탕", serif;
    /* 종이 결: 아주 옅은 갈색 잡음 */
    --ql-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.27 0 0 0 0 0.17 0 0 0 0.075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

    position: relative;
    background-color: var(--ql-paper);
    background-image: var(--ql-grain);
    color: var(--ql-ink);
    overflow-x: hidden;
    overflow-x: clip;
}

/* 밤에 읽기 (장 본문에서만 켤 수 있다) */
.ql[data-theme="night"] {
    --ql-paper: #1c1813;
    --ql-paper-deep: #221d17;
    --ql-card: #262019;
    --ql-ink: #e8decd;
    --ql-ink-2: #c6b69e;
    --ql-ink-3: #9d8c74;
    --ql-line: rgba(255, 240, 215, 0.14);
    --ql-line-strong: rgba(255, 240, 215, 0.3);
    --ql-ochre: #d39d50;
    --ql-slate: #9cc0de;
    --ql-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.8);
    --ql-grain: none;
}

.ql[data-theme="night"] .ql-fig img {
    filter: brightness(0.9);
}

.ql figure {
    margin: 0;
}

.ql a:focus-visible,
.ql button:focus-visible {
    outline: 2px solid var(--ql-slate);
    outline-offset: 3px;
}

.ql-wrap {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ------------------------------------------------------------ 공통 조각 */

.ql-eyebrow {
    margin: 0 0 10px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.24em;
    color: var(--ql-ochre);
}

.ql-h2 {
    font-family: var(--ql-serif);
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
    font-weight: 700;
    color: var(--ql-ink);
}

.ql-h3 {
    margin: 48px 0 16px;
    font-family: var(--ql-serif);
    font-size: 1.25rem;
}

.ql-lead {
    max-width: 44em;
    margin: 14px 0 0;
    color: var(--ql-ink-2);
    line-height: 1.9;
}

.ql-link {
    color: var(--ql-slate);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.ql-note {
    margin: 14px 0 0;
    font-size: 13px;
    color: var(--ql-ink-3);
}

.ql-fine {
    margin: 0 auto;
    padding-top: 12px;
    padding-bottom: 44px;
    font-size: 12.5px;
    color: var(--ql-ink-3);
    text-align: center;
}

.ql-tags {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.ql-tags li {
    padding: 4px 12px;
    border: 1px solid var(--ql-line-strong);
    border-radius: 999px;
    background: rgba(255, 250, 240, 0.55);
    font-size: 13px;
    color: var(--ql-ink-2);
}

.ql-actions {
    margin: 26px 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.ql-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 22px;
    border: 1px solid var(--ql-ink-2);
    border-radius: 3px;
    background: transparent;
    color: var(--ql-ink);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ql-btn:hover {
    background: rgba(60, 40, 20, 0.07);
}

.ql-btn--primary {
    border-color: var(--ql-ink);
    background: var(--ql-ink);
    color: var(--ql-paper);
}

.ql-btn--primary:hover {
    background: var(--ql-ink-2);
}

.ql-btn--ghost {
    border-color: transparent;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.ql-btn[hidden] {
    display: none;
}

.ql-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 20px;
    font-size: 13px;
    color: var(--ql-ink-3);
}

.ql-crumbs a {
    color: var(--ql-ink-2);
    text-decoration: none;
}

.ql-crumbs a:hover {
    text-decoration: underline;
}

.ql-cover img {
    display: block;
    width: 100%;
    max-width: 380px;
    height: auto;
    margin: 0 auto;
    border-radius: 2px;
    box-shadow: 0 26px 50px -28px rgba(40, 25, 10, 0.65), 0 2px 6px rgba(40, 25, 10, 0.18);
}

.ql-wide figcaption,
.ql-shots figcaption,
.ql-fig figcaption {
    margin-top: 10px;
    font-family: var(--ql-serif);
    font-size: 13.5px;
    color: var(--ql-ink-3);
    text-align: center;
}

/* ------------------------------------------------------------ 게임 소개: 히어로 */

.ql-hero {
    position: relative;
    isolation: isolate;
}

.ql-hero__art {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: min(86vh, 860px);
    overflow: hidden;
}

.ql-hero__art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 55%;
}

/* 위쪽 하늘은 제목이 잘 읽히게 조금 밝히고, 아래는 종이색으로 녹인다 */
.ql-hero__art::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(244, 238, 228, 0.66) 0%, rgba(244, 238, 228, 0.22) 38%, rgba(244, 238, 228, 0) 56%),
        linear-gradient(to bottom, rgba(239, 229, 209, 0) 72%, var(--ql-paper) 100%);
}

.ql-hero__body {
    position: absolute;
    inset: 0 0 auto 0;
    padding: clamp(28px, 5.5vw, 76px) 20px 0;
    text-align: center;
}

.ql-hero__eyebrow {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.26em;
    color: var(--ql-ink-2);
}

.ql-hero__title {
    margin-top: 14px;
}

.ql-hero__en {
    display: block;
    font-family: var(--ql-serif);
    font-size: clamp(2.4rem, 6.6vw, 5.4rem);
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.05;
    color: var(--ql-ink);
    text-shadow: 0 1px 0 rgba(255, 250, 240, 0.7), 0 0 26px rgba(244, 238, 228, 0.9);
}

.ql-hero__ko {
    display: block;
    margin-top: 0.45em;
    font-family: var(--ql-serif);
    font-size: clamp(1.05rem, 2.1vw, 1.5rem);
    font-weight: 700;
    letter-spacing: 0.5em;
    color: var(--ql-ink-2);
}

.ql-hero__tagline {
    margin: 18px 0 0;
    font-family: var(--ql-serif);
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    color: var(--ql-ink);
    text-shadow: 0 0 18px rgba(244, 238, 228, 0.95);
}

/* ------------------------------------------------------------ 게임 소개: 구역 */

.ql-section {
    padding: clamp(56px, 8vw, 96px) 0;
}

.ql-section--deep {
    background-color: var(--ql-paper-deep);
    background-image: var(--ql-grain);
}

.ql-split {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
}

.ql-split__text .ql-h2 {
    margin-bottom: 22px;
}

.ql-split__text p {
    margin: 0 0 1em;
    font-size: 16.5px;
    line-height: 1.95;
    color: var(--ql-ink-2);
}

.ql-cast {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.ql-person {
    padding: 14px 14px 18px;
    background: var(--ql-card);
    border: 1px solid var(--ql-line);
    border-radius: 6px;
}

.ql-person__art {
    aspect-ratio: 3 / 5;
    border-radius: 4px;
    overflow: hidden;
}

/* 시트의 종이 가장자리가 그림마다 달라 꽉 채운다(머리 쪽을 기준으로 아래가 잘린다) */
.ql-person__art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0%;
}

.ql-person__name {
    margin: 14px 0 0;
    font-family: var(--ql-serif);
    font-size: 1.2rem;
}

.ql-person__name span {
    margin-left: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ql-ink-3);
}

.ql-person__meta {
    margin: 4px 0 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--ql-ochre);
}

.ql-person__text {
    margin: 10px 0 0;
    font-size: 14.5px;
    line-height: 1.8;
    color: var(--ql-ink-2);
}

.ql-cast--small {
    margin-top: 0;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.ql-person--small {
    padding: 10px 10px 14px;
}

.ql-person--small .ql-person__art {
    aspect-ratio: 3 / 4;
}

.ql-person--small .ql-person__name {
    font-size: 1.05rem;
}

.ql-person--small .ql-person__text {
    font-size: 13.5px;
    line-height: 1.75;
}

.ql .ql-wide {
    margin-top: 28px;
}

/* 월드맵: 누르면 원본을 새 탭에서 연다(폰에서 확대해 보도록) */
.ql-map a {
    display: block;
    cursor: zoom-in;
}

.ql .ql-route + .ql-wide {
    margin-top: 40px;
}

.ql-wide img,
.ql-shots img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: var(--ql-shadow);
}

.ql-route {
    list-style: none;
    counter-reset: route;
    margin: 32px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 40px;
}

.ql-route li {
    counter-increment: route;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 2px 12px;
    padding: 14px 0;
    border-top: 1px solid var(--ql-line);
}

.ql-route li::before {
    content: counter(route);
    grid-row: span 2;
    font-family: var(--ql-serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ql-ochre);
}

.ql-route strong {
    font-family: var(--ql-serif);
    font-size: 1.05rem;
}

.ql-route span {
    font-size: 14.5px;
    color: var(--ql-ink-2);
}

.ql-features {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.ql-features li {
    padding: 20px 22px;
    background: var(--ql-card);
    border: 1px solid var(--ql-line);
    border-left: 3px solid var(--ql-ochre);
    border-radius: 4px;
}

.ql-features h3 {
    font-family: var(--ql-serif);
    font-size: 1.12rem;
}

.ql-features p {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.85;
    color: var(--ql-ink-2);
}

.ql-shots {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.ql-novel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 40px;
    align-items: start;
}

.ql-novel .ql-actions {
    justify-content: flex-start;
}

.ql-mini-toc {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--ql-line);
}

.ql-mini-toc a {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: baseline;
    padding: 12px 6px;
    border-bottom: 1px solid var(--ql-line);
    color: inherit;
    text-decoration: none;
}

.ql-mini-toc a:hover {
    background: rgba(60, 40, 20, 0.05);
}

.ql-mini-toc__label {
    font-size: 13px;
    font-weight: 700;
    color: var(--ql-ochre);
}

.ql-mini-toc__title {
    font-family: var(--ql-serif);
}

.ql-mini-toc__time {
    font-size: 12.5px;
    color: var(--ql-ink-3);
    white-space: nowrap;
}

/* ------------------------------------------------------------ 소설 목차 */

.ql-book {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 60px);
    align-items: center;
    padding: 32px 0 56px;
}

.ql-book__cover img {
    max-width: 340px;
}

.ql-book__en {
    display: block;
    font-family: var(--ql-serif);
    font-size: clamp(2rem, 4.6vw, 3.4rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.1;
}

.ql-book__ko {
    display: block;
    margin-top: 0.4em;
    font-family: var(--ql-serif);
    font-size: 1.15rem;
    letter-spacing: 0.45em;
    color: var(--ql-ink-2);
}

.ql-book__tagline {
    margin: 18px 0 0;
    font-family: var(--ql-serif);
    font-size: 1.15rem;
}

.ql-book__intro {
    max-width: 40em;
    margin: 16px 0 0;
    line-height: 1.9;
    color: var(--ql-ink-2);
}

.ql-book .ql-tags,
.ql-book .ql-actions {
    justify-content: flex-start;
}

.ql-toc__heading {
    margin-bottom: 18px;
}

.ql-toc {
    list-style: none;
    margin: 0 0 40px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.ql-toc__item {
    height: 100%;
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    gap: 16px;
    padding: 12px;
    background: var(--ql-card);
    border: 1px solid var(--ql-line);
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.ql-toc__item:hover {
    border-color: var(--ql-line-strong);
    transform: translateY(-2px);
}

.ql-toc__art {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 4px;
    background: var(--ql-paper-deep);
}

.ql-toc__art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ql-toc__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ql-toc__label {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--ql-ochre);
}

.ql-toc__title {
    margin-top: 2px;
    font-family: var(--ql-serif);
    font-size: 1.12rem;
    font-weight: 700;
}

.ql-toc__opening {
    margin-top: 6px;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--ql-ink-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ql-toc__meta {
    margin-top: auto;
    padding-top: 8px;
    font-size: 12px;
    color: var(--ql-ink-3);
}

/* ------------------------------------------------------------ 장 본문 */

.ql-chapter {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
}

.ql-chapter__head {
    padding: 40px 0 6px;
    text-align: center;
}

.ql-chapter__label {
    margin: 0;
    font-family: var(--ql-serif);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3em;
    color: var(--ql-ochre);
}

.ql-chapter__title {
    margin-top: 10px;
    font-family: var(--ql-serif);
    font-size: clamp(1.7rem, 4vw, 2.5rem);
}

.ql-chapter__meta {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--ql-ink-3);
}

.ql-chapter__head::after {
    content: "";
    display: block;
    width: 48px;
    height: 1px;
    margin: 24px auto 0;
    background: var(--ql-ochre);
}

.ql-theme {
    min-height: 32px;
    margin-top: 14px;
    padding: 5px 14px;
    border: 1px solid var(--ql-line-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--ql-ink-2);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
}

.ql-text {
    padding: 26px 0 8px;
}

.ql-text > p {
    max-width: 34em;
    margin: 0 auto 1.15em;
    font-size: 17.5px;
    line-height: 2;
    color: var(--ql-ink);
}

.ql-text > p.ql-lines {
    padding: 14px 20px;
    border-left: 2px solid var(--ql-ochre);
    background: rgba(255, 250, 240, 0.45);
    font-family: var(--ql-serif);
    font-size: 16px;
    line-height: 1.95;
}

.ql[data-theme="night"] .ql-text > p.ql-lines {
    background: rgba(255, 255, 255, 0.04);
}

.ql-text > p.ql-end {
    margin-top: 2.4em;
    font-family: var(--ql-serif);
    letter-spacing: 0.3em;
    color: var(--ql-ink-3);
    text-align: center;
}

.ql-break {
    height: auto;
    margin: 2.6em auto;
    border: 0;
    overflow: visible;
    text-align: center;
    color: var(--ql-ochre);
}

.ql-break::before {
    content: "◇";
    font-size: 15px;
}

.ql .ql-fig {
    max-width: 920px;
    margin: 2.6em auto;
}

.ql-fig img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 3px;
    box-shadow: var(--ql-shadow);
}

.ql-fig--tall img {
    width: auto;
    max-width: 100%;
    max-height: min(86vh, 900px);
    margin: 0 auto;
}

.ql-after {
    max-width: 960px;
    padding-top: 36px;
    text-align: center;
}

.ql-after p {
    margin: 10px 0 0;
    color: var(--ql-ink-2);
}

.ql-after .ql-after__thanks {
    margin: 0;
    font-family: var(--ql-serif);
    font-size: 1.3rem;
    color: var(--ql-ink);
}

.ql-pager {
    max-width: 960px;
    margin-top: 40px;
    padding-top: 28px;
    padding-bottom: 20px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
    border-top: 1px solid var(--ql-line);
}

.ql-pager__link {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px;
    background: var(--ql-card);
    border: 1px solid var(--ql-line);
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
}

.ql-pager__link:hover {
    border-color: var(--ql-line-strong);
}

.ql-pager__link--next {
    text-align: right;
}

.ql-pager__link--empty {
    visibility: hidden;
}

.ql-pager__dir {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ql-ochre);
}

.ql-pager__name {
    overflow: hidden;
    font-family: var(--ql-serif);
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ql-pager__toc {
    align-self: center;
    padding: 10px 16px;
    font-size: 14px;
    color: var(--ql-ink-2);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ------------------------------------------------------------ 좁은 화면 */

@media (max-width: 1000px) {
    .ql-cast {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ql-cast--small {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .ql-toc {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    .ql-split,
    .ql-novel {
        grid-template-columns: 1fr;
    }

    .ql-cover img {
        max-width: 300px;
    }
}

@media (max-width: 760px) {
    .ql-hero__art {
        aspect-ratio: 4 / 3;
        max-height: none;
    }

    .ql-hero__art img {
        object-position: 42% 70%;
    }

    .ql-hero__art::after {
        background: linear-gradient(to bottom, rgba(239, 229, 209, 0) 62%, var(--ql-paper) 100%);
    }

    .ql-hero__body {
        position: static;
        padding: 4px 16px 8px;
    }

    .ql-route,
    .ql-features,
    .ql-shots {
        grid-template-columns: 1fr;
    }

    .ql-book {
        grid-template-columns: 1fr;
        text-align: center;
        padding-top: 20px;
    }

    .ql-book__cover img {
        max-width: 240px;
    }

    .ql-book .ql-tags,
    .ql-book .ql-actions {
        justify-content: center;
    }

    .ql-book__intro {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 600px) {
    .ql-pager {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .ql-pager__toc {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: center;
    }

    .ql-pager__name {
        white-space: normal;
    }
}

@media (max-width: 560px) {
    .ql-cast--small {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .ql-wrap,
    .ql-chapter {
        padding: 0 16px;
    }

    .ql-text > p {
        font-size: 16.5px;
        line-height: 1.95;
    }

    /* 폰에서는 삽화를 화면 끝까지 넓힌다 */
    .ql .ql-fig {
        margin-left: -16px;
        margin-right: -16px;
    }

    .ql-fig img {
        border-radius: 0;
    }

    .ql-fig figcaption {
        padding: 0 16px;
    }

    .ql-toc__item {
        grid-template-columns: 112px minmax(0, 1fr);
        gap: 12px;
        padding: 10px;
    }

    .ql-mini-toc a {
        grid-template-columns: 60px minmax(0, 1fr) auto;
        gap: 8px;
    }

    .ql-person__text {
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ql-toc__item,
    .ql-btn {
        transition: none;
    }

    .ql-toc__item:hover {
        transform: none;
    }
}